@extends('layouts.branch')

@section('title', 'OPD Collection Report')
@section('header', 'OPD Collection Report')

@section('content')
<div class="space-y-6">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Reports', 'url' => route('branch.reports.index')],
            ['name' => 'OPD Collection Report', 'url' => route('branch.reports.opd-collection')]
        ]
    ])
    <!-- Summary Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div class="bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-sm italic relative overflow-hidden group">
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Gross Revenue</p>
                    <div class="h-10 w-10 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center">
                        <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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                </div>
                <p class="text-3xl font-black text-slate-800 tracking-tighter">₹{{ number_format($registrations->sum('charge_amount'), 2) }}</p>
                <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-2">Before direct discounts</p>
            </div>
            <div class="absolute -bottom-6 -right-6 h-24 w-24 bg-indigo-50/50 rounded-full blur-2xl group-hover:bg-indigo-100/50 transition-all"></div>
        </div>

        <div class="bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-sm italic relative overflow-hidden group">
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-4">
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Total Savings</p>
                    <div class="h-10 w-10 bg-rose-50 text-rose-600 rounded-xl flex items-center justify-center">
                        <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="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"/></svg>
                    </div>
                </div>
                <p class="text-3xl font-black text-rose-600 tracking-tighter">₹{{ number_format($registrations->sum('discount_amount'), 2) }}</p>
                <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest mt-2">Aggregated direct discounts</p>
            </div>
            <div class="absolute -bottom-6 -right-6 h-24 w-24 bg-rose-50/50 rounded-full blur-2xl group-hover:bg-rose-100/50 transition-all"></div>
        </div>

        <div class="bg-slate-900 rounded-[2.5rem] p-8 shadow-2xl shadow-indigo-100 italic relative overflow-hidden group border-b-4 border-amber-500">
            <div class="relative z-10 text-white">
                <div class="flex items-center justify-between mb-4">
                    <p class="text-[10px] font-black text-indigo-400 uppercase tracking-[0.2em]">Net Liquidity</p>
                    <div class="h-10 w-10 bg-white/10 text-amber-400 rounded-xl flex items-center justify-center backdrop-blur-sm">
                        <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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                </div>
                <p class="text-3xl font-black text-white tracking-tighter">₹{{ number_format($grandTotal, 2) }}</p>
                <p class="text-[9px] text-slate-500 font-bold uppercase tracking-widest mt-2 italic">Realized professional collection</p>
            </div>
            <div class="absolute -bottom-6 -right-6 h-24 w-24 bg-indigo-600/20 rounded-full blur-2xl"></div>
        </div>
    </div>

    <!-- Filters -->
    <div class="bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-sm">
        <form method="GET" action="{{ route('branch.reports.opd-collection') }}" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 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-xs font-bold text-slate-700 focus:ring-amber-500 focus:border-amber-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-xs font-bold text-slate-700 focus:ring-amber-500 focus:border-amber-500 transition-all">
            </div>
            <div>
                <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-1">Doctor</label>
                <select name="doctor_id" class="w-full bg-slate-50 border-slate-100 rounded-2xl px-4 py-3 text-xs font-bold text-slate-700 focus:ring-amber-500 focus:border-amber-500 transition-all appearance-none">
                    <option value="">All Doctors</option>
                    @foreach($doctors as $doctor)
                        <option value="{{ $doctor->id }}" {{ $doctorId == $doctor->id ? 'selected' : '' }}>{{ $doctor->name }}</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 ml-1">Department</label>
                <select name="department_id" class="w-full bg-slate-50 border-slate-100 rounded-2xl px-4 py-3 text-xs font-bold text-slate-700 focus:ring-amber-500 focus:border-amber-500 transition-all appearance-none">
                    <option value="">All Departments</option>
                    @foreach($departments as $dept)
                        <option value="{{ $dept->id }}" {{ $departmentId == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                    @endforeach
                </select>
            </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-xs font-bold text-slate-700 focus:ring-amber-500 focus:border-amber-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">
                <button type="submit" class="flex-1 bg-slate-900 text-white rounded-2xl px-6 py-3 text-[10px] font-black uppercase tracking-widest hover:bg-amber-600 transition-all shadow-lg shadow-slate-200">
                    Filter
                </button>
                <a href="{{ route('branch.reports.opd-collection.export-pdf', ['from_date' => $fromDate, 'to_date' => $toDate, 'doctor_id' => $doctorId, 'department_id' => $departmentId]) }}" 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 Collection Records: <span class="text-amber-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">Date</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">OPD No.</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100">Patient Details</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100 text-right">Consultation Fee</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100 text-right">Discount</th>
                        <th class="px-8 py-5 text-[10px] font-black text-slate-500 uppercase tracking-widest border-b border-slate-100 text-right">Net Collection</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50 font-medium">
                    @forelse($registrations as $reg)
                        @php
                            $net = $reg->charge_amount - $reg->discount_amount;
                        @endphp
                        <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">
                                {{ $reg->visit_date->format('d M, y') }}
                            </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">
                                    {{ $reg->uhid }}
                                </span>
                            </td>
                            <td class="px-8 py-6">
                                <span class="text-xs font-black text-amber-600 uppercase tracking-tight bg-amber-50 px-3 py-1 rounded-lg">
                                    {{ $reg->opd_number }}
                                </span>
                            </td>
                            <td class="px-8 py-6">
                                <h4 class="text-sm font-black text-slate-800 uppercase tracking-tight">{{ $reg->full_name }}</h4>
                                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Dr. {{ $reg->doctor->name }} | {{ $reg->charge?->department->name ?? 'N/A' }}</p>
                            </td>
                            <td class="px-8 py-6 text-right text-xs font-bold text-slate-600">
                                {{ number_format($reg->charge_amount, 2) }}
                            </td>
                            <td class="px-8 py-6 text-right text-xs font-bold text-rose-500">
                                -{{ number_format($reg->discount_amount, 2) }}
                            </td>
                            <td class="px-8 py-6 text-right font-black text-indigo-600">
                                {{ number_format($net, 2) }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-8 py-20 text-center">
                                <p class="text-[10px] font-black text-slate-400 uppercase tracking-[0.3em]">No collection records found</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
                @if($registrations->count() > 0)
                <tfoot class="bg-slate-900 text-white font-black italic">
                    <tr>
                        <td colspan="6" class="px-8 py-6 text-right text-[10px] uppercase tracking-[0.2em]">Grand Total Net Collection</td>
                        <td class="px-8 py-6 text-right text-lg tabular-nums text-amber-400">₹{{ number_format($grandTotal, 2) }}</td>
                    </tr>
                </tfoot>
                @endif
            </table>
        </div>
        @if($registrations->hasPages())
            <div class="px-8 py-6 bg-slate-50/50 border-t border-slate-100">
                {{ $registrations->links() }}
            </div>
        @endif
    </div>
</div>
@endsection