@extends('layouts.master')

@section('content')
<main class=" pt-16 min-h-screen">
    <div class="p-10 space-y-8">

        <!-- Header Section -->
        <div class="flex justify-between items-end">
            <div class="space-y-1">
                <nav class="flex items-center gap-2 text-[10px] font-bold text-primary uppercase tracking-[0.2em] opacity-80">
                    <span>Management</span>
                    <span class="material-symbols-outlined text-[10px]">chevron_right</span>
                    <span>Cards</span>
                </nav>

                <h2 class="text-4xl font-extrabold font-headline tracking-tighter text-on-surface">
                    Card Inventory
                </h2>
            </div>

            <a href="{{ route('cards.create') }}"
                class="bg-primary text-black px-6 py-2.5 rounded-lg font-black font-headline text-sm flex items-center gap-2 neon-glow hover:scale-[1.05] transition-all active:scale-95">
                <span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">add_circle</span>
                CREATE CARD
            </a>
        </div>

        @php
        $defaultLang = $languages->where('is_default', 1)->first()->code ?? 'en';
        @endphp

        <!-- <div class="flex gap-2 mb-4">
            @foreach($languages as $lang)
            <button onclick="setLang('{{ $lang->code }}')"
                class="lang-btn px-3 py-1 rounded border text-xs font-bold"
                data-lang="{{ $lang->code }}">
                {{ strtoupper($lang->code) }}
            </button>
            @endforeach
        </div> -->
        <!-- Filters Bar -->
        <div class="bg-surface-container p-3 rounded-xl flex flex-wrap items-center gap-4 border border-outline/10">

            <!-- Round Filters -->
            <div class="flex items-center gap-1 flex-wrap">

                <!-- All -->
                <a href="{{ route('cards.index', ['lang' => request('lang')]) }}"
                    class="px-4 py-1.5 rounded-lg text-xs font-bold
        {{ !request('round') ? 'bg-primary/20 text-primary border border-primary/30' : 'text-on-surface-variant hover:bg-surface-container-high' }}">
                    All
                </a>

                <!-- Round One -->
                <a href="{{ route('cards.index', ['round' => '1', 'lang' => request('lang')]) }}"
                    class="px-4 py-1.5 rounded-lg text-xs font-bold
        {{ request('round') == '1' ? 'bg-primary/20 text-primary border border-primary/30' : 'text-on-surface-variant hover:bg-surface-container-high' }}">
                    Round One
                </a>

                <!-- Round Two -->
                <a href="{{ route('cards.index', ['round' => '2', 'lang' => request('lang')]) }}"
                    class="px-4 py-1.5 rounded-lg text-xs font-bold
        {{ request('round') == '2' ? 'bg-primary/20 text-primary border border-primary/30' : 'text-on-surface-variant hover:bg-surface-container-high' }}">
                    Round Two
                </a>

            </div>

            <!-- Persona Filters (ONLY show when Round Two is selected) -->
            @if(request('round') == '2')
            <div class="flex items-center gap-1 flex-wrap border-l border-outline/20 pl-3 ml-2">

                @foreach($personas as $persona)
                <a href="{{ route('cards.index', [
            'round' => '2',
            'persona' => $persona->id,
            'lang' => request('lang')
        ]) }}"
                    class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all
        {{ request('persona') == $persona->id 
            ? 'bg-primary/20 text-primary border border-primary/30'
            : 'text-on-surface-variant hover:bg-surface-container-high' }}">

                    {{ translate_field($persona->name) }}
                </a>
                @endforeach

            </div>
            @endif

        </div>

        <!-- Card Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

            @forelse($cards as $card)
            <div class="group bg-surface-container-high rounded-xl overflow-hidden shadow-lg border border-outline/10 hover:border-primary/30 transition-all duration-300 flex flex-col">

                <!-- Image Placeholder -->
                <div class="relative h-44 overflow-hidden bg-[#1c222c] flex items-center justify-center">
                    <!-- <span class="material-symbols-outlined text-6xl text-primary/30">card_membership</span> -->
                    <img src="{{ $card->photo ?? '' }}"
                        alt="Card Image"
                        class="absolute inset-0 w-full h-full object-cover"
                        @if(empty($card->photo)) style="display:none;" @endif>

                    <div class="absolute top-3 left-3">
                        <span class="bg-primary/90 text-black text-[9px] font-black px-2 py-0.5 rounded-sm uppercase tracking-widest">
                            CARD
                        </span>
                    </div>
                </div>

                <div class="p-5 flex-1 flex flex-col">

                    <div class="flex justify-between items-start mb-1">
                        <h3 class="text-base font-black font-headline tracking-tight text-on-surface group-hover:text-primary transition-colors">
                            {{ translate_field($card->name) }}
                        </h3>

                        <button class="text-on-surface-variant hover:text-primary transition-colors">
                            <span class="material-symbols-outlined text-xl">more_vert</span>
                        </button>
                    </div>

                    <p class="text-on-surface-variant text-[11px] font-medium mb-4 flex items-center gap-1.5">
                        <span class="material-symbols-outlined text-sm text-primary">calendar_month</span>
                        {{ $card->created_at->format('d M Y') }}
                    </p>

                    <div class="mt-auto pt-4 flex items-center justify-between border-t border-outline/5">

                        <!-- Featured Badge -->
                        @if($card->is_round_one)
                        <div class="flex items-center gap-2">
                            <span class="px-2 py-0.5 rounded text-[10px] font-black bg-yellow-400/10 text-yellow-400 border border-yellow-400/20 opacity-100">
                                Round One
                            </span>
                        </div>
                        @endif
                        <!-- Status -->
                        <div class="flex items-center gap-2">
                            <span class="px-2 py-0.5 rounded text-[10px] font-black
                                {{ $card->is_active ? 'bg-[#00FF9D]/10 text-primary border border-primary/20 opacity-100' : 'bg-gray-500/10 text-gray-400 border border-gray-500/20 opacity-50' }}">
                                {{ $card->is_active ? 'ACTIVE' : 'INACTIVE' }}
                            </span>
                        </div>

                        <!-- Actions -->
                        <div class="flex gap-1">
                            <a href="{{ route('cards.edit', $card->id) }}"
                                class="p-1.5 rounded hover:bg-primary/10 text-on-surface-variant hover:text-primary transition-all">
                                <span class="material-symbols-outlined text-lg">edit</span>
                            </a>

                            <form action="{{ route('cards.destroy', $card->id) }}" method="POST" onsubmit="return confirm('Delete this card?')">
                                @csrf
                                @method('DELETE')

                                <button class="p-1.5 rounded hover:bg-error/10 text-on-surface-variant hover:text-error transition-all">
                                    <span class="material-symbols-outlined text-lg">delete</span>
                                </button>
                            </form>
                        </div>

                    </div>
                </div>
            </div>

            @empty
            <div class="col-span-full text-center text-on-surface-variant py-10">
                No categories found.
            </div>
            @endforelse

        </div>

        <!-- Pagination -->
        <div class="mt-10">
            {{ $cards->links() }}
        </div>

    </div>
</main>
@endsection
<script>
    let currentLang = localStorage.getItem('lang') || "{{ $defaultLang }}";

    function setLang(lang) {
        localStorage.setItem('lang', lang);
        location.reload();
    }
</script>