@extends('layouts.app')

@section('title', 'تحليلات المواعيد')

@php
    $statusMeta = [
        'scheduled' => ['label' => 'مجدول', 'color' => 'info', 'icon' => 'calendar'],
        'confirmed' => ['label' => 'مؤكد', 'color' => 'cyan', 'icon' => 'check'],
        'checked_in' => ['label' => 'وصل', 'color' => 'azure', 'icon' => 'user-check'],
        'in_progress' => ['label' => 'قيد المعاينة', 'color' => 'warning', 'icon' => 'stethoscope'],
        'completed' => ['label' => 'مكتمل', 'color' => 'success', 'icon' => 'check'],
        'cancelled' => ['label' => 'ملغي', 'color' => 'danger', 'icon' => 'x'],
        'no_show' => ['label' => 'لم يحضر', 'color' => 'orange', 'icon' => 'user-x'],
    ];
@endphp

@section('content')
<x-clinic-hero
    title="تحليلات المواعيد"
    subtitle="معدلات الإكمال، الإلغاء، عدم الحضور، والتوزيع الأسبوعي"
    icon="ti-chart-pie"
    tone="appointments"
    :stats="[
        ['icon' => 'ti-calendar-stats', 'value' => number_format($total), 'label' => 'إجمالي المواعيد'],
        ['icon' => 'ti-check', 'value' => $rates['completed'].'%', 'label' => 'معدل الإكمال'],
        ['icon' => 'ti-user-x', 'value' => $rates['no_show'].'%', 'label' => 'لم يحضر'],
        ['icon' => 'ti-x', 'value' => $rates['cancelled'].'%', 'label' => 'إلغاء'],
    ]"
>
    <x-slot:actions>
        <button class="btn btn-light" onclick="window.print()">
            <i class="ti ti-printer me-1"></i> طباعة
        </button>
        <a href="{{ route('reports.index') }}" class="btn btn-outline-light">
            <i class="ti ti-arrow-right me-1"></i> كل التقارير
        </a>
    </x-slot:actions>
</x-clinic-hero>

<div class="card clinic-section mb-3">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-3">
                <label class="form-label small">من تاريخ</label>
                <input type="date" name="from" value="{{ $from }}" class="form-control">
            </div>
            <div class="col-md-3">
                <label class="form-label small">إلى تاريخ</label>
                <input type="date" name="to" value="{{ $to }}" class="form-control">
            </div>
            <div class="col-md-3">
                <button class="btn btn-primary w-100">
                    <i class="ti ti-filter me-1"></i> تطبيق
                </button>
            </div>
            <div class="col-md-3 text-md-end small text-muted">
                {{ \Carbon\Carbon::parse($from)->translatedFormat('j M Y') }}
                ← {{ \Carbon\Carbon::parse($to)->translatedFormat('j M Y') }}
            </div>
        </form>
    </div>
</div>

@if($total === 0)
    <div class="card clinic-section">
        <div class="card-body">
            <div class="empty-card-rich">
                <i class="ti ti-calendar-off"></i>
                <h3>لا توجد مواعيد في هذه الفترة</h3>
                <p>غيّر النطاق الزمني أو سجّل مواعيد جديدة لتحليلها.</p>
            </div>
        </div>
    </div>
@else
    <div class="row row-cards g-3">
        {{-- Status donut --}}
        <div class="col-md-6 col-xl-4">
            <div class="card clinic-section h-100">
                <div class="card-header">
                    <h3 class="card-title"><i class="ti ti-chart-pie me-1"></i> توزيع الحالات</h3>
                </div>
                <div class="card-body">
                    <div id="statusChart" style="min-height: 280px"></div>
                </div>
            </div>
        </div>

        {{-- Weekday distribution --}}
        <div class="col-md-6 col-xl-4">
            <div class="card clinic-section h-100">
                <div class="card-header">
                    <h3 class="card-title"><i class="ti ti-calendar-week me-1"></i> التوزيع الأسبوعي</h3>
                </div>
                <div class="card-body">
                    <div id="weekdayChart" style="min-height: 280px"></div>
                </div>
            </div>
        </div>

        {{-- Daily trend --}}
        <div class="col-xl-4">
            <div class="card clinic-section h-100">
                <div class="card-header">
                    <h3 class="card-title"><i class="ti ti-chart-line me-1"></i> الاتجاه اليومي</h3>
                </div>
                <div class="card-body">
                    <div id="dailyChart" style="min-height: 280px"></div>
                </div>
            </div>
        </div>
    </div>

    {{-- Status breakdown table --}}
    <div class="card clinic-section mt-3">
        <div class="card-header">
            <h3 class="card-title"><i class="ti ti-list me-1"></i> تفصيل الحالات</h3>
        </div>
        <div class="table-responsive">
            <table class="table table-vcenter clinic-table mb-0">
                <thead>
                    <tr>
                        <th>الحالة</th>
                        <th class="text-center">العدد</th>
                        <th>النسبة</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($statusMeta as $key => $meta)
                        @php $count = (int) ($byStatus[$key] ?? 0); @endphp
                        @if($count > 0 || $loop->index < 4)
                            @php $pct = $total > 0 ? round($count / $total * 100, 1) : 0; @endphp
                            <tr>
                                <td>
                                    <span class="status-pill bg-{{ $meta['color'] }}-lt text-{{ $meta['color'] }}">
                                        <i class="ti ti-{{ $meta['icon'] }}"></i>{{ $meta['label'] }}
                                    </span>
                                </td>
                                <td class="text-center fw-bold">{{ number_format($count) }}</td>
                                <td style="min-width: 200px;">
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="progress flex-grow-1" style="height:6px;">
                                            <div class="progress-bar bg-{{ $meta['color'] }}"
                                                 style="width:{{ $pct }}%"></div>
                                        </div>
                                        <strong class="text-mono-en text-{{ $meta['color'] }}">{{ $pct }}%</strong>
                                    </div>
                                </td>
                            </tr>
                        @endif
                    @endforeach
                </tbody>
                <tfoot>
                    <tr style="background:#f8fafc;">
                        <th class="text-end">الإجمالي</th>
                        <th class="text-center">{{ number_format($total) }}</th>
                        <th></th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
@endif
@endsection

@push('scripts')
<script>
@if($total > 0)
document.addEventListener('DOMContentLoaded', function () {
    const cairoFont = { fontFamily: 'Cairo, sans-serif' };

    // Status donut.
    new ApexCharts(document.querySelector('#statusChart'), {
        chart: { type: 'donut', height: 280, ...cairoFont },
        series: @json(array_values(array_map(fn($k) => (int) ($byStatus[$k] ?? 0), array_keys($statusMeta)))),
        labels: @json(array_values(array_map(fn($v) => $v['label'], $statusMeta))),
        colors: ['#0ea5e9', '#06b6d4', '#3b82f6', '#eab308', '#22c55e', '#ef4444', '#f97316'],
        legend: { position: 'bottom', fontFamily: 'Cairo', fontSize: '12px' },
        plotOptions: { pie: { donut: { size: '60%',
            labels: { show: true, total: { show: true, label: 'الإجمالي', fontFamily: 'Cairo' } } } } },
        dataLabels: { style: cairoFont, formatter: v => Math.round(v) + '%' },
    }).render();

    // Weekday bar.
    new ApexCharts(document.querySelector('#weekdayChart'), {
        chart: { type: 'bar', height: 280, toolbar: { show: false }, ...cairoFont },
        series: [{ name: 'مواعيد', data: @json($weekdayValues) }],
        colors: ['#0ea5e9'],
        plotOptions: { bar: { columnWidth: '55%', borderRadius: 6 } },
        xaxis: { categories: @json($weekdayLabels), labels: { style: cairoFont } },
        yaxis: { labels: { style: cairoFont } },
        grid: { borderColor: '#f1f5f9' },
        dataLabels: { enabled: false },
    }).render();

    // Daily line.
    new ApexCharts(document.querySelector('#dailyChart'), {
        chart: { type: 'area', height: 280, toolbar: { show: false }, ...cairoFont },
        series: [{ name: 'مواعيد', data: @json($dailyValues) }],
        colors: ['#066f6c'],
        stroke: { curve: 'smooth', width: 3 },
        fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: .4, opacityTo: 0 } },
        xaxis: { categories: @json($dailyLabels), labels: { style: cairoFont } },
        yaxis: { labels: { style: cairoFont } },
        grid: { borderColor: '#f1f5f9' },
        dataLabels: { enabled: false },
    }).render();
});
@endif
</script>
@endpush