@extends('layouts.branch')

@section('title', 'Reports Dashboard')
@section('header', 'Reports Hub')

@section('content')
<div class="space-y-10">
    @include('partials.branch._breadcrumbs', [
        'breadcrumbs' => [
            ['name' => 'Reports', 'url' => route('branch.reports.index')]
        ]
    ])


    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
        <!-- Patient Registration Report -->
        <a href="{{ route('branch.reports.patients') }}" class="group relative bg-white border border-slate-100 p-10 rounded-[45px] shadow-sm hover:shadow-[0_40px_80px_-15px_rgba(79,70,229,0.15)] hover:-translate-y-2 transition-all duration-500 overflow-hidden italic">
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-10">
                    <div class="h-16 w-16 rounded-[24px] bg-indigo-50 text-indigo-600 flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-xl shadow-indigo-100/50">
                        <svg class="h-8 w-8" 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>
                    <div class="text-slate-200 group-hover:text-indigo-600 transition-colors duration-500">
                        <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </div>
                </div>
                <h3 class="text-2xl font-black text-slate-800 uppercase tracking-tighter leading-none">Patient Registry</h3>
                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-3 leading-relaxed">Initialization metrics and universal clinical identity directory</p>
                
                <div class="mt-8 pt-8 border-t border-slate-50 flex items-center gap-4">
                    <span class="text-[9px] font-black px-4 py-2 bg-slate-50 text-slate-400 rounded-full uppercase tracking-widest group-hover:bg-indigo-600 group-hover:text-white transition-all">Identity Master</span>
                </div>
            </div>
            <!-- Decorative Gradient -->
            <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-indigo-50/50 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </a>

        <!-- OPD Registration Report -->
        <a href="{{ route('branch.reports.opd-registrations') }}" class="group relative bg-white border border-slate-100 p-10 rounded-[45px] shadow-sm hover:shadow-[0_40px_80px_-15px_rgba(16,185,129,0.15)] hover:-translate-y-2 transition-all duration-500 overflow-hidden italic">
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-10">
                    <div class="h-16 w-16 rounded-[24px] bg-emerald-50 text-emerald-600 flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-xl shadow-emerald-100/50">
                        <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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>
                    </div>
                    <div class="text-slate-200 group-hover:text-emerald-600 transition-colors duration-500">
                        <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </div>
                </div>
                <h3 class="text-2xl font-black text-slate-800 uppercase tracking-tighter leading-none">OPD Analytics</h3>
                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-3 leading-relaxed">Out-patient check-in volumes and consultation visit logs</p>
                
                <div class="mt-8 pt-8 border-t border-slate-50 flex items-center gap-4">
                    <span class="text-[9px] font-black px-4 py-2 bg-slate-50 text-slate-400 rounded-full uppercase tracking-widest group-hover:bg-emerald-600 group-hover:text-white transition-all">Clinical Ops</span>
                </div>
            </div>
            <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-emerald-50/50 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </a>

        <!-- IPD Registration Report -->
        <a href="{{ route('branch.reports.ipd-registrations') }}" class="group relative bg-white border border-slate-100 p-10 rounded-[45px] shadow-sm hover:shadow-[0_40px_80px_-15px_rgba(244,63,94,0.15)] hover:-translate-y-2 transition-all duration-500 overflow-hidden italic">
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-10">
                    <div class="h-16 w-16 rounded-[24px] bg-rose-50 text-rose-600 flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-xl shadow-rose-100/50">
                        <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                    </div>
                    <div class="text-slate-200 group-hover:text-rose-600 transition-colors duration-500">
                        <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </div>
                </div>
                <h3 class="text-2xl font-black text-slate-800 uppercase tracking-tighter leading-none">IPD Admissions</h3>
                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-3 leading-relaxed">In-patient admission lifecycle and census monitoring</p>
                
                <div class="mt-8 pt-8 border-t border-slate-50 flex items-center gap-4">
                    <span class="text-[9px] font-black px-4 py-2 bg-slate-50 text-slate-400 rounded-full uppercase tracking-widest group-hover:bg-rose-600 group-hover:text-white transition-all">Ward Metrics</span>
                </div>
            </div>
            <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-rose-50/50 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </a>

        <!-- OPD Collection Report -->
        <a href="{{ route('branch.reports.opd-collection') }}" class="group relative bg-white border border-slate-100 p-10 rounded-[45px] shadow-sm hover:shadow-[0_40px_80px_-15px_rgba(245,158,11,0.15)] hover:-translate-y-2 transition-all duration-500 overflow-hidden italic">
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-10">
                    <div class="h-16 w-16 rounded-[24px] bg-amber-50 text-amber-600 flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-xl shadow-amber-100/50">
                        <svg class="h-8 w-8" 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 class="text-slate-200 group-hover:text-amber-600 transition-colors duration-500">
                        <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </div>
                </div>
                <h3 class="text-2xl font-black text-slate-800 uppercase tracking-tighter leading-none">OPD Revenue</h3>
                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-3 leading-relaxed">Daily financial aggregations for professional consultation services</p>
                
                <div class="mt-8 pt-8 border-t border-slate-50 flex items-center gap-4">
                    <span class="text-[9px] font-black px-4 py-2 bg-slate-50 text-slate-400 rounded-full uppercase tracking-widest group-hover:bg-amber-600 group-hover:text-white transition-all">Financial Hub</span>
                </div>
            </div>
            <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-amber-50/50 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </a>

        <!-- IPD Charges Report -->
        <a href="{{ route('branch.reports.ipd-charges') }}" class="group relative bg-white border border-slate-100 p-10 rounded-[45px] shadow-sm hover:shadow-[0_40px_80px_-15px_rgba(59,130,246,0.15)] hover:-translate-y-2 transition-all duration-500 overflow-hidden italic">
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-10">
                    <div class="h-16 w-16 rounded-[24px] bg-blue-50 text-blue-600 flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-xl shadow-blue-100/50">
                        <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/></svg>
                    </div>
                    <div class="text-slate-200 group-hover:text-blue-600 transition-colors duration-500">
                        <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </div>
                </div>
                <h3 class="text-2xl font-black text-slate-800 uppercase tracking-tighter leading-none">Service Billing</h3>
                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-3 leading-relaxed">Aggregated service charges and bed rent distribution analysis</p>
                
                <div class="mt-8 pt-8 border-t border-slate-50 flex items-center gap-4">
                    <span class="text-[9px] font-black px-4 py-2 bg-slate-50 text-slate-400 rounded-full uppercase tracking-widest group-hover:bg-blue-600 group-hover:text-white transition-all">Billing Master</span>
                </div>
            </div>
            <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-blue-50/50 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </a>

        <!-- IPD Outstanding Report -->
        <a href="{{ route('branch.reports.ipd-outstanding') }}" class="group relative bg-white border border-slate-100 p-10 rounded-[45px] shadow-sm hover:shadow-[0_40px_80px_-15px_rgba(249,115,22,0.15)] hover:-translate-y-2 transition-all duration-500 overflow-hidden italic">
            <div class="relative z-10">
                <div class="flex items-center justify-between mb-10">
                    <div class="h-16 w-16 rounded-[24px] bg-orange-50 text-orange-600 flex items-center justify-center group-hover:scale-110 group-hover:rotate-3 transition-all duration-500 shadow-xl shadow-orange-100/50">
                        <svg class="h-8 w-8" 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>
                    </div>
                    <div class="text-slate-200 group-hover:text-orange-600 transition-colors duration-500">
                        <svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </div>
                </div>
                <h3 class="text-2xl font-black text-slate-800 uppercase tracking-tighter leading-none">Credit Ledger</h3>
                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-3 leading-relaxed">Real-time outstanding balances and pending patient liabilities</p>
                
                <div class="mt-8 pt-8 border-t border-slate-50 flex items-center gap-4">
                    <span class="text-[9px] font-black px-4 py-2 bg-slate-50 text-slate-400 rounded-full uppercase tracking-widest group-hover:bg-orange-600 group-hover:text-white transition-all">Accounts Receivable</span>
                </div>
            </div>
            <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-orange-50/50 rounded-full blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
        </a>
    </div>
</div>
@endsection