@extends('admin::layouts.admin')

@section('title', 'Manajemen Games')

@section('content')
<div class="cms-page">
    {{-- Page Title --}}
    <h1 class="page-title-setting">Manajemen Games</h1>

    {{-- Flash Messages --}}
    @if(session('success'))
        <div class="alert alert-success">
            <i class="fas fa-check-circle"></i>
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="alert alert-danger">
            <i class="fas fa-exclamation-circle"></i>
            {{ session('error') }}
        </div>
    @endif

    @if(session('warning'))
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle"></i>
            {{ session('warning') }}
        </div>
    @endif

    {{-- Toolbar --}}
    <div class="games-toolbar">
        <div class="search-wrapper">
            <i class="fas fa-search"></i>
            <input type="text" id="game-search" placeholder="Cari game..." class="search-input" value="{{ request('search') }}">
        </div>
        <a href="{{ route('admin.games.create') }}" class="btn-add-data">
            <i class="fas fa-plus"></i>
            Tambah Game
        </a>
    </div>

    {{-- Games Grid --}}
    <div class="games-grid" id="gamesGrid">
            @forelse($games as $game)
                <div class="game-card" data-search="{{ strtolower($game->name . ' ' . ($game->is_active ? 'active' : 'inactive')) }}">
                    <div class="game-image">
                        @if($game->thumbnail)
                            <img src="{{ asset('storage/' . $game->thumbnail) }}" alt="{{ $game->name }}">
                        @else
                            <img src="https://images.unsplash.com/photo-1614854262318-831574f15f1f?w=400&h=250&fit=crop" alt="{{ $game->name }}">
                        @endif
                        <div class="game-overlay">
                            <span class="game-banner-text">{{ strtoupper($game->name) }}</span>
                        </div>
                        @if(!$game->is_active)
                            <div class="game-inactive-badge">
                                <i class="fas fa-pause-circle"></i> Nonaktif
                            </div>
                        @endif
                    </div>

                    {{-- Game Info --}}
                    <div class="game-info">
                        <h3 class="game-title">{{ $game->name }}</h3>

                        <div class="game-meta">
                            <div class="meta-item">
                                <i class="fas fa-coins"></i>
                                <span>{{ $game->point_reward }} poin</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-calendar-day"></i>
                                <span>{{ $game->daily_limit }}x/hari</span>
                            </div>
                            <div class="meta-item">
                                <i class="fas fa-play"></i>
                                <span>{{ number_format($game->sessions_count ?? 0) }}x dimainkan</span>
                            </div>
                        </div>

                        <div class="game-status">
                            @if($game->is_active)
                                <span class="status-active">Aktif</span>
                            @else
                                <span class="status-inactive">Nonaktif</span>
                            @endif
                        </div>
                    </div>
                    {{-- Game Actions --}}
                    <div class="game-actions">
                        <form action="{{ route('admin.games.toggle-status', $game->id) }}" method="POST" class="d-inline toggle-form">
                            @csrf
                            <button type="submit" class="btn-game-action btn-toggle {{ $game->is_active ? 'active' : 'inactive' }}" title="{{ $game->is_active ? 'Nonaktifkan' : 'Aktifkan' }}">
                                <i class="fas {{ $game->is_active ? 'fa-toggle-on' : 'fa-toggle-off' }}"></i>
                                {{ $game->is_active ? 'Aktif' : 'Nonaktif' }}
                            </button>
                        </form>
                        <a href="{{ route('admin.games.edit', $game->id) }}" class="btn-game-action btn-edit" title="Edit">
                            <i class="fas fa-edit"></i>
                            Edit
                        </a>
                        <form action="{{ route('admin.games.destroy', $game->id) }}" method="POST" class="d-inline delete-form">
                            @csrf
                            @method('DELETE')
                            <button type="button" class="btn-game-action btn-delete" title="Hapus">
                                <i class="fas fa-trash"></i>
                                Hapus
                            </button>
                        </form>
                    </div>
                </div>
            @empty
                <div class="empty-state">
                    <i class="fas fa-gamepad"></i>
                    <p>Belum ada game</p>
                </div>
            @endforelse
        </div>

        {{-- Pagination Info --}}
        <div class="pagination-info">
            <span>Showing <span id="showing-start">1</span>-<span id="showing-end">{{ min(10, $games->count()) }}</span> from <span id="showing-total">{{ $games->count() }}</span></span>
            <div class="pagination-controls">
                <span>Rows per page:</span>
                <select id="rows-per-page" class="rows-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                </select>
            </div>
        </div>
</div>

<style>
/* CMS Page Styles */
.cms-page {
    max-width: 1400px;
}

.page-title-setting {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--purple-primary);
    margin-bottom: 24px;
}

/* Toolbar */
.games-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    gap: 16px;
}

.search-wrapper {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-wrapper i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}

.search-input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    color: var(--cyan-primary);
    font-size: 0.9rem;
}

.search-input::placeholder {
    color: rgba(6, 182, 212, 0.5);
}

.search-input:focus {
    outline: none;
    border-color: var(--cyan-primary);
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}

.btn-add-data {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--cyan-primary) 0%, #0891b2 100%);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-add-data:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.4);
    color: white;
}

/* Games Grid */
.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

/* Game Card */
.game-card {
    background: linear-gradient(135deg, rgba(26, 23, 48, 0.95) 0%, rgba(17, 15, 31, 0.95) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.game-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(139, 92, 246, 0.3);
    border-color: var(--cyan-primary);
}

/* Game Image */
.game-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--purple-primary) 0%, var(--purple-dark) 100%);
    position: relative;
}

.game-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.game-card:hover .game-image img {
    transform: scale(1.05);
}

.game-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(13, 11, 26, 0.3) 0%, rgba(13, 11, 26, 0.7) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.game-banner-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 20px rgba(6, 182, 212, 0.8), 0 0 40px rgba(139, 92, 246, 0.6);
    letter-spacing: 2px;
}

/* Game Info */
.game-info {
    padding: 20px;
    flex: 1;
}

.game-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 16px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.game-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.meta-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.meta-item i {
    margin-top: 2px;
    color: var(--cyan-primary);
    flex-shrink: 0;
    width: 16px;
}

.game-status {
    display: flex;
    align-items: center;
    margin-top: 12px;
}

.status-active {
    padding: 4px 12px;
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.status-inactive {
    padding: 4px 12px;
    background: rgba(156, 163, 175, 0.2);
    color: #9ca3af;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Game Actions */
.game-actions {
    padding: 16px 20px;
    border-top: 1px solid rgba(139, 92, 246, 0.1);
    display: flex;
    gap: 8px;
}

.btn-game-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
    min-height: 38px;
}

.btn-toggle.active {
    background: transparent;
    border: 1px solid rgba(34, 197, 94, 0.5);
    color: #22c55e;
}

.btn-toggle.active:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
    transform: translateY(-2px);
}

.btn-toggle.inactive {
    background: transparent;
    border: 1px solid rgba(156, 163, 175, 0.5);
    color: #9ca3af;
}

.btn-toggle.inactive:hover {
    background: rgba(156, 163, 175, 0.15);
    border-color: #9ca3af;
    transform: translateY(-2px);
}

.btn-edit {
    background: transparent;
    border: 1px solid rgba(251, 191, 36, 0.5);
    color: #fbbf24;
}

.btn-edit:hover {
    background: rgba(251, 191, 36, 0.15);
    border-color: #fbbf24;
    transform: translateY(-2px);
}

.btn-delete {
    background: transparent;
    border: 1px solid rgba(236, 72, 153, 0.5);
    color: var(--pink-primary);
}

.btn-delete:hover {
    background: rgba(236, 72, 153, 0.15);
    border-color: var(--pink-primary);
    transform: translateY(-2px);
}

/* Pagination Info */
.pagination-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rows-select {
    padding: 6px 12px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 6px;
    color: var(--cyan-primary);
    cursor: pointer;
}

.rows-select:focus {
    outline: none;
    border-color: var(--cyan-primary);
}

/* Empty State */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.3;
}

.empty-state p {
    font-size: 1.1rem;
    margin: 0;
}

/* Flash Messages */
.alert {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.alert-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}

.alert-success i {
    color: #22c55e;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.alert-danger i {
    color: #ef4444;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.alert-warning i {
    color: #f59e0b;
}

/* Responsive */
@media (max-width: 768px) {
    .games-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-wrapper {
        max-width: 100%;
    }

    .btn-add-data {
        width: 100%;
        justify-content: center;
    }

    .games-grid {
        grid-template-columns: 1fr;
    }

    .pagination-info {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .game-actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-game-action {
        width: 100%;
    }
}
</style>

<script>
// Show success message if exists
@if(session('success'))
Swal.fire({
    icon: 'success',
    title: 'Berhasil!',
    text: '{{ session('success') }}',
    confirmButtonColor: '#06b6d4',
    background: 'rgba(26, 23, 48, 0.95)',
    color: '#e2e8f0',
    timer: 3000,
    timerProgressBar: true
});
@endif

@if(session('error'))
Swal.fire({
    icon: 'error',
    title: 'Error!',
    text: '{{ session('error') }}',
    confirmButtonColor: '#ef4444',
    background: 'rgba(26, 23, 48, 0.95)',
    color: '#e2e8f0'
});
@endif

// Client-side filtering
document.getElementById('game-search')?.addEventListener('input', function(e) {
    const searchTerm = e.target.value.toLowerCase();
    const cards = document.querySelectorAll('.game-card');
    let visibleCount = 0;

    cards.forEach(card => {
        const searchData = card.getAttribute('data-search');
        if (searchData.includes(searchTerm)) {
            card.style.display = '';
            visibleCount++;
        } else {
            card.style.display = 'none';
        }
    });

    // Update pagination info
    document.getElementById('showing-end').textContent = visibleCount;
    document.getElementById('showing-total').textContent = visibleCount;
});

// Rows per page (for future implementation)
document.getElementById('rows-per-page')?.addEventListener('change', function() {
    // This can be expanded for actual pagination logic
    console.log('Rows per page:', this.value);
});

// SweetAlert for delete confirmation
document.querySelectorAll('.btn-delete').forEach(button => {
    button.addEventListener('click', function(e) {
        e.preventDefault();
        const form = this.closest('.delete-form');

        Swal.fire({
            title: 'Konfirmasi Hapus',
            text: 'Yakin ingin menghapus game ini?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#06b6d4',
            cancelButtonColor: '#6b7280',
            confirmButtonText: 'Ya, Hapus!',
            cancelButtonText: 'Batal',
            background: 'rgba(26, 23, 48, 0.95)',
            color: '#e2e8f0'
        }).then((result) => {
            if (result.isConfirmed) {
                form.submit();
            }
        });
    });
});
</script>
@endsection