@extends('restaurant.layout.index')
@section('title','Muftaax | Restaurant Dashboard')
@section('custom-style')
<style>
    .swiper-button-next {
        background: #00a1fe;
        margin-top: calc(10px - (var(--swiper-navigation-size)/ 2));
        right: var(--swiper-navigation-sides-offset, 5px);
    }

    .swiper-button-prev {
        background: #00a1fe;
        margin-top: calc(10px - (var(--swiper-navigation-size)/ 2));
        left: var(--swiper-navigation-sides-offset, 5px);
    }

    /* .swiper-backface-hidden .swiper-slide {
        width: 280px !important;
    } */
</style>
@endsection
@section('content')

<!-- Start::app-content -->
<div class="main-content app-content">
    <div class="container-fluid">

        <!-- Start::page-header -->
        <div class="my-4 page-header-breadcrumb d-flex align-items-center justify-content-between flex-wrap gap-2">
            <div>
                <h1 class="page-title fw-medium fs-18 mb-2">Home</h1>
                <div class="">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Dashboard</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Home</li>
                        </ol>
                    </nav>
                </div>
            </div>

        </div>
        <!-- End::page-header -->

        <!-- Start::row-1 -->
        <div class="row">

            <div class="col-xxl-12 col-xl-12">
                <div class="row">
                    <div class="col-xl-12">
                        <div class="card custom-card">
                            <div class="card-body">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="swiper swiper-basic">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide">
                                                <div
                                                    class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                    <div class="d-flex flex-fill align-items-center">
                                                        <div class="me-2">
                                                            <span class="avatar avatar-rounded bg-light p-2">
                                                                <i class="bi bi-file-bar-graph text-muted fs-18"></i>
                                                            </span>
                                                        </div>
                                                        <div class="lh-1">
                                                            <span
                                                                class="d-block mb-2 text-default">Active Orders</span>
                                                            <span class="d-block text-muted fs-12">{{$active_orders}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div
                                                    class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                    <div class="d-flex flex-fill align-items-center">
                                                        <div class="me-2">
                                                            <span class="avatar avatar-rounded bg-light p-2">
                                                                <i class="bi bi-file-earmark text-warning fs-18"></i>
                                                            </span>
                                                        </div>
                                                        <div class="lh-1">
                                                            <span
                                                                class="d-block mb-2 text-default">Pending Orders</span>
                                                            <span class="d-block text-muted fs-12">{{$pending_orders}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div
                                                    class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                    <div class="d-flex flex-fill align-items-center">
                                                        <div class="me-2">
                                                            <span class="avatar avatar-rounded bg-light p-2">
                                                                <i class="bi bi-file-earmark-medical text-success fs-18"></i>
                                                            </span>
                                                        </div>
                                                        <div class="lh-1">
                                                            <span
                                                                class="d-block mb-2 text-default">Delivered Orders</span>
                                                            <span class="d-block text-muted fs-12">{{$completed_orders}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div
                                                    class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                    <div class="d-flex flex-fill align-items-center">
                                                        <div class="me-2">
                                                            <span class="avatar avatar-rounded bg-light p-2">
                                                                <i class="bi bi-file-excel text-danger fs-18"></i>
                                                            </span>
                                                        </div>
                                                        <div class="lh-1">
                                                            <span class="d-block mb-2 text-default">
                                                                Cancelled Orders</span>
                                                            <span class="d-block text-muted fs-12">{{$cancelled_orders}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div
                                                    class="d-flex flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                    <div class="d-flex flex-fill align-items-center">
                                                        <div class="me-2">
                                                            <span class="avatar avatar-rounded bg-light p-2">
                                                                <i class="bi bi-card-heading text-primary fs-18"></i>
                                                            </span>
                                                        </div>
                                                        <div class="lh-1">
                                                            <span
                                                                class="d-block mb-2 text-default">Categories</span>
                                                            <span class="d-block text-muted fs-12">{{$categories}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div
                                                    class="d-flex flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                    <div class="d-flex flex-fill align-items-center">
                                                        <div class="me-2">
                                                            <span class="avatar avatar-rounded bg-light p-2">
                                                                <i class="bi bi-file-earmark-image text-secondary fs-18"></i>
                                                            </span>
                                                        </div>
                                                        <div class="lh-1">
                                                            <span class="d-block mb-2 text-default">Menus</span>
                                                            <span class="d-block text-muted fs-12">{{$menus}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div
                                                    class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                    <div class="d-flex flex-fill align-items-center">
                                                        <div class="me-2">
                                                            <span class="avatar avatar-rounded bg-light p-2">
                                                                <i class="bi bi-files-alt text-warning fs-18"></i>
                                                            </span>
                                                        </div>
                                                        <div class="lh-1">
                                                            <span
                                                                class="d-block mb-2 text-default">Offers</span>
                                                            <span class="d-block text-muted fs-12">{{$offers}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="swiper-slide">
                                                <div
                                                    class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                    <div class="d-flex flex-fill align-items-center">
                                                        <div class="me-2">
                                                            <span class="avatar avatar-rounded bg-light p-2">
                                                                <i class="bi bi-file-richtext-fill text-green fs-18"></i>
                                                            </span>
                                                        </div>
                                                        <div class="lh-1">
                                                            <span class="d-block mb-2 text-default">Top Deals</span>
                                                            <span class="d-block text-muted fs-12">{{$deals}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- <div class="swiper-slide">--}}
                                            {{-- <div--}}
                                            {{-- class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">--}}
                                            {{-- <div class="d-flex flex-fill align-items-center">--}}
                                            {{-- <div class="me-2">--}}
                                            {{-- <span class="avatar avatar-rounded bg-light p-2">--}}
                                            {{-- <i class="bi-person-add text-warning fs-18"></i>--}}
                                            {{-- </span>--}}
                                            {{-- </div>--}}
                                            {{-- <div class="lh-1">--}}
                                            {{-- <span class="d-block mb-2 text-default">Vendors</span>--}}
                                            {{-- <span class="d-block text-muted fs-12">1,689</span>--}}
                                            {{-- </div>--}}
                                            {{-- </div>--}}
                                            {{-- </div>--}}
                                            {{-- </div>--}}
                                            <div class="swiper-slide">
                                                <div
                                                    class="d-flex gap-2 flex-wrap align-items-center justify-content-between p-3 border rounded">
                                                    <div class="d-flex flex-fill align-items-center">
                                                        <div class="me-2">
                                                            <span class="avatar avatar-rounded bg-light p-2">
                                                                <i class="bi bi-file-excel text-primary fs-18"></i>
                                                            </span>
                                                        </div>
                                                        <div class="lh-1">
                                                            <span class="d-block mb-2 text-default">
                                                                Return Requests</span>
                                                            <span class="d-block text-muted fs-12">{{$return_orders}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="swiper-button swiper-button-next"></div>
                                    <div class="swiper-button swiper-button-prev"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xl-6">
                        <div class="card custom-card overflow-hidden">
                            <div class="card-header justify-content-between">
                                <div class="card-title">Sales Analytics</div>
                                <div class="dropdown">
                                    <a href="javascript:void(0);" class="p-2 fs-12" data-bs-toggle="dropdown"
                                        aria-expanded="false">
                                        View All<i class="ri-arrow-down-s-line align-middle ms-1"></i>
                                    </a>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a class="dropdown-item filter-option" href="javascript:void(0);" data-filter="today">Today</a></li>
                                        <li><a class="dropdown-item filter-option" href="javascript:void(0);" data-filter="this_week">This Week</a></li>
                                        <li><a class="dropdown-item filter-option" href="javascript:void(0);" data-filter="last_week">Last Week</a></li>
                                    </ul>

                                </div>
                            </div>
                            <div class="card-body p-0">
                                <div class="row border-bottom border-block-end-dashed">
                                    <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                        <div
                                            class="p-4 border-sm-end border-inline-end-dashed text-sm-start text-center">
                                            <p class="fs-20 mb-0">{{$total_orders}}</p>
                                            <p class="mb-0 text-muted">Total Orders</p>
                                        </div>
                                    </div>
                                    <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                        <div
                                            class="p-4 border-sm-end border-inline-end-dashed text-sm-start text-center">
                                            <p class="fs-20 mb-0">{{$completed_orders}}</p>
                                            <p class="mb-0 text-muted">Completed Orders</p>
                                        </div>
                                    </div>
                                    <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                        <div class="p-4 text-sm-start text-center">
                                            <p class="fs-20 mb-0">{{$cancelled_orders}}</p>
                                            <p class="mb-0 text-muted">Cancelled Orders</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-3" id="qrAnalysis"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-6">
                        <div class="card custom-card">
                            <div class="card-header">
                                <div class="card-title">Statistics</div>
                            </div>
                            <div class="card-body p-0">
                                <div class="row border-bottom border-block-end-dashed">
                                    <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                        <div
                                            class="p-4 border-sm-end border-inline-end-dashed text-sm-start text-center">
                                            <p class="fs-20 mb-0">{{$total_orders}}</p>
                                            <p class="mb-0 text-muted">Total Orders</p>
                                        </div>
                                    </div>
                                    <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                        <div
                                            class="p-4 border-sm-end border-inline-end-dashed text-sm-start text-center">
                                            <p class="fs-20 mb-0">{{$completed_orders}}</p>
                                            <p class="mb-0 text-muted">Complete Orders</p>
                                        </div>
                                    </div>
                                    <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12">
                                        <div class="p-4 text-sm-start text-center">
                                            <p class="fs-20 mb-0">{{$cancelled_orders}}</p>
                                            <p class="mb-0 text-muted">Cancelled Orders</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="p-3 mb-3" id="orders-chart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--End::row-1 -->

        <!-- Start::row-2 -->
        <div class="row">
            <div class="col-xl-8">
                <div class="card custom-card">
                    <div class="card-header justify-content-between">
                        <div class="card-title">
                            Recent Orders
                        </div>
                        <div class="d-flex">

                            <div class="dropdown ms-2 d-none">
                                <button class="btn btn-icon btn-secondary-light btn-sm btn-wave waves-light"
                                    type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="ti ti-dots-vertical"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="javascript:void(0);">All</a></li>

                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive p-2">
                            <table class="table text-nowrap" id="dashboard-orders" width="100%">
                                <thead>
                                    <tr>
                                        <th scope="col">Order Id</th>
                                        <th scope="col">Payment Method</th>
                                        <th scope="col">Address</th>
                                        <th scope="col">Date</th>
                                    </tr>
                                </thead>
                                {{-- <tbody>--}}
                                {{-- <tr class="invoice-list">--}}
                                {{-- <td>--}}
                                {{-- <a data-bs-effect="effect-scale" data-bs-toggle="modal"--}}
                                {{-- href="#invoiceDetail">2 Zinger Burgers<br>--}}
                                {{-- 1 Chicken Bucket</a>--}}
                                {{-- </td>--}}
                                {{-- <td>--}}
                                {{-- Add some crisp--}}
                                {{-- </td>--}}
                                {{-- <td>2464 Royal Ln. Mesa, New Jersey 45...</td>--}}
                                {{-- <td>--}}
                                {{-- 07/25/2024 <br> 10:00 am--}}
                                {{-- </td>--}}
                                {{-- </tr>--}}
                                {{-- <tr class="invoice-list">--}}
                                {{-- <td>--}}
                                {{-- <a data-bs-effect="effect-scale" data-bs-toggle="modal"--}}
                                {{-- href="#invoiceDetail">2 Zinger Burgers<br>--}}
                                {{-- 1 Chicken Bucket</a>--}}
                                {{-- </td>--}}
                                {{-- <td>--}}
                                {{-- Add some crisp--}}
                                {{-- </td>--}}
                                {{-- <td>2464 Royal Ln. Mesa, New Jersey 45...</td>--}}
                                {{-- <td>--}}
                                {{-- 07/25/2024 <br> 10:00 am--}}
                                {{-- </td>--}}
                                {{-- </tr>--}}
                                {{-- <tr class="invoice-list">--}}
                                {{-- <td>--}}
                                {{-- <a data-bs-effect="effect-scale" data-bs-toggle="modal"--}}
                                {{-- href="#invoiceDetail">2 Zinger Burgers<br>--}}
                                {{-- 1 Chicken Bucket</a>--}}
                                {{-- </td>--}}
                                {{-- <td>--}}
                                {{-- Add some crisp--}}
                                {{-- </td>--}}
                                {{-- <td>2464 Royal Ln. Mesa, New Jersey 45...</td>--}}
                                {{-- <td>--}}
                                {{-- 07/25/2024 <br> 10:00 am--}}
                                {{-- </td>--}}
                                {{-- </tr>--}}
                                {{-- <tr class="invoice-list">--}}
                                {{-- <td>--}}
                                {{-- <a data-bs-effect="effect-scale" data-bs-toggle="modal"--}}
                                {{-- href="#invoiceDetail">2 Zinger Burgers<br>--}}
                                {{-- 1 Chicken Bucket</a>--}}
                                {{-- </td>--}}
                                {{-- <td>--}}
                                {{-- Add some crisp--}}
                                {{-- </td>--}}
                                {{-- <td>2464 Royal Ln. Mesa, New Jersey 45...</td>--}}
                                {{-- <td>--}}
                                {{-- 07/25/2024 <br> 10:00 am--}}
                                {{-- </td>--}}
                                {{-- </tr>--}}
                                {{-- <tr class="invoice-list">--}}
                                {{-- <td>--}}
                                {{-- <a data-bs-effect="effect-scale" data-bs-toggle="modal"--}}
                                {{-- href="#invoiceDetail">2 Zinger Burgers<br>--}}
                                {{-- 1 Chicken Bucket</a>--}}
                                {{-- </td>--}}
                                {{-- <td>--}}
                                {{-- Add some crisp--}}
                                {{-- </td>--}}
                                {{-- <td>2464 Royal Ln. Mesa, New Jersey 45...</td>--}}
                                {{-- <td>--}}
                                {{-- 07/25/2024 <br> 10:00 am--}}
                                {{-- </td>--}}
                                {{-- </tr>--}}
                                {{-- </tbody>--}}
                            </table>
                        </div>
                    </div>
                    <div class="card-footer border-top-0">
                        <nav aria-label="Page navigation">
                            {{-- <ul class="pagination mb-0 float-end">--}}
                            {{-- <li class="page-item disabled">--}}
                            {{-- <a class="page-link">Previous</a>--}}
                            {{-- </li>--}}
                            {{-- <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>--}}
                            {{-- <li class="page-item active" aria-current="page">--}}
                            {{-- <a class="page-link" href="javascript:void(0);">2</a>--}}
                            {{-- </li>--}}
                            {{-- <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>--}}
                            {{-- <li class="page-item">--}}
                            {{-- <a class="page-link" href="javascript:void(0);">Next</a>--}}
                            {{-- </li>--}}
                            {{-- </ul>--}}
                        </nav>
                    </div>
                </div>
            </div>
            <div class="col-xl-4">
                <div class="card custom-card overflow-hidden" style="height: 95.4%;">
                    <div class="card-header justify-content-between">
                        <div class="card-title">
                            Recent Offers
                        </div>
                        <div>
                            @if($restaurant_offers->count() > 0)
                            <a href="{{route('offers.index')}}" class="btn btn-primary-light btn-wave">
                                View All
                            </a>
                            @endif
                        </div>
                    </div>
                    <div class="card-body p-0">
                        @forelse($restaurant_offers as $offer)
                        <div class="p-3 border-bottom border-block-end-dashed d-flex align-items-top">
                            <div class="svg-icon-background bg-info-transparent me-2 svg-info">
                                <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24">
                                    <path
                                        d="M13,16H7a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2ZM9,10h2a1,1,0,0,0,0-2H9a1,1,0,0,0,0,2Zm12,2H18V3a1,1,0,0,0-.5-.87,1,1,0,0,0-1,0l-3,1.72-3-1.72a1,1,0,0,0-1,0l-3,1.72-3-1.72a1,1,0,0,0-1,0A1,1,0,0,0,2,3V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A1,1,0,0,0,21,12ZM5,20a1,1,0,0,1-1-1V4.73L6,5.87a1.08,1.08,0,0,0,1,0l3-1.72,3,1.72a1.08,1.08,0,0,0,1,0l2-1.14V19a3,3,0,0,0,.18,1Zm15-1a1,1,0,0,1-2,0V14h2Zm-7-7H7a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2Z" />
                                </svg>
                            </div>
                            <div class="flex-fill">
                                <p class="mb-0">
                                    {{$offer->offer}}
                                    <span class="badge badge-sm bg-success-transparent ms-2">{{$offer->status}}</span>
                                </p>
                                <span class="fs-12 text-muted me-2">{{ $offer->created_at->format('d M Y') }}</span>
                                <span class="fs-12 text-muted">{{ $offer->created_at->format('g:ia') }}</span>
                            </div>

                        </div>
                        @empty
                        <h6 class="text-center mt-5">No Offers Available</h6>
                        @endforelse
                        {{-- <div class="p-3 border-bottom border-block-end-dashed d-flex align-items-top">--}}
                        {{-- <div class="svg-icon-background bg-info-transparent me-2 svg-info">--}}
                        {{-- <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24">--}}
                        {{-- <path--}}
                        {{-- d="M13,16H7a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2ZM9,10h2a1,1,0,0,0,0-2H9a1,1,0,0,0,0,2Zm12,2H18V3a1,1,0,0,0-.5-.87,1,1,0,0,0-1,0l-3,1.72-3-1.72a1,1,0,0,0-1,0l-3,1.72-3-1.72a1,1,0,0,0-1,0A1,1,0,0,0,2,3V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A1,1,0,0,0,21,12ZM5,20a1,1,0,0,1-1-1V4.73L6,5.87a1.08,1.08,0,0,0,1,0l3-1.72,3,1.72a1.08,1.08,0,0,0,1,0l2-1.14V19a3,3,0,0,0,.18,1Zm15-1a1,1,0,0,1-2,0V14h2Zm-7-7H7a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2Z"/>--}}
                        {{-- </svg>--}}
                        {{-- </div>--}}
                        {{-- <div class="flex-fill">--}}
                        {{-- <p class="mb-0">Handam BBQ & Fish--}}
                        {{-- <span class="badge badge-sm bg-warning-transparent ms-2">Pending</span>--}}
                        {{-- </p>--}}
                        {{-- <span class="fs-12 text-muted me-2">06 Sep 2023</span>--}}
                        {{-- <span class="fs-12 text-muted"> 09:40am</span>--}}
                        {{-- </div>--}}

                        {{-- </div>--}}
                        {{-- <div class="p-3 border-bottom border-block-end-dashed d-flex align-items-top">--}}
                        {{-- <div class="svg-icon-background bg-info-transparent me-2 svg-info">--}}
                        {{-- <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24">--}}
                        {{-- <path--}}
                        {{-- d="M13,16H7a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2ZM9,10h2a1,1,0,0,0,0-2H9a1,1,0,0,0,0,2Zm12,2H18V3a1,1,0,0,0-.5-.87,1,1,0,0,0-1,0l-3,1.72-3-1.72a1,1,0,0,0-1,0l-3,1.72-3-1.72a1,1,0,0,0-1,0A1,1,0,0,0,2,3V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A1,1,0,0,0,21,12ZM5,20a1,1,0,0,1-1-1V4.73L6,5.87a1.08,1.08,0,0,0,1,0l3-1.72,3,1.72a1.08,1.08,0,0,0,1,0l2-1.14V19a3,3,0,0,0,.18,1Zm15-1a1,1,0,0,1-2,0V14h2Zm-7-7H7a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2Z"/>--}}
                        {{-- </svg>--}}
                        {{-- </div>--}}
                        {{-- <div class="flex-fill">--}}
                        {{-- <p class="mb-0">Handam BBQ--}}
                        {{-- <span class="badge badge-sm bg-danger-transparent ms-2">Unpaid</span>--}}
                        {{-- </p>--}}
                        {{-- <span class="fs-12 text-muted me-2">17 Sep 2023</span>--}}
                        {{-- <span class="fs-12 text-muted"> 09:40am</span>--}}
                        {{-- </div>--}}

                        {{-- </div>--}}
                        {{-- <div class="p-3 d-flex align-items-top">--}}
                        {{-- <div class="svg-icon-background bg-info-transparent me-2 svg-info">--}}
                        {{-- <svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 24 24">--}}
                        {{-- <path--}}
                        {{-- d="M13,16H7a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2ZM9,10h2a1,1,0,0,0,0-2H9a1,1,0,0,0,0,2Zm12,2H18V3a1,1,0,0,0-.5-.87,1,1,0,0,0-1,0l-3,1.72-3-1.72a1,1,0,0,0-1,0l-3,1.72-3-1.72a1,1,0,0,0-1,0A1,1,0,0,0,2,3V19a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V13A1,1,0,0,0,21,12ZM5,20a1,1,0,0,1-1-1V4.73L6,5.87a1.08,1.08,0,0,0,1,0l3-1.72,3,1.72a1.08,1.08,0,0,0,1,0l2-1.14V19a3,3,0,0,0,.18,1Zm15-1a1,1,0,0,1-2,0V14h2Zm-7-7H7a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2Z"/>--}}
                        {{-- </svg>--}}
                        {{-- </div>--}}
                        {{-- <div class="flex-fill">--}}
                        {{-- <p class="mb-0">Handam Karahi--}}
                        {{-- <span class="badge badge-sm bg-success-transparent ms-2">Paid</span>--}}
                        {{-- </p>--}}
                        {{-- <span class="fs-12 text-muted me-2">17 Sep 2023</span>--}}
                        {{-- <span class="fs-12 text-muted"> 09:40am</span>--}}
                        {{-- </div>--}}

                        {{-- </div>--}}
                    </div>
                </div>
            </div>
        </div>
        <!-- End::row-2 -->


    </div>
</div>
<!-- End::app-content -->
<div class="modal fade" id="invoiceActiveDetail">
    <div class="modal-dialog modal-dialog-centered text-center modal-lg" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header">
                <h6 class="modal-title">Order Overview

                    <span class="badge bg-success-transparent ms-2" id="invoiceStatus"></span>

                </h6><button aria-label="Close" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-start">

                <div class="row">
                    <div class="col-xl-4">
                        <p class="fw-medium text-muted mb-1">Order ID :</p>
                        <p class="fs-15 mb-1" id="invoiceUnique">#SPK120219890</p>
                    </div>
                    <div class="col-xl-4">
                        <p class="fw-medium text-muted mb-1">Order Date :</p>
                        <p class="fs-15 mb-1" id="invoiceCreatedAt">29,Nov 2023 - <span class="text-muted fs-12">12:42PM</span></p>
                    </div>

                    <div class="col-xl-4">
                        <p class="fw-medium text-muted mb-1">Due Amount :</p>
                        <p class="fs-16 mb-1 fw-medium" id="invoiceTotal">$31.42</p>
                    </div>

                    <div class="col-xl-12">
                        <div class="table-responsive">
                            <table class="table nowrap text-nowrap border mt-4">
                                <thead>
                                    <tr>
                                        <th>Details</th>
                                        <th>Extras</th>
                                        <th>QUANTITY</th>
                                        <th>PRICE</th>
                                        <th>TOTAL</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- <tr>--}}
                                    {{-- <td>--}}
                                    {{-- <div class="fw-medium">--}}
                                    {{-- Zinger burger--}}
                                    {{-- </div>--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- Fries and 1 litre coke--}}
                                    {{-- </td>--}}
                                    {{-- <td class="product-quantity-container">--}}
                                    {{-- 2--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- $60--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- $120--}}
                                    {{-- </td>--}}
                                    {{-- </tr>--}}
                                    {{-- <tr>--}}
                                    {{-- <td>--}}
                                    {{-- <div class="fw-medium">--}}
                                    {{-- Zinger burger--}}
                                    {{-- </div>--}}
                                    {{-- </td>--}}
                                    {{-- <td>-</td>--}}
                                    {{-- <td class="product-quantity-container">--}}
                                    {{-- 2--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- $60--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- $120--}}
                                    {{-- </td>--}}
                                    {{-- </tr>--}}
                                    {{-- <tr>--}}
                                    {{-- <td>--}}
                                    {{-- <div class="fw-medium">--}}
                                    {{-- Hot Wings Bucket--}}
                                    {{-- </div>--}}
                                    {{-- </td>--}}
                                    {{-- <td>Garlic Ketchup</td>--}}

                                    {{-- <td class="product-quantity-container">--}}
                                    {{-- 2--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- $60--}}
                                    {{-- </td>--}}
                                    {{-- <td>--}}
                                    {{-- $120--}}
                                    {{-- </td>--}}
                                    {{-- </tr>--}}

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

                    <div class="row">
                        <div class="col-xl-12">
                            <div class="d-flex justify-content-end mt-3">
                                <div class="me-4">
                                    <p class="mb-0">Order Amount :</p>
                                    <p class="mb-0 fw-medium fs-15" id="invoiceAmount">$2,364</p>
                                </div>
                                <div class="me-4">
                                    <p class="mb-0">Delivery Charges :</p>
                                    <p class="mb-0 fw-medium fs-15" id="invoiceDelivery">$29.98</p>
                                </div>
                                <div>
                                    <p class="mb-0 fs-14">Total :</p>
                                    <p class="mb-0 fw-medium fs-16 text-success" id="invoiceOverallTotal">$31.42</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- <tr>--}}
                    {{-- <th scope="row">--}}
                    {{-- <p class="mb-0">Delivery Charges :</p>--}}
                    {{-- </th>--}}
                    {{-- <td>--}}
                    {{-- <p class="mb-0 fw-medium fs-15" id="invoiceDelivery">$29.98</p>--}}
                    {{-- </td>--}}
                    {{-- </tr>--}}

                    {{-- <tr>--}}
                    {{-- <th scope="row">--}}
                    {{-- <p class="mb-0 fs-14">Total :</p>--}}
                    {{-- </th>--}}
                    {{-- <td>--}}
                    {{-- <p class="mb-0 fw-medium fs-16 text-success" id="invoiceOverallTotal">$31.42</p>--}}
                    {{-- </td>--}}
                    {{-- </tr>--}}
                    {{-- --}}


                </div>

            </div>
            <div class="modal-footer">
                <div type="hidden" id="cancelId" style="display: none"></div>
                {{-- <button class="btn btn-danger" data-bs-target="#cancelOrder" data-bs-toggle="modal"  data-id="':id'"   data-url="{{ route('orders.approve', ':id') }}" onclick="setCancelUrl(this)">Cancel--}}
                {{-- Order</button> --}}
                {{-- <button class="btn btn-danger"--}}
                {{-- data-bs-target="#cancelOrder"--}}
                {{-- data-bs-toggle="modal"--}}
                {{-- data-url="{{ route('orders.approve', ':id') }}"--}}
                {{-- onclick="setCancelUrl(this)">Cancel Order</button>--}}
                <button class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endsection
@section('custom-script')
<script src="{{asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>
<!-- Jobs-Dashboard -->
<script src="{{asset('assets/js/jobs-dashboard.js')}}"></script>
<!-- Swiper JS -->
<script src="{{asset('assets/libs/swiper/swiper-bundle.min.js')}}"></script>

<script src="{{asset('assets/js/stocks-dashboard.js')}}"></script>

<script>
    var options = {
        grid: {
            borderColor: '#f2f5f7'
        },
        series: [{
                name: 'Total Orders',
                data: @json($monthlyTotalOrders)
            },
            {
                name: 'Completed Orders',
                data: @json($monthlyCompletedOrders)
            },
            {
                name: 'Cancelled Orders',
                data: @json($monthlyCancelledOrders)
            }
        ],
        chart: {
            type: 'bar',
            height: 385,
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '70%',
                endingShape: 'rounded'
            }
        },

        dataLabels: {
            enabled: false
        },
        colors: ["#007bff", "#28a745", "#dc3545"], // Blue, Green, Red
        stroke: {
            show: true,
            width: 2,
            colors: ['transparent']
        },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            labels: {
                style: {
                    colors: "#8c9097",
                    fontSize: '11px',
                    fontWeight: 600,
                    cssClass: 'apexcharts-xaxis-label',
                }
            }
        },
        yaxis: {
            title: {
                text: 'Orders',
                style: {
                    color: "#8c9097"
                }
            },
            labels: {
                style: {
                    colors: "#8c9097",
                    fontSize: '11px',
                    fontWeight: 600,
                    cssClass: 'apexcharts-yaxis-label',
                }
            }
        },
        fill: {
            opacity: 1
        },
        tooltip: {
            y: {
                formatter: function(val) {
                    return val + " orders";
                }
            }
        }
    };

    var chart = new ApexCharts(document.querySelector("#orders-chart"), options);
    chart.render();
</script>



{{--Datatable Active--}}
<script>
    $(function() {
        let URL = "{{ route('get-active-dashboard-orders') }}";

        var t = $('#dashboard-orders').DataTable({
            processing: true,
            serverSide: true,
            searching: true,

            order: [
                [1, 'desc']
            ],
            bDestroy: true,
            dom: 'rt',
            ajax: {
                "type": "GET",
                "url": URL
            },
            columns: [{
                    data: null
                },
                {
                    data: 'payment_method'
                },
                {
                    data: 'delivery_address'
                },
                {
                    data: 'created_at'
                }
            ],
            columnDefs: [{
                render: function(data, type, row, meta) {
                    var url = '{{ route("orders.approve", ":id") }}';
                    url = url.replace(':id', data.id);

                    return `
        <div class="d-flex align-items-center">
            <a href="javascript:void(0)" id="alert-confirm" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" title="Order Data">
                <span type="button"
                      data-url="${url}"
                      data-bs-toggle="modal"
                      data-bs-target="#invoiceActiveDetail"
                      data-id="${row.id}"
                      data-status="${row.status}"
                      data-created="${row.created_at}"
                      data-total="$${row.total}"
                      data-amount="$${row.amount}"
                      data-delivery="$${row.delivery_charges}"
                      data-unique="${row.order_uid}"
                      data-detail='${row.order_detail}'>
                      ${data.order_uid}
                </span>
            </a>
        </div>`;
                },
                searchable: false,
                orderable: false,
                targets: 0
            }, ],
        });
    });

    function selectRange() {
        $('#dashboard-orders').DataTable().ajax.reload();
    }
</script>

<script>
    $(document).ready(function() {
        $('#invoiceActiveDetail').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var status = button.data('status');
            var created = button.data('created');
            var total = button.data('total');
            var unique = button.data('unique');
            var amount = button.data('amount');
            var delivery = button.data('delivery');
            var detail = button.data('detail');
            var url = button.data('url');
            var id = button.data('id'); // This is your JSON data

            // Log the detail to check its type and content
            console.log(detail);
            console.log(typeof detail);

            var modal = $(this);
            modal.find('#invoiceStatus').text(status);
            modal.find('#invoiceCreatedAt').text(created);
            modal.find('#invoiceTotal').text(total);
            modal.find('#invoiceOverallTotal').text(total);
            modal.find('#invoiceUnique').text(unique);
            modal.find('#invoiceAmount').text(amount);
            modal.find('#invoiceDelivery').text(delivery);
            modal.find('#cancelId').text(id);
            var actionButton = modal.find('#modalActionButton');
            actionButton.data('url', url); // Pass URL to the button
            actionButton.data('id', id); // Pass ID to the button

            // Clear existing table rows
            var tableBody = modal.find('tbody'); // Assuming the tbody is directly under the modal
            tableBody.empty();

            // Check if detail is a string and parse it if necessary
            var details;
            if (typeof detail === 'string') {
                try {
                    details = JSON.parse(detail);
                } catch (e) {
                    console.error("Failed to parse JSON:", e);
                    return; // Exit if parsing fails
                }
            } else {
                details = detail; // Use directly if it's already an object
            }

            // Populate the table with the JSON data
            details.forEach(function(item) {
                var row = `<tr>
                <td>
                    <div class="fw-medium">${item.title}</div>
                </td>
                <td>
                ${item.addon_item ? '<span class="badge bg-success">Yes</span>' : '<span>-</span>'}
                </td>
                <td class="product-quantity-container">
                    ${item.quantity}
                </td>
                <td>
                    $${parseFloat(item.price).toFixed(2)} <!-- Ensure price is formatted correctly -->
                </td>
                <td>
                    $${(parseFloat(item.price) * item.quantity).toFixed(2)} <!-- Calculate total -->
                </td>
            </tr>`;
                tableBody.append(row);
            });
        });
    });
</script>

<script>
    var monthlyData = @json($monthlyData);
    var weeklyData = @json($weeklyData);
</script>
<script src="{{ asset('assets/js/jobs-dashboard.js') }}"></script>

<script>
    $('.filter-option').on('click', function() {
        const filter = $(this).data('filter'); // Get the filter type (today, this_week, last_week)

        // Send filter to the server or apply logic to refresh the data
        applyFilter(filter);
    });

    function applyFilter(filter) {
        $.ajax({
            url: '/get-filtered-data',
            method: 'GET',
            data: {
                filter: filter
            },
            success: function(data) {
                // Update your chart or table with the filtered data
                updateGraph(data);
            },
            error: function(err) {
                console.error('Error fetching data:', err);
            }
        });
    }

    function updateGraph(data) {
        myChart.data.datasets[0].data = data; // Replace with filtered data
        myChart.update(); // Refresh the chart
    }
</script>


<script>
    // Convert Laravel JSON data to JavaScript arrays
    var monthlyData = @json($monthlyData) || [];
    var weeklyData = @json($weeklyData) || [];

    // Fill missing months with 0 (ensuring 12 months)
    for (var i = 0; i < 12; i++) {
        if (typeof monthlyData[i] === 'undefined') {
            monthlyData[i] = 0;
        }
    }

    // Fill missing weeks with 0 (assuming 52 weeks in a year)
    for (var i = 0; i < 52; i++) {
        if (typeof weeklyData[i] === 'undefined') {
            weeklyData[i] = 0;
        }
    }

    var options = {
        series: [{
                name: 'Total Orders (Monthly)',
                type: 'line',
                data: monthlyData
            },
            {
                name: 'Total Orders (Weekly)',
                type: 'line',
                data: weeklyData.slice(0, 12) // First 12 weeks
            }
        ],
        chart: {
            height: 400,
            type: 'line',
            fontFamily: 'Poppins, sans-serif',
            toolbar: {
                show: true,
                tools: {
                    download: true,
                    selection: false,
                    zoom: false,
                    zoomin: false,
                    zoomout: false,
                    pan: false,
                    reset: false
                }
            }
        },
        stroke: {
            width: [3, 3],
            curve: 'smooth'
        },
        colors: ["#4eb6d0", "#69d85b"],
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        }
    };

    var chart1 = new ApexCharts(document.querySelector("#qrAnalysis"), options);
    chart1.render();

    // Handle filter selection
    document.querySelectorAll('.filter-option').forEach(item => {
        item.addEventListener('click', function() {
            var filterType = this.getAttribute('data-filter');
            updateChartData(filterType);
        });
    });

    // Function to update chart data based on filter type
    function updateChartData(filterType) {
        let filteredMonthlyData = [...monthlyData];
        let filteredWeeklyData = [...weeklyData];

        // Get today's date details
        let today = new Date();
        let currentMonth = today.getMonth();
        let currentWeek = Math.ceil(today.getDate() / 7) - 1; // Convert to 0-based index

        switch (filterType) {
            case 'today':
                filteredMonthlyData = monthlyData.map((data, index) => (index === currentMonth ? data : 0));
                filteredWeeklyData = weeklyData.map((data, index) => (index === currentWeek ? data : 0));
                break;

            case 'this_week':
                filteredWeeklyData = weeklyData.slice(0, 7); // First 7 days of the week
                break;

            case 'last_week':
                filteredWeeklyData = weeklyData.slice(7, 14); // Previous 7 days
                break;

            default:
                filteredMonthlyData = monthlyData;
                filteredWeeklyData = weeklyData;
                break;
        }

        // Update the chart with filtered data
        chart1.updateOptions({
            series: [{
                    name: 'Total Orders (Monthly)',
                    type: 'line',
                    data: filteredMonthlyData
                },
                {
                    name: 'Total Orders (Weekly)',
                    type: 'line',
                    data: filteredWeeklyData.slice(0, 12)
                }
            ]
        });
    }
</script>

@endsection