@extends('layouts.app')
@section('title', __('Dashboard').' — '.$tenant->name)

@section('content')
@php($tz = \App\Support\ClinicTime::timezone())
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
    <h1 class="h4 fw-bold mb-0">{{ __('Dashboard') }}</h1>
    <a href="{{ route('tenant.appointments.index') }}" class="btn mb-btn-primary btn-sm">+ {{ __('New appointment') }}</a>
</div>

@if($subscription?->onTrial())
    <div class="alert alert-info">
        🎉 {{ __('Trial') }} — {{ $subscription->daysLeft() }} {{ __('days left') }} ·
        <a href="{{ route('tenant.billing') }}">{{ __('Billing') }}</a>
    </div>
@endif

<div class="row g-3 mb-3">
    @foreach([
        [__("Today's appointments"), $kpis['today_total'], '📅'],
        [__('Completed today'), $kpis['today_completed'], '✅'],
        [__('This week'), $kpis['week_total'], '🗓'],
        [__('No-shows this week'), $kpis['no_shows_week'], '🚫'],
        [__('New patients this week'), $kpis['new_patients_week'], '✨'],
        [__('Total patients'), $kpis['patients_total'], '👥'],
    ] as [$label, $value, $icon])
        <div class="col-6 col-md-4 col-xl-2">
            <div class="mb-card p-3">
                <div class="mb-muted small">{{ $icon }} {{ $label }}</div>
                <div class="kpi-value">{{ $value }}</div>
            </div>
        </div>
    @endforeach
</div>

@if($money)
<div class="row g-3 mb-3">
    @foreach([
        [__('Due today'), $money['due_today'], '#0EA5E9'],
        [__('Due this week'), $money['due_week'], '#8B5CF6'],
        [__('Overdue'), $money['overdue'], '#EF4444'],
        [__('Total outstanding'), $money['total_outstanding'], '#F5A524'],
    ] as $w)
        <div class="col-6 col-xl-3">
            <a class="text-decoration-none" href="{{ route('tenant.installments.index') }}">
                <div class="mb-card p-3" style="border-inline-start: 4px solid {{ $w[2] }}">
                    <div class="mb-muted small">{{ $w[0] }}</div>
                    <div class="kpi-value" dir="ltr">{{ number_format($w[1]) }} <span class="fs-6 mb-muted">IQD</span></div>
                </div>
            </a>
        </div>
    @endforeach
</div>
@endif

<div class="row g-3">
    <div class="col-lg-7">
        <div class="mb-card p-4">
            <h2 class="h6 fw-semibold mb-3">{{ __('Appointments — last 14 days') }}</h2>
            <canvas id="apptChart" height="110"></canvas>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="mb-card p-3">
            <h2 class="h6 fw-semibold px-2 pt-2">{{ __("Today's list") }}</h2>
            <table class="table mb-table align-middle mb-0">
                <tbody>
                @forelse($todays as $a)
                    <tr>
                        <td dir="ltr" class="fw-semibold">{{ $a->starts_at->setTimezone($tz)->format('H:i') }}</td>
                        <td>
                            <a href="{{ route('tenant.patients.show', $a->patient_id) }}">{{ $a->patient->full_name }}</a>
                            <div class="mb-muted small">{{ $a->dentist->name }}</div>
                        </td>
                        <td class="text-end">
                            <span class="status-chip" style="background: {{ $a->status->color() }}">{{ $a->status->label() }}</span>
                        </td>
                    </tr>
                @empty
                    <tr><td class="mb-muted py-4 text-center">{{ __('No appointments today.') }}</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

@push('page-scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('apptChart'), {
    type: 'bar',
    data: {
        labels: @json($chart->pluck('label')),
        datasets: [{
            data: @json($chart->pluck('count')),
            backgroundColor: getComputedStyle(document.documentElement).getPropertyValue('--mb-primary'),
            borderRadius: 6,
        }],
    },
    options: {
        plugins: { legend: { display: false } },
        scales: { y: { beginAtZero: true, ticks: { precision: 0 } } },
    },
});
</script>
@endpush
@endsection