@extends('layouts.UserDashboard')
@section('css')
    <style>
        .category-item {
            cursor: pointer;
            transition: all 0.3s ease;
            border: none;
            padding: 12px 15px;
        }

        .category-item:hover {
            background-color: #f8f9fa;
            transform: translateX(5px);
        }

        .category-item.active {
            background-color: #e7f1ff;
            border-left: 4px solid #0d6efd;
            font-weight: 600;
            color: #0d6efd;
        }

        .gift-card {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            border: 1px solid #e9ecef;
        }

        .gift-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
        }

        .gift-image {
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .send-gift-btn, .send-svip-btn {
            transition: all 0.2s ease;
        }

        .send-gift-btn:hover, .send-svip-btn:hover {
            transform: scale(1.05);
        }

        .gift-section {
            transition: opacity 0.3s ease;
        }

        .svga-container, .image-container {
            position: relative;
            min-height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .svga-loading, .image-loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        #category-loading {
            padding: 3rem 0;
        }

        .features-list {
            max-height: 120px;
            overflow-y: auto;
        }

        .package-details {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
        }

        /* Mobile-specific styles */
        @media (max-width: 767.98px) {
            .gift-card {
                margin-bottom: 10px;
            }

            .gift-image {
                height: 60px;
            }

            .card-body.p-2 {
                padding: 10px !important;
            }

            .col-6 {
                padding-left: 5px;
                padding-right: 5px;
            }

            .row {
                margin-left: -5px;
                margin-right: -5px;
            }

            .category-item {
                padding: 10px 12px;
                font-size: 0.9rem;
            }

            .category-item .badge {
                font-size: 0.7rem;
            }

            .features-list {
                max-height: 80px;
            }

            .package-details {
                padding: 8px;
            }
        }

        /* Desktop-specific styles */
        @media (min-width: 768px) {
            .gift-image {
                height: 100px;
            }
        }
    </style>
@endsection
@section('user')
    <!-- start page title -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Send Gift</h4>
                <div class="page-title-right">
                    <a href="{{route('user.dashboard')}}" class="btn btn-secondary btn-sm">
                        ← Back
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- end page title -->

    <div class="row">
        <!-- Left Side: Gift Categories -->
        <div class="col-md-3 col-12 mb-4">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">Gift Categories</h5>
                </div>
                <div class="card-body p-0">
                    <ul class="list-group list-group-flush" id="gift-categories">
                        <li class="list-group-item category-item active" data-category="head_frame">
                            <i class="fas fa-crown me-2"></i> Head Frames
                            <span class="badge bg-primary float-end">{{ count($head_frame_gift) }}</span>
                        </li>
                        <li class="list-group-item category-item" data-category="anti-effect">
                            <i class="fas fa-magic me-2"></i> Animation Effects
                            <span class="badge bg-primary float-end">{{ count($ani_effect_gift) }}</span>
                        </li>
                        <li class="list-group-item category-item" data-category="medal">
                            <i class="fas fa-medal me-2"></i> Medals
                            <span class="badge bg-primary float-end">{{ count($medal_gift) }}</span>
                        </li>
                        <li class="list-group-item category-item" data-category="chat-bubble">
                            <i class="fas fa-comment me-2"></i> Chat Bubbles
                            <span class="badge bg-primary float-end">{{ count($chat_bubble_gift) }}</span>
                        </li>
                        <li class="list-group-item category-item" data-category="profile-short">
                            <i class="fas fa-user me-2"></i> Profile Shorts
                            <span class="badge bg-primary float-end">{{ count($profile_sort_gift) }}</span>
                        </li>
                        <li class="list-group-item category-item" data-category="svip">
                            <i class="fas fa-star me-2"></i> SVIP Packages
                            <span class="badge bg-warning float-end">{{ count($svip) }}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Right Side: Gift Items -->
        <div class="col-md-9 col-12">
            <div class="card">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h5 class="mb-0" id="category-title">Head Frame Gifts</h5>
                    <span class="badge bg-info" id="gift-count">{{ count($head_frame_gift) }} gifts available</span>
                </div>
                <div class="card-body">
                    <!-- Loading Spinner for Category Switching -->
                    <div id="category-loading" class="text-center d-none">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2 text-muted">Loading gifts...</p>
                    </div>

                    <!-- Head Frame Gifts (Initially Visible) -->
                    <div class="gift-section" id="head_frame_gifts">
                        @if($head_frame_gift && count($head_frame_gift) > 0)
                            <div class="row">
                                @foreach($head_frame_gift as $gift)
                                    @php
                                        // path stored in DB (relative to public/), adjust if your path is different
                                        $file = $gift->gift_file;
                                        $publicFile = $file ? public_path($file) : null;
                                    @endphp
                                    <div class="col-xl-3 col-md-4 col-sm-6 col-6 mb-4">
                                        <div class="card gift-card h-100">
                                            <div class="card-body text-center p-2 p-md-3">
                                                <div class="gift-image mb-2 mb-md-3">
                                                    @if(!empty($gift->gift_file) && file_exists($gift->gift_file))
                                                        @php
                                                            $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
                                                        @endphp
                                                        @if($ext === 'svga')

                                                            <div id="svga-player-{{ $gift->id }}"
                                                                 style="width:50px; height:50px;"></div>
                                                            <script>
                                                                document.addEventListener("DOMContentLoaded", function () {
                                                                    const player{{ $gift->id }} = new SVGA.Player('#svga-player-{{ $gift->id }}');
                                                                    const parser{{ $gift->id }} = new SVGA.Parser('#svga-player-{{ $gift->id }}'); // same container

                                                                    parser{{ $gift->id }}.load('{{ asset($gift->gift_file) }}', function (videoItem) {
                                                                        player{{ $gift->id }}.setVideoItem(videoItem);
                                                                        player{{ $gift->id }}.startAnimation();
                                                                    });
                                                                });
                                                            </script>
                                                        @else
                                                            {{-- Regular raster/image --}}
                                                            <img src="{{ asset($file) }}" alt="image" width="50"
                                                                 height="50"
                                                                 style="object-fit:cover" loading="lazy">
                                                        @endif
                                                    @else
                                                        <img
                                                            src="https://coffective.com/wp-content/uploads/2018/06/default-featured-image.png.jpg"
                                                            alt="image" width="50" height="50" loading="lazy">
                                                    @endif
                                                </div>
                                                <h6 class="card-title mb-1 small">{{ $gift->gift_name ?? 'Head Frame Gift' }}</h6>
                                                <p class="text-muted small mb-2 d-none d-sm-block">{{ $gift->description ?? 'Special head frame gift' }}</p>
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span class="badge bg-success small">{{ $gift->coin_cost ?? '0' }} Coins</span>
                                                    <button class="btn btn-sm btn-outline-primary send-gift-btn"
                                                            data-gift-id="{{ $gift->id }}"
                                                            data-gift-name="{{ $gift->gift_name ?? 'Gift' }}"
                                                            data-gift-category="admin-gift-store"
                                                            data-gift-type="{{ $gift->gift_type ?? 'head_frame' }}">
                                                        Send
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-gift fa-3x text-muted mb-3"></i>
                                <p class="text-muted">No head frame gifts available</p>
                            </div>
                        @endif
                    </div>

                    <!-- Animation Effect Gifts -->
                    <div class="gift-section d-none" id="anti_effect_gifts">
                        @if($ani_effect_gift && count($ani_effect_gift) > 0)

                            <div class="row">
                                @foreach($ani_effect_gift as $gift)
                                    @php
                                        // path stored in DB (relative to public/), adjust if your path is different
                                        $file = $gift->gift_file;
                                        $publicFile = $file ? public_path($file) : null;
                                    @endphp
                                    <div class="col-xl-3 col-md-4 col-sm-6 col-6 mb-4">
                                        <div class="card gift-card h-100">
                                            <div class="card-body text-center p-2 p-md-3">
                                                <div class="gift-image mb-2 mb-md-3">
                                                    @if(!empty($gift->gift_file) && file_exists($gift->gift_file))
                                                        @php
                                                            $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
                                                        @endphp
                                                        @if($ext === 'svga')

                                                            <div id="svga-player-{{ $gift->id }}"
                                                                 style="width:50px; height:50px;"></div>
                                                            <script>
                                                                document.addEventListener("DOMContentLoaded", function () {
                                                                    const player{{ $gift->id }} = new SVGA.Player('#svga-player-{{ $gift->id }}');
                                                                    const parser{{ $gift->id }} = new SVGA.Parser('#svga-player-{{ $gift->id }}'); // same container

                                                                    parser{{ $gift->id }}.load('{{ asset($gift->gift_file) }}', function (videoItem) {
                                                                        player{{ $gift->id }}.setVideoItem(videoItem);
                                                                        player{{ $gift->id }}.startAnimation();
                                                                    });
                                                                });
                                                            </script>
                                                        @else
                                                            {{-- Regular raster/image --}}
                                                            <img src="{{ asset($file) }}" alt="image" width="50"
                                                                 height="50"
                                                                 style="object-fit:cover" loading="lazy">
                                                        @endif
                                                    @else
                                                        <img
                                                            src="https://coffective.com/wp-content/uploads/2018/06/default-featured-image.png.jpg"
                                                            alt="image" width="50" height="50" loading="lazy">
                                                    @endif
                                                </div>
                                                <h6 class="card-title mb-1 small">{{ $gift->gift_name ?? 'Animation Effect Gift' }}</h6>
                                                <p class="text-muted small mb-2 d-none d-sm-block">{{ $gift->description ?? 'Special animation effect gift' }}</p>
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span class="badge bg-success small">{{ $gift->coin_cost ?? '0' }} Coins</span>
                                                    <button class="btn btn-sm btn-outline-primary send-gift-btn"
                                                            data-gift-id="{{ $gift->id }}"
                                                            data-gift-name="{{ $gift->gift_name ?? 'Gift' }}"
                                                            data-gift-category="admin-gift-store"
                                                            data-gift-type="{{ $gift->gift_type ?? 'anti-effect' }}">
                                                        Send
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-magic fa-3x text-muted mb-3"></i>
                                <p class="text-muted">No animation effect gifts available</p>
                            </div>
                        @endif
                    </div>

                    <!-- Medal Gifts -->
                    <div class="gift-section d-none" id="medal_gifts">
                        @if($medal_gift && count($medal_gift) > 0)
                            <div class="row">
                                @foreach($medal_gift as $gift)
                                    @php
                                        // path stored in DB (relative to public/), adjust if your path is different
                                        $file = $gift->gift_file;
                                        $publicFile = $file ? public_path($file) : null;
                                    @endphp
                                    <div class="col-xl-3 col-md-4 col-sm-6 col-6 mb-4">
                                        <div class="card gift-card h-100">
                                            <div class="card-body text-center p-2 p-md-3">
                                                <div class="gift-image mb-2 mb-md-3">
                                                    @if(!empty($gift->gift_file) && file_exists($gift->gift_file))
                                                        @php
                                                            $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
                                                        @endphp
                                                        @if($ext === 'svga')

                                                            <div id="svga-player-{{ $gift->id }}"
                                                                 style="width:50px; height:50px;"></div>
                                                            <script>
                                                                document.addEventListener("DOMContentLoaded", function () {
                                                                    const player{{ $gift->id }} = new SVGA.Player('#svga-player-{{ $gift->id }}');
                                                                    const parser{{ $gift->id }} = new SVGA.Parser('#svga-player-{{ $gift->id }}'); // same container

                                                                    parser{{ $gift->id }}.load('{{ asset($gift->gift_file) }}', function (videoItem) {
                                                                        player{{ $gift->id }}.setVideoItem(videoItem);
                                                                        player{{ $gift->id }}.startAnimation();
                                                                    });
                                                                });
                                                            </script>
                                                        @else
                                                            {{-- Regular raster/image --}}
                                                            <img src="{{ asset($file) }}" alt="image" width="50"
                                                                 height="50"
                                                                 style="object-fit:cover" loading="lazy">
                                                        @endif
                                                    @else
                                                        <img
                                                            src="https://coffective.com/wp-content/uploads/2018/06/default-featured-image.png.jpg"
                                                            alt="image" width="50" height="50" loading="lazy">
                                                    @endif
                                                </div>
                                                <h6 class="card-title mb-1 small">{{ $gift->gift_name ?? 'Medal Gift' }}</h6>
                                                <p class="text-muted small mb-2 d-none d-sm-block">{{ $gift->description ?? 'Special medal gift' }}</p>
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span class="badge bg-success small">{{ $gift->coin_cost ?? '0' }} Coins</span>
                                                    <button class="btn btn-sm btn-outline-primary send-gift-btn"
                                                            data-gift-id="{{ $gift->id }}"
                                                            data-gift-name="{{ $gift->gift_name ?? 'Gift' }}"
                                                            data-gift-category="admin-gift-store"
                                                            data-gift-type="{{ $gift->gift_type ?? 'medal' }}">
                                                        Send
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-medal fa-3x text-muted mb-3"></i>
                                <p class="text-muted">No medal gifts available</p>
                            </div>
                        @endif
                    </div>

                    <!-- Chat Bubble Gifts -->
                    <div class="gift-section d-none" id="chat_bubble_gifts">
                        @if($chat_bubble_gift && count($chat_bubble_gift) > 0)
                            <div class="row">
                                @foreach($chat_bubble_gift as $gift)
                                    @php
                                        // path stored in DB (relative to public/), adjust if your path is different
                                        $file = $gift->gift_file;
                                        $publicFile = $file ? public_path($file) : null;
                                    @endphp
                                    <div class="col-xl-3 col-md-4 col-sm-6 col-6 mb-4">
                                        <div class="card gift-card h-100">
                                            <div class="card-body text-center p-2 p-md-3">
                                                <div class="gift-image mb-2 mb-md-3">
                                                    @if(!empty($gift->gift_file) && file_exists($gift->gift_file))
                                                        @php
                                                            $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
                                                        @endphp
                                                        @if($ext === 'svga')

                                                            <div id="svga-player-{{ $gift->id }}"
                                                                 style="width:50px; height:50px;"></div>
                                                            <script>
                                                                document.addEventListener("DOMContentLoaded", function () {
                                                                    const player{{ $gift->id }} = new SVGA.Player('#svga-player-{{ $gift->id }}');
                                                                    const parser{{ $gift->id }} = new SVGA.Parser('#svga-player-{{ $gift->id }}'); // same container

                                                                    parser{{ $gift->id }}.load('{{ asset($gift->gift_file) }}', function (videoItem) {
                                                                        player{{ $gift->id }}.setVideoItem(videoItem);
                                                                        player{{ $gift->id }}.startAnimation();
                                                                    });
                                                                });
                                                            </script>
                                                        @else
                                                            {{-- Regular raster/image --}}
                                                            <img src="{{ asset($file) }}" alt="image" width="50"
                                                                 height="50"
                                                                 style="object-fit:cover" loading="lazy">
                                                        @endif
                                                    @else
                                                        <img
                                                            src="https://coffective.com/wp-content/uploads/2018/06/default-featured-image.png.jpg"
                                                            alt="image" width="50" height="50" loading="lazy">
                                                    @endif
                                                </div>
                                                <h6 class="card-title mb-1 small">{{ $gift->gift_name ?? 'Chat Bubble Gift' }}</h6>
                                                <p class="text-muted small mb-2 d-none d-sm-block">{{ $gift->description ?? 'Special chat bubble gift' }}</p>
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span class="badge bg-success small">{{ $gift->coin_cost ?? '0' }} Coins</span>
                                                    <button class="btn btn-sm btn-outline-primary send-gift-btn"
                                                            data-gift-id="{{ $gift->id }}"
                                                            data-gift-name="{{ $gift->gift_name ?? 'Gift' }}"
                                                            data-gift-category="admin-gift-store"
                                                            data-gift-type="{{ $gift->gift_type ?? 'chat-bubble' }}">
                                                        Send
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-comment fa-3x text-muted mb-3"></i>
                                <p class="text-muted">No chat bubble gifts available</p>
                            </div>
                        @endif
                    </div>

                    <!-- Profile Short Gifts -->
                    <div class="gift-section d-none" id="profile_short_gifts">
                        @if($profile_sort_gift && count($profile_sort_gift) > 0)
                            <div class="row">
                                @foreach($profile_sort_gift as $gift)
                                    @php
                                        // path stored in DB (relative to public/), adjust if your path is different
                                        $file = $gift->gift_file;
                                        $publicFile = $file ? public_path($file) : null;
                                    @endphp
                                    <div class="col-xl-3 col-md-4 col-sm-6 col-6 mb-4">
                                        <div class="card gift-card h-100">
                                            <div class="card-body text-center p-2 p-md-3">
                                                <div class="gift-image mb-2 mb-md-3">
                                                    @if(!empty($gift->gift_file) && file_exists($gift->gift_file))
                                                        @php
                                                            $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
                                                        @endphp
                                                        @if($ext === 'svga')

                                                            <div id="svga-player-{{ $gift->id }}"
                                                                 style="width:50px; height:50px;"></div>
                                                            <script>
                                                                document.addEventListener("DOMContentLoaded", function () {
                                                                    const player{{ $gift->id }} = new SVGA.Player('#svga-player-{{ $gift->id }}');
                                                                    const parser{{ $gift->id }} = new SVGA.Parser('#svga-player-{{ $gift->id }}'); // same container

                                                                    parser{{ $gift->id }}.load('{{ asset($gift->gift_file) }}', function (videoItem) {
                                                                        player{{ $gift->id }}.setVideoItem(videoItem);
                                                                        player{{ $gift->id }}.startAnimation();
                                                                    });
                                                                });
                                                            </script>
                                                        @else
                                                            {{-- Regular raster/image --}}
                                                            <img src="{{ asset($file) }}" alt="image" width="50"
                                                                 height="50"
                                                                 style="object-fit:cover" loading="lazy">
                                                        @endif
                                                    @else
                                                        <img
                                                            src="https://coffective.com/wp-content/uploads/2018/06/default-featured-image.png.jpg"
                                                            alt="image" width="50" height="50" loading="lazy">
                                                    @endif
                                                </div>
                                                <h6 class="card-title mb-1 small">{{ $gift->gift_name ?? 'Profile Short Gift' }}</h6>
                                                <p class="text-muted small mb-2 d-none d-sm-block">{{ $gift->description ?? 'Special profile short gift' }}</p>
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span class="badge bg-success small">{{ $gift->coin_cost ?? '0' }} Coins</span>
                                                    <button class="btn btn-sm btn-outline-primary send-gift-btn"
                                                            data-gift-id="{{ $gift->id }}"
                                                            data-gift-name="{{ $gift->gift_name ?? 'Gift' }}"
                                                            data-gift-category="admin-gift-store"
                                                            data-gift-type="{{ $gift->gift_type ?? 'profile-short' }}">
                                                        Send
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-user fa-3x text-muted mb-3"></i>
                                <p class="text-muted">No profile short gifts available</p>
                            </div>
                        @endif
                    </div>

                    <!-- SVIP Packages -->
                    <div class="gift-section d-none" id="svip_gifts">
                        @if($svip && count($svip) > 0)
                            <div class="row">
                                @foreach($svip as $package)
                                    @php
                                        // path stored in DB (relative to public/), adjust if your path is different
                                        $file = $package->gift_file;
                                        $publicFile = $file ? public_path($file) : null;
                                    @endphp
                                    <div class="col-xl-3 col-md-4 col-sm-6 col-6 mb-4">
                                        <div class="card gift-card h-100 border-warning">
                                            <div class="card-header bg-warning text-dark text-center py-2">
                                                <h6 class="mb-0 fw-bold">{{ $package->svip_level ?? 'SVIP' }}</h6>
                                            </div>
                                            <div class="card-body text-center p-2 p-md-3">
                                                <!-- Level Icon -->
                                                @if($package->level_icon_status && $package->level_icon_gift_image)
                                                    <div class="gift-image mb-2 mb-md-3">
                                                        @php
                                                            $filePath = $package->level_icon_gift_image;
                                                            $fullPath = public_path($filePath);
                                                            $ext = strtolower(pathinfo($filePath, PATHINFO_EXTENSION));
                                                        @endphp
                                                        @if(file_exists($fullPath))
                                                            @if($ext === 'svga')
                                                                <div class="svga-container">
                                                                    <div
                                                                        class="svga-loading spinner-border spinner-border-sm text-warning"
                                                                        role="status">
                                                                        <span class="visually-hidden">Loading animation...</span>
                                                                    </div>
                                                                    <div id="svga-svip-level-{{ $package->id }}"
                                                                         style="width:60px; height:60px; margin: 0 auto; display: none;"></div>
                                                                </div>
                                                                <script>
                                                                    document.addEventListener("DOMContentLoaded", function () {
                                                                        const container = document.querySelector('#svga-svip-level-{{ $package->id }}').parentElement;
                                                                        const loadingSpinner = container.querySelector('.svga-loading');
                                                                        const playerElement = document.getElementById('svga-svip-level-{{ $package->id }}');

                                                                        setTimeout(function () {
                                                                            const player = new SVGA.Player('#svga-svip-level-{{ $package->id }}');
                                                                            const parser = new SVGA.Parser();

                                                                            parser.load('{{ asset($filePath) }}', function (videoItem) {
                                                                                player.setVideoItem(videoItem);
                                                                                player.startAnimation();
                                                                                loadingSpinner.style.display = 'none';
                                                                                playerElement.style.display = 'block';
                                                                            }, function (error) {
                                                                                loadingSpinner.style.display = 'none';
                                                                                playerElement.innerHTML = '<i class="fas fa-star fa-2x text-warning"></i>';
                                                                                playerElement.style.display = 'block';
                                                                            });
                                                                        }, 100);
                                                                    });
                                                                </script>
                                                            @else
                                                                <img src="{{ asset($filePath) }}" alt="Level Icon"
                                                                     class="img-fluid rounded"
                                                                     style="max-height: 60px; object-fit: cover;"
                                                                     loading="lazy">
                                                            @endif
                                                        @else
                                                            <i class="fas fa-star fa-2x text-warning"></i>
                                                        @endif
                                                    </div>
                                                @endif

                                                <!-- Package Features -->
                                                <div class="features-list small text-start mb-3">
                                                    @if($package->welcome_message_status)
                                                        <div class="d-flex align-items-center mb-1">
                                                            <i class="fas fa-check text-success me-2"></i>
                                                            <span>Welcome Message</span>
                                                        </div>
                                                    @endif
                                                    @if($package->spacial_medal_status)
                                                        <div class="d-flex align-items-center mb-1">
                                                            <i class="fas fa-check text-success me-2"></i>
                                                            <span>Special Medal</span>
                                                        </div>
                                                    @endif
                                                    @if($package->special_icon_status)
                                                        <div class="d-flex align-items-center mb-1">
                                                            <i class="fas fa-check text-success me-2"></i>
                                                            <span>Special Icon</span>
                                                        </div>
                                                    @endif
                                                    @if($package->exclusive_frame_status)
                                                        <div class="d-flex align-items-center mb-1">
                                                            <i class="fas fa-check text-success me-2"></i>
                                                            <span>Exclusive Frame</span>
                                                        </div>
                                                    @endif
                                                    @if($package->exclusive_mounts_status)
                                                        <div class="d-flex align-items-center mb-1">
                                                            <i class="fas fa-check text-success me-2"></i>
                                                            <span>Exclusive Mounts</span>
                                                        </div>
                                                    @endif
                                                    @if($package->exclusive_badge_status)
                                                        <div class="d-flex align-items-center mb-1">
                                                            <i class="fas fa-check text-success me-2"></i>
                                                            <span>Exclusive Badge</span>
                                                        </div>
                                                    @endif
                                                    @if($package->special_profile_page_status)
                                                        <div class="d-flex align-items-center mb-1">
                                                            <i class="fas fa-check text-success me-2"></i>
                                                            <span>Special Profile</span>
                                                        </div>
                                                    @endif
                                                </div>

                                                <!-- Package Details -->
                                                <div class="package-details">
                                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                                        <small class="text-muted">Target:</small>
                                                        <small class="fw-bold">{{ $package->target ?? '0' }}</small>
                                                    </div>
                                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                                        <small class="text-muted">Validity:</small>
                                                        <small class="fw-bold">{{ $package->validity ?? '0' }}
                                                            days</small>
                                                    </div>
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <small class="text-muted">Price:</small>
                                                        <small
                                                            class="fw-bold text-success">{{ $package->purchase_coin ?? '0' }}
                                                            Coins</small>
                                                    </div>
                                                </div>

                                                <!-- Send Button -->
                                                <button class="btn btn-sm btn-warning send-svip-btn w-100"
                                                        data-svip-id="{{ $package->id }}"
                                                        data-svip-level="{{ $package->svip_level ?? 'SVIP' }}"
                                                        data-svip-price="{{ $package->purchase_coin ?? '0' }}"
                                                        data-svip-validity="{{ $package->validity ?? '0' }}">
                                                    Send SVIP
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-crown fa-3x text-muted mb-3"></i>
                                <p class="text-muted">No SVIP packages available</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Send Gift Modal -->
    <div class="modal fade" id="sendGiftModal" tabindex="-1" aria-labelledby="sendGiftModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="sendGiftModalLabel">Send Gift</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="sendGiftForm" method="POST" action="{{ route('user.send.gift.save') }}">
                        @csrf
                        <input type="hidden" name="gift_id" id="modal_gift_id">
                        <input type="hidden" name="gift_category" id="modal_gift_category">
                        <input type="hidden" name="gift_type" id="modal_gift_type">
                        <div class="mb-3">
                            <label for="recipient_id" class="form-label">Recipient User ID</label>
                            <input type="text" class="form-control" id="recipient_id" name="recipient_id" required
                                   placeholder="Enter user ID">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Gift:</label>
                            <p class="form-control-static fw-bold" id="modal_gift_name"></p>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Cost:</label>
                            <p class="form-control-static text-success fw-bold" id="modal_gift_cost"></p>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmSendGift">
                        <span class="send-loading spinner-border spinner-border-sm d-none" role="status"></span>
                        Send Gift
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Send SVIP Modal -->
    <div class="modal fade" id="sendSvipModal" tabindex="-1" aria-labelledby="sendSvipModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-warning">
                    <h5 class="modal-title" id="sendSvipModalLabel">Send SVIP Package</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="sendSvipForm" method="POST" action="{{ route('user.send.svip.save') }}">
                        @csrf
                        <input type="hidden" name="svip_id" id="modal_svip_id">
                        <div class="mb-3">
                            <label for="svip_recipient_id" class="form-label">Recipient User ID</label>
                            <input type="text" class="form-control" id="svip_recipient_id" name="recipient_id" required
                                   placeholder="Enter user ID">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">SVIP Package:</label>
                            <p class="form-control-static fw-bold" id="modal_svip_level"></p>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Price:</label>
                            <p class="form-control-static text-success fw-bold" id="modal_svip_price"></p>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Validity:</label>
                            <p class="form-control-static text-info fw-bold" id="modal_svip_validity"></p>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-warning" id="confirmSendSvip">
                        <span class="send-loading spinner-border spinner-border-sm d-none" role="status"></span>
                        Send SVIP
                    </button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('js')
    <script src="https://unpkg.com/svgaplayerweb@latest/build/svga.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Category switching functionality
            const categoryItems = document.querySelectorAll('.category-item');
            const categoryLoading = document.getElementById('category-loading');

            const categoryTitles = {
                'head_frame': 'Head Frame Gifts',
                'anti-effect': 'Animation Effect Gifts',
                'medal': 'Medal Gifts',
                'chat-bubble': 'Chat Bubble Gifts',
                'profile-short': 'Profile Short Gifts',
                'svip': 'SVIP Packages'
            };

            const giftCounts = {
                'head_frame': {{ count($head_frame_gift) }},
                'anti-effect': {{ count($ani_effect_gift) }},
                'medal': {{ count($medal_gift) }},
                'chat-bubble': {{ count($chat_bubble_gift) }},
                'profile-short': {{ count($profile_sort_gift) }},
                'svip': {{ count($svip) }}
            };

            categoryItems.forEach(item => {
                item.addEventListener('click', function () {
                    // Remove active class from all items
                    categoryItems.forEach(i => i.classList.remove('active'));

                    // Add active class to clicked item
                    this.classList.add('active');

                    // Get the category from data attribute
                    const category = this.getAttribute('data-category');

                    // Show loading spinner
                    categoryLoading.classList.remove('d-none');

                    // Hide all gift sections
                    document.querySelectorAll('.gift-section').forEach(section => {
                        section.classList.add('d-none');
                    });

                    // Simulate loading delay for better UX
                    setTimeout(() => {
                        // Show the selected gift section
                        const targetSection = document.getElementById(category.replace('-', '_') + '_gifts');
                        if (targetSection) {
                            targetSection.classList.remove('d-none');
                            document.getElementById('category-title').textContent = categoryTitles[category];
                            document.getElementById('gift-count').textContent = giftCounts[category] + ' gifts available';
                        }

                        // Hide loading spinner
                        categoryLoading.classList.add('d-none');
                    }, 300);
                });
            });

            // Send gift functionality
            const sendGiftButtons = document.querySelectorAll('.send-gift-btn');
            const sendGiftModal = new bootstrap.Modal(document.getElementById('sendGiftModal'));
            const confirmSendBtn = document.getElementById('confirmSendGift');
            const sendLoading = confirmSendBtn.querySelector('.send-loading');

            sendGiftButtons.forEach(button => {
                button.addEventListener('click', function () {
                    const giftId = this.getAttribute('data-gift-id');
                    const giftName = this.getAttribute('data-gift-name');
                    const giftCategory = this.getAttribute('data-gift-category');
                    const giftType = this.getAttribute('data-gift-type');
                    const giftCost = this.closest('.card').querySelector('.badge.bg-success').textContent;

                    document.getElementById('modal_gift_id').value = giftId;
                    document.getElementById('modal_gift_name').textContent = giftName;
                    document.getElementById('modal_gift_cost').textContent = giftCost;
                    document.getElementById('modal_gift_category').value = giftCategory;
                    document.getElementById('modal_gift_type').value = giftType;

                    // Reset send button state
                    sendLoading.classList.add('d-none');
                    confirmSendBtn.disabled = false;
                    confirmSendBtn.innerHTML = 'Send Gift';

                    sendGiftModal.show();
                });
            });

            // Send SVIP functionality
            const sendSvipButtons = document.querySelectorAll('.send-svip-btn');
            const sendSvipModal = new bootstrap.Modal(document.getElementById('sendSvipModal'));
            const confirmSendSvipBtn = document.getElementById('confirmSendSvip');

            sendSvipButtons.forEach(button => {
                button.addEventListener('click', function () {
                    const svipId = this.getAttribute('data-svip-id');
                    const svipLevel = this.getAttribute('data-svip-level');
                    const svipPrice = this.getAttribute('data-svip-price');
                    const svipValidity = this.getAttribute('data-svip-validity');

                    document.getElementById('modal_svip_id').value = svipId;
                    document.getElementById('modal_svip_level').textContent = svipLevel;
                    document.getElementById('modal_svip_price').textContent = svipPrice + ' Coins';
                    document.getElementById('modal_svip_validity').textContent = svipValidity + ' days';

                    sendSvipModal.show();
                });
            });

            // Confirm send gift
            document.getElementById('confirmSendGift').addEventListener('click', function () {
                document.getElementById('sendGiftForm').submit();
            });

            // Confirm send SVIP
            document.getElementById('confirmSendSvip').addEventListener('click', function () {
                document.getElementById('sendSvipForm').submit();
            });
        });
    </script>
@endsection