@extends('layouts.app')
@use('SimpleSoftwareIO\QrCode\Facades\QrCode')
@section('title', 'Weekly Programmes - International Delegates')

@section('content')
<div class="space-y-6" x-data="{ activeTab: 'active' }">

    <!-- Header Section -->
    <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 bg-white p-6 rounded-2xl border border-slate-200 shadow-sm">
        <div>
            <h2 class="text-2xl font-black text-brand-navy flex items-center gap-2">
                <i class="fa-solid fa-calendar-week text-brand-gold"></i> Weekly International Programmes
            </h2>
            <p class="text-xs text-slate-500 mt-1">Manage weekly schedules and attendee logs for international delegates.</p>
        </div>

        <button onclick="document.getElementById('createModal').classList.remove('hidden')" class="bg-brand-navy hover:bg-slate-800 text-white font-bold px-4 py-2.5 rounded-xl text-xs flex items-center gap-2 shadow-sm transition">
            <i class="fa-solid fa-plus text-brand-gold"></i> Add New Programme
        </button>
    </div>

    <!-- Navigation Tabs -->
    <div class="flex border-b border-slate-200 bg-white px-4 rounded-t-xl">
        <button @click="activeTab = 'active'" :class="activeTab === 'active' ? 'border-brand-gold text-brand-navy font-bold' : 'border-transparent text-slate-500'" class="py-3 px-6 border-b-2 text-xs uppercase tracking-wider transition">
            <i class="fa-solid fa-bolt mr-1"></i> Active Programme
        </button>
        <button @click="activeTab = 'past'" :class="activeTab === 'past' ? 'border-brand-gold text-brand-navy font-bold' : 'border-transparent text-slate-500'" class="py-3 px-6 border-b-2 text-xs uppercase tracking-wider transition">
            <i class="fa-solid fa-box-archive mr-1"></i> Past Programmes ({{ $pastProgrammes->count() }})
        </button>
    </div>

    <!-- TAB 1: ACTIVE PROGRAMME -->
    <div x-show="activeTab === 'active'" class="space-y-6">
        @if($activeProgramme)
        <div class="bg-white rounded-2xl border border-slate-200 p-6 shadow-sm relative overflow-hidden">
            <div class="absolute top-0 right-0 bg-emerald-500 text-white text-[10px] font-black uppercase px-4 py-1 rounded-bl-xl tracking-wider">
                Active Event
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-2 space-y-4">
                    <h3 class="text-2xl font-black text-brand-navy">{{ $activeProgramme->title }}</h3>
                    
                    @if($activeProgramme->theme)
                    <div class="bg-slate-50 p-4 rounded-xl border border-slate-200">
                        <span class="text-[10px] font-bold uppercase text-slate-400 block">Theme</span>
                        <p class="text-sm font-semibold text-slate-700 italic">"{{ $activeProgramme->theme }}"</p>
                    </div>
                    @endif

                    <div class="flex items-center gap-6 text-xs text-slate-600 font-medium">
                        <div>
                            <i class="fa-solid fa-calendar text-brand-gold mr-1"></i>
                            {{ $activeProgramme->start_date->format('M d, Y') }} — {{ $activeProgramme->end_date->format('M d, Y') }}
                        </div>
                        <div>
                            <i class="fa-solid fa-passport text-purple-600 mr-1"></i>
                            <span class="font-bold text-slate-900">{{ number_format($activeProgramme->attendees_count) }}</span> Delegates Checked In
                        </div>
                    </div>

                    <div class="pt-4 flex items-center gap-3">
                        <a href="{{ route('admin.programmes.show', $activeProgramme->id) }}" class="bg-brand-navy hover:bg-slate-800 text-white font-bold px-4 py-2 rounded-lg text-xs flex items-center gap-2">
                            <i class="fa-solid fa-users"></i> View Registered Delegates
                        </a>
                        <a href="{{ route('admin.programmes.qr', $activeProgramme->id) }}" class="bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold px-4 py-2 rounded-lg text-xs flex items-center gap-2">
                            <i class="fa-solid fa-qrcode"></i> Download Event QR
                        </a>
                    </div>
                </div>

                <!-- QR Code Display Box -->
                <div class="bg-slate-50 border border-slate-200 p-4 rounded-xl flex flex-col items-center justify-center text-center space-y-2">
                    <div class="p-2 bg-white rounded-lg border border-slate-200 shadow-sm">
                        {!! QrCode::size(140)->generate(route('admin.programmes.show', $activeProgramme->id)) !!}
                    </div>
                    <span class="text-[10px] font-mono text-slate-400">Scan to view live attendee portal</span>
                </div>
            </div>
        </div>
        @else
        <div class="bg-white p-12 text-center rounded-2xl border border-slate-200">
            <i class="fa-solid fa-calendar-xmark text-4xl text-slate-300 mb-3 block"></i>
            <h4 class="font-bold text-slate-700 text-sm">No active weekly programme.</h4>
            <p class="text-xs text-slate-400 mt-1">Create a new programme to set it as active.</p>
        </div>
        @endif
    </div>

    <!-- TAB 2: PAST PROGRAMMES -->
    <div x-show="activeTab === 'past'" class="space-y-4">
        <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm">
            <table class="w-full text-left text-xs">
                <thead class="bg-slate-50 border-b border-slate-200 text-slate-400 uppercase font-bold text-[10px]">
                    <tr>
                        <th class="p-4">Programme Title</th>
                        <th class="p-4">Dates</th>
                        <th class="p-4">Delegates</th>
                        <th class="p-4 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @forelse($pastProgrammes as $prog)
                    <tr class="hover:bg-slate-50 transition">
                        <td class="p-4 font-bold text-slate-800">
                            {{ $prog->title }}
                            @if($prog->theme)
                            <span class="block text-[11px] font-normal text-slate-400 italic">{{ Str::limit($prog->theme, 50) }}</span>
                            @endif
                        </td>
                        <td class="p-4 text-slate-500 font-mono">
                            {{ $prog->start_date->format('M d') }} - {{ $prog->end_date->format('M d, Y') }}
                        </td>
                        <td class="p-4 font-bold text-purple-700">
                            {{ $prog->attendees_count }}
                        </td>
                        <td class="p-4 text-right space-x-2">
                            <a href="{{ route('admin.programmes.show', $prog->id) }}" class="text-slate-600 hover:text-brand-navy font-bold">
                                <i class="fa-solid fa-eye"></i> View
                            </a>
                            <form action="{{ route('admin.programmes.activate', $prog->id) }}" method="POST" class="inline">
                                @csrf
                                <button type="submit" class="text-emerald-600 hover:text-emerald-800 font-bold ml-2">
                                    Set Active
                                </button>
                            </form>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="p-8 text-center text-slate-400 font-medium">No past programmes archived.</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

</div>

<!-- Modal: Create Programme -->
<div id="createModal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm hidden flex items-center justify-center p-4 z-50">
    <div class="bg-white rounded-2xl max-w-lg w-full p-6 space-y-4 border border-slate-200 shadow-2xl">
        <div class="flex items-center justify-between border-b pb-3">
            <h3 class="font-black text-brand-navy text-sm uppercase">Create Weekly Programme</h3>
            <button onclick="document.getElementById('createModal').classList.add('hidden')" class="text-slate-400 hover:text-slate-600">
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <form action="{{ route('admin.programmes.store') }}" method="POST" class="space-y-4">
            @csrf
            <div>
                <label class="block text-xs font-bold uppercase text-slate-500 mb-1">Programme Title</label>
                <input type="text" name="title" required class="w-full border border-slate-300 rounded-lg p-2.5 text-xs font-semibold focus:ring-2 focus:ring-brand-navy focus:outline-none" placeholder="e.g. International Ministers Leadership Summit">
            </div>

            <div>
                <label class="block text-xs font-bold uppercase text-slate-500 mb-1">Theme (Optional)</label>
                <textarea name="theme" rows="2" class="w-full border border-slate-300 rounded-lg p-2.5 text-xs focus:ring-2 focus:ring-brand-navy focus:outline-none" placeholder="e.g. Empowering Nations through Kingdom Service"></textarea>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs font-bold uppercase text-slate-500 mb-1">Start Date</label>
                    <input type="date" name="start_date" required class="w-full border border-slate-300 rounded-lg p-2.5 text-xs focus:ring-2 focus:ring-brand-navy">
                </div>
                <div>
                    <label class="block text-xs font-bold uppercase text-slate-500 mb-1">End Date</label>
                    <input type="date" name="end_date" required class="w-full border border-slate-300 rounded-lg p-2.5 text-xs focus:ring-2 focus:ring-brand-navy">
                </div>
            </div>

            <div class="pt-2 flex justify-end gap-2">
                <button type="button" onclick="document.getElementById('createModal').classList.add('hidden')" class="bg-slate-100 text-slate-600 px-4 py-2 rounded-lg text-xs font-bold">Cancel</button>
                <button type="submit" class="bg-brand-navy text-white px-4 py-2 rounded-lg text-xs font-bold">Create & Activate</button>
            </div>
        </form>
    </div>
</div>
@endsection