@extends('dashboard.admin.layouts.master')

@php
    // Shared by the status strip, today's table and the status chart so a status keeps one color everywhere.
    $statusColors = ['pending' => 'warning', 'confirmed' => 'success', 'completed' => 'primary', 'cancelled' => 'danger'];
    $typeColors = ['visit' => 'primary', 'online' => 'info', 'followup' => 'warning'];
@endphp

@section('content')
    <div class="d-flex flex-column flex-column-fluid">
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack flex-wrap gap-3">
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">{{ trans('clinic.home.title') }}</h1>
                </div>
                <div class="d-flex align-items-center gap-2">
                    @can('clinic.bookings.create')
                        <a href="{{ route('admin.dashboard.clinic.bookings.create') }}" class="btn btn-sm fw-bold btn-primary">
                            <i class="ki-duotone ki-plus fs-3"></i>{{ trans('clinic.home.new_booking') }}
                        </a>
                    @endcan
                    @can('clinic.patients.create')
                        <a href="{{ route('admin.dashboard.clinic.patients.create') }}" class="btn btn-sm fw-bold btn-light-primary">
                            <i class="ki-duotone ki-people fs-3"><span class="path1"></span><span class="path2"></span></i>{{ trans('clinic.home.new_patient') }}
                        </a>
                    @endcan
                </div>
            </div>
        </div>

        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-xxl">
                @include('dashboard.admin.clinic.home.partials._counters')
                @include('dashboard.admin.clinic.home.partials._today_summary')
                @can('crm.leads.view')
                    @include('dashboard.admin.clinic.home.partials._crm_follow_ups')
                @endcan
                @include('dashboard.admin.clinic.home.partials._today_table')
                @include('dashboard.admin.clinic.home.partials._charts')
            </div>
        </div>
    </div>
@endsection

@section('js')
    @php
        $chartData = [
            'daily' => $charts['daily'],
            'status' => [
                'labels' => array_map(fn ($status) => trans('clinic.bookings.statuses.'.$status), $charts['status']['keys']),
                'colors' => array_map(fn ($status) => $statusColors[$status], $charts['status']['keys']),
                'series' => $charts['status']['series'],
            ],
            'types' => [
                'labels' => array_map(fn ($type) => trans('clinic.bookings.'.$type), $charts['types']['keys']),
                'colors' => array_map(fn ($type) => $typeColors[$type], $charts['types']['keys']),
                'series' => $charts['types']['series'],
            ],
            'specialties' => $charts['specialties'],
            // Money figures only reach the page for admins allowed to see revenue.
            'revenue' => auth('admin')->user()->can('clinic.reports.view') ? $charts['revenue'] : null,
            'text' => [
                'bookings' => trans('clinic.home.bookings'),
                'revenue' => trans('clinic.home.revenue'),
                'noData' => trans('clinic.home.no_data'),
            ],
        ];
    @endphp
    <script>
        (function () {
            const data = @json($chartData);
            const isRtl = document.documentElement.getAttribute('dir') === 'rtl';

            // Theme colors come from Bootstrap's CSS variables so the charts follow light/dark mode.
            const cssVar = (name) => getComputedStyle(document.documentElement).getPropertyValue('--bs-' + name).trim();
            const color = (name) => cssVar(name) || '#3E97FF';
            const gray = () => cssVar('gray-500') || '#99A1B7';
            const border = () => cssVar('border-dashed-color') || cssVar('gray-200') || '#F1F1F4';
            const number = (value) => Number(value).toLocaleString(undefined, {maximumFractionDigits: 2});

            const base = () => ({
                chart: {fontFamily: 'inherit', toolbar: {show: false}, background: 'transparent'},
                dataLabels: {enabled: false},
                legend: {labels: {colors: gray()}},
                grid: {borderColor: border(), strokeDashArray: 4, yaxis: {lines: {show: true}}},
                tooltip: {style: {fontSize: '12px'}},
                theme: {mode: document.documentElement.getAttribute('data-bs-theme') === 'dark' ? 'dark' : 'light'},
            });
            const axis = (categories) => ({
                categories: categories,
                labels: {style: {colors: gray(), fontSize: '12px'}},
                axisBorder: {show: false},
                axisTicks: {show: false},
            });
            const yAxis = (formatter) => ({
                opposite: isRtl,
                labels: {style: {colors: gray(), fontSize: '12px'}, formatter: formatter},
            });

            const builders = {
                chart_daily: () => ({
                    ...base(),
                    chart: {...base().chart, type: 'area', height: 300},
                    series: [{name: data.text.bookings, data: data.daily.series}],
                    xaxis: {...axis(data.daily.labels), reversed: isRtl, tickAmount: 10},
                    yaxis: yAxis((value) => Math.round(value)),
                    colors: [color('primary')],
                    stroke: {curve: 'smooth', width: 3},
                    fill: {type: 'gradient', gradient: {shadeIntensity: 1, opacityFrom: 0.4, opacityTo: 0.05}},
                    empty: data.daily.series.every((value) => value === 0),
                }),
                chart_status: () => ({
                    ...base(),
                    chart: {...base().chart, type: 'donut', height: 300},
                    series: data.status.series,
                    labels: data.status.labels,
                    colors: data.status.colors.map(color),
                    legend: {...base().legend, position: 'bottom'},
                    plotOptions: {pie: {donut: {size: '65%', labels: {show: true, total: {show: true, label: data.text.bookings, color: gray()}}}}},
                    stroke: {width: 0},
                    empty: data.status.series.every((value) => value === 0),
                }),
                chart_revenue: () => data.revenue && ({
                    ...base(),
                    chart: {...base().chart, type: 'bar', height: 300},
                    series: [{name: data.text.revenue, data: data.revenue.series}],
                    xaxis: {...axis(data.revenue.labels), reversed: isRtl},
                    yaxis: yAxis(number),
                    tooltip: {...base().tooltip, y: {formatter: number}},
                    colors: [color('success')],
                    plotOptions: {bar: {borderRadius: 5, columnWidth: '45%'}},
                    empty: data.revenue.series.every((value) => value === 0),
                }),
                chart_types: () => ({
                    ...base(),
                    chart: {...base().chart, type: 'donut', height: 300},
                    series: data.types.series,
                    labels: data.types.labels,
                    colors: data.types.colors.map(color),
                    legend: {...base().legend, position: 'bottom'},
                    plotOptions: {pie: {donut: {size: '65%', labels: {show: true, total: {show: true, label: data.text.bookings, color: gray()}}}}},
                    stroke: {width: 0},
                    empty: data.types.series.every((value) => value === 0),
                }),
                chart_specialties: () => ({
                    ...base(),
                    chart: {...base().chart, type: 'bar', height: Math.max(300, data.specialties.labels.length * 42)},
                    series: [{name: data.text.bookings, data: data.specialties.series}],
                    xaxis: axis(data.specialties.labels),
                    yaxis: {opposite: isRtl, labels: {style: {colors: gray(), fontSize: '12px'}, maxWidth: 180}},
                    colors: [color('warning')],
                    plotOptions: {bar: {horizontal: true, borderRadius: 4, barHeight: '55%', distributed: false}},
                    dataLabels: {enabled: true, style: {colors: ['#fff']}},
                    empty: data.specialties.series.length === 0,
                }),
            };

            const rendered = [];
            const render = () => {
                rendered.splice(0).forEach((chart) => chart.destroy());
                Object.entries(builders).forEach(([id, build]) => {
                    const element = document.getElementById(id);
                    const options = build();
                    if (!element || !options) {
                        return;
                    }
                    element.innerHTML = '';
                    if (options.empty) {
                        element.innerHTML = '<div class="d-flex flex-column align-items-center justify-content-center text-muted h-300px">'
                            + '<i class="ki-duotone ki-chart-simple fs-3x text-gray-300 mb-3"><span class="path1"></span><span class="path2"></span></i>'
                            + '<span class="no-data-text"></span></div>';
                        element.querySelector('.no-data-text').textContent = data.text.noData;
                        return;
                    }
                    delete options.empty;
                    const chart = new ApexCharts(element, options);
                    chart.render();
                    rendered.push(chart);
                });
            };

            render();
            if (typeof KTThemeMode !== 'undefined') {
                KTThemeMode.on('kt.thememode.change', render);
            }

            // Status strip chips filter today's table without a reload.
            const chips = document.querySelectorAll('#today_status_filter [data-status]');
            const rows = document.querySelectorAll('#today_bookings_table tbody tr[data-status]');
            chips.forEach((chip) => chip.addEventListener('click', () => {
                const status = chip.dataset.status;
                chips.forEach((other) => other.classList.toggle('active', other === chip));
                rows.forEach((row) => row.classList.toggle('d-none', status !== '' && row.dataset.status !== status));
            }));
        })();
    </script>
@endsection