@extends('site.layouts.app')
@section('title', 'Dashboard')
@section('subtitle', 'Control Panel')
@section('stylesheets')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
<style type="text/css">
    .product-wrapper {
        display: flex;
    }

    .dataTables_length {
        display: none;
    }
</style>
@endsection
@section('content')
<div class="container-fluid">

    <div class="row">
        <div class="col">

            <div class="h-100">
                <div class="row mb-3 pb-1">
                    <div class="col-12">
                        <div class="d-flex align-items-lg-center flex-lg-row flex-column">
                            <div class="flex-grow-1">
                                <h4 class="fs-16 mb-1">Good Morning, {{ Auth::guard()->user()->name }}</h4>
                                <p class="text-muted mb-0">Here's what's happening with your store today.</p>
                            </div>
                            <div class="mt-3 mt-lg-0">

                            </div>
                        </div>
                    </div>
                </div>

                <div class="row row-cols-xl-4 row-cols-md-2 row-cols-1 g-3">
                    <!-- Remaining Patient Orders -->
                    <div class="col">
                        <div class="card card-animate" style="background-color: #3F51B5;">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">Remaining
                                            Patient Orders</p>
                                    </div>
                                </div>
                                <div class="d-flex align-items-end justify-content-between mt-4">
                                    <div>
                                        <h4 class="fs-22 fw-bold ff-secondary text-white mb-4" id="patient-remaining">0
                                        </h4>
                                        <a href="{{ route('site.orderreport.new.index', ['site' => $site->slug]) }}?type=Patient"
                                            class="text-decoration-underline text-white-50">View orders</a>
                                    </div>
                                    <div class="avatar-sm flex-shrink-0">
                                        <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                                            <i class="bx bx-user-circle text-white"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Remaining Companion Orders -->
                    <div class="col">
                        <div class="card card-animate" style="background-color: #5C6BC0;">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">Remaining
                                            Companion Orders</p>
                                    </div>
                                </div>
                                <div class="d-flex align-items-end justify-content-between mt-4">
                                    <div>
                                        <h4 class="fs-22 fw-bold ff-secondary text-white mb-4" id="companion-remaining">
                                            0</h4>
                                        <a href="{{ route('site.orderreport.new.index', ['site' => $site->slug]) }}?type=Companion"
                                            class="text-decoration-underline text-white-50">View details</a>
                                    </div>
                                    <div class="avatar-sm flex-shrink-0">
                                        <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                                            <i class="bx bx-group text-white"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Remaining Doctor Orders -->
                    <div class="col">
                        <div class="card card-animate" style="background-color: #7986CB;">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">Remaining
                                            Doctor Orders</p>
                                    </div>
                                </div>
                                <div class="d-flex align-items-end justify-content-between mt-4">
                                    <div>
                                        <h4 class="fs-22 fw-bold ff-secondary text-white mb-4" id="doctor-remaining">0
                                        </h4>
                                        <a href="{{ route('site.orderreport.new.index', ['site' => $site->slug]) }}?type=Doctor"
                                            class="text-decoration-underline text-white-50">View details</a>
                                    </div>
                                    <div class="avatar-sm flex-shrink-0">
                                        <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                                            <i class="bx bx-user-circle text-white"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Remaining General Orders -->
                    <div class="col">
                        <div class="card card-animate" style="background-color: #9FA8DA;">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">Remaining
                                            General Orders</p>
                                    </div>
                                </div>
                                <div class="d-flex align-items-end justify-content-between mt-4">
                                    <div>
                                        <h4 class="fs-22 fw-bold ff-secondary text-white mb-4" id="general-remaining">0
                                        </h4>
                                        <a href="{{ route('site.orderreport.new.index', ['site' => $site->slug]) }}?type=General"
                                            class="text-decoration-underline text-white-50">View details</a>
                                    </div>
                                    <div class="avatar-sm flex-shrink-0">
                                        <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                                            <i class="bx bx-wallet text-white"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Total Patients -->
                    <div class="col">
                        <div class="card card-animate" style="background-color: #2196F3;">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">Total
                                            Patients</p>
                                    </div>
                                </div>
                                <div class="d-flex align-items-end justify-content-between mt-4">
                                    <div>
                                        <h4 id="patient-total" class="fs-22 fw-bold ff-secondary text-white mb-4">
                                            {{ $totalPatient }}
                                        </h4>
                                        <a href="{{ route('site.patientregistration.index', ['site' => $site->slug]) }}?status=active&process_status="
                                            class="text-decoration-underline text-white-50">View details</a>
                                    </div>
                                    <div class="avatar-sm flex-shrink-0">
                                        <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                                            <i class='bx bx-briefcase text-white'></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Unordered Patients -->
                    <div class="col">
                        <div class="card card-animate" style="background-color: #E64A19;">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-grow-1 overflow-hidden">
                                        <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">All
                                            Unordered Patients</p>
                                    </div>
                                </div>
                                <div class="d-flex align-items-end justify-content-between mt-4">
                                    <div>
                                        <p class="fs-22 fw-bold ff-secondary text-white mb-3">
                                            {{ $patientsWithoutOrders }}
                                        </p>
                                        <a href="{{ route('site.patientorder.index', ['site' => $site->slug]) }}"
                                            class="text-decoration-underline text-white-50">View details</a>
                                    </div>
                                    <div class="avatar-sm flex-shrink-0">
                                        <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                                            <i class="bx bx-user text-white"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- <!-- Unordered Patients - Breakfast -->
                        <div class="col">
                            <div class="card card-animate" style="background-color: #FF7043;">
                                <div class="card-body">
                                    <div class="d-flex align-items-center">
                                        <div class="flex-grow-1 overflow-hidden">
                                            <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">Unordered
                                                Patients - Breakfast</p>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-end justify-content-between mt-4">
                                        <div>
                                            <p class="fs-22 fw-bold ff-secondary text-white mb-3" id="breakfast">00</p>
                                            <a href="{{ route('site.patientorder.index', ['site' => $site->slug]) }}"
                    class="text-decoration-underline text-white-50">View details</a>
                </div>
                <div class="avatar-sm flex-shrink-0">
                    <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                        <i class="bx bx-user text-white"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Unordered Patients - Lunch -->
<div class="col">
    <div class="card card-animate" style="background-color: #FF8A65;">
        <div class="card-body">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1 overflow-hidden">
                    <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">Unordered
                        Patients - Lunch</p>
                </div>
            </div>
            <div class="d-flex align-items-end justify-content-between mt-4">
                <div>
                    <p class="fs-22 fw-bold ff-secondary text-white mb-3" id="lunch">00</p>
                    <a href="{{ route('site.patientorder.index', ['site' => $site->slug]) }}"
                        class="text-decoration-underline text-white-50">View details</a>
                </div>
                <div class="avatar-sm flex-shrink-0">
                    <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                        <i class="bx bx-user text-white"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Unordered Patients - Dinner -->
<div class="col">
    <div class="card card-animate" style="background-color: #FFAB91;">
        <div class="card-body">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1 overflow-hidden">
                    <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">Unordered
                        Patients - Dinner</p>
                </div>
            </div>
            <div class="d-flex align-items-end justify-content-between mt-4">
                <div>
                    <p class="fs-22 fw-bold ff-secondary text-white mb-3" id="dinner">00</p>
                    <a href="{{ route('site.patientorder.index', ['site' => $site->slug]) }}"
                        class="text-decoration-underline text-white-50">View details</a>
                </div>
                <div class="avatar-sm flex-shrink-0">
                    <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                        <i class="bx bx-user text-white"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Unordered Patients - Morning Snack -->
<div class="col">
    <div class="card card-animate" style="background-color: #eea58f;">
        <div class="card-body">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1 overflow-hidden">
                    <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">Unordered
                        Patients - Morning Snack</p>
                </div>
            </div>
            <div class="d-flex align-items-end justify-content-between mt-4">
                <div>
                    <p class="fs-22 fw-bold ff-secondary text-white mb-3" id="snack-pagi">00</p>
                    <a href="{{ route('site.patientorder.index', ['site' => $site->slug]) }}"
                        class="text-decoration-underline text-white-50">View details</a>
                </div>
                <div class="avatar-sm flex-shrink-0">
                    <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                        <i class="bx bx-user text-white"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Unordered Patients - Afternoon Snack -->
<div class="col">
    <div class="card card-animate" style="background-color: #f3be6f;">
        <div class="card-body">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1 overflow-hidden">
                    <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">Unordered
                        Patients - Afternoon Snack</p>
                </div>
            </div>
            <div class="d-flex align-items-end justify-content-between mt-4">
                <div>
                    <p class="fs-22 fw-bold ff-secondary text-white mb-3" id="snack-sore">00</p>
                    <a href="{{ route('site.patientorder.index', ['site' => $site->slug]) }}"
                        class="text-decoration-underline text-white-50">View details</a>
                </div>
                <div class="avatar-sm flex-shrink-0">
                    <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                        <i class="bx bx-user text-white"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div> --}}

<!-- Employee Orders -->
<div class="col">
    <div class="card card-animate" style="background-color: #607D8B;">
        <div class="card-body">
            <div class="d-flex align-items-center">
                <div class="flex-grow-1 overflow-hidden">
                    <p class="text-uppercase fw-bold text-white-50 text-truncate mb-0">Employee
                        Orders</p>
                </div>
                <div class="flex-shrink-0 text-white position-relative" style="z-index: 1055;">
                    <div class="dropdown text-white card-header-dropdown">
                        <a class="dropdown-btn" href="#" role="button"
                            data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                            id="filter-label">
                            <span class="text-white">This Month<i
                                    class="mdi mdi-chevron-down ms-1"></i></span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-end"
                            style="z-index: 1060 !important; position: fixed !important;">
                            <a class="dropdown-item" href="#"
                                onclick="applyFilter('1', 'January')" data-period="1"
                                data-label="January">January</a>
                            <a class="dropdown-item" href="#"
                                onclick="applyFilter('2', 'February')" data-period="2"
                                data-label="February">February</a>
                            <a class="dropdown-item" href="#"
                                onclick="applyFilter('3', 'March')" data-period="3"
                                data-label="March">March</a>
                            <a class="dropdown-item" href="#"
                                onclick="applyFilter('4', 'April')" data-period="4"
                                data-label="April">April</a>
                            <a class="dropdown-item" href="#"
                                onclick="applyFilter('5', 'May')" data-period="5"
                                data-label="May">May</a>
                            <a class="dropdown-item" href="#"
                                onclick="applyFilter('6', 'June')" data-period="6"
                                data-label="June">June</a>
                            <a class="dropdown-item" href="#"
                                onclick="applyFilter('7', 'July')" data-period="7"
                                data-label="July">July</a>
                            <a class="dropdown-item" href="#"
                                onclick="applyFilter('8', 'August')" data-period="8"
                                data-label="August">August</a>
                            <a class="dropdown-item" href="#"
                                onclick="applyFilter('9', 'September')" data-period="9"
                                data-label="September">September</a>
                            <a class="dropdown-item" href="#"
                                onclick="applyFilter('10', 'October')" data-period="10"
                                data-label="October">October</a>
                            <a class="dropdown-item" href="#"
                                onclick="applyFilter('11', 'November')" data-period="11"
                                data-label="November">November</a>
                            <a class="dropdown-item" href="#"
                                onclick="applyFilter('12', 'December')" data-period="12"
                                data-label="December">December</a>
                            <a class="dropdown-item" href="#"
                                onclick="applyFilter('', 'This Month')" data-period=""
                                data-label="This Month">This Month</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="d-flex align-items-end justify-content-between mt-4">
                <div>
                    <h4 id="order-employee-total"
                        class="fs-22 fw-bold ff-secondary text-white mb-4">0</h4>
                    <a href="{{ route('site.orderemployee.bydate', ['site' => $site->slug]) }}"
                        class="text-decoration-underline text-white-50">View details</a>
                </div>
                <div class="avatar-sm flex-shrink-0">
                    <span class="avatar-title bg-white bg-opacity-10 rounded fs-3">
                        <i class='bx bx-briefcase text-white'></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>
</div> <!-- end row-->

<div class="row">
    <div class="col-xl-8">
        <div class="card">
            <div class="card-header border-0 align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Order Completion Accuracy (Monthly)</h4>
                <div>
                    <div class="flex-shrink-0">
                        <div class="d-flex align-items-center gap-1">
                            <select class="form-control form-select" style="width: 130px"
                                name="period" id="period_accuracy" data-placeholder="Select Period">
                                <option value="" selected>This Month</option>
                                <option value="1">January</option>
                                <option value="2">February</option>
                                <option value="3">March</option>
                                <option value="4">April</option>
                                <option value="5">May</option>
                                <option value="6">June</option>
                                <option value="7">July</option>
                                <option value="8">August</option>
                                <option value="9">September</option>
                                <option value="10">October</option>
                                <option value="11">November</option>
                                <option value="12">December</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div><!-- end card header -->

            <div class="card-header p-0 border-0 bg-light-subtle">
                <div class="row g-0 text-center">
                    <div class="col-6 col-sm-3">
                        <div class="p-3 border border-dashed border-start-0">
                            <h5 class="mb-1"><span class="counter-value total-orders"
                                    data-target="0">0</span></h5>
                            <p class="text-muted mb-0">Orders</p>
                        </div>
                    </div>
                    <!--end col-->
                    <div class="col-6 col-sm-3">
                        <div class="p-3 border border-dashed border-start-0">
                            <h5 class="mb-1"><span class="counter-value total-on-time"
                                    data-target="0">0</span>
                            </h5>
                            <p class="text-muted mb-0">On-time</p>
                        </div>
                    </div>
                    <!--end col-->
                    <div class="col-6 col-sm-3">
                        <div class="p-3 border border-dashed border-start-0">
                            <h5 class="mb-1"><span class="counter-value" data-target="0">0</span>
                            </h5>
                            <p class="text-muted mb-0">Late</p>
                        </div>
                    </div>
                    <!--end col-->
                    <div class="col-6 col-sm-3">
                        <div class="p-3 border border-dashed border-start-0 border-end-0">
                            <h5 class="mb-1 text-success"><span class="counter-value"
                                    data-target="100">0</span>%</h5>
                            <p class="text-muted mb-0">Conversation Ratio</p>
                        </div>
                    </div>
                    <!--end col-->
                </div>
            </div><!-- end card header -->

            <div class="card-body p-0 pb-2">
                <div class="w-100">
                    <div id="customer_impression_charts_1"
                        data-colors='["--vz-primary", "--vz-danger"]' class="apex-charts"
                        dir="ltr"></div>
                </div>
            </div><!-- end card body -->
        </div><!-- end card -->
    </div><!-- end col -->

    <div class="col-xl-4">
        <div class="card card-height-100">
            <div class="card-header align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Order by Type</h4>
                <div class="flex-shrink-0">
                    <div class="d-flex align-items-center gap-1">
                        <select class="form-control form-select" style="width: 130px"
                            name="filter_type" id="period_filter_type"
                            data-placeholder="Select Period">
                            <option value="" selected>This Month</option>
                            <option value="1">January</option>
                            <option value="2">February</option>
                            <option value="3">March</option>
                            <option value="4">April</option>
                            <option value="5">May</option>
                            <option value="6">June</option>
                            <option value="7">July</option>
                            <option value="8">August</option>
                            <option value="9">September</option>
                            <option value="10">October</option>
                            <option value="11">November</option>
                            <option value="12">December</option>
                        </select>
                    </div>
                </div>
            </div><!-- end card header -->

            <div class="card-body">
                <div id="store-visits-sourcee"
                    data-colors='["--vz-primary", "--vz-success", "--vz-warning", "--vz-danger", "--vz-info"]'
                    class="apex-charts" dir="ltr"></div>
            </div>
        </div> <!-- .card-->
    </div> <!-- .col-->
    <!-- end col -->
</div>

<div class="row">
    <div class="col-xl-6">
        <div class="card">
            <div class="pt-4 ps-4 pe-4 align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Top Catering Menu</h4>
                <div class="flex-shrink-0">
                    <div class="d-flex align-items-center gap-1">
                        <strong style="width: 72px;">SORTBY : </strong>
                        <select class="form-control form-select" style="width: 130px"
                            name="period_filter" id="period_filter" data-placeholder="Select Period">
                            <option value="this_month" selected>This Month</option>
                            <option value="today">Today</option>
                            <option value="yesterday">Yesterday</option>
                            <option value="this_week">This Week</option>
                            <option value="last_month">Last Month</option>
                        </select>
                    </div>
                    {{-- --}}
                </div>
            </div><!-- end card header -->

            <div class="card-body">
                <div class="table-responsive table-card">
                    <table
                        class="table table-hover table-centered align-middle table-nowrap mb-0 datatable">
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-6">
        <div class="card">
            <div class="pt-4 ps-4 pe-4 align-items-center d-flex">
                <h4 class="card-title mb-0 flex-grow-1">Top Ala Carte</h4>
                <div class="flex-shrink-0">
                    <div class="d-flex align-items-center gap-1">
                        <strong style="width: 72px;">SORTBY : </strong>
                        <select class="form-control form-select" style="width: 130px"
                            name="period_filter" id="period_filter_item"
                            data-placeholder="Select Period">
                            <option value="this_month" selected>This Month</option>
                            <option value="today">Today</option>
                            <option value="yesterday">Yesterday</option>
                            <option value="this_week">This Week</option>
                            <option value="last_month">Last Month</option>
                        </select>
                    </div>
                    {{-- --}}
                </div>
            </div><!-- end card header -->

            <div class="card-body">
                <div class="table-responsive table-card">
                    <table
                        class="table table-hover table-centered align-middle table-nowrap mb-0 datatableItem">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</div>
</div>
@endsection
@push('scripts')
<script src="https://themesbrand.com/velzon/html/creative/assets/libs/apexcharts/apexcharts.min.js"></script>
<script src="https://themesbrand.com/velzon/html/creative/assets/libs/jsvectormap/js/jsvectormap.min.js"></script>
<script src="https://themesbrand.com/velzon/html/creative/assets/libs/jsvectormap/maps/world-merc.js"></script>
<script src="https://themesbrand.com/velzon/html/creative/assets/libs/swiper/swiper-bundle.min.js"></script>
<script src="https://themesbrand.com/velzon/html/creative/assets/js/pages/dashboard-ecommerce.init.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>

<script>
    let activeEmployeePeriod = '';
    let activeAccuracyPeriod = '';
    let activeTypePeriod = '';
    let barChart = null;
    let donutChart = null;

    // 1. Dashboard Metrics (Chart Bar, Total Pasien, Unordered)
    function loadDashboardMetrics() {
        fetch("{{ route('site.dashboard.metrics', ['site' => $site->slug]) }}")
            .then(response => response.json())
            .then(data => {
                // Update Chart Bar
                if (barChart) {
                    barChart.updateSeries([{
                        name: "Orders",
                        type: "bar",
                        data: data.chart_data
                    }]);
                }

                // Update Text Counters
                // const patientEl = document.getElementById('patient-total');
                const unorderedEl = document.getElementById('unordered-total');

                // if (patientEl) patientEl.innerText = data.total_patient;
                if (unorderedEl) unorderedEl.innerText = data.unordered_patient;

                console.log("Metrics updated: " + new Date().toLocaleTimeString());
            })
            .catch(error => console.error('Error fetching dashboard metrics:', error));
    }

    // 2. Order Employee
    function loadOrderEmployee(period = '') {
        activeEmployeePeriod = period;
        const totalElement = document.getElementById('order-employee-total');
        fetch(`{{ route('site.orderemployee', ['site' => $site->slug]) }}?period=${period}`)
            .then(response => response.json())
            .then(data => {
                if (totalElement) totalElement.textContent = data.data;
            })
            .catch(error => console.error('Error loading employee:', error));
    }

    function updateEmployeeFilterUI(period, label) {
        loadOrderEmployee(period);
        const filterLabel = document.getElementById('filter-label');
        if (filterLabel) {
            filterLabel.innerHTML = `<span class="text-white">${label} <i class="mdi mdi-chevron-down ms-1"></i></span>`;
        }
    }

    // 3. Order Accuracy
    function loadOrderAccuracy(period = '') {
        activeAccuracyPeriod = period;
        const counterElement = document.querySelector('.counter-value.total-orders');
        const ontimeElement = document.querySelector('.counter-value.total-on-time');

        fetch(`{{ route('site.orderaccuracy', ['site' => $site->slug]) }}?month=${period}`)
            .then(response => response.json())
            .then(data => {
                if (counterElement) {
                    counterElement.textContent = data.data;
                    counterElement.setAttribute('data-target', data.data);
                }
                if (ontimeElement) {
                    ontimeElement.textContent = data.data;
                }
            })
            .catch(error => console.error('Error accuracy:', error));
    }

    // 4. Donut Chart Logic
    function initDonutChart() {
        const optionsDonut = {
            chart: {
                type: 'donut',
                height: 400
            },
            series: [0, 0, 0, 0],
            labels: ["Patient", "Companion", "Doctor", "General"],
            colors: ['#556ee6', '#34c38f', '#f1b44c', '#f46a6a'],
            legend: {
                show: true,
                position: 'bottom',
                horizontalAlign: 'center',
                fontSize: '14px',
                markers: {
                    width: 12,
                    height: 12,
                    radius: 12
                },
                itemMargin: {
                    horizontal: 10,
                    vertical: 5
                },
                formatter: function(seriesName, opts) {
                    return seriesName + ": " + opts.w.globals.series[opts.seriesIndex];
                }
            }
        };
        donutChart = new ApexCharts(document.querySelector("#store-visits-sourcee"), optionsDonut);
        donutChart.render();
    }

    function updateDonutChart(month) {
        activeTypePeriod = month;
        const url = `{{ route('site.orderbytypes', ['site' => $site->slug]) }}?month=${month}`;

        fetch(url)
            .then(res => res.json())
            .then(data => {
                if (donutChart) {
                    donutChart.updateSeries([
                        data.patient ?? 0,
                        data.companion ?? 0,
                        data.doctor ?? 0,
                        data.general ?? 0
                    ]);
                }
            })
            .catch(err => console.error('Error donut chart:', err));
    }

    // 5. Count Boxes
    function loadRemainingOrders(type, targetElementId) {
        // 1. Dapatkan tanggal hari ini
        var today = new Date();
        var dd = String(today.getDate()).padStart(2, '0');
        var mm = String(today.getMonth() + 1).padStart(2, '0');
        var yyyy = today.getFullYear();

        var dateToday = dd + '/' + mm + '/' + yyyy;
        var periodString = dateToday + ' to ' + dateToday;

        // 2. Request AJAX
        $.ajax({
            url: "{{ route('site.orderreport.new.read', ['site' => $site->slug]) }}",
            type: 'GET',
            data: {
                draw: 1,
                start: 0,
                length: 1,
                type: type,
                period: periodString,
                process_status: 0,
                order: [{
                    column: 0,
                    dir: 'desc'
                }],
                columns: [{
                    data: 'orders.id'
                }],
            },
            success: function(response) {
                $('#' + targetElementId).text(response.recordsFiltered ?? 0);
            },
            error: function(xhr, status, error) {
                console.error("Gagal memuat data remaining untuk type " + type + ": ", error);
                $('#' + targetElementId).text('0');
            }
        });
    }


    document.addEventListener("DOMContentLoaded", function() {

        const colors = getChartColorsArray("customer_impression_charts_1");

        if (document.getElementById("customer_impression_charts_1") && colors) {
            const options = {
                series: [{
                    name: "Orders",
                    type: "bar",
                    data: []
                }],
                chart: {
                    height: 370,
                    type: "line",
                    toolbar: {
                        show: false
                    },
                    animations: {
                        enabled: true,
                        easing: 'easeinout',
                        speed: 800
                    } // Animasi halus
                },
                stroke: {
                    curve: "straight",
                    width: [2]
                },
                xaxis: {
                    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    axisTicks: {
                        show: false
                    },
                    axisBorder: {
                        show: false
                    }
                },
                grid: {
                    show: true,
                    xaxis: {
                        lines: {
                            show: true
                        }
                    },
                    yaxis: {
                        lines: {
                            show: false
                        }
                    },
                    padding: {
                        top: 0,
                        right: -2,
                        bottom: 15,
                        left: 10
                    }
                },
                legend: {
                    show: true,
                    horizontalAlign: "center",
                    offsetY: -5
                },
                plotOptions: {
                    bar: {
                        columnWidth: "30%",
                        barHeight: "70%"
                    }
                },
                colors: colors,
                tooltip: {
                    shared: true,
                    y: [{
                        formatter: (val) => val?.toFixed(0)
                    }]
                }
            };

            // PENTING: Assign ke variable global 'barChart'
            barChart = new ApexCharts(document.querySelector("#customer_impression_charts_1"), options);
            barChart.render();
        }

        // --- B. Setup Donut Chart ---
        initDonutChart();

        // --- C. Setup DataTables ---
        // Table Menu
        var dataTableMenu = $('.datatable').DataTable({
            stateSave: true,
            serverSide: true,
            filter: false,
            info: false,
            ordering: false,
            paging: true,
            ajax: {
                url: "{{ route('site.popularmenus', ['site' => $site->slug]) }}",
                type: "GET",
                data: function(data) {
                    data.period = $('#period_filter').val();
                }
            },
            columnDefs: [{
                    render: function(data, type, row) {
                        let main_image = row.menu.image_main ? "{{ asset('storage') }}/images/" + row.menu.image_main.image : "{{ asset('assets/img/no-image.png') }}";
                        return `<div class="d-flex align-items-center"><div class="flex-shrink-0 me-3"><div class="avatar-sm bg-light rounded p-1"><img src="${main_image}" class="img-fluid d-block" style="width:100%;height:100%;object-fit:cover"></div></div><div class="flex-grow-1"><h5 class="fs-14 mb-1">${row.menu.name}</h5><p class="text-muted mb-0"><span class="fw-medium">${row.menu.category.name || '-'}</span></p></div></div>`;
                    },
                    targets: 0
                },
                {
                    render: function(data, type, row) {
                        return `<span>${row.total_orders} <br/> Orders</span>`;
                    },
                    targets: 1,
                    className: "text-center"
                }
            ],
            columns: [{
                data: "menu.name",
                name: "menu_name"
            }, {
                data: "total_orders",
                name: "total_orders"
            }],
            language: {
                emptyTable: "No popular menu data available"
            }
        });

        // Table Item
        var dataTableItem = $('.datatableItem').DataTable({
            stateSave: true,
            serverSide: true,
            filter: false,
            info: false,
            ordering: false,
            paging: true,
            ajax: {
                url: "{{ route('site.popularitems', ['site' => $site->slug]) }}",
                type: "GET",
                data: function(data) {
                    data.period = $('#period_filter_item').val();
                }
            },
            columnDefs: [{
                    render: function(data, type, row) {
                        let main_image = row.item.image_main ? "{{ asset('storage') }}/images/" + row.item.image_main.image : "{{ asset('assets/img/no-image.png') }}";
                        return `<div class="d-flex align-items-center"><div class="flex-shrink-0 me-3"><div class="avatar-sm bg-light rounded p-1"><img src="${main_image}" class="img-fluid d-block" style="width:100%;height:100%;object-fit:cover"></div></div><div class="flex-grow-1"><h5 class="fs-14 mb-1">${row.item.name}</h5></div></div>`;
                    },
                    targets: 0
                },
                {
                    render: function(data, type, row) {
                        return `<span>${row.total_orders} <br/> Orders</span>`;
                    },
                    targets: 1,
                    className: "text-center"
                }
            ],
            columns: [{
                data: "menu.name",
                name: "menu"
            }, {
                data: "total_orders",
                name: "total"
            }],
            language: {
                emptyTable: "No popular menu data available"
            }
        });

        // Event Listeners
        $('#period_filter').change(() => dataTableMenu.ajax.reload());
        $('#period_filter_item').change(() => dataTableItem.ajax.reload());

        document.querySelectorAll('.dropdown-item').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                updateEmployeeFilterUI(this.getAttribute('data-period'), this.getAttribute('data-label'));
            });
        });

        if (document.getElementById('period_accuracy')) {
            document.getElementById('period_accuracy').addEventListener('change', function() {
                loadOrderAccuracy(this.value);
            });
        }
        if (document.getElementById('period_filter_type')) {
            document.getElementById('period_filter_type').addEventListener('change', function() {
                updateDonutChart(this.value);
            });
        }

        function loadAllData() {
            // Batch 1: heavy order-count queries staggered to avoid simultaneous hits
            loadDashboardMetrics();
            setTimeout(() => loadOrderAccuracy(activeAccuracyPeriod), 500);
            setTimeout(() => updateDonutChart(activeTypePeriod), 1000);
            setTimeout(() => loadOrderEmployee(activeEmployeePeriod), 1500);

            // Batch 2: remaining-orders (calls report endpoint — give server time)
            setTimeout(() => loadRemainingOrders(1, 'patient-remaining'), 2000);
            setTimeout(() => loadRemainingOrders(2, 'companion-remaining'), 2500);
            setTimeout(() => loadRemainingOrders(3, 'doctor-remaining'), 3000);
            setTimeout(() => loadRemainingOrders(4, 'general-remaining'), 3500);
        }

        loadAllData();

        // Refresh setiap 3 menit (bukan 1 menit) untuk kurangi beban server
        setInterval(function() {
            loadAllData();
            setTimeout(() => dataTableMenu.ajax.reload(null, false), 4500);
            setTimeout(() => dataTableItem.ajax.reload(null, false), 5000);
        }, 180000);
    });
</script>
@endpush