@extends('layouts.app')
@section('title', 'Dashboard')
@section('content')
@php
  // Format helpers used throughout the view
  $fmtKes   = fn($n) => 'KES ' . number_format((float) $n, 0);
  $fmtKesNeg= function($n) use ($fmtKes) {
      $n = (float) $n;
      return $n < 0 ? '-' . $fmtKes(abs($n)) : $fmtKes($n);
  };
@endphp

@php
    // Smart period label that adapts to the selected range.
    // Single-day-today  → "Today"
    // Single-day-other  → "Mon, 01 May 2026"
    // Multi-day         → "01 May — 05 May 2026" (or with year prefix if cross-year)
    $periodLabel = (function() use ($rangeStart, $rangeEnd, $isSingleDay, $isToday) {
        if ($isToday) return 'Today (' . $rangeStart->format('d M Y') . ')';
        if ($isSingleDay) return $rangeStart->format('D, d M Y');
        $sameYear = $rangeStart->year === $rangeEnd->year;
        return $sameYear
            ? $rangeStart->format('d M') . ' — ' . $rangeEnd->format('d M Y')
            : $rangeStart->format('d M Y') . ' — ' . $rangeEnd->format('d M Y');
    })();

    // Preset URL helpers — generate ?from=X&to=Y links.
    $presetUrl = function($from, $to) {
        return route('dashboard') . '?from=' . $from . '&to=' . $to;
    };
    $today           = \Carbon\Carbon::today();
    $yesterday       = $today->copy()->subDay();
    $sevenDaysAgo    = $today->copy()->subDays(6);
    $thirtyDaysAgo   = $today->copy()->subDays(29);
    $thisMonthStart  = $today->copy()->startOfMonth();
    $lastMonthStart  = $today->copy()->subMonthNoOverflow()->startOfMonth();
    $lastMonthEnd    = $today->copy()->subMonthNoOverflow()->endOfMonth();

    // Detect which preset is currently active (for visual highlight).
    $isPreset = function($from, $to) use ($rangeStart, $rangeEnd) {
        return $rangeStart->toDateString() === $from->toDateString()
            && $rangeEnd->toDateString()   === $to->toDateString();
    };
    $activePreset = match(true) {
        $isPreset($today, $today)                          => 'today',
        $isPreset($yesterday, $yesterday)                  => 'yesterday',
        $isPreset($sevenDaysAgo, $today)                   => 'last7',
        $isPreset($thirtyDaysAgo, $today)                  => 'last30',
        $isPreset($thisMonthStart, $today)                 => 'thismonth',
        $isPreset($lastMonthStart, $lastMonthEnd)          => 'lastmonth',
        default                                            => 'custom',
    };
@endphp

{{-- ══════════════ TOP BAR: Title + Date Range Filter ══════════════ --}}
<div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 mb-5">
    <div class="flex flex-wrap items-center justify-between gap-3 mb-3">
        <div>
            <h1 class="text-lg font-bold text-gray-900">Dashboard</h1>
            <p class="text-xs text-gray-500">
                Showing data for <strong class="text-gray-700">{{ $periodLabel }}</strong>
                @if(!$isToday)
                    <span class="ml-2 inline-block px-2 py-0.5 bg-amber-50 text-amber-700 border border-amber-200 rounded text-[10px] font-bold uppercase">Historical</span>
                @endif
            </p>
        </div>

        {{-- From / To inputs --}}
        <form method="GET" action="{{ route('dashboard') }}" class="flex flex-wrap items-end gap-2">
            <div>
                <label for="dash-from" class="block text-[10px] text-gray-500 font-semibold uppercase mb-1">From</label>
                <input type="date" id="dash-from" name="from"
                       value="{{ $rangeStart->format('Y-m-d') }}"
                       max="{{ $today->format('Y-m-d') }}"
                       class="px-3 py-1.5 border border-gray-300 rounded-lg text-xs focus:border-purple-500 focus:outline-none">
            </div>
            <div>
                <label for="dash-to" class="block text-[10px] text-gray-500 font-semibold uppercase mb-1">To</label>
                <input type="date" id="dash-to" name="to"
                       value="{{ $rangeEnd->format('Y-m-d') }}"
                       max="{{ $today->format('Y-m-d') }}"
                       class="px-3 py-1.5 border border-gray-300 rounded-lg text-xs focus:border-purple-500 focus:outline-none">
            </div>
            <button type="submit" class="px-3 py-1.5 bg-purple-600 hover:bg-purple-700 text-white text-xs rounded-lg font-medium">Apply</button>
            @if(!$isToday)
                <a href="{{ route('dashboard') }}" class="px-2 py-1.5 text-xs text-gray-500 hover:text-purple-600">Reset</a>
            @endif
        </form>
    </div>

    {{-- Quick-preset chips --}}
    <div class="flex flex-wrap gap-1.5 pt-3 border-t border-gray-100">
        <span class="text-[10px] text-gray-500 font-semibold uppercase self-center mr-1">Quick:</span>
        @php
            $chip = function($label, $key, $url) use ($activePreset) {
                $active = $activePreset === $key;
                $cls = $active
                    ? 'bg-purple-100 text-purple-700 border-purple-200 font-semibold'
                    : 'bg-gray-50 text-gray-600 border-gray-200 hover:bg-gray-100';
                return '<a href="' . $url . '" class="px-2.5 py-1 border ' . $cls . ' rounded-full text-[11px]">' . $label . '</a>';
            };
        @endphp
        {!! $chip('Today',       'today',     $presetUrl($today->format('Y-m-d'),          $today->format('Y-m-d'))) !!}
        {!! $chip('Yesterday',   'yesterday', $presetUrl($yesterday->format('Y-m-d'),      $yesterday->format('Y-m-d'))) !!}
        {!! $chip('Last 7 days', 'last7',     $presetUrl($sevenDaysAgo->format('Y-m-d'),   $today->format('Y-m-d'))) !!}
        {!! $chip('Last 30 days','last30',    $presetUrl($thirtyDaysAgo->format('Y-m-d'),  $today->format('Y-m-d'))) !!}
        {!! $chip('This month',  'thismonth', $presetUrl($thisMonthStart->format('Y-m-d'), $today->format('Y-m-d'))) !!}
        {!! $chip('Last month',  'lastmonth', $presetUrl($lastMonthStart->format('Y-m-d'), $lastMonthEnd->format('Y-m-d'))) !!}
        @if($activePreset === 'custom')
            <span class="px-2.5 py-1 bg-purple-100 text-purple-700 border border-purple-200 rounded-full text-[11px] font-semibold">Custom range</span>
        @endif
    </div>
</div>

{{-- ══════════════ ROW 1A: TODAY — FINANCIAL ══════════════ --}}
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-4">
    {{-- Patients Today --}}
    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Patients{{ $isToday ? ' Today' : '' }}</p>
        <p class="text-2xl font-bold text-gray-900 mt-1">{{ number_format($row1['patientsToday']) }}</p>
    </div>

    {{-- Revenue Today (collections + insurance billed) --}}
    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Revenue{{ $isToday ? ' Today' : '' }}</p>
        <p class="text-2xl font-bold text-emerald-600 mt-1">{{ $fmtKes($row1['revenueToday']) }}</p>
    </div>

    {{-- Collections Today (cash + mobile, incl. co-pay — what hit the till) --}}
    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Collections{{ $isToday ? ' Today' : '' }}</p>
        <p class="text-2xl font-bold text-emerald-700 mt-1">{{ $fmtKes($row1['collectionsToday'] ?? 0) }}</p>
    </div>

    {{-- Cash (incl. co-pay paid in cash) --}}
    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Cash</p>
        <p class="text-2xl font-bold text-gray-900 mt-1">{{ $fmtKes($row1['cashToday']) }}</p>
    </div>

    {{-- Mobile Money / Bank (incl. co-pay paid via M-Pesa or bank) --}}
    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Mobile / Bank</p>
        <p class="text-2xl font-bold text-gray-900 mt-1">{{ $fmtKes($row1['mobileToday']) }}</p>
    </div>

    {{-- Insurance --}}
    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Insurance</p>
        <p class="text-2xl font-bold text-gray-900 mt-1">{{ $fmtKes($row1['insuranceToday']) }}</p>
    </div>
</div>

{{-- ══════════════ ROW 1B: TODAY — OPERATIONAL ══════════════ --}}
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mb-5">
    {{-- ARPP --}}
    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">ARPP</p>
        <p class="text-2xl font-bold text-purple-700 mt-1">{{ $fmtKes($row1['arpp']) }}</p>
    </div>

    {{-- Average Revenue per Day (MTD) ─ added at Clara's request.
         Denominator = calendar days elapsed in the current month so a
         clinician can compare today's revenue against the running daily
         average for the month so far. --}}
    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Avg Revenue/Day</p>
        <p class="text-2xl font-bold text-emerald-700 mt-1">{{ $fmtKes($row2['avgRevenuePerDay'] ?? 0) }}</p>
        <p class="text-[10px] text-gray-400 mt-1">MTD average · {{ $row2['daysElapsed'] ?? 0 }} day{{ ($row2['daysElapsed'] ?? 0) === 1 ? '' : 's' }}</p>
    </div>

    {{-- Follow-Ups Due Today.
         Live count of FollowUp::dueToday() — decrements as the receptionist
         records call outcomes and the rows flip to status=closed. Click-through
         goes to the CRM worklist so the receptionist can act immediately. --}}
    <a href="{{ route('crm.followups') }}" class="bg-white rounded-xl border border-blue-100 p-4 shadow-sm hover:border-blue-300 hover:shadow transition block">
        <p class="text-xs text-blue-700 uppercase tracking-wide font-semibold">Follow-Ups Due</p>
        <p class="text-2xl font-bold text-blue-700 mt-1">{{ number_format($row1['followUpsDue'] ?? 0) }}</p>
    </a>
</div>

{{-- ══════════════ ROW 2: MTD FINANCIAL POSITION ══════════════ --}}
<div class="mb-2">
    <h2 class="text-xs font-bold text-gray-500 uppercase tracking-widest">Month-to-date · {{ $rangeEnd->format('M Y') }}</h2>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-6">
    {{-- MTD Revenue --}}
    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">MTD Revenue</p>
        <p class="text-2xl font-bold text-emerald-600 mt-1">{{ $fmtKes($row2['mtdRevenue']) }}</p>
    </div>

    {{-- MTD Expenses --}}
    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">MTD Expenses</p>
        <p class="text-2xl font-bold text-rose-600 mt-1">{{ $fmtKes($row2['mtdExpenses']) }}</p>
    </div>

    {{-- MTD Net Position --}}
    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">MTD Net Position</p>
        <p class="text-2xl font-bold mt-1 {{ $row2['mtdNet'] >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">
            {{ $fmtKesNeg($row2['mtdNet']) }}
        </p>
    </div>

    {{-- Cash in Bank (liquidity) --}}
    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm relative">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">
            Cash in Bank
            <span class="inline-block ml-1 text-gray-300 cursor-help" title="Liquidity gauge: MTD Revenue − MTD Expenses − Accounts Receivable">ⓘ</span>
        </p>
        <p class="text-2xl font-bold mt-1 {{ $row2['cashInBank'] >= 0 ? 'text-gray-900' : 'text-rose-600' }}">
            {{ $fmtKesNeg($row2['cashInBank']) }}
        </p>
    </div>

    {{-- Accounts Receivable (live total, not MTD) --}}
    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Accounts Receivable</p>
        <p class="text-2xl font-bold text-amber-600 mt-1">{{ $fmtKes($row2['accountsReceivable']) }}</p>
    </div>
</div>

{{-- ══════════════ ROW 3: OPERATIONS ══════════════ --}}
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
    {{-- Appointments --}}
    <a href="{{ route('appointments.index') }}" class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm hover:border-purple-300 transition-colors block">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Appointments</p>
        <p class="text-2xl font-bold text-gray-900 mt-1">{{ number_format($row3['appointments']) }}</p>
    </a>

    {{-- Bed Occupancy --}}
    <a href="{{ route('inpatient.beds') }}" class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm hover:border-purple-300 transition-colors block">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Bed Occupancy</p>
        <p class="text-2xl font-bold text-gray-900 mt-1">{{ $row3['bedOccupancy'] }}%</p>
        <p class="text-[10px] text-gray-400 mt-1">{{ $row3['occupiedBeds'] }} / {{ $row3['totalBeds'] }} beds occupied</p>
    </a>

    {{-- Active ANC --}}
    <a href="{{ route('maternity.index') }}" class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm hover:border-pink-300 transition-colors block">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">Active ANC Clients</p>
        <p class="text-2xl font-bold text-pink-600 mt-1">{{ number_format($row3['activeAnc']) }}</p>
    </a>

    {{-- New vs Returning --}}
    <div class="bg-white rounded-xl border border-gray-100 p-4 shadow-sm">
        <p class="text-xs text-gray-500 uppercase tracking-wide font-semibold">New vs Returning</p>
        <div class="flex items-baseline gap-3 mt-1">
            <div>
                <span class="text-xl font-bold text-blue-600">{{ $row3['newCount'] }}</span>
                <span class="text-[10px] text-gray-500 ml-1">NEW</span>
            </div>
            <div class="text-gray-300">·</div>
            <div>
                <span class="text-xl font-bold text-gray-700">{{ $row3['returningCount'] }}</span>
                <span class="text-[10px] text-gray-500 ml-1">RET</span>
            </div>
        </div>
        <p class="text-[10px] text-gray-400 mt-1">
            @php $total = $row3['newCount'] + $row3['returningCount']; @endphp
            {{ $total > 0 ? round(($row3['newCount'] / $total) * 100) : 0 }}% new
        </p>
    </div>
</div>

{{-- ══════════════ CHARTS: 7-day trends ══════════════ --}}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
        <h3 class="text-sm font-semibold text-gray-700 mb-4">
            Daily Revenue Trend
            <span class="text-xs text-gray-400 font-normal">(7 days ending {{ $rangeEnd->format('d M') }})</span>
        </h3>
        <canvas id="revenueChart" height="200"></canvas>
    </div>
    <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
        <h3 class="text-sm font-semibold text-gray-700 mb-4">
            Daily Visits
            <span class="text-xs text-gray-400 font-normal">(7 days ending {{ $rangeEnd->format('d M') }})</span>
        </h3>
        <canvas id="visitsChart" height="200"></canvas>
    </div>
</div>

{{-- ══════════════ BOTTOM: Dept revenue + Shifts ══════════════ --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    {{-- Revenue by Clinical Service --}}
    <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
        <div class="flex items-center gap-2 mb-4">
            <div class="w-8 h-8 bg-emerald-100 rounded-lg flex items-center justify-center">
                <svg class="w-4 h-4 text-emerald-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/></svg>
            </div>
            <h3 class="text-sm font-bold text-gray-800">Revenue by Clinical Service</h3>
            <span class="text-[11px] text-gray-400 ml-auto" title="OPD / IPD / Dental / ANC / Maternity / OTC. For item-department breakdown (Pharmacy, Lab, etc.), see Reports → Revenue by Item Department.">ⓘ</span>
        </div>
        @if($revenueByDept->count())
            @php $deptTotal = $revenueByDept->sum('total'); @endphp
            <table class="w-full">
                <tbody>
                    @foreach($revenueByDept as $dept)
                        @php $pct = $deptTotal > 0 ? ($dept->total / $deptTotal) * 100 : 0; @endphp
                        <tr class="border-b border-gray-50 last:border-0">
                            <td class="py-2">
                                <div class="flex items-center justify-between mb-1">
                                    <span class="text-xs text-gray-700 font-semibold">{{ $dept->department ?: 'Unassigned' }}</span>
                                    <span class="text-xs text-gray-900 font-bold">{{ $fmtKes($dept->total) }}</span>
                                </div>
                                <div class="h-1.5 bg-gray-100 rounded-full overflow-hidden">
                                    <div class="h-full bg-emerald-400 rounded-full" style="width: {{ $pct }}%"></div>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <p class="text-xs text-gray-400 py-4">No revenue recorded for this date.</p>
        @endif
    </div>

    {{-- Shift Tables (Day + Night). For a multi-day range, these show
         the LAST date's shifts (most recent). The subtitle below the
         heading clarifies. --}}
    @foreach(['day' => ['label' => 'Day Shift', 'time' => '8:00 AM – 8:00 PM', 'icon' => 'M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z', 'bg' => 'amber'], 'night' => ['label' => 'Night Shift', 'time' => '8:00 PM – 8:00 AM', 'icon' => 'M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z', 'bg' => 'indigo']] as $shift => $meta)
        @php $s = $dashboardShifts[$shift]; @endphp
        <div class="bg-white rounded-xl border border-gray-100 p-5 shadow-sm">
            <div class="flex items-center gap-2 mb-4">
                <div class="w-8 h-8 bg-{{ $meta['bg'] }}-100 rounded-lg flex items-center justify-center">
                    <svg class="w-4 h-4 text-{{ $meta['bg'] }}-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $meta['icon'] }}"/></svg>
                </div>
                <div>
                    <h3 class="text-sm font-bold text-gray-800">
                        {{ $meta['label'] }}
                        @if(!$isSingleDay)
                            <span class="text-[10px] font-normal text-gray-400 ml-1">({{ $rangeEnd->format('d M') }})</span>
                        @endif
                    </h3>
                    <p class="text-[10px] text-gray-400">{{ $meta['time'] }}</p>
                </div>
            </div>
            <table class="w-full">
                <tbody>
                    <tr class="border-b border-gray-100"><td class="py-2 text-xs text-gray-600">Cash</td><td class="py-2 text-xs text-right font-semibold">{{ $fmtKes($s['cash']) }}</td></tr>
                    <tr class="border-b border-gray-100"><td class="py-2 text-xs text-gray-600">M-Pesa / Mobile</td><td class="py-2 text-xs text-right font-semibold">{{ $fmtKes($s['mpesa']) }}</td></tr>
                    <tr class="border-b border-gray-100"><td class="py-2 text-xs text-gray-600">Insurance</td><td class="py-2 text-xs text-right font-semibold">{{ $fmtKes($s['insurance']) }}</td></tr>
                    <tr class="border-b border-gray-100"><td class="py-2 text-xs text-gray-600">Card / Bank</td><td class="py-2 text-xs text-right font-semibold">{{ $fmtKes($s['card']) }}</td></tr>
                    <tr class="bg-gray-50"><td class="py-2 text-xs font-bold">Shift Total</td><td class="py-2 text-xs text-right font-bold text-emerald-600">{{ $fmtKes($s['total']) }}</td></tr>
                </tbody>
            </table>
        </div>
    @endforeach
</div>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const revData = @json($revenueByDay);
const visitData = @json($visitsByDay);

// Short-form day labels: "22 Apr"
const shortLabel = d => {
    const dt = new Date(d);
    return dt.toLocaleDateString('en-GB', { day: '2-digit', month: 'short' });
};

new Chart(document.getElementById('revenueChart'), {
    type: 'bar',
    data: {
        labels: revData.map(d => shortLabel(d.date)),
        datasets: [{
            label: 'Revenue (KES)',
            data: revData.map(d => d.total),
            backgroundColor: 'rgba(14, 165, 233, 0.75)',
            borderRadius: 6,
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: { display: false },
            tooltip: {
                callbacks: {
                    label: ctx => 'KES ' + Number(ctx.parsed.y).toLocaleString('en-KE')
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    callback: v => v >= 1000 ? (v/1000) + 'k' : v
                }
            }
        }
    }
});

new Chart(document.getElementById('visitsChart'), {
    type: 'line',
    data: {
        labels: visitData.map(d => shortLabel(d.date)),
        datasets: [{
            label: 'Visits',
            data: visitData.map(d => d.total),
            borderColor: '#22c55e',
            backgroundColor: 'rgba(34, 197, 94, 0.15)',
            fill: true,
            tension: 0.3,
            pointRadius: 4,
            pointBackgroundColor: '#22c55e',
        }]
    },
    options: {
        responsive: true,
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }
    }
});
</script>
@endsection