@extends('vendors.layouts.master')
@section('css')
    <style>
        .game-card {
            border: 1px solid #e9ecef;
            border-radius: 10px;
            transition: all 0.3s ease;
            height: 100%;
        }

        .game-card:hover {
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }

        .game-image-container {
            position: relative;
            height: 200px;
            overflow: hidden;
            border-radius: 10px 10px 0 0;
        }

        .game-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .default-image {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
        }

        .upload-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .game-image-container:hover .upload-overlay {
            opacity: 1;
        }

        .upload-btn {
            color: white;
            font-size: 18px;
            cursor: pointer;
        }

        .file-input {
            display: none;
        }

        .spinner-border-sm {
            display: none;
        }

        .loading .spinner-border-sm {
            display: inline-block;
        }

        .loading .upload-text {
            display: none;
        }

        .game-status {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 10;
        }

        .image-preview {
            transition: transform 0.3s ease;
        }

        .image-preview:hover {
            transform: scale(1.05);
        }

        /* Pagination Styles */
        .pagination {
            margin: 0;
        }

        .page-link {
            color: #495057;
            border-color: #dee2e6;
        }

        .page-link:hover {
            color: #007bff;
            background-color: #e9ecef;
            border-color: #dee2e6;
        }

        .page-item.active .page-link {
            background-color: #007bff;
            border-color: #007bff;
        }
    </style>
@endsection

@section('page-header')
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <div class="d-flex">
                <h4 class="content-title mb-0 my-auto">إدارة صور الألعاب</h4>
            </div>
        </div>
    </div>
    <!-- breadcrumb -->
@endsection

@section('content')
    <!-- row -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header pb-0">
                    <div class="d-flex justify-content-between">
                        <h2 class="card-title mg-b-0">الألعاب المتاحة</h2>
                        <div class="ms-auto">
                            <span class="badge badge-primary">{{ $games->total() }} لعبة</span>
                            <span class="badge badge-info">صفحة {{ $games->currentPage() }} من
                                {{ $games->lastPage() }}</span>
                        </div>
                    </div>
                    <p class="tx-12 tx-gray-500 mb-2">يمكنك إضافة أو تغيير صور الألعاب من هنا</p>

                    <!-- Search and Filter -->
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <div class="form-group">
                                <input type="text" id="searchGames" class="form-control"
                                    placeholder="البحث في الألعاب...">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <select id="filterStatus" class="form-control">
                                <option value="all">جميع الألعاب</option>
                                <option value="with-image">التي لها صور مخصصة</option>
                                <option value="without-image">بدون صور مخصصة</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-secondary w-100" onclick="resetFilters()">
                                <x-lucide-refresh-cw /> إعادة تعيين
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    @if ($games->count() > 0)
                        <div class="row">
                            @foreach ($games as $game)
                                <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 mb-4">
                                    <div class="game-card">
                                        <div class="game-image-container" data-game-id="{{ $game->id }}">
                                            @if (isset($vendorImages[$game->id]))
                                                <img src="https://sw-games.net/images/vendorsgames/{{ $vendorImages[$game->id] }}"
                                                    alt="{{ $game->name }}" class="game-image image-preview">
                                                <div class="game-status">
                                                    <span class="badge badge-success">
                                                        <x-lucide-check />
                                                    </span>
                                                </div>
                                            @else
                                                <div class="default-image">
                                                    <x-lucide-gamepad-2 />
                                                </div>
                                                <div class="game-status">
                                                    <span class="badge badge-warning">
                                                        <x-lucide-plus />
                                                    </span>
                                                </div>
                                            @endif
                                            <div class="upload-overlay">
                                                <div class="upload-btn" onclick="triggerFileInput({{ $game->id }})">
                                                    <x-lucide-camera />
                                                    <div class="mt-1">
                                                        <span
                                                            class="upload-text">{{ isset($vendorImages[$game->id]) ? 'تغيير الصورة' : 'إضافة صورة' }}</span>
                                                        <div class="spinner-border spinner-border-sm" role="status">
                                                            <span class="sr-only">جاري التحميل...</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <input type="file" class="file-input" id="file-input-{{ $game->id }}"
                                                accept="image/*" onchange="uploadImage({{ $game->id }}, this)">
                                        </div>
                                        <div class="card-body">
                                            <h5 class="card-title text-center mb-2">{{ $game->name }}</h5>
                                            <div class="text-center">
                                                @if (isset($vendorImages[$game->id]))
                                                    <span class="badge badge-success mb-2">
                                                        <x-lucide-check /> يوجد صورة مخصصة
                                                    </span>
                                                    <br>

                                                @else
                                                    <span class="badge badge-secondary mb-2">
                                                        <x-lucide-x /> صورة افتراضية
                                                    </span>
                                                    <br>
                                                    <small class="text-muted">انقر على الصورة لإضافة صورة مخصصة</small>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <!-- Pagination Links -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-center">
                                    {{ $games->links() }}
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <x-lucide-gamepad-2 class="text-muted mb-3" width="48" height="48" />
                            <h4 class="text-muted">لا توجد ألعاب متاحة</h4>
                            <p class="text-muted">سيتم عرض الألعاب هنا عند توفرها</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <!-- row closed -->
@endsection

@section('js')
    @include('vue')
    <script>
        // تفعيل رفع الملف
        function triggerFileInput(gameId) {
            document.getElementById('file-input-' + gameId).click();
        }

        // رفع الصورة
        function uploadImage(gameId, input) {
            if (input.files && input.files[0]) {
                const file = input.files[0];

                // التحقق من نوع الملف
                if (!file.type.startsWith('image/')) {
                    Swal.fire({
                        icon: 'error',
                        title: 'خطأ',
                        text: 'يرجى اختيار ملف صورة صحيح'
                    });
                    return;
                }

                // التحقق من حجم الملف (2MB)
                if (file.size > 2 * 1024 * 1024) {
                    Swal.fire({
                        icon: 'error',
                        title: 'خطأ',
                        text: 'حجم الصورة يجب أن يكون أقل من 2 ميجابايت'
                    });
                    return;
                }

                // عرض معلومات الصورة
                const fileSizeMB = (file.size / (1024 * 1024)).toFixed(2);
                console.log(`رفع صورة: ${file.name}, الحجم: ${fileSizeMB} ميجابايت`);

                const formData = new FormData();
                formData.append('game_id', gameId);
                formData.append('image', file);
                formData.append('_token', '{{ csrf_token() }}');

                // إظهار مؤشر التحميل
                const container = document.querySelector(`[data-game-id="${gameId}"]`);
                const overlay = container.querySelector('.upload-overlay');
                overlay.classList.add('loading');
                overlay.style.opacity = '1';

                fetch('{{ route('vendor.games.saveimage') }}', {
                        method: 'POST',
                        body: formData
                    })
                    .then(response => response.json())
                    .then(data => {
                        overlay.classList.remove('loading');
                        overlay.style.opacity = '0';

                        if (data.err === false) {
                            Swal.fire({
                                icon: 'success',
                                title: 'نجح',
                                html: `${data.message}<br><small class="text-muted">تم ضغط وتحسين الصورة لتوفير المساحة</small>`,
                                timer: 3000,
                                showConfirmButton: false
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'خطأ',
                                text: data.message
                            });
                        }
                    })
                    .catch(error => {
                        overlay.classList.remove('loading');
                        overlay.style.opacity = '0';
                        console.error('Error:', error);
                        Swal.fire({
                            icon: 'error',
                            title: 'خطأ',
                            text: 'حدث خطأ أثناء رفع الصورة'
                        });
                    });
            }
        }

        // حذف الصورة
        function deleteImage(gameId) {
            Swal.fire({
                title: 'هل أنت متأكد؟',
                text: 'سيتم حذف الصورة نهائياً',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'نعم، احذف',
                cancelButtonText: 'إلغاء'
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch('{{ route('vendor.games.deleteimage') }}', {
                            method: 'DELETE',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            body: JSON.stringify({
                                game_id: gameId
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.err === false) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'تم',
                                    text: data.message,
                                    timer: 2000,
                                    showConfirmButton: false
                                }).then(() => {
                                    location.reload();
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'خطأ',
                                    text: data.message
                                });
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            Swal.fire({
                                icon: 'error',
                                title: 'خطأ',
                                text: 'حدث خطأ أثناء حذف الصورة'
                            });
                        });
                }
            });
        }

        // عرض الصورة في modal
        function previewImage(gameName, imageUrl) {
            Swal.fire({
                title: gameName,
                imageUrl: imageUrl,
                imageWidth: 400,
                imageHeight: 300,
                imageAlt: gameName,
                confirmButtonText: 'إغلاق'
            });
        }

        // البحث والتصفية
        document.addEventListener('DOMContentLoaded', function() {
            const searchInput = document.getElementById('searchGames');
            const filterSelect = document.getElementById('filterStatus');
            const gameCards = document.querySelectorAll('.col-xl-3');

            function filterGames() {
                const searchTerm = searchInput.value.toLowerCase();
                const filterValue = filterSelect.value;

                gameCards.forEach(card => {
                    const gameName = card.querySelector('.card-title').textContent.toLowerCase();
                    const hasCustomImage = card.querySelector('.badge-success') !== null;

                    let showCard = true;

                    // فلترة البحث
                    if (searchTerm && !gameName.includes(searchTerm)) {
                        showCard = false;
                    }

                    // فلترة الحالة
                    if (filterValue === 'with-image' && !hasCustomImage) {
                        showCard = false;
                    } else if (filterValue === 'without-image' && hasCustomImage) {
                        showCard = false;
                    }

                    card.style.display = showCard ? 'block' : 'none';
                });

                // عرض رسالة عدم وجود نتائج
                const visibleCards = Array.from(gameCards).filter(card => card.style.display !== 'none');
                const noResultsMsg = document.getElementById('no-results-message');

                if (visibleCards.length === 0) {
                    if (!noResultsMsg) {
                        const message = document.createElement('div');
                        message.id = 'no-results-message';
                        message.className = 'col-12 text-center py-5';
                        message.innerHTML = `
                            {!! svg("lucide-search", ["class" => "text-muted mb-3", "width" => 48, "height" => 48])->toHtml() !!}
                            <h4 class="text-muted">لا توجد نتائج</h4>
                            <p class="text-muted">لم يتم العثور على ألعاب تطابق البحث المحدد</p>
                        `;
                        document.querySelector('.row').appendChild(message);
                    }
                } else {
                    if (noResultsMsg) {
                        noResultsMsg.remove();
                    }
                }
            }

            searchInput.addEventListener('input', filterGames);
            filterSelect.addEventListener('change', filterGames);
        });

        function resetFilters() {
            document.getElementById('searchGames').value = '';
            document.getElementById('filterStatus').value = 'all';

            const gameCards = document.querySelectorAll('.col-xl-3');
            gameCards.forEach(card => {
                card.style.display = 'block';
            });

            const noResultsMsg = document.getElementById('no-results-message');
            if (noResultsMsg) {
                noResultsMsg.remove();
            }
        }
    </script>
@endsection