@extends('layouts.branch')

@section('title', 'Patient Registration Report')
@section('header', 'Patient Registration Report')

@section('content')
<div class="space-y-6">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Reports', 'url' => route('branch.reports.index')],
            ['name' => 'Patient Registration Report', 'url' => route('branch.reports.patients')]
        ]
    ])
    <!-- Filters -->
    <div class="bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-sm">
        <form method="GET" action="{{ route('branch.reports.patients') }}" class="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-6 items-end">
            <div>
                <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-1">From Date</label>
                <input type="date" name="from_date" value="{{ $fromDate }}" class="w-full bg-slate-50 border-slate-100 rounded-2xl px-4 py-3 text-sm font-bold text-slate-700 focus:ring-indigo-500 focus:border-indigo-500 transition-all">
            </div>
            <div>
                <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-1">To Date</label>
                <input type="date" name="to_date" value="{{ $toDate }}" class="w-full bg-slate-50 border-slate-100 rounded-2xl px-4 py-3 text-sm font-bold text-slate-700 focus:ring-indigo-500 focus:border-indigo-500 transition-all">
            </div>
            <div>
                <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-1">Per Page</label>
                <select name="per_page" class="w-full bg-slate-50 border-slate-100 rounded-2xl px-4 py-3 text-sm font-bold text-slate-700 focus:ring-indigo-500 focus:border-indigo-500 transition-all appearance-none">
                    <option value="50" {{ $perPage == 50 ? 'selected' : '' }}>50 Records</option>
                    <option value="100" {{ $perPage == 100 ? 'selected' : '' }}>100 Records</option>
                    <option value="200" {{ $perPage == 200 ? 'selected' : '' }}>200 Records</option>
                    <option value="all" {{ $perPage == 'all' ? 'selected' : '' }}>All Records</option>
                </select>
            </div>
            <div class="flex gap-4 lg:col-span-2">
                <button type="submit" class="flex-1 bg-slate-900 text-white rounded-2xl px-6 py-3 text-xs font-black uppercase tracking-widest hover:bg-indigo-600 transition-all shadow-lg shadow-slate-200">
                    Generate Report
                </button>
                <a href="{{ route('branch.reports.patients.export-pdf', ['from_date' => $fromDate, 'to_date' => $toDate]) }}" class="bg-rose-500 text-white rounded-2xl px-6 py-3 text-xs font-black uppercase tracking-widest hover:bg-rose-600 transition-all shadow-lg shadow-rose-200 flex items-center justify-center">
                    <svg class="w-4 h-4" 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>
                </a>
            </div>
        </form>
    </div>

    <!-- Results -->
    <div class="bg-white border border-slate-100 rounded-[2.5rem] shadow-xl shadow-slate-200/50 overflow-hidden">
        <div class="flex items-center justify-between px-8 pt-8">
            <h2 class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Total Registered Patients: <span class="text-indigo-600 ml-1">{{ number_format($totalCount) }}</span></h2>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-50/50">
                        <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100">Reg. Date</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100">Photo</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100">UHID</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100">Patient Name</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100">Spouse Name</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100">Gender/Age</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100 text-right">Contact</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50 font-medium">
                    @forelse($patients as $patient)
                        <tr class="group hover:bg-slate-50/50 transition-colors">
                            <td class="px-8 py-6 text-xs text-slate-600 font-bold uppercase tracking-tight">
                                {{ $patient->created_at->format('d M, Y') }}
                            </td>
                            <td class="px-8 py-6">
                                @if($patient->photo_path)
                                    <img src="{{ $patient->photo_url }}" class="w-10 h-10 rounded-xl object-cover border-2 border-slate-100 group-hover:border-indigo-200 transition-all shadow-sm">
                                @else
                                    <div class="w-10 h-10 rounded-xl bg-slate-100 flex items-center justify-center text-slate-400">
                                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                                    </div>
                                @endif
                            </td>
                            <td class="px-8 py-6">
                                <span class="text-xs font-black text-indigo-600 uppercase tracking-tight bg-indigo-50 px-3 py-1 rounded-lg">
                                    {{ $patient->uhid }}
                                </span>
                            </td>
                            <td class="px-8 py-6">
                                <h4 class="text-sm font-black text-slate-800 uppercase tracking-tight">{{ $patient->name }}</h4>
                            </td>
                            <td class="px-8 py-6 text-xs text-slate-600 font-bold uppercase tracking-tight">
                                {{ $patient->spouse_name ?? '-' }}
                            </td>
                            <td class="px-8 py-6 text-xs text-slate-500 font-bold uppercase tracking-widest">
                                {{ $patient->gender }} / {{ $patient->age }}
                            </td>
                            <td class="px-8 py-6 text-right">
                                <span class="text-xs font-black text-slate-700 uppercase tracking-tight">{{ $patient->contact_number }}</span>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-8 py-20 text-center">
                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em]">No records found for the selected range</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($patients->hasPages())
            <div class="px-8 py-6 bg-slate-50/50 border-t border-slate-100">
                {{ $patients->links() }}
            </div>
        @endif
    </div>
</div>
@endsection