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

@php
    $money = fn ($amount) => number_format((float) $amount, 2);
    $typeColors = ['visit' => 'primary', 'online' => 'info', 'followup' => 'warning'];
    $chart = [
        'labels' => $report['chart']['labels'],
        'series' => collect($report['chart']['series'])->map(fn ($s) => ['name' => trans('clinic.bookings.' . $s['key']), 'data' => $s['data'], 'color' => $typeColors[$s['key']]])->all(),
    ];
@endphp

@section('toolbar')
    @include('dashboard.admin.clinic.reports.partials.header', ['title' => trans('clinic.reports_center.revenue')])
@endsection

@section('content')
    <div id="kt_app_content_container" class="app-container container-xxl">
        @include('dashboard.admin.clinic.reports.partials.filters', ['fields' => ['branch', 'clinic', 'doctor'], 'csv' => true])

        <div class="row g-5 mb-7">
            <div class="col-lg-3 col-6">
                <div class="card card-flush h-100 bg-light-success"><div class="card-body py-5">
                    <div class="text-muted fs-7">{{ trans('clinic.reports_center.total_revenue') }}</div>
                    <div class="fs-2x fw-bolder text-success" dir="ltr">{{ $money($report['totals']['revenue']) }}</div>
                    <div class="text-muted fs-8">{{ trans('clinic.reports_center.bookings_count', ['count' => $report['totals']['bookings']]) }}</div>
                </div></div>
            </div>
            @foreach ($report['types'] as $type => $row)
                <div class="col-lg-3 col-6">
                    <div class="card card-flush h-100"><div class="card-body py-5">
                        <div class="d-flex align-items-center gap-2 text-muted fs-7"><span class="bullet bullet-dot bg-{{ $typeColors[$type] }} h-8px w-8px"></span>{{ trans('clinic.bookings.' . $type) }}</div>
                        <div class="fs-2 fw-bold text-gray-900" dir="ltr">{{ $money($row['revenue']) }}</div>
                        <div class="text-muted fs-8">{{ trans('clinic.reports_center.bookings_count', ['count' => $row['bookings']]) }} · {{ trans('clinic.reports_center.profit') }} {{ $money($row['center_share']) }}</div>
                    </div></div>
                </div>
            @endforeach
        </div>

        <div class="card card-flush mb-7">
            <div class="card-header"><h3 class="card-title">{{ trans($report['monthly'] ? 'clinic.reports_center.revenue_by_month' : 'clinic.reports_center.revenue_by_day') }}</h3></div>
            <div class="card-body pt-0"><div id="revenueChart" style="height: 340px"></div></div>
        </div>

        <div class="row g-5">
            <div class="col-md-4">
                <div class="card card-flush h-100"><div class="card-body">
                    <div class="fw-bold fs-5 mb-4"><i class="bi bi-credit-card text-primary me-2"></i>{{ trans('clinic.reports_center.payments') }}</div>
                    <div class="d-flex justify-content-between py-2 border-bottom"><span class="text-muted">{{ trans('clinic.reports_center.online_paid') }}</span><span class="fw-bold">{{ $money($report['online_paid']) }}</span></div>
                    <div class="d-flex justify-content-between py-2"><span class="text-muted">{{ trans('clinic.reports_center.unpaid', ['count' => $report['pending']['count']]) }}</span><span class="fw-bold text-warning">{{ $money($report['pending']['amount']) }}</span></div>
                </div></div>
            </div>
            <div class="col-md-4">
                <div class="card card-flush h-100"><div class="card-body">
                    <div class="fw-bold fs-5 mb-4"><i class="bi bi-tags text-warning me-2"></i>{{ trans('sidebar.offer_subscriptions') }}</div>
                    @foreach (['new' => 'dash_site.offer_sub_new', 'contacted' => 'dash_site.offer_sub_contacted'] as $status => $label)
                        <div class="d-flex justify-content-between py-2 {{ $loop->first ? 'border-bottom' : '' }}"><span class="text-muted">{{ trans($label) }}</span><span class="fw-bold">{{ $report['subscriptions'][$status] ?? 0 }}</span></div>
                    @endforeach
                    <div class="d-flex justify-content-between py-2 border-top"><span class="text-muted">{{ trans('clinic.reports_center.subscriptions_paid', ['count' => (int) $report['subscriptions_paid']->orders]) }}</span><span class="fw-bold text-success">{{ number_format((float) $report['subscriptions_paid']->total, 2) }}</span></div>
                </div></div>
            </div>
            <div class="col-md-4">
                <div class="card card-flush h-100"><div class="card-body">
                    <div class="fw-bold fs-5 mb-4"><i class="bi bi-capsule text-info me-2"></i>{{ trans('sidebar.medicine_orders') }}</div>
                    <div class="d-flex justify-content-between py-2 border-bottom"><span class="text-muted">{{ trans('clinic.reports_center.orders') }}</span><span class="fw-bold">{{ (int) $report['medicine']->orders }}</span></div>
                    <div class="d-flex justify-content-between py-2 border-bottom"><span class="text-muted">{{ trans('clinic.medicine_orders.total') }}</span><span class="fw-bold">{{ $money($report['medicine']->total) }}</span></div>
                    <div class="d-flex justify-content-between py-2"><span class="text-muted">{{ trans('clinic.medicine_orders.center_amount') }}</span><span class="fw-bold text-success">{{ $money($report['medicine']->center) }}</span></div>
                </div></div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(function () {
            var chart = @json($chart);
            var css = getComputedStyle(document.documentElement);
            new ApexCharts(document.getElementById('revenueChart'), {
                chart: {type: 'bar', height: 340, stacked: true, toolbar: {show: false}, fontFamily: 'inherit'},
                series: chart.series.map(function (s) { return {name: s.name, data: s.data}; }),
                colors: chart.series.map(function (s) { return css.getPropertyValue('--bs-' + s.color).trim(); }),
                xaxis: {categories: chart.labels, labels: {rotate: -45, style: {fontSize: '11px'}}},
                yaxis: {labels: {formatter: function (v) { return Math.round(v).toLocaleString(); }}},
                plotOptions: {bar: {columnWidth: '60%', borderRadius: 3}},
                dataLabels: {enabled: false},
                legend: {position: 'top'},
                tooltip: {y: {formatter: function (v) { return v.toFixed(2); }}}
            }).render();
        });
    </script>
@endsection