@extends('layouts.branch')

@section('title', 'Revenue Dashboard')
@section('header', 'Revenue Dashboard')

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

    <!-- Filters -->
    <div class="bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-sm">
        <form method="GET" action="{{ route('branch.revenue.index') }}" class="flex flex-wrap items-end gap-6">
            <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="bg-slate-50 border-slate-100 rounded-2xl px-6 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="bg-slate-50 border-slate-100 rounded-2xl px-6 py-3 text-sm font-bold text-slate-700 focus:ring-indigo-500 focus:border-indigo-500 transition-all">
            </div>
            <div class="flex gap-4">
                <button type="submit" class="bg-slate-900 text-white rounded-2xl px-8 py-3.5 text-[10px] font-black uppercase tracking-widest hover:bg-indigo-600 transition-all shadow-lg shadow-slate-200">
                    Apply Filter
                </button>
                <a href="{{ route('branch.revenue.index') }}" class="bg-slate-50 text-slate-400 rounded-2xl px-8 py-3.5 text-[10px] font-black uppercase tracking-widest hover:bg-slate-100 transition-all border border-slate-100">
                    Reset
                </a>
            </div>
        </form>
    </div>

    <!-- Top Stats -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6">
        <div class="bg-indigo-600 rounded-[2.5rem] p-8 text-white shadow-xl shadow-indigo-100 relative overflow-hidden group">
            <p class="text-[10px] font-black uppercase tracking-[0.2em] opacity-80 mb-2">Total Combined Revenue</p>
            <h3 class="text-4xl font-black tracking-tighter tabular-nums">₹{{ number_format($totalRevenue, 2) }}</h3>
        </div>

        <div class="bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-sm flex flex-col justify-between group">
            <div class="mb-4">
                <div class="flex flex-col">
                    <span class="text-[10px] font-black text-emerald-600 bg-emerald-50 px-3 py-1 rounded-full uppercase tracking-widest mb-1 w-fit">OPD Registry</span>
                    <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest ml-1">{{ number_format($opdCount) }} Visits</span>
                </div>
            </div>
            <div>
                <h3 class="text-3xl font-black text-slate-800 tracking-tighter tabular-nums">₹{{ number_format($totalOpdRevenue, 2) }}</h3>
            </div>
        </div>

        <div class="bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-sm flex flex-col justify-between group">
            <div class="mb-4">
                <span class="text-[10px] font-black text-rose-600 bg-rose-50 px-3 py-1 rounded-full uppercase tracking-widest w-fit">IPD Charges</span>
            </div>
            <div>
                <h3 class="text-3xl font-black text-slate-800 tracking-tighter tabular-nums">₹{{ number_format($totalIpdCharges, 2) }}</h3>
            </div>
        </div>

        <div class="bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-sm flex flex-col justify-between group">
            <div class="mb-4">
                <div class="flex flex-col">
                    <span class="text-[10px] font-black text-amber-600 bg-amber-50 px-3 py-1 rounded-full uppercase tracking-widest mb-1 w-fit">Admissions</span>
                    <span class="text-[9px] font-black text-slate-400 uppercase tracking-widest ml-1">{{ number_format($admissionCount) }} Admits</span>
                </div>
            </div>
            <div>
                <h3 class="text-3xl font-black text-slate-800 tracking-tighter tabular-nums">₹{{ number_format($totalIpdAdvances, 2) }}</h3>
            </div>
        </div>

        <div class="bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-sm flex flex-col justify-between group">
            <div class="mb-4">
                <span class="text-[10px] font-black text-indigo-600 bg-indigo-50 px-3 py-1 rounded-full uppercase tracking-widest w-fit">Payments</span>
            </div>
            <div>
                <h3 class="text-3xl font-black text-slate-800 tracking-tighter tabular-nums">₹{{ number_format($consolidatedCollections, 2) }}</h3>
            </div>
        </div>

        <div class="bg-rose-50 border border-rose-100 rounded-[2.5rem] p-8 shadow-sm flex flex-col justify-between group relative overflow-hidden">
            <div class="mb-4">
                <span class="text-[10px] font-black text-rose-600 bg-white px-3 py-1 rounded-full uppercase tracking-widest shadow-sm w-fit">Outstanding</span>
            </div>
            <div>
                <h3 class="text-3xl font-black text-rose-900 tracking-tighter tabular-nums">₹{{ number_format($totalIpdOutstanding, 2) }}</h3>
            </div>
        </div>
    </div>

    <!-- Charts -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 bg-white border border-slate-100 rounded-[3rem] p-8 shadow-sm">
            <div class="flex items-center justify-between mb-8">
                <div>
                    <h4 class="text-lg font-black text-slate-800 uppercase tracking-tight">Revenue Trend</h4>
                    @if($fromDate && $toDate)
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Collections from {{ \Carbon\Carbon::parse($fromDate)->format('d M') }} to {{ \Carbon\Carbon::parse($toDate)->format('d M') }}</p>
                    @else
                        <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1">Daily collections over last {{ $days }} days</p>
                    @endif
                </div>
                <div class="flex bg-slate-50 p-1.5 rounded-2xl gap-1">
                    <a href="?days=7" class="px-4 py-1.5 text-[9px] font-black uppercase tracking-widest rounded-xl transition-all {{ $days == 7 ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-400 hover:text-slate-600' }}">7D</a>
                    <a href="?days=30" class="px-4 py-1.5 text-[9px] font-black uppercase tracking-widest rounded-xl transition-all {{ $days == 30 ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-400 hover:text-slate-600' }}">30D</a>
                    <a href="?days=90" class="px-4 py-1.5 text-[9px] font-black uppercase tracking-widest rounded-xl transition-all {{ $days == 90 ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-400 hover:text-slate-600' }}">90D</a>
                </div>
            </div>
            
            <div class="h-[400px]">
                <canvas id="revenueTrendChart"></canvas>
            </div>
        </div>

        <div class="bg-white border border-slate-100 rounded-[3rem] p-8 shadow-sm">
            <h4 class="text-lg font-black text-slate-800 uppercase tracking-tight mb-2">Revenue Mix</h4>
            <p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mb-8">Service distribution</p>
            
            <div class="flex flex-col items-center justify-center">
                <div class="h-[280px] w-full">
                    <canvas id="revenueMixChart"></canvas>
                </div>
                
                <div class="mt-8 space-y-4 w-full">
                    <div class="flex items-center justify-between p-4 bg-emerald-50/50 rounded-2xl">
                        <div class="flex items-center gap-3">
                            <div class="h-3 w-3 rounded-full bg-emerald-500"></div>
                            <span class="text-[10px] font-black text-slate-600 uppercase tracking-widest">OPD Registry</span>
                        </div>
                        <span class="text-xs font-black text-emerald-600 uppercase">{{ number_format(($totalOpdRevenue / max($totalRevenue, 1)) * 100, 1) }}%</span>
                    </div>
                    <div class="flex items-center justify-between p-4 bg-indigo-50/50 rounded-2xl">
                        <div class="flex items-center gap-3">
                            <div class="h-3 w-3 rounded-full bg-indigo-600"></div>
                            <span class="text-[10px] font-black text-slate-600 uppercase tracking-widest">IPD Services</span>
                        </div>
                        <span class="text-xs font-black text-indigo-600 uppercase">{{ number_format(($totalIpdCharges / max($totalRevenue, 1)) * 100, 1) }}%</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ctxTrend = document.getElementById('revenueTrendChart').getContext('2d');
        const ctxMix = document.getElementById('revenueMixChart').getContext('2d');

        const gradientOpd = ctxTrend.createLinearGradient(0, 0, 0, 400);
        gradientOpd.addColorStop(0, 'rgba(16, 185, 129, 0.2)');
        gradientOpd.addColorStop(1, 'rgba(16, 185, 129, 0)');

        const gradientIpd = ctxTrend.createLinearGradient(0, 0, 0, 400);
        gradientIpd.addColorStop(0, 'rgba(79, 70, 229, 0.2)');
        gradientIpd.addColorStop(1, 'rgba(79, 70, 229, 0)');

        new Chart(ctxTrend, {
            type: 'line',
            data: {
                labels: @json($labels),
                datasets: [
                    {
                        label: 'OPD Revenue',
                        data: @json($opdData),
                        borderColor: '#10b981',
                        backgroundColor: gradientOpd,
                        fill: true,
                        tension: 0.4,
                        borderWidth: 3,
                        pointRadius: 0,
                        pointHoverRadius: 6
                    },
                    {
                        label: 'IPD Revenue',
                        data: @json($ipdData),
                        borderColor: '#4f46e5',
                        backgroundColor: gradientIpd,
                        fill: true,
                        tension: 0.4,
                        borderWidth: 3,
                        pointRadius: 0,
                        pointHoverRadius: 6
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        grid: { display: false },
                        ticks: {
                            font: { size: 10, weight: 'bold' },
                            color: '#94a3b8',
                            callback: function(value) { return '₹' + value.toLocaleString(); }
                        }
                    },
                    x: {
                        grid: { display: false },
                        ticks: {
                            font: { size: 9, weight: 'bold' },
                            color: '#94a3b8'
                        }
                    }
                }
            }
        });

        new Chart(ctxMix, {
            type: 'doughnut',
            data: {
                labels: ['OPD', 'IPD'],
                datasets: [{
                    data: [{{ $totalOpdRevenue }}, {{ $totalIpdCharges + $totalIpdAdvances }}],
                    backgroundColor: ['#10b981', '#4f46e5'],
                    borderWidth: 0,
                    hoverOffset: 20
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '80%',
                plugins: {
                    legend: { display: false }
                }
            }
        });
    });
</script>
@endpush
@endsection