@extends('layouts.app')

@section('title', $titlePrefix . ' KPI Dashboard')

@section('content')
<section class="content-header">
    <h1><i class="fas fa-chart-line"></i> {{ $titlePrefix }} KPI Dashboard
        <small>this month at a glance</small></h1>
</section>

<section class="content">
    @php
        $revPeak = max(1, count($dailyRev) ? max(array_values($dailyRev)) : 1);
        $topPeak = $topTypes->max('c') ?: 1;
    @endphp

    {{-- KPI cards --}}
    <div class="row">
        @php
        $cards = [
            ["Today's appointments", number_format($todayCount), 'fa-calendar-day', '#2563eb'],
            ['This week', number_format($weekCount), 'fa-calendar-week', '#0ea5e9'],
            ['Appointments (MTD)', number_format($mtdCount), 'fa-calendar-check', '#7c3aed'],
            ['Completed (MTD)', number_format($mtdCompleted), 'fa-check-circle', '#16a34a'],
            ['No-show rate (30d)', $noShowRate . '%', 'fa-user-slash', $noShowRate >= 15 ? '#dc2626' : ($noShowRate >= 7 ? '#d97706' : '#16a34a')],
            ['Revenue (MTD)', $currency . number_format($mtdRevenue, 2), 'fa-coins', '#0f766e'],
        ];
        @endphp
        @foreach($cards as [$label, $val, $icon, $color])
            <div class="col-md-2 col-sm-4 col-xs-6">
                <div style="background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:12px;margin-bottom:12px;">
                    <div style="display:flex;align-items:center;gap:10px;">
                        <span style="width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:{{ $color }};color:#fff;flex:none;"><i class="fas {{ $icon }}"></i></span>
                        <div style="min-width:0;">
                            <div style="font-size:17px;font-weight:700;line-height:1.1;overflow:hidden;text-overflow:ellipsis;">{{ $val }}</div>
                            <div class="text-muted" style="font-size:11px;">{{ $label }}</div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <div class="row">
        {{-- Revenue trend --}}
        <div class="col-md-7">
            <div class="box box-primary">
                <div class="box-header with-border"><h3 class="box-title">Revenue — last 14 days</h3></div>
                <div class="box-body">
                    <div style="display:flex;align-items:flex-end;gap:4px;height:150px;">
                        @foreach($dailyRev as $d => $amt)
                            <div title="{{ $d }} — {{ $currency }}{{ number_format($amt, 2) }}"
                                 style="flex:1;min-width:4px;background:#0f766e;border-radius:2px 2px 0 0;height:{{ max(2, round($amt / $revPeak * 100)) }}%;"></div>
                        @endforeach
                    </div>
                    <div class="text-muted" style="font-size:11px;margin-top:6px;display:flex;justify-content:space-between;">
                        <span>{{ \Illuminate\Support\Carbon::parse(array_key_first($dailyRev))->format('d M') }}</span>
                        <span>{{ \Illuminate\Support\Carbon::parse(array_key_last($dailyRev))->format('d M') }}</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Top services --}}
        <div class="col-md-5">
            <div class="box box-default">
                <div class="box-header with-border"><h3 class="box-title">Top services (MTD)</h3></div>
                <div class="box-body">
                    <table class="table table-condensed" style="margin-bottom:0;font-size:13px;">
                        @forelse($topTypes as $t)
                            <tr>
                                <td style="text-transform:capitalize;white-space:nowrap;">{{ str_replace('_', ' ', $t->type) }}</td>
                                <td style="width:55%;">
                                    <div style="background:#eef2ff;border-radius:4px;overflow:hidden;height:16px;">
                                        <div style="background:#6366f1;height:100%;width:{{ round($t->c / $topPeak * 100) }}%;"></div>
                                    </div>
                                </td>
                                <td class="text-right" style="width:42px;">{{ $t->c }}</td>
                            </tr>
                        @empty
                            <tr><td class="text-muted text-center">No appointments this month.</td></tr>
                        @endforelse
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Doctor utilisation --}}
    <div class="box box-default">
        <div class="box-header with-border"><h3 class="box-title">Doctor utilisation (MTD)</h3></div>
        <div class="box-body table-responsive">
            <table class="table table-condensed" style="font-size:13px;margin-bottom:0;">
                <thead><tr><th>Doctor</th><th class="text-right">Appointments</th><th class="text-right">Completed</th><th class="text-right">Completion</th></tr></thead>
                <tbody>
                @forelse($byDoctor as $d)
                    <tr>
                        <td>{{ $d['doctor'] }}</td>
                        <td class="text-right">{{ number_format($d['total']) }}</td>
                        <td class="text-right">{{ number_format($d['completed']) }}</td>
                        <td class="text-right" style="color:{{ $d['rate'] >= 80 ? '#16a34a' : ($d['rate'] >= 50 ? '#d97706' : '#dc2626') }};">{{ $d['rate'] }}%</td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="text-muted text-center">No doctor activity this month.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        <div class="box-footer">
            <a href="{{ $reportsRoute }}" class="btn btn-default btn-sm"><i class="fa fa-list"></i> Detailed reports</a>
        </div>
    </div>
</section>
@endsection
