@extends('Admin.layouts.master')
@section('content')
    @php
        $currentPage = 'dashboard';
    @endphp
    <div class="layout-px-spacing">
        <div class="middle-content container-xxl p-0">
            <div class="row layout-top-spacing ">
                <div class="top-tabel">
                    <div class="row">
                        <div class="col-md-4">
                            <h6 class="card-title">Dashboard</h6>
                        </div>
                    </div>
                </div>
                <div class="col-12 d-flex align-items-center gap-3 p-0 mb-4">
                    <div class="col-6">
                        <div class="card">
                            <div class="card-body">
                                <a href="{{ route('manage.customer') }}">
                                    <h5>No of Customers</h5>
                                    <h2 class="m-0 font-weight-bold">{{ $customerCount }}</h2>
                                </a>
                            </div>
                        </div>
                    </div>
                    {{-- <div class="col-6">
                        <div class="card">
                            <div class="card-body">
                                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                                    <ol class="carousel-indicators m-0">
                                        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                                        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                                        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                                    </ol>
                                    <div class="carousel-inner">
                                        <div class="carousel-item active">
                                            <h5>Passports Live Now</h5>
                                            <h2 class="m-0 font-weight-bold">Cheers to Summer</h2>
                                        </div>
                                        <div class="carousel-item">
                                            <h5>Passports Live Now</h5>
                                            <h2 class="m-0 font-weight-bold">Cheers to Summer</h2>
                                        </div>
                                        <div class="carousel-item">
                                            <h5>Passports Live Now</h5>
                                            <h2 class="m-0 font-weight-bold">Cheers to Summer</h2>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div> --}}
                    <div class="col-6">
                        <div class="card">
                            <div class="card-body">
                                <a href="{{ route('manage.restaurants') }}">
                                    <h5>No of Restaurants</h5>
                                    <h2 class="m-0 font-weight-bold">{{ $restaurantCount }}</h2>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 d-flex align-items-center p-0 mb-4">
                    <div class="col-12 d-flex align-items-center p-0 mb-4">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h5>User Graph</h5>
                                        <select class="form-control w-25" id="graph-filter">
                                            <option value="monthly" selected>Monthly</option>
                                            <option value="quarterly">Quarterly</option>
                                            <option value="yearly">Yearly</option>
                                        </select>
                                    </div>
                                    <div id="user-chart"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- <div class="col-md-6">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <h5>Sales Graph</h5>
                                                        <select class="form-control w-25" name="" id="">
                                                            <option value="" selected>Monthly</option>
                                                            <option value="">Quarterly</option>
                                                            <option value="">Yearly</option>
                                                        </select>
                                                    </div>
                                                    <div id="sales-chart">
                                                    </div>
                                                </div>
                                            </div>
                                        </div> --}}

                </div>
                <!-- <div class="col-12 d-flex  p-0 mb-3">
                                            <div class="col-md-6">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h5 class="text-start">Recent Transactions</h5>
                                                        <div class="d-flex align-items-center justify-content-between mb-2">
                                                            <div class="d-flex align-items-center">
                                                                <div class="transcation-list">
                                                                    <i class="fa fa-picture-o" aria-hidden="true"></i>
                                                                </div>
                                                                <div>
                                                                    <label class="m-0" for="">Jennifer Lawrence</label>
                                                                    <h6 class="font-weight-bold">Cheers to the Summer</h6>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <h6 class="font-weight-bold">$500</h6>
                                                            </div>
                                                        </div>
                                                        <div class="d-flex align-items-center justify-content-between mb-2">
                                                            <div class="d-flex align-items-center">
                                                                <div class="transcation-list">
                                                                    <i class="fa fa-picture-o" aria-hidden="true"></i>
                                                                </div>
                                                                <div>
                                                                    <label class="m-0" for="">Jennifer Lawrence</label>
                                                                    <h6 class="font-weight-bold">Cheers to the Summer</h6>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <h6 class="font-weight-bold">$500</h6>
                                                            </div>
                                                        </div>
                                                        <div class="d-flex align-items-center justify-content-between mb-2">
                                                            <div class="d-flex align-items-center">
                                                                <div class="transcation-list">
                                                                    <i class="fa fa-picture-o" aria-hidden="true"></i>
                                                                </div>
                                                                <div>
                                                                    <label class="m-0" for="">Jennifer Lawrence</label>
                                                                    <h6 class="font-weight-bold">Cheers to the Summer</h6>
                                                                </div>
                                                            </div>
                                                            <div>
                                                                <h6 class="font-weight-bold">$500</h6>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h5 class="text-start">Locations</h5>
                                                        <img src="{{ asset('public/assets/img/map.svg') }}" width="100%" height="173px"
                                                            alt="">

                                                    </div>

                                                </div>
                                            </div>
                                        </div> -->
            </div>
            <!-- <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
                                                    <div class="widget widget-six">
                                                        <div class="widget-heading">
                                                            <div class="task-action">
                                                                <div class="user-details">
                                                                    <img src="../src/assets/img/user-2-svgrepo-com.svg" />
                                                                    <h3>Welcome ,</h3>
                                                                    <h4>Kartikey Gautam</h4>
                                                                </div>
                                                                <div class="row w-100">
                                                                    <div class="col-md-4 col-sm-12 layout-spacing pb-0">
                                                                        <div data-draggable="true"
                                                                            class="card simple-title-task ui-sortable-handle">
                                                                            <div class="card-body">
                                                                                <div class="task-header">
                                                                                    <div class="order-summary">
                                                                                        <div class="summary-list">
                                                                                            <div class="w-icon">
                                                                                                <img class="img1"
                                                                                                    src="../src/assets/img/patient(1).svg" />
                                                                                            </div>
                                                                                            <div class="w-summary-details">
                                                                                                <div class="w-summary-info">
                                                                                                    <h6>Total patients</h6>
                                                                                                    <p class="summary-count">50</p>
                                                                                                </div>

                                                                                                <div class="w-summary-stats">
                                                                                                    <div class="progress">
                                                                                                        <div class="progress-bar bg-gradient-success"
                                                                                                            role="progressbar" style="width: 50%"
                                                                                                            aria-valuenow="50" aria-valuemin="0"
                                                                                                            aria-valuemax="100"></div>
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="w-summary-info mt-0">
                                                                                                    <p class="summary-text">50 % increase in 30 days
                                                                                                    </p>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>

                                                                    <div class="col-md-4 col-sm-12 layout-spacing pb-0">
                                                                        <div data-draggable="true"
                                                                            class="card simple-title-task ui-sortable-handle">
                                                                            <div class="card-body">
                                                                                <div class="task-header">
                                                                                    <div class="order-summary">
                                                                                        <div class="summary-list">
                                                                                            <div class="w-icon">
                                                                                                <img class="img2"
                                                                                                    src="../src/assets/img/heart-add(1).svg" />
                                                                                            </div>
                                                                                            <div class="w-summary-details">

                                                                                                <div class="w-summary-info">
                                                                                                    <h6>Total caregiver</h6>
                                                                                                    <p class="summary-count">80</p>
                                                                                                </div>

                                                                                                <div class="w-summary-stats">
                                                                                                    <div class="progress">
                                                                                                        <div class="progress-bar bg-gradient-warning"
                                                                                                            role="progressbar" style="width: 80%"
                                                                                                            aria-valuenow="80" aria-valuemin="0"
                                                                                                            aria-valuemax="100"></div>
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="w-summary-info mt-0">
                                                                                                    <p class="summary-text">30 % increase in 30 days
                                                                                                    </p>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-md-4 col-sm-12 layout-spacing pb-0">
                                                                        <div data-draggable="true"
                                                                            class="card simple-title-task ui-sortable-handle">
                                                                            <div class="card-body">
                                                                                <div class="task-header">
                                                                                    <div class="order-summary">
                                                                                        <div class="summary-list">
                                                                                            <div class="w-icon">
                                                                                                <img class="img3"
                                                                                                    src="../src/assets/img/download-cloud.svg" />
                                                                                            </div>
                                                                                            <div class="w-summary-details">

                                                                                                <div class="w-summary-info">
                                                                                                    <h6>App downloads</h6>
                                                                                                    <p class="summary-count">40</p>
                                                                                                </div>

                                                                                                <div class="w-summary-stats">
                                                                                                    <div class="progress">
                                                                                                        <div class="progress-bar bg-gradient-secondary"
                                                                                                            role="progressbar" style="width: 40%"
                                                                                                            aria-valuenow="40" aria-valuemin="0"
                                                                                                            aria-valuemax="100"></div>
                                                                                                    </div>
                                                                                                </div>
                                                                                                <div class="w-summary-info mt-0">
                                                                                                    <p class="summary-text">15 % increase in 30 days
                                                                                                    </p>
                                                                                                </div>

                                                                                            </div>

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

                                                    </div>

                                                </div> -->
            <!-- <div class="col-xl-12 col-lg-4 col-md-4 col-sm-4 col-12 layout-spacing">
                                                    <div class="widget widget-one_hybrid widget-engagement">
                                                        <div class="widget-heading">
                                                            <div class="w-title">
                                                                <div class="grpah-details">
                                                                    <p class="w-value">New patients</p>
                                                                    <h5 class="">%20 High than last monthy</h5>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="graph2">
                                                            <div class="grpah-details2">
                                                                <strong><span>100</span></strong>
                                                                <span>Overall</span>
                                                            </div>
                                                            <div class="right-divider"></div>
                                                            <div class="grpah-details2">
                                                                <strong><span>50</span></strong>
                                                                <span>Monthly</span>
                                                            </div>
                                                            <div class="right-divider"></div>
                                                            <div class="grpah-details2">
                                                                <strong><span>15</span></strong>
                                                                <span>Daily</span>
                                                            </div>
                                                        </div>

                                                        <div class="widget-content">
                                                            <div class="w-chart">
                                                                <div id="hybrid_followers3"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-xl-12 col-lg-12 col-sm-12  layout-spacing">
                                                    <div class="widget-content widget-content-area br-8">
                                                        <div class="index-card">
                                                            <div class="grpah-details">
                                                                <p class="w-value">New patients</p>
                                                                <a href="manage-patient">View All</a>
                                                            </div>
                                                            <table id="zero-config" class="table dt-table-hover" style="width:100%">
                                                                <thead class="text-center">
                                                                    <tr>
                                                                        <th class="text-start">Name</th>
                                                                        <th>Email address</th>
                                                                        <th>Contact Number</th>
                                                                        <th>Caregiver</th>
                                                                        <th>Subscription Plan</th>
                                                                        <th class="no-content">Action</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody class="text-center">
                                                                    <tr>
                                                                        <td class="text-start">Raj Shinde</td>
                                                                        <td>rajshinde9@gmail.com</td>
                                                                        <td>+5624878954</td>
                                                                        <td>Kartikey Gautam</td>
                                                                        <td>Active</td>
                                                                        <td>
                                                                            <div class="dropout">
                                                                                <button class="more">
                                                                                    <span></span>
                                                                                    <span></span>
                                                                                    <span></span>
                                                                                </button>
                                                                                <ul>
                                                                                    <li>
                                                                                        <a href="view-customer.php">
                                                                                            <img src="../src/assets/img/view.svg" />
                                                                                            <span>View Details</span>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="" data-toggle="modal" data-target="#archive-modal">
                                                                                            <img src="../src/assets/img/archive.svg" />
                                                                                            <span>Archive Patient</span>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="#">
                                                                                            <img src="../src/assets/img/download.svg" />
                                                                                            <span>Download Data</span>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="" data-toggle="modal" data-target="#suspend-modal">
                                                                                            <img src="../src/assets/img/stop.svg" />
                                                                                            <span>Suspend Patient</span>
                                                                                        </a>
                                                                                    </li>
                                                                                </ul>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="text-start">Raj Shinde</td>
                                                                        <td>rajshinde9@gmail.com</td>
                                                                        <td>+5624878954</td>
                                                                        <td>Kartikey Gautam</td>
                                                                        <td>Active</td>
                                                                        <td>
                                                                            <div class="dropout">
                                                                                <button class="more">
                                                                                    <span></span>
                                                                                    <span></span>
                                                                                    <span></span>
                                                                                </button>
                                                                                <ul>
                                                                                    <li>
                                                                                        <a href="view-customer.php">
                                                                                            <img src="../src/assets/img/view.svg" />
                                                                                            <span>View Details</span>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="" data-toggle="modal" data-target="#archive-modal">
                                                                                            <img src="../src/assets/img/archive.svg" />
                                                                                            <span>Archive Patient</span>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="#">
                                                                                            <img src="../src/assets/img/download.svg" />
                                                                                            <span>Download Data</span>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="" data-toggle="modal" data-target="#suspend-modal">
                                                                                            <img src="../src/assets/img/stop.svg" />
                                                                                            <span>Suspend Patient</span>
                                                                                        </a>
                                                                                    </li>
                                                                                </ul>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="text-start">Raj Shinde</td>
                                                                        <td>rajshinde9@gmail.com</td>
                                                                        <td>+5624878954</td>
                                                                        <td>Kartikey Gautam</td>
                                                                        <td>Active</td>
                                                                        <td>
                                                                            <div class="dropout">
                                                                                <button class="more">
                                                                                    <span></span>
                                                                                    <span></span>
                                                                                    <span></span>
                                                                                </button>
                                                                                <ul>
                                                                                    <li>
                                                                                        <a href="view-customer.php">
                                                                                            <img src="../src/assets/img/view.svg" />
                                                                                            <span>View Details</span>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="" data-toggle="modal" data-target="#archive-modal">
                                                                                            <img src="../src/assets/img/archive.svg" />
                                                                                            <span>Archive Patient</span>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="#">
                                                                                            <img src="../src/assets/img/download.svg" />
                                                                                            <span>Download Data</span>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="" data-toggle="modal" data-target="#suspend-modal">
                                                                                            <img src="../src/assets/img/stop.svg" />
                                                                                            <span>Suspend Patient</span>
                                                                                        </a>
                                                                                    </li>
                                                                                </ul>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="text-start">Raj Shinde</td>
                                                                        <td>rajshinde9@gmail.com</td>
                                                                        <td>+5624878954</td>
                                                                        <td>Kartikey Gautam</td>
                                                                        <td>Active</td>
                                                                        <td>
                                                                            <div class="dropout">
                                                                                <button class="more">
                                                                                    <span></span>
                                                                                    <span></span>
                                                                                    <span></span>
                                                                                </button>
                                                                                <ul>
                                                                                    <li>
                                                                                        <a href="view-customer.php">
                                                                                            <img src="../src/assets/img/view.svg" />
                                                                                            <span>View Details</span>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="" data-toggle="modal" data-target="#archive-modal">
                                                                                            <img src="../src/assets/img/archive.svg" />
                                                                                            <span>Archive Patient</span>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="#">
                                                                                            <img src="../src/assets/img/download.svg" />
                                                                                            <span>Download Data</span>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="" data-toggle="modal" data-target="#suspend-modal">
                                                                                            <img src="../src/assets/img/stop.svg" />
                                                                                            <span>Suspend Patient</span>
                                                                                        </a>
                                                                                    </li>
                                                                                </ul>
                                                                            </div>
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td class="text-start">Raj Shinde</td>
                                                                        <td>rajshinde9@gmail.com</td>
                                                                        <td>+5624878954</td>
                                                                        <td>Kartikey Gautam</td>
                                                                        <td>Active</td>
                                                                        <td>
                                                                            <div class="dropout">
                                                                                <button class="more">
                                                                                    <span></span>
                                                                                    <span></span>
                                                                                    <span></span>
                                                                                </button>
                                                                                <ul>
                                                                                    <li>
                                                                                        <a href="view-customer.php">
                                                                                            <img src="../src/assets/img/view.svg" />
                                                                                            <span>View Details</span>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="" data-toggle="modal" data-target="#archive-modal">
                                                                                            <img src="../src/assets/img/archive.svg" />
                                                                                            <span>Archive Patient</span>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="#">
                                                                                            <img src="../src/assets/img/download.svg" />
                                                                                            <span>Download Data</span>
                                                                                        </a>
                                                                                    </li>
                                                                                    <li>
                                                                                        <a href="" data-toggle="modal" data-target="#suspend-modal">
                                                                                            <img src="../src/assets/img/stop.svg" />
                                                                                            <span>Suspend Patient</span>
                                                                                        </a>
                                                                                    </li>
                                                                                </ul>
                                                                            </div>
                                                                        </td>
                                                                    </tr>

                                                                </tbody>
                                                            </table>
                                                        </div>

                                                    </div>
                                                </div> -->
        </div>
    </div>
@endsection

@section('section_script')
    <script>
        $('#zero-config').DataTable({
            "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                "<'table-responsive'tr>" +
                "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
            "oLanguage": {
                "oPaginate": {
                    "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                    "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                },
                "sInfo": "Showing page PAGE of _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Search...",
                "sLengthMenu": "Results :  _MENU_",
            },
            "stripeClasses": [],
            "lengthMenu": [7, 10, 20, 50],
            "pageLength": 10
        });

        $('#zero-config2').DataTable({
            "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" +
                "<'table-responsive'tr>" +
                "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count  mb-sm-0 mb-3'i><'dt--pagination'p>>",
            "oLanguage": {
                "oPaginate": {
                    "sPrevious": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>',
                    "sNext": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>'
                },
                "sInfo": "Showing page PAGE of _PAGES_",
                "sSearch": '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>',
                "sSearchPlaceholder": "Search...",
                "sLengthMenu": "Results :  _MENU_",
            },
            "stripeClasses": [],
            "lengthMenu": [7, 10, 20, 50],
            "pageLength": 10
        });

        $(document).ready(function() {
            $('<button><ul class="navbar-item flex-row ms-lg-auto ms-0"><li class="nav-item dropdown action-dropdown  order-lg-0 order-1"><a href="javascript:void(0);"class="nav-link dropdown-toggle user extra-btn" id="actionDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><div class="avatar-container"><div class="avatar avatar-sm avatar-mid avatar-indicators avatar-online"><h3>Export</h3></div></div></a><div class="dropdown-menu position-absolute" aria-labelledby="actionDropdown"><div class="dropdown-item"><a href="javascript:void(0)" id="download_all"><span>Download Overview</span></a></div><div class="dropdown-item"><a href="javascript:void(0)" id="download-selected"><span id="export">Download Selected</span></a></div></div></li></ul></button>')
                .insertBefore("#zero-config_filter label");


            $("#zero-config").on("click", ".sub_admin_permission", function() {
                // $('.sub_admin_permission').on('click', function() {
                var passportName = $(this).data('passport-name');
                var passportPrice = $(this).data('price');
                var passportId = $(this).data('passport-id');
                var quantity = $(this).data('quantity');
                var orderDate = $(this).data('orderdate');
                var tansId = $(this).data('payment_id');
                var paymentmode = $(this).data('paymentmode');
                var formattedPrice = '$' + passportPrice;


                $('.subadmin-option span').eq(0).text(passportName);
                $('.subadmin-option span').eq(1).text(formattedPrice);
                $('.subadmin-option span').eq(2).text(passportId);
                $('.subadmin-option span').eq(3).text(quantity);
                $('.subadmin-option span').eq(4).text(orderDate);
                $('.subadmin-option span').eq(5).text(tansId);
                $('.subadmin-option span').eq(6).text(paymentmode);
            });

        });


        $(function(e) {
            $("#select-all-ids").click(function() {
                $(".form-check-input").prop('checked', $(this).prop('checked'));
            });

            $(".form-check-input").click(function() {
                if (!$(this).prop('checked')) {
                    $("#select-all-ids").prop('checked', false);
                } else {
                    if ($(".form-check-input:checked").length === $(".form-check-input").length) {
                        $("#select-all-ids").prop('checked', true);
                    }
                }
            });

            $(document).on("click", "#download-selected", function(e) {
                e.preventDefault();

                var allIds = [];

                // Iterate over each page of the DataTable
                var table = $('#zero-config').DataTable();
                for (var i = 0; i < table.page.info().pages; i++) {
                    table.page(i).draw(false); // Switch to page i
                    $('#zero-config tbody input:checked').each(function() {
                        allIds.push($(this).val());
                    });
                }

                if (allIds.length > 0) {
                    // If there are selected customers
                    $('#ids').prop('disabled', false);
                    $('#all_id').prop('disabled', true);
                    $('#ids').val(allIds);
                    // Now submit the form or perform download action
                    $('#customer-form').submit(); // Or perform your download action here
                } else {
                    // No customers selected
                    toastr.error("Please select at least one customer to download.");
                }
            });




            $(document).on("click", "#download_all", function(e) {
                $('#all_id').prop('disabled', false);
                $('#ids').prop('disabled', true);
            })
        });

        $(document).on("click", ".more", function(e) {
            e.preventDefault();
            e.stopPropagation();
        });
    </script>

   <script>
    document.addEventListener("DOMContentLoaded", function() {
        // Initial data and categories
        var userChartData = getUserChartData('monthly');
        var userCategories = getUserChartCategories('monthly');

        // Chart options
        var userOptions = {
            chart: {
                type: 'line',
                zoom: { enabled: false },
                toolbar: { show: false }
            },
            series: userChartData,
            xaxis: { categories: userCategories },
            stroke: { curve: 'smooth', width: [4, 4] }
        };

        // Create the chart
        var userChart = new ApexCharts(document.querySelector("#user-chart"), userOptions);
        userChart.render();

        // Event listener for filter select element
        document.getElementById('graph-filter').addEventListener('change', function(event) {
            var selectedFilter = event.target.value;
            userChartData = getUserChartData(selectedFilter);
            userCategories = getUserChartCategories(selectedFilter);

            userChart.updateSeries(userChartData);
            userChart.updateOptions({
                xaxis: { categories: userCategories }
            });
        });
    });

    function getUserChartData(filter) {
        switch (filter) {
            case 'monthly':
                return [
                    { name: 'Customer', data: <?php echo json_encode(array_values($dataMonthlyWithType3)); ?> },
                    { name: 'Restaurant', data: <?php echo json_encode(array_values($dataMonthlyWithType4)); ?> }
                ];
            case 'quarterly':
                return [
                    { name: 'Customer', data: <?php echo json_encode(array_values($dataQuarterlyWithType3)); ?> },
                    { name: 'Restaurant', data: <?php echo json_encode(array_values($dataQuarterlyWithType4)); ?> }
                ];
            case 'yearly':
                return [
                    { name: 'Customer', data: <?php echo json_encode(array_values($dataYearlyWithType3)); ?> },
                    { name: 'Restaurant', data: <?php echo json_encode(array_values($dataYearlyWithType4)); ?> }
                ];
            default:
                return [];
        }
    }

    function getUserChartCategories(filter) {
        switch (filter) {
            case 'monthly':
                return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
            case 'quarterly':
                return ['Q1', 'Q2', 'Q3', 'Q4'];
            case 'yearly':
                return <?php echo json_encode(array_keys($dataYearlyWithType3)); ?>;
            default:
                return [];
        }
    }
</script>

@endsection
