@extends('admin.layout.index')
@section('title','Muftaax | Admin Dashboard')
@section('custom-style')
    <style>
        .dataTables_empty {
            text-align: center !important;
        }

        .dataTables_processing {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            font-size: 14px;
            z-index: 9999;
        }
    </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);">Dashboards</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Home</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <div class="btn-list gap-2 d-flex">
                    <button class="btn btn-primary-light btn-wave me-0" data-bs-toggle="modal"
                            data-bs-target="#deliveryModal">
                        <i class="bi bi-bicycle align-middle me-1"></i> Delivery
                    </button>
                    <button class="btn btn-warning-light btn-wave me-0" data-bs-toggle="modal"
                            data-bs-target="#takeModal">
                        <i class="bi bi-shop-window align-middle me-1"></i> Take Away
                    </button>
                    <button class="btn btn-secondary-light btn-wave me-0" data-bs-toggle="modal"
                            data-bs-target="#dineInModal">
                        <i class="bi bi-door-open align-middle me-1"></i> Dine - In
                    </button>
                </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-xxl-3 col-xl-12">
                            <div class="card custom-card icon-overlay">
                                <div class="card-body">
                                    <div class="d-flex align-items-top">
                                        <div class="me-3">
												<span class="avatar p-2 bg-info-transparent svg-info">
													<svg xmlns="http://www.w3.org/2000/svg" height="24px"
                                                         viewBox="0 0 24 24" width="24px" fill="#000000"><path
                                                            d="M0 0h24v24H0V0z" fill="none"/><path
                                                            d="M18 9l-1.41-1.42L10 14.17l-2.59-2.58L6 13l4 4zm1-6h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-.14 0-.27.01-.4.04-.39.08-.74.28-1.01.55-.18.18-.33.4-.43.64-.1.23-.16.49-.16.77v14c0 .27.06.54.16.78s.25.45.43.64c.27.27.62.47 1.01.55.13.02.26.03.4.03h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-.25c.41 0 .75.34.75.75s-.34.75-.75.75-.75-.34-.75-.75.34-.75.75-.75zM19 19H5V5h14v14z"/></svg>
												</span>
                                        </div>
                                        <div class="flex-fill">
                                            <h5 class="mb-1">{{$total_delivery}}</h5>
                                            <div class="d-flex align-items-top">
                                                <p class="mb-0 me-2">Total Delivery</p>
                                                <!-- <div class="text-success"> -->
                                                    <!-- <i class="ri-arrow-up-s-fill align-middle"></i>+0.21% -->
                                                <!-- </div> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-xl-12">
                            <div class="card custom-card icon-overlay">
                                <div class="card-body">
                                    <div class="d-flex align-items-top">
                                        <div class="me-3">

												<span class="avatar p-2 bg-success-transparent svg-success">
													<svg xmlns="http://www.w3.org/2000/svg" height="24px"
                                                         viewBox="0 0 24 24" width="24px" fill="#000000"><path
                                                            d="M0 0h24v24H0V0z" fill="none"/><path
                                                            d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0-6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm0 8c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm-6 4c.22-.72 3.31-2 6-2 2.7 0 5.8 1.29 6 2H9zm-3-3v-3h3v-2H6V7H4v3H1v2h3v3z"/></svg>
												</span>
                                        </div>
                                        <div class="flex-fill">
                                            <h5 class="mb-1">{{$total_dine_in}}</h5>
                                            <div class="d-flex align-items-top">
                                                <p class="mb-0 me-2">Total Dine-In</p>
                                                <!-- <div class="text-danger"><i
                                                        class="ri-arrow-down-s-fill align-middle"></i>-0.153%
                                                </div> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-xl-12">
                            <div class="card custom-card icon-overlay">
                                <div class="card-body">
                                    <div class="d-flex align-items-top">
                                        <div class="me-3">
												<span class="avatar p-2 bg-orange-transparent svg-orange">
													<svg xmlns="http://www.w3.org/2000/svg" height="24px"
                                                         viewBox="0 0 24 24" width="24px" fill="#000000"><path
                                                            d="M0 0h24v24H0V0z" fill="none"/><path
                                                            d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z"/></svg>
												</span>
                                        </div>
                                        <div class="flex-fill">
                                            <h5 class="mb-1">{{$total_take_away}}</h5>
                                            <div class="d-flex align-items-top">
                                                <p class="mb-0 me-2">Take Away</p>
                                                <!-- <div class="text-success"><i
                                                        class="ri-arrow-down-s-fill align-middle"></i>+0.253%
                                                </div> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-xxl-3 col-xl-12">
                            <div class="card custom-card icon-overlay">
                                <div class="card-body">
                                    <div class="d-flex align-items-top">
                                        <div class="me-3">
                                            <span class="avatar bg-secondary-transparent svg-secondary"> <svg
                                                    xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
                                                    height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"> <rect
                                                        fill="none" height="24" width="24"></rect> <g> <path
                                                            d="M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z"></path> </g> </svg>
                                            </span>
                                        </div>
                                        <div class="flex-fill">
                                            <h5 class="mb-1">{{$top_vendors_count}}</h5>
                                            <div class="d-flex align-items-top">
                                                <p class="mb-0 me-2">Top Vendors</p>
                                                <!-- <div class="text-success"><i
                                                        class="ri-arrow-down-s-fill align-middle"></i>+0.253%
                                                </div> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xl-9">
                    <div class="card custom-card overflow-hidden">
                        <div class="card-header justify-content-between">
                            <div class="card-title">Users Overview</div>
                            <div class="d-flex align-items-center justify-content-between">
    <!-- Year will dynamically display here -->
    <div class="dropdown">
        <a href="javascript:void(0);" class="p-2 fs-12" data-bs-toggle="dropdown" aria-expanded="false">
            Select Year <i class="ri-arrow-down-s-line align-middle ms-1"></i>
        </a>
        <!-- <p id="selectedYear" class="me-auto"></p> -->
        <ul class="dropdown-menu" id="yearDropdown" role="menu">
            @foreach($years as $year)
                <li>
                    <a class="dropdown-item year-option" href="javascript:void(0);" data-value="{{ $year }}">{{ $year }}</a>
                </li>
            @endforeach
        </ul>
    </div>
</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_users_count}}</p>
                                        <p class="mb-0 text-muted">Total Users</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">{{$active_users_count}}</p>
                                        <p class="mb-0 text-muted">Active Users</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">{{$inactive_users_count}}</p>
                                        <p class="mb-0 text-muted">Inactive Users</p>
                                    </div>
                                </div>
                            </div>
                            <div class="p-3" id="projectAnalysis"></div>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-3">
                    <div class="card custom-card">
                        <div class="card-header mb-3">
                            <div class="card-title">Total Drivers</div>
                        </div>
                        <div class="card-body pb-4">
                            <div id="total-employees" class="pt-4 pb-3"></div>
                            <div class="row">
                                <div class="col">
                                    <div class="text-center p-3 my-2 border border-dashed rounded">
                                        <span class="fs-14 total-employees male">Active Drivers</span>
                                        <div class="mt-1">
                                            <span class="fs-18">{{$total_active_drivers}}</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="text-center p-3 my-2 border border-dashed rounded">
                                        <span class="fs-14 total-employees female">Inactive Drivers</span>
                                        <div class="mt-1">
                                            <span class="fs-18">{{$total_inactive_drivers}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

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

            <!-- Start::row-2 -->
            <div class="row">
                <div class="col-xl-9">
                    <div class="card custom-card overflow-hidden">
                        <div class="card-header justify-content-between">
                            <div class="card-title">
                                Top Vendors
                            </div>
                            <!-- <div class="d-flex">
                                <div class="dropdown">
                                    <button class="btn btn-light dropdown-toggle m-1" type="button"
                                            id="dropdownMenuButton1" data-bs-toggle="dropdown"
                                            aria-expanded="false">
                                        Sort By
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
                                        <li><a class="dropdown-item sort-option-active" href="javascript:void(0);" data-value="recent">Recently Added</a></li>
                                        <li><a class="dropdown-item sort-option-active" href="javascript:void(0);" data-value="7days">7 Days Ago</a></li>
                                        <li><a class="dropdown-item sort-option-active" href="javascript:void(0);" data-value="1month">1 Month Ago</a></li>
                                    </ul>
                                </div>
                            </div> -->
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive p-2">
                                <table class="table text-nowrap" style="width: 100%" id="active-restaurants">
                                    <thead>
                                    <tr>
                                        <th scope="col">Name</th>
                                        <th scope="col">Location</th>
                                        <th scope="col">Phone</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Action</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>

                    </div>
                </div>
                <div class="col-xl-3">
                    <div class="card custom-card overflow-hidden" style="height: 93.5%">
                        <div class="card-header justify-content-between">
                            <div class="card-title">
                                Various Offerings
                            </div>
                            <div>
                                <a href="{{route('restaurants.index')}}" class="btn btn-primary-light btn-sm">
                                    View All
                                </a>
                            </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">
                                    <div class="d-flex gap-2">
                                        <p class="mb-0" style="" >{{$offer->offer}}
                                        </p>
                                        <span class="badge bg-warning-transparent">{{$offer->restaurants->name}}</span>
                                    </div>
                                    <span class="fs-12 text-muted me-2">{{ \Carbon\Carbon::parse($offer->created_at)->format('d M Y') }}</span>
                                    <span class="fs-12 text-muted"> {{ \Carbon\Carbon::parse($offer->created_at)->format('h:ia') }}</span>
                                </div>

                            </div>
                            @empty
                                <h5 class="text-center">No Active Offers Found!</h5>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
            <!-- End::row-2 -->


        </div>
    </div>
    <!-- End::app-content -->

    <!-- Add DinIn Modal -->
    <div class="modal fade" id="dineInModal" tabindex="-1" aria-labelledby="dineInModal"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addBannerModalLabel">Dine - In</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="post" id="dineInForm" enctype="multipart/form-data">
                    @csrf
                <div class="modal-body">

                        <div class="mb-3">
                            <label for="bannerType" class="form-label">Select Restaurant</label>
                            <select class="form-select" id="bannerType" name="restaurant_id">
                                <option selected>Select</option>
                                @foreach($restaurants as $restaurant)
                                <option value="{{$restaurant->id}}" >{{$restaurant->name}}</option>
                                @endforeach
                            </select>
                            <span class="text-danger" id="restaurant_idError"></span>
                        </div>
                        <div class="mb-3">
                            <label for="name" class="form-label">Name</label>
                            <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
                            <span class="text-danger" id="nameError"></span>
                        </div>
                        <div class="mb-3">
                            <label for="date" class="form-label">Date</label>
                            <input type="date" class="form-control" id="date"  name="date">
                            <span class="text-danger" id="dateError"></span>
                        </div>
                        <div class="mb-3">
                            <label for="time" class="form-label">Time</label>
                            <input type="time" class="form-control" id="time" name="time">
                            <span class="text-danger" id="timeError"></span>
                        </div>
                        <div class="mb-3">
                            <label for="persons" class="form-label">No. of persons</label>
                            <input type="persons" class="form-control" id="persons" name="no_of_persons">
                            <span class="text-danger" id="no_of_personsError"></span>
                        </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Add Delivery Modal -->
    <div class="modal fade" id="deliveryModal" tabindex="-1" aria-labelledby="deliveryModal"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addBannerModalLabel">Delivery</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="menuForm" method="post" enctype="multipart/form-data">
    @csrf
    <div class="modal-body">
        <!-- Select Restaurant -->
        <div class="mb-3">
            <label for="restaurantSelect" class="form-label">Select Restaurant</label>
            <select class="form-select" id="restaurantSelect" name="delivery_restaurant_id">
                <option selected>Select</option>
                @foreach($restaurants as $restaurant)
                    <option value="{{ $restaurant->id }}" {{ old('delivery_restaurant_id') == $restaurant->id ? 'selected' : '' }}>
                        {{ $restaurant->name }}
                    </option>
                @endforeach
            </select>
            <span class="text-danger d-none" id="delivery_restaurant_idError"></span>
        </div>

        <!-- Menu and Quantity Rows -->
        <div id="menuContainer">
            @foreach(old('title', ['']) as $index => $title)
                <div class="row menu-row">
                    <div class="col-lg-4 mt-2">
                        <select class="form-select form-select-lg menu-select" name="title[]" id="title_{{ $index }}">
                            <option selected>Select Menu</option>
                            @if(!empty($delivery_restaurant_id))
                            @foreach($menus as $menu)
                                <option value="{{ $menu->title }}" {{ $menu->title == $title ? 'selected' : '' }}>
                                    {{ $menu->title }}
                                </option>
                            @endforeach
                            @else
                            @endif
                        </select>
                        <span class="text-danger d-none" id="title_{{ $index }}Error">
                            @error("title.$index") {{ $message }} @enderror
                        </span>
                    </div>
                    <div class="col-lg-4 mt-2">
                        <input type="text" class="form-control quantity-input" name="quantity[]" id="quantity_{{ $index }}" placeholder="Enter Quantity" value="{{ old('quantity.'.$index) }}">
                        <span class="text-danger d-none" id="quantity_{{ $index }}Error">
                            @error("quantity.$index") {{ $message }} @enderror
                        </span>
                    </div>
                    <div class="col-lg-4 mt-3">
                        <button type="button" class="btn btn-danger btn-sm remove-row">
                            <i class="ri-delete-bin-5-line"></i>
                        </button>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Add More Rows -->
        <div class="text-end">
            <button type="button" class="btn btn-warning btn-sm" id="add-btn">Add More +</button>
        </div>
    </div>

    <!-- Submit -->
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

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

    <!-- Add Take Away Modal -->
    <div class="modal fade" id="takeModal" tabindex="-1" aria-labelledby="takeModal"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addBannerModalLabel">Take Away</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="takeForm" method="post" enctype="multipart/form-data">
    @csrf
    <div class="modal-body">
        <!-- Restaurant Selection -->
        <div class="mb-3">
            <label for="restaurantTakeSelect" class="form-label">Select Restaurant</label>
            <select class="form-select" id="restaurantTakeSelect" name="take_delivery_restaurant_id">
                <option selected>Select</option>
                @foreach($restaurants as $restaurant)
                    <option value="{{ $restaurant->id }}">{{ $restaurant->name }}</option>
                @endforeach
            </select>
            <span class="text-danger" id="take_delivery_restaurant_idError"></span>
        </div>

        <!-- Menu and Quantity Rows -->
        <div class="row">
            <div class="col-lg-4"><label class="form-label">Menu</label></div>
            <div class="col-lg-4"><label class="form-label">Quantity</label></div>
            <div class="col-lg-4"><label class="form-label">Delete</label></div>
        </div>
        <div id="takeContainer">
            @foreach(old('take_title', ['']) as $index => $title)
                <div class="row take-row">
                    <div class="col-lg-4 mt-2">
                    <select class="form-select form-select-lg take-select" name="take_title[]" id="take_title_{{ $index }}">
                            <option selected>Select Menu</option>
                            @if(!empty($take_delivery_restaurant_id))
                            @foreach($menus as $menu)
                                <option value="{{ $menu->title }}" {{ $menu->title == $title ? 'selected' : '' }}>
                                    {{ $menu->title }}
                                </option>
                            @endforeach
                            @else
                            @endif
                        </select>
                        <span class="text-danger d-none" id="take_title_{{ $index }}Error">
                            @error("take_title.$index") {{ $message }} @enderror
                        </span>
                    </div>
                    <div class="col-lg-4 mt-2">
                        <input type="text" class="form-control take-quantity-input" name="take_quantity[]" id="take_quantity_{{ $index }}" placeholder="Enter Quantity" value="{{ old('take_quantity.'.$index) }}">
                        <span class="text-danger d-none" id="take_quantity_{{ $index }}Error">
                            @error("take_quantity.$index") {{ $message }} @enderror
                        </span>
                    </div>
                    <div class="col-lg-4 mt-3">
                        <button type="button" class="btn btn-danger btn-sm remove-row">
                            <i class="ri-delete-bin-5-line"></i>
                        </button>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Add More Rows -->
        <div class="text-end">
            <button type="button" class="btn btn-warning btn-sm" id="add-btn-take">Add More +</button>
        </div>
    </div>

    <!-- Modal Footer -->
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

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

    <!-- Start::Delete task modal -->
    <div class="modal fade" id="delete-modal" aria-labelledby="statusOrder" tabindex="-1" aria-hidden="true"  style="display: none;">
        <div class="modal-dialog modal-dialog-centered" style="display: grid;">
            <div class="card bg-white border-0 rounded">
                <div class="alert custom-alert1 alert-primary">
                    <button type="button" class="btn-close ms-auto" data-bs-dismiss="alert" aria-label="Close"><i
                            class="bi bi-x"></i></button>
                    <div class="text-center px-5 pb-0 svg-primary">
                        <svg class="custom-alert-icon" xmlns="http://www.w3.org/2000/svg" height="1.5rem"
                             viewBox="0 0 24 24" width="1.5rem" fill="#000000">
                            <path d="M0 0h24v24H0z" fill="none"></path>
                            <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path>
                        </svg>
                        <div class="modal-content" style="border: none">
                            <h4>Are You Sure?</h4>
                            <p class="text-muted fs-15 mb-4">Are you sure that you want to cancel this order</p>
                            <form method="POST" id="deleteForm" class="form-submit">
                                @csrf
                                {{ method_field('DELETE') }}
                                <button type="button" class="btn btn-sm btn-outline-danger m-1" data-bs-dismiss="modal">
                                    Cancel
                                </button>
                                <button class="btn btn-sm btn-primary m-1" type="submit">Yes, Delete It</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- End::add task modal -->

@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>
    <script>
        // Initialize tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });

        // Event delegation for modal triggers
        document.addEventListener('click', function (event) {
            var target = event.target.closest('[data-modal-target]');
            if (target) {
                var modalId = target.getAttribute('data-modal-target');
                var modal = new bootstrap.Modal(document.querySelector(modalId));
                modal.show();
            }
        });
    </script>
{{--    <script>--}}
{{--        var totalUsers = {!! json_encode($total_users) !!};--}}
{{--        var activeUsers = {!! json_encode($active_users) !!};--}}
{{--        var inactiveUsers = {!! json_encode($inactive_users) !!};--}}

{{--        console.log("Total Users:", totalUsers, Array.isArray(totalUsers));--}}
{{--        console.log("Active Users:", activeUsers, Array.isArray(activeUsers));--}}
{{--        console.log("Inactive Users:", inactiveUsers, Array.isArray(inactiveUsers));--}}
{{--    </script>--}}


<script>
$(document).ready(function () {
    // Transform year-based objects into arrays
    var totalUsersRaw = @json($total_users) || {};
    var activeUsersRaw = @json($active_users) || {};
    var inactiveUsersRaw = @json($inactive_users) || {};

    // Function to convert objects into arrays based on months (1 to 12)
    function transformYearData(yearData) {
        return Array.from({ length: 12 }, (_, i) => yearData[i + 1] || null); // Use null for missing months
    }

    // Transform data for all available years
    var totalUsers = {};
    var activeUsers = {};
    var inactiveUsers = {};

    Object.keys(totalUsersRaw).forEach(year => {
        totalUsers[year] = transformYearData(totalUsersRaw[year]);
    });

    Object.keys(activeUsersRaw).forEach(year => {
        activeUsers[year] = transformYearData(activeUsersRaw[year]);
    });

    Object.keys(inactiveUsersRaw).forEach(year => {
        inactiveUsers[year] = transformYearData(inactiveUsersRaw[year]);
    });

    // Set default year to the first available key (e.g., 2024 or 2025)
    let selectedYear = Object.keys(totalUsers)[0] || new Date().getFullYear();

    // Update the selected year display
    $('#selectedYear').text(selectedYear);

    // ApexCharts options
    var options = {
        series: [
            { name: 'Total Users', type: 'bar', data: totalUsers[selectedYear] || [] },
            { name: 'Active Users', type: 'bar', data: activeUsers[selectedYear] || [] },
            { name: 'Inactive Users', type: 'bar', data: inactiveUsers[selectedYear] || [] }
        ],
        chart: {
            type: 'bar',
            height: 320,
            width: '100%',
            toolbar: { show: false }
        },
        plotOptions: {
            bar: {
                horizontal: false,
                columnWidth: '60%'
            }
        },
        dataLabels: { enabled: true },
        xaxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        tooltip: {
            y: {
                formatter: function (value) {
                    return value !== null ? value : ""; // Hides tooltips for null values
                }
            }
        }
    };

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

    // Handle year dropdown selection
    $('.year-option').on('click', function () {
        selectedYear = $(this).data('value'); // Get the selected year
        $('#selectedYear').text(selectedYear); // Update the displayed year
        updateChart(selectedYear); // Update chart with the selected year
    });

    function updateChart(year) {
        // Ensure year data exists and update chart
        if (totalUsers[year] && activeUsers[year] && inactiveUsers[year]) {
            chart1.updateOptions({
                series: [
                    { name: 'Total Users', type: 'bar', data: totalUsers[year] },
                    { name: 'Active Users', type: 'bar', data: activeUsers[year] },
                    { name: 'Inactive Users', type: 'bar', data: inactiveUsers[year] }
                ]
            });
        } else {
            console.warn(`No data available for year ${year}`);
        }
    }
});

</script>



    <script>
        var totalDrivers = @json($total_drivers);

        var optionsEmp = {
            series: [totalDrivers], // Only total drivers count
            chart: {
                height: 250,
                type: 'donut'
            },
            dataLabels: {
                enabled: false,
            },
            legend: {
                show: false,
            },
            stroke: {
                show: true,
                curve: 'smooth',
                lineCap: 'round',
                colors: "#fff",
                width: 0,
                dashArray: 0,
            },
            plotOptions: {
                pie: {
                    startAngle: 0,
                    endAngle: 360,
                    expandOnClick: false,
                    donut: {
                        size: '99%',
                        background: 'transparent',
                        labels: {
                            show: true,
                            total: {
                                show: true,
                                showAlways: true,
                                label: 'Total Drivers',
                                fontSize: '22px',
                                fontWeight: 600,
                                color: '#495057',
                                formatter: function (w) {
                                    return w.globals.seriesTotals[0]; // Show total drivers count
                                }
                            }
                        }
                    }
                }
            },
            colors: ["var(--primary-color)"],
        };

        var chart2 = new ApexCharts(document.querySelector("#total-employees"), optionsEmp);
        chart2.render();
    </script>

    {{--Datatable Active Restaurants--}}
    <script>
        $(function() {
            let URL = "{{ route('get-dashboard-active-restaurants') }}";
            let sortOption = 'recent';
            var t = $('#active-restaurants').DataTable({
                processing: true,
                serverSide: true,
                searching: true,
                order: [[1, 'desc']],
                bDestroy: true,
                dom: 'rtip',
                paging: false, 
                ajax: {
                    type: "GET",
                    url: URL,
                    "data": function(d) {
                        d.sortOption = sortOption;
                    }
                },
                columns: [
                    { data: null },
                    { data: 'location'},
                    { data: 'phone_number'},
                    { data: null},
                    { data: null }
                ],
                columnDefs: [
                    {
                        targets: 1, // Assuming 'location' is the second column (index 1)
                        render: function(data, type, row) {
                            return `<span data-bs-toggle="tooltip" data-bs-placement="top" title="${row.location_full}">${data}</span>`;
                        },
                        searchable: false,
                        orderable: false
                    },
                    {
                        render: function (data, type, row, meta) {
                            return `<div class="d-flex align-items-center">
                    <div class="me-2 lh-1">
                        <span class="avatar avatar-sm avatar-rounded">
                            <img src="${data.image}" alt="${data.name}" class="img-fluid">
                        </span>
                    </div>
                    <div>
                        <p class="mb-0 fw-medium">
                            <a href="javascript:void(0);">${data.name}</a>
                        </p>
                    </div>
                </div>`;
                        },
                        searchable: false,
                        orderable: false,
                        targets: 0
                    }
,

                    {
                        render: function (data, type, row, meta) {
                            return `<div class="d-flex align-items-center">
                          <span class="badge bg-success-transparent">Approved</span>
                        </div>`;
                        },
                        searchable: false,
                        orderable: false,
                        targets: 3
                    },

                    {
                        render: function (data, type, row, meta) {
                            var url = '{{ route("restaurants.show", ":id") }}';
                            url = url.replace(':id', data.id);
                            var update = '{{ route("restaurants.edit", ":id") }}';
                            update = update.replace(':id', data.id);
                            var detail = '{{ route("restaurants-detail", ":id") }}';
                            detail = detail.replace(':id', data.id);
                            @can('delete-restaurants')
                                return '<div class="d-flex">' +
                                '<a href="javascript:void(0)" class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn" data-bs-toggle="tooltip" id="alert-confirm" data-bs-custom-class="tooltip-primary" title="Cancel Order">' +
                                '<span type="button" data-url="'+url+'" data-bs-toggle="modal" data-bs-target="#delete-modal">' +
                                '<i class="ri-delete-bin-5-line"></i>' +
                                '</span>' +
                                '</a>' +
                                '</div>';
                                @else
    return '<div class="d-flex align-items-center">' +
        '<span class="badge bg-light-primary-transparent text-dark rounded-pill">Permission Denied</span>' +
        '</div>';
                                @endcan
                        },
                        searchable: false,
                        orderable: false,
                        targets: -1
                    }
                ],
                language: {
                    paginate: {
                    previous: '', // Hides the "Previous" button text
                    next: ''      // Hides the "Next" button text
                },
                    processing: "<div class='dt-processing'>Processing...</div>",
                },
                drawCallback: function(settings) {
                    $('[data-bs-toggle="tooltip"]').tooltip();
                }
            });
            $('.sort-option-active').on('click', function() {
                sortOption = $(this).data('value');
                t.ajax.reload();
            });

            // Trigger search on form input change or button click
            $('.header-search-bar, .form-select').on('change keyup', function() {
                t.ajax.reload();
            });
        });
    </script>
    {{--Ajax Restaurant Delete--}}
    <script>
        $(document).ready(function() {
            $("#delete-modal").on('show.bs.modal', function(event) {
                var triggerLink = $(event.relatedTarget);
                var url = triggerLink.data("url");
                $("#deleteForm").attr('action', url);

                // Reset the button state
                var submitButton = $("#delete-modal button[type='submit']");
                submitButton.prop('disabled', false).text('Yes, Delete It'); // Reset to original state
            });

            // Handle form submission for deletion
            $("#deleteForm").on('submit', function(event) {
                event.preventDefault(); // Prevent the default form submission

                // Get the action URL from the form, which contains the record ID
                var actionUrl = $(this).attr('action');
                var submitButton = $("#deleteForm button[type='submit']");
                submitButton.prop('disabled', true).text('Processing...'); // Disable the button and change text

                $.ajax({
                    type: 'POST',
                    url: actionUrl, // Use the action URL which includes the record ID
                    data: $(this).serialize(), // Serialize the form data
                    success: function(data) {
                        if (data.success) {
                            // Hide the modal
                            $('#delete-modal').modal('hide');

                            // Update the table content with the new HTML
                            $("#pending-restaurants").DataTable().ajax.reload();
                            $("#active-restaurants").DataTable().ajax.reload();


                            // Trigger the success toast notification
                            new Notyf({
                                duration: 3000,
                                position: { x: 'right', y: 'top' },
                                ripple: true,
                                dismissible: true
                            }).success(data.message);
                        }

                    },
                    error: function(data) {
                        // Handle errors here if needed
                        new Notyf({
                            duration: 3000,
                            position: { x: 'right', y: 'top' },
                            ripple: true,
                            dismissible: true
                        }).error(data.message);

                        // Re-enable the button and reset its text
                        submitButton.prop('disabled', false).text('Yes, Delete It'); // Reset button state
                    }
                });
            });
        });
    </script>

    {{--Ajax Dine-in Store--}}
    <script>
    $("#dineInForm").on('submit', function(event) {
    event.preventDefault();

    var submitButton = $('#dineInForm button[type="submit"]');
    submitButton.prop('disabled', true).text('Processing...');

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        type: 'POST',
        url: "{{route('dine-in.store')}}",
        data: new FormData(this),
        dataType: 'JSON',
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
            if (data.success) {
                $('#dineInModal').modal('hide');

                new Notyf({
                    duration: 3000,
                    position: { x: 'right', y: 'top' },
                    ripple: true,
                    dismissible: true
                }).success(data.message);

                $('#dineInForm')[0].reset();
            }
            if (data.error) {
                $('#dineInModal').modal('hide');

                new Notyf({
                    duration: 3000,
                    position: { x: 'right', y: 'top' },
                    ripple: true,
                    dismissible: true
                }).error(data.message);

                $('#dineInForm')[0].reset();
            }

            submitButton.prop('disabled', false).text('Submit');
        },
        error: function(data) {
            $('.text-danger').addClass('d-none').text(''); // Hide all error messages first

            var errors = data.responseJSON.errors;
            if (!$.isEmptyObject(errors)) {
                $.each(errors, function(key, value) {
                    // Dynamically map errors to corresponding rows (e.g., title.0 -> title_0Error)
                    let fieldKey = key.replace('.', '_'); // Convert 'title.0' to 'title_0'
                    let errorID = '#' + fieldKey + 'Error';
                    
                    if ($(errorID).length) {
                        $(errorID).removeClass('d-none').text(value[0]); // Display error
                    } else {
                        console.warn(`Error ID not found for field: ${key}`);
                    }
                });
            }
            submitButton.prop('disabled', false).text('Submit');
        }
    });
});

// Clear errors dynamically on input change
$('#dineInForm input,#dineInForm textarea,#dineInForm select').on('input change', function() {
    var name = $(this).attr('name');
    var index = $(this).closest('.menu-row').index(); // Get the row index
    var errorID = '#' + name.replace('[]', '_' + index) + 'Error'; // Dynamic error ID mapping

    if ($(this).val() !== '') {
        $(errorID).addClass('d-none').text('');
    }
});

    </script>

    <script>
    $(document).ready(function () {
    // Function to fetch menus based on selected restaurant
    $('#restaurantSelect').on('change', function () {
        let restaurantId = $(this).val();
        if (restaurantId) {
            $.ajax({
                url: "{{ route('get-admin-restaurant-menus') }}", // Define route in web.php
                type: "GET",
                data: { restaurant_id: restaurantId },
                success: function (response) {
                    $('.menu-select').each(function () {
                        $(this).empty().append('<option selected>Select</option>');
                        $.each(response.menus, function (index, menu) {
                            $(this).append(`<option value="${menu.title}">${menu.title}</option>`);
                        }.bind(this));
                    });
                    $('.take-select').each(function () {
                        $(this).empty().append('<option selected>Select</option>');
                        $.each(response.menus, function (index, menu) {
                            $(this).append(`<option value="${menu.title}">${menu.title}</option>`);
                        }.bind(this));
                    });
                }
            });
        }
    });
    $('#restaurantTakeSelect').on('change', function () {
        let restaurantId = $(this).val();
        if (restaurantId) {
            $.ajax({
                url: "{{ route('get-admin-restaurant-menus') }}", // Define route in web.php
                type: "GET",
                data: { restaurant_id: restaurantId },
                success: function (response) {
                    $('.menu-select').each(function () {
                        $(this).empty().append('<option selected>Select</option>');
                        $.each(response.menus, function (index, menu) {
                            $(this).append(`<option value="${menu.title}">${menu.title}</option>`);
                        }.bind(this));
                    });
                    $('.take-select').each(function () {
                        $(this).empty().append('<option selected>Select</option>');
                        $.each(response.menus, function (index, menu) {
                            $(this).append(`<option value="${menu.title}">${menu.title}</option>`);
                        }.bind(this));
                    });
                }
            });
        }
    });

    // Add new menu row
    $('#add-btn').click(function () {
    // Fetch menu options from the first row
    let menuOptions = $('#menuContainer .menu-select:first').html();

    let rowCount = $('#menuContainer .menu-row').length; // Get the current row count
    let newRow = `
        <div class="row menu-row">
            <div class="col-lg-4 mt-2">
                <select class="form-select menu-select" name="title[]" id="title_${rowCount}">
                    ${menuOptions} <!-- Pre-populated options -->
                </select>
                <span class="text-danger d-none" id="title_${rowCount}Error"></span>
            </div>
            <div class="col-lg-4 mt-2">
                <input type="text" class="form-control quantity-input" name="quantity[]" id="quantity_${rowCount}" placeholder="Enter Quantity">
                <span class="text-danger d-none" id="quantity_${rowCount}Error"></span>
            </div>
            <div class="col-lg-4 mt-3">
                <button type="button" class="btn btn-danger btn-sm remove-row">
                    <i class="ri-delete-bin-5-line"></i>
                </button>
            </div>
        </div>
    `;
    $('#menuContainer').append(newRow);
});

    // Prevent removal of the first row in menuContainer
    $(document).on('click', '.remove-row', function () {
        let container = $(this).closest('#menuContainer'); // Identify container
        if (container.find('.menu-row').length === 1) {
          
            new Notyf({
                            duration: 3000,
                            position: { x: 'right', y: 'top' },
                            ripple: true,
                            dismissible: true
                        }).error('The first row cannot be deleted.');
        } else {
            $(this).closest('.menu-row').remove();
        }
    });

    $('#add-btn-take').click(function () {
    // Fetch menu options from the first dropdown
    let menuOptions = $('#takeContainer .take-select:first').html();

    let rowCount = $('#takeContainer .take-row').length; // Get current row count
    let newRow = `
        <div class="row take-row">
            <div class="col-lg-4 mt-2">
                <select class="form-select take-select" name="take_title[]" id="take_title_${rowCount}">
                    ${menuOptions} <!-- Pre-populated options -->
                </select>
                <span class="text-danger d-none" id="take_title_${rowCount}Error"></span>
            </div>
            <div class="col-lg-4 mt-2">
                <input type="text" class="form-control take-quantity-input" name="take_quantity[]" id="take_quantity_${rowCount}" placeholder="Enter Quantity">
                <span class="text-danger d-none" id="take_quantity_${rowCount}Error"></span>
            </div>
            <div class="col-lg-4 mt-3">
                <button type="button" class="btn btn-danger btn-sm remove-row">
                    <i class="ri-delete-bin-5-line"></i>
                </button>
            </div>
        </div>
    `;
    $('#takeContainer').append(newRow);
});


    // Prevent removal of the first row in takeContainer
    $(document).on('click', '.remove-row', function () {
        let container = $(this).closest('#takeContainer'); // Identify container
        if (container.find('.take-row').length === 1) {
            new Notyf({
                            duration: 3000,
                            position: { x: 'right', y: 'top' },
                            ripple: true,
                            dismissible: true
                        }).error('The first row cannot be deleted.');
        } else {
            $(this).closest('.take-row').remove();
        }
    });
    // Prevent negative values in quantity inputs
    $(document).on('input', '.quantity-input', function () {
        let value = $(this).val();
        if (value < 0) {
            $(this).val(0); // Reset to 0 if the value is negative
            new Notyf({
                duration: 3000,
                position: { x: 'right', y: 'top' },
                ripple: true,
                dismissible: true
            }).error('Negative quantities are not allowed.');
        }
    });
    $(document).on('input', '.take-quantity-input', function () {
        let value = $(this).val();
        if (value < 0) {
            $(this).val(0); // Reset to 0 if the value is negative
            new Notyf({
                duration: 3000,
                position: { x: 'right', y: 'top' },
                ripple: true,
                dismissible: true
            }).error('Negative quantities are not allowed.');
        }
    });
});

    </script>


    {{--Ajax Delivery Store--}}
    <script>
    $("#menuForm").on('submit', function(event) {
    event.preventDefault();

    var submitButton = $('#menuForm button[type="submit"]');
    submitButton.prop('disabled', true).text('Processing...');

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        type: 'POST',
        url: "{{route('deliver-order.store')}}",
        data: new FormData(this),
        dataType: 'JSON',
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
            if (data.success) {
                $('#deliveryModal').modal('hide');

                new Notyf({
                    duration: 3000,
                    position: { x: 'right', y: 'top' },
                    ripple: true,
                    dismissible: true
                }).success(data.message);

                $('#menuForm')[0].reset();
            }
            if(data.error) {
                $('#deliveryModal').modal('hide');

                new Notyf({
                    duration: 3000,
                    position: { x: 'right', y: 'top' },
                    ripple: true,
                    dismissible: true
                }).error(data.message);

                $('#menuForm')[0].reset();
            }

            submitButton.prop('disabled', false).text('Submit');
        },
        error: function(data) {
            console.log(data.responseJSON); // Log the entire error response for debugging

            $('.text-danger').addClass('d-none'); // Hide all error messages first

            var errors = data.responseJSON.errors;
            if (!$.isEmptyObject(errors)) {
                $.each(errors, function(key, value) {
                    console.log('Field:', key, 'Error:', value[0]); // Debugging

                    // Convert Laravel validation keys to corresponding error ID (e.g., quantity.0 -> quantity_0Error)
                    var field = key.replace('.', '_');
                    var errorID = '#' + field + 'Error';

                    if ($(errorID).length) {
                        // If error ID exists, display the validation error
                        $(errorID).removeClass("d-none").text(value[0]);
                    } else {
                        console.warn('Error ID not found for key:', key); // Log if the error ID is missing
                    }
                });
            }

            submitButton.prop('disabled', false).text('Submit');
        }
    });
});

// Hide validation errors when the user changes input fields
$('#menuForm').on('input change', 'input, textarea, select', function() {
    var name = $(this).attr('name'); // e.g., "quantity[]"
    var index = $(this).closest('.menu-row').index(); // Get row index dynamically
    var errorID = '#' + name.replace('[]', '_' + index) + 'Error'; // Convert to correct error ID (e.g., quantity_0Error)

    $(errorID).addClass('d-none').text(''); // Hide the error message
});

    </script>

    {{--Ajax Take Store--}}
    <script>
        $("#takeForm").on('submit', function(event) {
            event.preventDefault();

            var submitButton = $('#takeForm button[type="submit"]');
            submitButton.prop('disabled', true).text('Processing...');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'POST',
                url: "{{route('take-order.store')}}",
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                cache: false,
                processData: false,
                success: function(data) {
                    if (data.success) {

                        $('#takeModal').modal('hide');

                        new Notyf({
                            duration: 3000,
                            position: { x: 'right', y: 'top' },
                            ripple: true,
                            dismissible: true
                        }).success(data.message);

                        $('#takeForm')[0].reset();
                    }
                    if(data.error){
                        $('#takeModal').modal('hide');

                        new Notyf({
                            duration: 3000,
                            position: { x: 'right', y: 'top' },
                            ripple: true,
                            dismissible: true
                        }).error(data.message);

                        $('#takeForm')[0].reset();
                    }

                    submitButton.prop('disabled', false).text('Submit');
                },
                error: function(data) {
            console.log(data.responseJSON); // Log the entire error response for debugging

            $('.text-danger').addClass('d-none'); // Hide all error messages first

            var errors = data.responseJSON.errors;
            if (!$.isEmptyObject(errors)) {
                $.each(errors, function(key, value) {
                    console.log('Field:', key, 'Error:', value[0]); // Debugging

                    // Convert Laravel validation keys to corresponding error ID (e.g., quantity.0 -> quantity_0Error)
                    var field = key.replace('.', '_');
                    var errorID = '#' + field + 'Error';

                    if ($(errorID).length) {
                        // If error ID exists, display the validation error
                        $(errorID).removeClass("d-none").text(value[0]);
                    } else {
                        console.warn('Error ID not found for key:', key); // Log if the error ID is missing
                    }
                });
            }

            submitButton.prop('disabled', false).text('Submit');
        }
            });
        });

        $('#takeForm').on('input change', 'input, textarea, select', function() {
            var name = $(this).attr('name'); // e.g., "quantity[]"
            var index = $(this).closest('.take-row').index(); // Get row index
            var errorID = '#' + name.replace('[]', '_' + index) + 'Error'; // Convert to 'quantity_0Error'

            $(errorID).addClass('d-none'); // Hide error when input changes
        });

    </script>
@endsection