@extends('layouts.horizontal', ['title' => 'Dashboard', 'topbarTitle' => 'Dashboard'])

@section('content')
<div class="row row-cols-xxl-4 row-cols-md-2 row-cols-1">
    <div class="col">
        <div class="card">
            <div class="card-header">
                <h4 class="header-title">Total Invoiced Visits</h4>
                <p class="text-muted mb-0" style="font-size: 0.75rem;">Current Month</p>
            </div>

            <div class="card-body pt-0">
                <div class="d-flex align-items-end gap-2 justify-content-between">
                    <div class="text-end flex-shrink-0">
                        <div id="total-orders-chart" data-colors="#ff5b5b,#F6F7FB"></div>
                    </div>
                    <div class="text-end">
                        <h3 class="fw-semibold" id="total-visits-value">-</h3>
                        <p class="text-muted mb-0" id="total-visits-change">Loading...</p>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- end col -->

    <div class="col">
        <div class="card">
            <div class="card-header">
                <h4 class="header-title">Total Revenue</h4>
                <p class="text-muted mb-0" style="font-size: 0.75rem;">Current Month</p>
            </div>

            <div class="card-body pt-0">
                <div class="d-flex align-items-center gap-2 justify-content-between">
                    <span class="badge bg-success rounded-pill fs-13" id="revenue-badge">- <i class="ti ti-trending-up"></i> </span>
                    <div class="text-end">
                        <h3 class="fw-semibold" id="total-revenue-value">-</h3>
                        <p class="text-muted mb-0" id="total-revenue-change">Loading...</p>
                    </div>
                </div>

                <div class="progress progress-soft progress-sm mt-3">
                    <div class="progress-bar bg-success" role="progressbar" id="revenue-progress" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </div><!-- end col -->

    <div class="col">
        <div class="card">
            <div class="card-header">
                <h4 class="header-title">New Customers</h4>
                <p class="text-muted mb-0" style="font-size: 0.75rem;">Current Month</p>
            </div>

            <div class="card-body pt-0">
                <div class="d-flex align-items-end gap-2 justify-content-between">
                    <div class="text-end flex-shrink-0">
                        <div id="new-users-chart" data-colors="#f9c851,#F6F7FB"></div>
                    </div>
                    <div class="text-end">
                        <h3 class="fw-semibold" id="new-customers-value">-</h3>
                        <p class="text-muted mb-0" id="new-customers-change">Loading...</p>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- end col -->

    <div class="col">
        <div class="card">
            <div class="card-header">
                <h4 class="header-title">Customer Satisfaction</h4>
                <p class="text-muted mb-0" style="font-size: 0.75rem;">Current Month</p>
            </div>

            <div class="card-body pt-0">
                <div class="d-flex align-items-center gap-2 justify-content-between">
                    <span class="badge bg-info rounded-pill fs-13" id="satisfaction-badge">- <i class="ti ti-trending-up"></i> </span>
                    <div class="text-end">
                        <h3 class="fw-semibold" id="satisfaction-value">-</h3>
                        <p class="text-muted mb-0" id="satisfaction-change">Loading...</p>
                    </div>
                </div>

                <div class="progress progress-soft progress-sm mt-3">
                    <div class="progress-bar bg-info" role="progressbar" id="satisfaction-progress" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                </div>
            </div>
        </div>
    </div><!-- end col -->

</div><!-- end row -->

<div class="row">
    <div class="col-xxl-6 col-xl-6 col-lg-6">
        <div class="card card-h-100">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2 border-bottom border-dashed">
                <div>
                    <h4 class="header-title mb-0">Top Service Categories</h4>
                    <p class="text-muted mb-0" style="font-size: 0.75rem;">Current Month</p>
                </div>
                <div class="dropdown">
                    <button class="btn btn-sm btn-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="ri-more-2-fill"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="javascript:void(0);" onclick="exportChart('data-visits-chart', 'print')"><i class="ri-printer-line me-2"></i>Print Chart</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);" onclick="exportChart('data-visits-chart', 'png')"><i class="ri-download-line me-2"></i>Download as PNG</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);" onclick="exportChart('data-visits-chart', 'jpeg')"><i class="ri-download-line me-2"></i>Download as JPEG</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);" onclick="exportChart('data-visits-chart', 'pdf')"><i class="ri-file-pdf-line me-2"></i>Download as PDF</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);" onclick="exportChart('data-visits-chart', 'svg')"><i class="ri-file-line me-2"></i>Download as SVG</a></li>
                    </ul>
                </div>
            </div>
            <div class="card-body pt-2">
                <div dir="ltr">
                    <div id="data-visits-chart" class="apex-charts" data-colors="#5b69bc,#ff8acc,#10c469,#35b8e0"></div>

                    <div class="row mt-3" id="category-legend">
                        <!-- Category legend will be populated by JavaScript -->
                    </div>
                </div>
            </div> <!-- end card-body-->
        </div> <!-- end card-->
    </div> <!-- end col-->
    <div class="col-xxl-6 col-xl-6 col-lg-6">
        <div class="card card-h-100">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2 border-bottom border-dashed">
                <div>
                    <h4 class="header-title mb-0">Monthly Sales</h4>
                    <p class="text-muted mb-0" style="font-size: 0.75rem;">All Years</p>
                </div>
                <div class="dropdown">
                    <button class="btn btn-sm btn-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="ri-more-2-fill"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="javascript:void(0);" onclick="exportChart('statistics-chart', 'print')"><i class="ri-printer-line me-2"></i>Print Chart</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);" onclick="exportChart('statistics-chart', 'png')"><i class="ri-download-line me-2"></i>Download as PNG</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);" onclick="exportChart('statistics-chart', 'jpeg')"><i class="ri-download-line me-2"></i>Download as JPEG</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);" onclick="exportChart('statistics-chart', 'pdf')"><i class="ri-file-pdf-line me-2"></i>Download as PDF</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);" onclick="exportChart('statistics-chart', 'svg')"><i class="ri-file-line me-2"></i>Download as SVG</a></li>
                    </ul>
                </div>
            </div>

            <div class="card-body p-0 pt-1">
                <div dir="ltr" class="px-1">
                    <div id="statistics-chart" class="apex-charts" data-colors="#5b69bc"></div>
                </div>

                <div class="border-top border-dashed mt-2">
                    <div class="row text-center align-items-center g-0">
                        <div class="col-12">
                            <p class="text-muted mt-3 mb-1">Total Sales This Year</p>
                            <h4 class="mb-3" id="yearly-sales-total">-</h4>
                        </div>
                    </div>
                </div>

            </div>
        </div> <!-- end card-->
    </div> <!-- end col-->
</div> <!-- end row-->

<!-- Monthly Performance Chart - Own Row -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2 border-bottom border-dashed">
                <div>
                    <h4 class="header-title mb-0">Monthly Performance</h4>
                    <p class="text-muted mb-0" style="font-size: 0.75rem;">Past 31 Days</p>
                </div>
                <div class="dropdown">
                    <button class="btn btn-sm btn-light" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="ri-more-2-fill"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        <li><a class="dropdown-item" href="javascript:void(0);" onclick="exportChart('monthly-performance-chart', 'print')"><i class="ri-printer-line me-2"></i>Print Chart</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);" onclick="exportChart('monthly-performance-chart', 'png')"><i class="ri-download-line me-2"></i>Download as PNG</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);" onclick="exportChart('monthly-performance-chart', 'jpeg')"><i class="ri-download-line me-2"></i>Download as JPEG</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);" onclick="exportChart('monthly-performance-chart', 'pdf')"><i class="ri-file-pdf-line me-2"></i>Download as PDF</a></li>
                        <li><a class="dropdown-item" href="javascript:void(0);" onclick="exportChart('monthly-performance-chart', 'svg')"><i class="ri-file-line me-2"></i>Download as SVG</a></li>
                    </ul>
                </div>
            </div>

            <div class="card-body p-0 pt-1">
                <div dir="ltr" class="px-2">
                    <div id="monthly-performance-chart" class="apex-charts" data-colors="#5b69bc,#ff8acc,#10c469,#35b8e0,#f9c851"></div>
                </div>

                <div class="border-top border-dashed mt-2">
                    <div class="row text-center align-items-center g-0">
                        <div class="col-md-3 col-6">
                            <p class="text-muted mt-3 mb-1">Visits</p>
                            <h4 class="mb-3" id="monthly-visits-total">-</h4>
                        </div>
                        <div class="col-md-3 col-6 border-start border-end border-dashed">
                            <p class="text-muted mt-3 mb-1">Services</p>
                            <h4 class="mb-3" id="monthly-services-total">-</h4>
                        </div>
                        <div class="col-md-3 col-6 border-end border-dashed">
                            <p class="text-muted mt-3 mb-1">Revenue</p>
                            <h4 class="mb-3" id="monthly-revenue-total">-</h4>
                        </div>
                        <div class="col-md-3 col">
                            <p class="text-muted mt-3 mb-1">Balances</p>
                            <h4 class="mb-3" id="monthly-balances-total">-</h4>
                        </div>
                    </div>
                </div>

            </div>
        </div> <!-- end card-->
    </div> <!-- end col-->
</div> <!-- end row-->

<!-- Top Staff Performance Slider -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header border-bottom border-dashed">
                <h4 class="header-title mb-0">Top Performing Staff</h4>
                <p class="text-muted mb-0" style="font-size: 0.75rem;">Current Month</p>
            </div>
            <div class="card-body">
                <div id="staff-slider-container">
                    <div class="d-flex align-items-center justify-content-between mb-3">
                        <button class="btn btn-sm btn-light" id="staff-slider-prev" onclick="prevStaffSlide()">
                            <i class="ri-arrow-left-line"></i> Previous
                        </button>
                        <span id="staff-slider-info" class="text-muted">Loading...</span>
                        <button class="btn btn-sm btn-light" id="staff-slider-next" onclick="nextStaffSlide()">
                            Next <i class="ri-arrow-right-line"></i>
                        </button>
                    </div>
                    <div class="row row-cols-xxl-5 row-cols-md-2 row-cols-1" id="staff-slider-items">
                        <div class="col-12 text-center py-4">
                            <div class="spinner-border spinner-border-sm text-primary" role="status">
                                <span class="visually-hidden">Loading...</span>
                            </div>
                            <span class="ms-2">Loading staff performance...</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> <!-- end row-->

<!-- Top Customers and Top Services Section -->
<div class="row">
    <div class="col-xxl-6 col-xl-6">
        <div class="card card-h-100">
            <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2 border-bottom border-dashed">
                <div>
                    <h4 class="header-title mb-0">Top Customers</h4>
                    <p class="text-muted mb-0" style="font-size: 0.75rem;">Past 3 Months</p>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-custom align-middle table-nowrap table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Customer</th>
                                <th>Phone</th>
                                <th>Visits</th>
                                <th>Revenue</th>
                                <th>Balance</th>
                                <th>Last Visit</th>
                            </tr>
                        </thead>
                        <tbody id="top-customers-tbody">
                            <tr>
                                <td colspan="6" class="text-center py-4">
                                    <div class="spinner-border spinner-border-sm text-primary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <span class="ms-2">Loading top customers...</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div> <!-- end col-->

    <div class="col-xxl-6 col-xl-6">
        <div class="card card-h-100">
            <div class="card-header d-flex flex-wrap align-items-center gap-2 border-bottom border-dashed">
                <div>
                    <h4 class="header-title mb-0">Top Services</h4>
                    <p class="text-muted mb-0" style="font-size: 0.75rem;">Past Month</p>
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-custom align-middle table-nowrap table-hover mb-0">
                        <thead>
                            <tr>
                                <th>Service</th>
                                <th>Category</th>
                                <th>Bookings</th>
                                <th>Revenue</th>
                                <th>Avg Rate</th>
                            </tr>
                        </thead>
                        <tbody id="top-services-tbody">
                            <tr>
                                <td colspan="5" class="text-center py-4">
                                    <div class="spinner-border spinner-border-sm text-primary" role="status">
                                        <span class="visually-hidden">Loading...</span>
                                    </div>
                                    <span class="ms-2">Loading top services...</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div> <!-- end table-responsive-->
            </div> <!-- end card-body-->
        </div> <!-- end card-->
    </div> <!-- end col-->
</div> <!-- end row-->

@endsection

@section('scripts')
<script>
    // Pass currency from PHP config to JavaScript
    window.CURRENCY_SYMBOL = '{{ config("constants.CURRENCY", "$") }}';
</script>
@vite(['resources/js/pages/dashboard.js'])
@endsection