@extends('layouts.branch')

@section('title', "OPD Check-in Log")
@section('header', "OPD Visit History")

@section('content')
<div class="space-y-6">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Registration Directory', 'url' => route('branch.patients.index')],
            ['name' => "OPD Check-in Log", 'url' => route('branch.registrations.index')]
        ]
    ])

    @if(session('status'))
    <div class="bg-emerald-50 border border-emerald-100 p-6 rounded-[32px] italic shadow-2xl shadow-emerald-100/20 mb-6 flex items-center justify-between group animate-in slide-in-from-top duration-500">
        <div class="flex items-center gap-4">
            <div class="h-12 w-12 bg-emerald-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-emerald-100 group-hover:scale-110 transition-transform">
                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            </div>
            <div>
                <h4 class="text-sm font-black text-emerald-900 uppercase tracking-widest leading-none">Operation Successful</h4>
                <p class="text-[10px] text-emerald-400 font-bold uppercase tracking-widest mt-1">{{ session('status') }}</p>
            </div>
        </div>
        <button @click="$el.parentElement.remove()" class="text-emerald-300 hover:text-emerald-600 transition-colors">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
    </div>
    @endif

    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 bg-white p-8 rounded-[40px] shadow-sm border border-slate-100 italic">
        <div class="flex flex-col md:flex-row md:items-center gap-6">
            <div>
                <div class="flex items-center gap-4 mb-2">
                    <h2 class="text-3xl font-black text-slate-800 tracking-tighter uppercase leading-none">OPD Check-in Log</h2>
                    <span class="px-4 py-1.5 bg-indigo-50 text-indigo-600 rounded-xl text-[10px] font-black uppercase tracking-[0.2em] border border-indigo-100 flex items-center gap-2 shadow-sm italic animate-in zoom-in duration-500">
                        <span class="h-2 w-2 rounded-full bg-indigo-500 animate-pulse"></span>
                        {{ $registrations->total() }} Volume
                    </span>
                </div>
                <p class="text-[10px] text-slate-400 font-bold tracking-widest uppercase italic">Monitoring daily outpatient flow and clinical check-ins</p>
            </div>
        </div>
        <div class="flex items-center gap-3">
            <a href="{{ route('branch.patients.index') }}" class="px-6 py-4 bg-white border border-slate-200 text-slate-600 rounded-3xl font-black uppercase tracking-widest text-[11px] hover:bg-slate-50 hover:text-slate-900 transition-all shadow-sm">
                Master Directory
            </a>
            <a href="{{ route('branch.registrations.create') }}" class="flex items-center gap-2 px-8 py-4 bg-slate-900 text-white rounded-3xl font-black uppercase tracking-widest text-[11px] hover:bg-indigo-600 shadow-2xl shadow-slate-200 transition-all group h-[58px]">
                <svg class="h-4 w-4 transition-transform group-hover:scale-125" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                New OPD Registration
            </a>
        </div>
    </div>

    <!-- Filter Bar & Table Container -->
    <div x-data="{
        filters: {
            patient_name: '{{ request('patient_name') }}',
            mobile_number: '{{ request('mobile_number') }}',
            uhid: '{{ request('uhid') }}',
            visit_date: '{{ request('visit_date', date('Y-m-d')) }}'
        },
        loading: false,
        updateResults(url = null) {
            this.loading = true;
            if (!url) {
                const params = new URLSearchParams(this.filters).toString();
                url = `{{ route('branch.registrations.index') }}?${params}`;
            }

            fetch(url, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(res => res.text())
            .then(html => {
                document.getElementById('registration-table-container').innerHTML = html;
                this.loading = false;
                // Update URL without reload for bookmarks/refresh
                window.history.pushState({}, '', url);
                this.bindPagination();
            })
            .catch(err => {
                console.error(err);
                this.loading = false;
            });
        },
        bindPagination() {
            document.querySelectorAll('.ajax-pagination a').forEach(link => {
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    this.updateResults(link.getAttribute('href'));
                });
            });
        }
    }" x-init="bindPagination()">
        <div class="bg-white p-6 rounded-[32px] shadow-sm border border-slate-100 italic relative overflow-hidden">
            <!-- Loading Overlay (Subtle) -->
            <div x-show="loading" class="absolute inset-0 bg-white/50 backdrop-blur-[2px] z-20 flex items-center justify-center transition-all">
                <div class="h-8 w-8 border-2 border-indigo-600 border-t-transparent rounded-full animate-spin text-inherit"></div>
            </div>

            <form action="{{ route('branch.registrations.index') }}" method="GET" class="flex flex-wrap lg:flex-nowrap items-end gap-4 relative z-10" @submit.prevent="updateResults()">
                <div class="flex-1 min-w-[150px] space-y-1.5">
                    <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest ml-1 text-inherit">Patient Name</label>
                    <input type="text" name="patient_name" x-model.debounce.500ms="filters.patient_name" @input="updateResults()"
                        placeholder="Search Name..."
                        class="w-full px-4 py-2.5 bg-slate-50 border border-slate-100 rounded-xl text-[10px] font-black uppercase tracking-widest focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
                </div>
                <div class="flex-1 min-w-[120px] space-y-1.5">
                    <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest ml-1 text-inherit">Mobile</label>
                    <input type="text" name="mobile_number" x-model.debounce.500ms="filters.mobile_number" @input="updateResults()"
                        placeholder="Mobile..."
                        class="w-full px-4 py-2.5 bg-slate-50 border border-slate-100 rounded-xl text-[10px] font-black uppercase tracking-widest focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
                </div>
                <div class="flex-1 min-w-[100px] space-y-1.5">
                    <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest ml-1 text-inherit">UHID</label>
                    <input type="text" name="uhid" x-model.debounce.500ms="filters.uhid" @input="updateResults()"
                        placeholder="UHID..."
                        class="w-full px-4 py-2.5 bg-slate-50 border border-slate-100 rounded-xl text-[10px] font-black uppercase tracking-widest focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
                </div>
                <div class="flex-1 min-w-[130px] space-y-1.5">
                    <label class="text-[9px] font-black text-slate-400 uppercase tracking-widest ml-1 text-inherit">Visit Date</label>
                    <input type="date" name="visit_date" x-model="filters.visit_date" @change="updateResults()"
                        class="w-full px-4 py-2.5 bg-slate-50 border border-slate-100 rounded-xl text-[10px] font-black tracking-widest focus:ring-2 focus:ring-indigo-500 outline-none transition-all">
                </div>
                <div class="flex items-center gap-2">
                    <button type="submit" class="px-6 py-2.5 bg-indigo-600 text-white rounded-xl font-black uppercase tracking-widest text-[9px] hover:bg-slate-900 transition-all shadow-lg shadow-indigo-100 h-[38px] flex items-center justify-center">
                        Filter
                    </button>
                    <a :href="'{{ route('branch.registrations.export-pdf') }}?' + new URLSearchParams(filters).toString()" 
                       class="px-4 py-2.5 bg-rose-600 text-white rounded-xl font-black uppercase tracking-widest text-[9px] hover:bg-rose-700 transition-all shadow-lg shadow-rose-100 h-[38px] flex items-center justify-center gap-2">
                        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                        Export
                    </a>
                    <button type="button" 
                            @click="$dispatch('open-close-day-modal', { date: filters.visit_date })"
                            class="px-4 py-2.5 bg-amber-500 text-white rounded-xl font-black uppercase tracking-widest text-[9px] hover:bg-amber-600 transition-all shadow-lg shadow-amber-100 h-[38px] flex items-center justify-center gap-2">
                        <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        Close Day
                    </button>
                    <a href="{{ route('branch.registrations.index') }}" class="px-4 py-2.5 bg-slate-100 text-slate-500 rounded-xl font-black uppercase tracking-widest text-[9px] hover:bg-slate-200 transition-all h-[38px] flex items-center justify-center">
                        Reset
                    </a>
                </div>
            </form>
        </div>

        <!-- Table Container -->
        <div class="bg-white rounded-[40px] shadow-sm border border-slate-100 overflow-hidden text-inherit mt-6" id="registration-table-container">
            @include('branch.registrations._table')
        </div>
    </div>

    <!-- Cancellation Modal -->
    <div x-data="{ 
        isOpen: false, 
        regId: null, 
        reason: '', 
        cancelUrl: '',
        openCancelModal(id, url) {
            this.regId = id;
            this.cancelUrl = url;
            this.reason = '';
            this.isOpen = true;
        }
    }" 
    @open-cancel-modal.window="openCancelModal($event.detail.id, $event.detail.url)"
    x-show="isOpen" 
    class="fixed inset-0 z-50 flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-sm italic"
    x-cloak>
        <div class="bg-white w-full max-w-md rounded-[40px] shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
            <div class="p-8 bg-rose-600 text-white relative h-32 flex flex-col justify-center">
                <div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-16 -mt-16"></div>
                <h4 class="text-2xl font-black uppercase tracking-tighter leading-none relative z-10">Cancel Visit</h4>
                <p class="text-[10px] font-black uppercase tracking-[0.2em] opacity-80 mt-2 relative z-10">Void this registration record</p>
            </div>
            
            <form :action="cancelUrl" method="POST" class="p-10 space-y-8">
                @csrf
                <div class="space-y-3">
                    <label class="text-[10px] font-black text-slate-400 uppercase tracking-widest px-1">Reason for Cancellation <span class="text-rose-600">*</span></label>
                    <textarea name="cancel_reason" x-model="reason" required
                              class="w-full px-6 py-4 bg-slate-50 border border-slate-100 rounded-2xl text-sm font-bold focus:ring-2 focus:ring-rose-500 transition-all outline-none min-h-[120px]"
                              placeholder="e.g. Doctor unavailable, patient left, double entry..."></textarea>
                    <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest italic px-1">This context will be saved for audit logs</p>
                </div>

                <div class="flex items-center gap-4">
                    <button type="button" @click="isOpen = false" class="flex-1 py-4 bg-slate-100 text-slate-500 rounded-3xl font-black uppercase tracking-widest text-[11px] hover:bg-slate-200 transition-all">
                        Keep Visit
                    </button>
                    <button type="submit" :disabled="!reason.trim()" 
                            :class="!reason.trim() ? 'opacity-50 cursor-not-allowed bg-rose-300' : 'bg-rose-600 hover:bg-rose-700 shadow-xl shadow-rose-100'"
                            class="flex-1 py-4 text-white rounded-3xl font-black uppercase tracking-widest text-[11px] transition-all flex items-center justify-center gap-2">
                        Confirm Cancel
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Close Day Modal -->
    <div x-data="{ 
        isOpen: false, 
        date: ''
    }" 
    @open-close-day-modal.window="isOpen = true; date = $event.detail.date"
    x-show="isOpen" 
    class="fixed inset-0 z-50 flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-sm italic"
    x-cloak>
        <div class="bg-white w-full max-w-md rounded-[40px] shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
            <div class="p-8 bg-amber-500 text-white relative h-32 flex flex-col justify-center">
                <div class="absolute top-0 right-0 w-32 h-32 bg-white/10 rounded-full blur-3xl -mr-16 -mt-16"></div>
                <h4 class="text-2xl font-black uppercase tracking-tighter leading-none relative z-10">Close Day</h4>
                <p class="text-[10px] font-black uppercase tracking-[0.2em] opacity-80 mt-2 relative z-10" x-text="'Finalize records for ' + date"></p>
            </div>
            
            <div class="p-10 space-y-6">
                <div class="p-6 bg-amber-50 rounded-3xl border border-amber-100">
                    <p class="text-xs text-amber-800 font-bold leading-relaxed uppercase tracking-wide">
                        Warning: This will mark all remaining <span class="font-black underline">active</span> registrations for the selected date as <span class="font-black underline">expired</span>. This action cannot be undone.
                    </p>
                </div>

                <form action="{{ route('branch.registrations.close-day') }}" method="POST" class="flex items-center gap-4">
                    @csrf
                    <input type="hidden" name="date" :value="date">
                    <button type="button" @click="isOpen = false" class="flex-1 py-4 bg-slate-100 text-slate-500 rounded-3xl font-black uppercase tracking-widest text-[11px] hover:bg-slate-200 transition-all">
                        Cancel
                    </button>
                    <button type="submit" class="flex-1 py-4 bg-amber-600 text-white rounded-3xl font-black uppercase tracking-widest text-[11px] hover:bg-amber-700 shadow-xl shadow-amber-100 transition-all flex items-center justify-center gap-2">
                        Confirm Close
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Global pagination listener removed in favor of Alpine.js encapsulation
</script>
@endpush
@endsection