@extends('admin.layout.index')
@section('title','Admin | Restaurants Listing')
@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">

        <!-- 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">Restaurants List</h1>
                <div class="">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Restaurants</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Restaurants List</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-1 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-body">
                        <div class="row gy-3">
                            <div class="col-xl-3 pe-xl-0">
                                <div class="p-3 border border-dashed border-2 rounded text-center">
                                    <div
                                        class="svg-icon-background bg-primary-transparent mb-3 svg-primary mx-auto">
                                        <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">
                                        <h6 class="mb-2 fs-12">Total Restaurants</h6>
                                        <div class="pb-0 mt-0">
                                            <div>
                                                <h4 class="fs-18 fw-medium mb-2 d-flex align-items-center justify-content-center flex-wrap">
                                                    <span class="count-up" data-count="{{$total_restaurants}}">{{$total_restaurants}}</span>
                                                </h4>
                                                {{-- <p class="text-muted fs-11 mb-0 lh-1"><span--}}
                                                {{-- class="text-success me-1 fw-medium"> <i--}}
                                                {{-- class="ri-arrow-up-s-line me-1 align-middle"></i>3.25% </span>--}}
                                                {{-- <span>this month</span></p>--}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3">
                                <div class="p-3 border border-dashed border-2 rounded text-center">
                                    <div
                                        class="svg-icon-background bg-success-transparent mb-3 svg-success mx-auto">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                            <path
                                                d="M11.5,20h-6a1,1,0,0,1-1-1V5a1,1,0,0,1,1-1h5V7a3,3,0,0,0,3,3h3v5a1,1,0,0,0,2,0V9s0,0,0-.06a1.31,1.31,0,0,0-.06-.27l0-.09a1.07,1.07,0,0,0-.19-.28h0l-6-6h0a1.07,1.07,0,0,0-.28-.19.29.29,0,0,0-.1,0A1.1,1.1,0,0,0,11.56,2H5.5a3,3,0,0,0-3,3V19a3,3,0,0,0,3,3h6a1,1,0,0,0,0-2Zm1-14.59L15.09,8H13.5a1,1,0,0,1-1-1ZM7.5,14h6a1,1,0,0,0,0-2h-6a1,1,0,0,0,0,2Zm4,2h-4a1,1,0,0,0,0,2h4a1,1,0,0,0,0-2Zm-4-6h1a1,1,0,0,0,0-2h-1a1,1,0,0,0,0,2Zm13.71,6.29a1,1,0,0,0-1.42,0l-3.29,3.3-1.29-1.3a1,1,0,0,0-1.42,1.42l2,2a1,1,0,0,0,1.42,0l4-4A1,1,0,0,0,21.21,16.29Z" />
                                        </svg>
                                    </div>
                                    <div class="flex-fill">
                                        <h6 class="mb-2 fs-12">Active Restaurants</h6>
                                        <div>
                                            <h4 class="fs-18 fw-medium mb-2 d-flex align-items-center justify-content-center flex-wrap">
                                                <span class="count-up" data-count="{{$active_restaurants}}">{{$active_restaurants}}</span>
                                            </h4>
                                            {{-- <p class="text-muted fs-11 mb-0 lh-1"><span--}}
                                            {{-- class="text-danger me-1 fw-medium"> <i--}}
                                            {{-- class="ri-arrow-down-s-line me-1 align-middle"></i>1.16% </span>--}}
                                            {{-- <span>this month</span></p>--}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3 pe-xl-0">
                                <div class="p-3 border border-dashed border-2 rounded text-center">
                                    <div
                                        class="svg-icon-background bg-warning-transparent mb-3 svg-warning mx-auto">
                                        <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
                                            viewBox="0 0 24 24">
                                            <path
                                                d="M19,12h-7V5c0-0.6-0.4-1-1-1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9C20,12.4,19.6,12,19,12z M12,19.9c-3.8,0.6-7.4-2.1-7.9-5.9C3.5,10.2,6.2,6.6,10,6.1V13c0,0.6,0.4,1,1,1h6.9C17.5,17.1,15.1,19.5,12,19.9z M15,2c-0.6,0-1,0.4-1,1v6c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1C22,5.1,18.9,2,15,2z M16,8V4.1C18,4.5,19.5,6,19.9,8H16z" />
                                        </svg>
                                    </div>
                                    <div class="flex-fill">
                                        <h6 class="mb-2 fs-12">Pending Restaurants</h6>
                                        <div>
                                            <h4 class="fs-18 fw-medium mb-2 d-flex align-items-center justify-content-center flex-wrap">
                                                <span class="count-up" data-count="{{$pending_restaurants}}">{{$pending_restaurants}}</span>
                                            </h4>
                                            {{-- <p class="text-muted fs-11 mb-0 lh-1"><span--}}
                                            {{-- class="text-success me-1 fw-medium"> <i--}}
                                            {{-- class="ri-arrow-up-s-line me-1 align-middle"></i>0.25% </span>--}}
                                            {{-- <span>this month</span></p>--}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-3">
                                <div class="p-3 border border-dashed border-2 rounded text-center">
                                    <div class="svg-icon-background bg-light mb-3 svg-dark mx-auto">
                                        <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24"
                                            viewBox="0 0 24 24">
                                            <path
                                                d="M19,12h-7V5c0-0.6-0.4-1-1-1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9C20,12.4,19.6,12,19,12z M12,19.9c-3.8,0.6-7.4-2.1-7.9-5.9C3.5,10.2,6.2,6.6,10,6.1V13c0,0.6,0.4,1,1,1h6.9C17.5,17.1,15.1,19.5,12,19.9z M15,2c-0.6,0-1,0.4-1,1v6c0,0.6,0.4,1,1,1h6c0.6,0,1-0.4,1-1C22,5.1,18.9,2,15,2z M16,8V4.1C18,4.5,19.5,6,19.9,8H16z" />
                                        </svg>
                                    </div>
                                    <div class="flex-fill">
                                        <h6 class="mb-2 fs-12">Rejected Restaurants </h6>
                                        <div>
                                            <h4 class="fs-18 fw-medium mb-2 d-flex align-items-center justify-content-center flex-wrap">
                                                <span class="count-up" data-count="{{$reject_restaurants}}">{{$reject_restaurants}}</span>
                                            </h4>
                                            {{-- <p class="text-muted fs-11 mb-0 lh-1"><span--}}
                                            {{-- class="text-success me-1 fw-semibFold"> <i--}}
                                            {{-- class="ri-arrow-down-s-line me-1 align-middle"></i>0.46% </span>--}}
                                            {{-- <span>this month</span></p>--}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-body">
                        <ul class="nav nav-tabs tab-style-2 mb-3 d-sm-flex" id="myTab1" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="order-tab" data-bs-toggle="tab"
                                    data-bs-target="#order-tab-pane" type="button" role="tab"
                                    aria-controls="home-tab-pane" aria-selected="true"><i
                                        class="bi bi-file-break me-1 align-middle"></i>Pending Restaurants
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="confirmed-tab" data-bs-toggle="tab"
                                    data-bs-target="#confirm-tab-pane" type="button" role="tab"
                                    aria-controls="profile-tab-pane" aria-selected="false" tabindex="-1"><i
                                        class="bi bi-file-arrow-up me-1 align-middle"></i>Active Restaurants
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="reject-tab" data-bs-toggle="tab"
                                    data-bs-target="#reject-tab-pane" type="button" role="tab"
                                    aria-controls="reject-tab-pane" aria-selected="false" tabindex="-1"><i
                                        class="bi bi-file-arrow-down me-1 align-middle"></i>Rejected Restaurants
                                </button>
                            </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                            <div class="tab-pane fade show active text-muted border" id="order-tab-pane"
                                role="tabpanel"
                                aria-labelledby="home-tab" tabindex="0">
                                <div class="card-header justify-content-between m-0">
                                    <div class="card-title">
                                        Pending Restaurants
                                    </div>
                                    <div class="d-flex flex-wrap gap-2">

                                        <div class="card-body d-flex align-items-center flex-wrap">

                                            <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-pending" href="javascript:void(0);" data-value="recent">Recently Added</a></li>
                                                    <li><a class="dropdown-item sort-option-pending" href="javascript:void(0);" data-value="7days">7 Days Ago</a></li>
                                                    <li><a class="dropdown-item sort-option-pending" href="javascript:void(0);" data-value="1month">1 Month Ago</a></li>
                                                </ul>
                                            </div>
                                            <div class="d-flex align-items-center m-1" role="search">
                                                <input class="form-control" type="search" placeholder="Search" aria-label="Search" id="datatable-pending-search-input">
                                                <button type="button" class="btn btn-primary" id="search-btn"><i class="ri-search-line"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive p-2">
                                    <table class="table text-nowrap table-hover text-left" id="pending-restaurants" style="width: 100% !important;">
                                        <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Location</th>
                                                <th scope="col">Phone</th>
                                                <th scope="col">Action</th>
                                            </tr>
                                        </thead>
                                    </table>
                                    <div class="card-footer border-top-0">
                                        {{-- <div class="d-flex align-items-center flex-wrap overflow-auto">--}}
                                        {{-- <div class="mb-2 mb-sm-0">--}}
                                        {{-- Showing <b>1</b> to <b>10</b> of <b>10</b> entries <i--}}
                                        {{-- class="bi bi-arrow-right ms-2 fw-medium"></i>--}}
                                        {{-- </div>--}}
                                        {{-- <div class="ms-auto">--}}
                                        {{-- <ul class="pagination mb-0 overflow-auto">--}}
                                        {{-- <li class="page-item disabled">--}}
                                        {{-- <a class="page-link">Previous</a>--}}
                                        {{-- </li>--}}
                                        {{-- <li class="page-item active" aria-current="page"><a--}}
                                        {{-- class="page-link"--}}
                                        {{-- href="javascript:void(0);">1</a>--}}
                                        {{-- </li>--}}
                                        {{-- <li class="page-item">--}}
                                        {{-- <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);">4</a></li>--}}
                                        {{-- <li class="page-item"><a class="page-link"--}}
                                        {{-- href="javascript:void(0);">5</a></li>--}}
                                        {{-- <li class="page-item">--}}
                                        {{-- <a class="page-link" href="javascript:void(0);">Next</a>--}}
                                        {{-- </li>--}}
                                        {{-- </ul>--}}
                                        {{-- </div>--}}
                                        {{-- </div>--}}
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade  text-muted border" id="confirm-tab-pane" role="tabpanel"
                                aria-labelledby="profile-tab" tabindex="0">
                                <div class="card-header justify-content-between m-0">
                                    <div class="card-title">
                                        Active Restaurants
                                    </div>
                                    <div class="d-flex flex-wrap gap-2">

                                        <div class="card-body d-flex align-items-center flex-wrap">

                                            <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 class="d-flex align-items-center m-1" role="search">
                                                <input class="form-control" type="search" placeholder="Search" aria-label="Search" id="datatable-search-input">
                                                <button type="button" class="btn btn-primary" id="search-btn-one"><i class="ri-search-line"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive p-2">
                                    <table class="table text-nowrap table-hover text-left" id="active-restaurants" style="width: 100% !important;">
                                        <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Location</th>
                                                <th scope="col">Phone</th>
                                                <th scope="col">Ratings</th>
                                                <th scope="col">Action</th>
                                            </tr>
                                        </thead>
                                    </table>
                                    <div class="card-footer border-top-0">
                                        {{-- <div class="d-flex align-items-center flex-wrap overflow-auto">--}}
                                        {{-- <div class="mb-2 mb-sm-0">--}}
                                        {{-- Showing <b>1</b> to <b>10</b> of <b>10</b> entries <i--}}
                                        {{-- class="bi bi-arrow-right ms-2 fw-medium"></i>--}}
                                        {{-- </div>--}}
                                        {{-- <div class="ms-auto">--}}
                                        {{-- <ul class="pagination mb-0 overflow-auto">--}}
                                        {{-- <li class="page-item disabled">--}}
                                        {{-- <a class="page-link">Previous</a>--}}
                                        {{-- </li>--}}
                                        {{-- <li class="page-item active" aria-current="page"><a--}}
                                        {{-- class="page-link"--}}
                                        {{-- href="javascript:void(0);">1</a>--}}
                                        {{-- </li>--}}
                                        {{-- <li class="page-item">--}}
                                        {{-- <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);">4</a></li>--}}
                                        {{-- <li class="page-item"><a class="page-link"--}}
                                        {{-- href="javascript:void(0);">5</a></li>--}}
                                        {{-- <li class="page-item">--}}
                                        {{-- <a class="page-link" href="javascript:void(0);">Next</a>--}}
                                        {{-- </li>--}}
                                        {{-- </ul>--}}
                                        {{-- </div>--}}
                                        {{-- </div>--}}
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane fade  text-muted border" id="reject-tab-pane" role="tabpanel"
                                aria-labelledby="profile-tab" tabindex="0">
                                <div class="card-header justify-content-between m-0">
                                    <div class="card-title">
                                        Reject Restaurants
                                    </div>
                                    <div class="d-flex flex-wrap gap-2">

                                        <div class="card-body d-flex align-items-center flex-wrap">

                                            <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-reject" href="javascript:void(0);" data-value="recent">Recently Added</a></li>
                                                    <li><a class="dropdown-item sort-option-reject" href="javascript:void(0);" data-value="7days">7 Days Ago</a></li>
                                                    <li><a class="dropdown-item sort-option-reject" href="javascript:void(0);" data-value="1month">1 Month Ago</a></li>
                                                </ul>
                                            </div>
                                            <div class="d-flex align-items-center m-1" role="search">
                                                <input class="form-control" type="search" placeholder="Search" aria-label="Search" id="datatable-reject-search-input">
                                                <button type="button" class="btn btn-primary" id="search-btn-reject"><i class="ri-search-line"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive p-2">
                                    <table class="table text-nowrap table-hover text-left" id="reject-restaurants" style="width: 100% !important;">
                                        <thead>
                                            <tr>
                                                <th scope="col">Name</th>
                                                <th scope="col">Location</th>
                                                <th scope="col">Phone</th>
                                                <th scope="col">Action</th>
                                            </tr>
                                        </thead>
                                    </table>
                                    <div class="card-footer border-top-0">
                                        {{-- <div class="d-flex align-items-center flex-wrap overflow-auto">--}}
                                        {{-- <div class="mb-2 mb-sm-0">--}}
                                        {{-- Showing <b>1</b> to <b>10</b> of <b>10</b> entries <i--}}
                                        {{-- class="bi bi-arrow-right ms-2 fw-medium"></i>--}}
                                        {{-- </div>--}}
                                        {{-- <div class="ms-auto">--}}
                                        {{-- <ul class="pagination mb-0 overflow-auto">--}}
                                        {{-- <li class="page-item disabled">--}}
                                        {{-- <a class="page-link">Previous</a>--}}
                                        {{-- </li>--}}
                                        {{-- <li class="page-item active" aria-current="page"><a--}}
                                        {{-- class="page-link"--}}
                                        {{-- href="javascript:void(0);">1</a>--}}
                                        {{-- </li>--}}
                                        {{-- <li class="page-item">--}}
                                        {{-- <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);">4</a></li>--}}
                                        {{-- <li class="page-item"><a class="page-link"--}}
                                        {{-- href="javascript:void(0);">5</a></li>--}}
                                        {{-- <li class="page-item">--}}
                                        {{-- <a class="page-link" href="javascript:void(0);">Next</a>--}}
                                        {{-- </li>--}}
                                        {{-- </ul>--}}
                                        {{-- </div>--}}
                                        {{-- </div>--}}
                                    </div>
                                </div>
                            </div>

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

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

{{--Pending Restaurant Status--}}
<div class="modal fade" id="orderStatus" 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">You won't be able to revert this!</p>
                        <div class="modal-body">
                            <!-- Your form or content here -->
                            <form method="POST" id="orderStatusForm" class="form-submit">
                                @csrf
                                <input type="hidden" name="action" id="actionInput" value="">
                                <button
                                    id="approveButton"
                                    class="btn btn-sm btn-primary m-1"
                                    type="submit"
                                    onclick="setAction('approve')">
                                    Approve
                                </button>
                                <button class="btn btn-sm btn-outline-danger m-1" data-bs-dismiss="modal" type="button">Cancel</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete restaurant 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 delete this restaurant</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>

<!-- Edit Restaurant modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered text-center" role="document">
        <div class="modal-content modal-content-demo">
            <div class="modal-header">
                <h6 class="modal-title">Edit Restaurant</h6>
                <button aria-label="Close" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form class="gy-4" id="editForm" method="post" enctype="multipart/form-data">
                @csrf
                {{ method_field('PUT') }}
                <div class="modal-body text-start invoice">
                    <input type="hidden" id="editId" name="id" />
                    <div class="form-group mb-3">
                        <label class="form-label">Name</label>
                        <input type="text" class="form-control" name="name" id="editName">
                        <span class="text-danger d-none" id="nameError"></span>
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Country Code</label>
                        <select name="country_code" id="editCountryCode" class="form-select m-0">
                            <!-- @foreach ($countries as $country)
                            <option value="{{ $country->phonecode }}">{{ ltrim($country->phonecode, '+') }}</option>
                            @endforeach -->
                            @foreach ($countries as $country)
                            <option value="{{ $country->phonecode }}" title="{{ $country->name }}">
                                {{ $country->iso3 }} - {{ $country->phonecode }}
                            </option>
                            @endforeach
                        </select>
                        <span class="text-danger d-none" id="country_codeError"></span>
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Phone Number</label>
                        <input type="tel" class="form-control" name="phone_number" id="editPhoneNumber">
                        <span class="text-danger d-none" id="phone_numberError"></span>
                    </div>
                    <div class="form-group mb-3">
                        <label for="location" class="form-label">Location</label>
                        <input type="text" class="form-control" id="location" placeholder="Enter Location"
                            name="location">
                        <span class="text-danger d-none" id="locationError"></span>
                        <!-- Add a hidden input for latitude and longitude -->
                        <input type="hidden" id="latitude" name="latitude">
                        <input type="hidden" id="longitude" name="longitude">
                    </div>
                    <div class="col-xl-12 mt-3">
                        <!-- Map Container -->
                        <div id="map" style="height: 400px; width: 100%; display: none"></div>
                    </div>

                    <div class="form-group mb-3">
                        <label class="form-label">Status</label>
                        <select class="form-select" name="status" id="editResStatus">
                            <option value="" selected>-- Select --</option>
                            <option value="active">Enable</option>
                            <option value="inactive">Disable</option>
                        </select>
                        <span class="text-danger d-none" id="statusError"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" type="submit">Submit</button>
                    <button class="btn btn-danger" data-bs-dismiss="modal" type="button">Close</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Approve Order--}}
<div class="modal fade" id="approveOrder" 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>Approval Status</h4>
                        <p class="text-muted fs-15 mb-4">This will approve the respective restaurant!</p>
                        <form method="POST" id="deleteCampForm" class="form-submit">
                            @csrf
                            <input type="hidden" name="action" id="actionInput" value=""><!-- Hidden input to store the action -->
                            <input type="hidden" name="restaurant_id" id="resId" value="">
                            <button
                                id="approveButton"
                                class="btn btn-sm btn-primary m-1"
                                type="submit"
                                onclick="setAction('approve')">
                                Approve
                            </button>
                            <button
                                id="rejectButton"
                                class="btn btn-sm btn-outline-danger m-1"
                                type="submit"
                                onclick="setAction('reject')">
                                Reject
                            </button>
                            {{-- <button--}}
                            {{-- id="rejectButton"--}}
                            {{-- class="btn btn-sm btn-outline-danger m-1"--}}
                            {{-- type="button"--}}
                            {{-- onclick="setActionAndHideModal('reject')">--}}
                            {{-- Cancel--}}
                            {{-- </button>--}}
                        </form>


                        {{-- </div>--}}
                        {{-- </div>--}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection
@section('custom-script')

{{--Bootsrap Modal--}}
<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>

{{-- Google Map - Part | --}}
<script>
    function initMap() {
        const pakLocation = {
            lat: 30.3753,
            lng: 69.3451
        }; // Default location coordinates

        const map = new google.maps.Map(document.getElementById("map"), {
            center: pakLocation, // Default center location
            zoom: 8, // Broader view
            mapTypeControl: false,
        });

        const input = document.querySelector("#editModal #location");
        const autocomplete = new google.maps.places.Autocomplete(input);

        // Bind the map's bounds (viewport) property to the autocomplete object
        autocomplete.bindTo("bounds", map);

        const infowindow = new google.maps.InfoWindow();
        const marker = new google.maps.Marker({
            map: map,
            position: pakLocation, // Default marker position
            visible: true
        });

        autocomplete.addListener("place_changed", () => {
            infowindow.close();
            marker.setVisible(false);

            const place = autocomplete.getPlace();

            if (!place.geometry || !place.geometry.location) {
                window.alert("No details available for input: '" + place.name + "'");
                return;
            }

            // Set the position of the marker using the place ID and location
            marker.setPosition(place.geometry.location);
            marker.setVisible(true);

            // Update the map view
            map.setCenter(place.geometry.location);
            map.setZoom(17);

            // Display the address and place details
            infowindow.setContent(place.formatted_address);
            infowindow.open(map, marker);

            // Update the hidden input fields with latitude and longitude
            document.querySelector('#editModal #latitude').value = place.geometry.location.lat();
            document.querySelector('#editModal #longitude').value = place.geometry.location.lng();
        });
    }

    // Initialize the map when the modal is shown
    document.addEventListener("DOMContentLoaded", function() {
        const editModal = document.getElementById("editModal");

        editModal.addEventListener("shown.bs.modal", function() {
            // Reinitialize the map when the modal becomes visible
            initMap();
        });
    });
</script>

{{-- Google Map - Part || --}}
<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0NWIAcfZjLVpYWWVcddq_A2qpZAV39EA&libraries=places&callback=initMap"
    async defer>
</script>

{{--Action Input--}}
<script>
    function setAction(action) {
        document.getElementById('actionInput').value = action;
    }
</script>

{{--Datatable Pending Restaurants--}}
<script>
    $(function() {
        let URL = "{{ route('get-pending-restaurants') }}";
        let sortOption = 'recent';
        var t = $('#pending-restaurants').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            order: [
                [1, 'desc']
            ],
            bDestroy: true,
            dom: 'lrtip',
            ajax: {
                type: "GET",
                url: URL,
                "data": function(d) {
                    d.sortOption = sortOption;
                }
            },
            columns: [{
                    data: null
                },
                {
                    data: 'location'
                },
                {
                    data: 'phone_number',
                    orderable: false

                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            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) {
                        var detail = '{{ route("restaurants-detail", ":id") }}';
                        detail = detail.replace(':id', data.id);
                        return `<div class="d-flex align-items-center">
                           <a href="${detail}"><b>${data.name}</b></a>
                        </div>`;
                    },
                    searchable: false,
                    orderable: true,
                    targets: 0
                },
                // {
                //     render: function (data, type, row, meta) {
                //         var url = '{{ route("restaurant.approve", ":id") }}';
                //         url = url.replace(':id', data.id);

                //         return '<div class="d-flex">' +
                //             '<a data-url="'+url+'" data-id="' + row.id + '"  data-bs-toggle="modal" data-bs-target="#approveOrder" class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn" id="alert-confirm" href="javascript:void(0)" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-primary" title="Approve Restaurant">' +
                //             '<span type="button">' +
                //             '<i class="ri-information-fill"></i>' +
                //             '</span>' +
                //             '</a>';
                //     },
                //     searchable: false,
                //     orderable: false,
                //     targets: -1
                // }
            ],
            drawCallback: function(settings) {
                var api = this.api();
                var dataCount = api.data().count();

                // Hide pagination if no data is available
                if (dataCount === 0) {
                    $('.dataTables_paginate').hide();
                } else {
                    $('.dataTables_paginate').show();
                }
                $('[data-bs-toggle="tooltip"]').tooltip();
            }
        });
        $('.sort-option-pending').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>

{{--Datatable Active Restaurants--}}
<script>
    $(function() {
        let URL = "{{ route('get-active-restaurants') }}";
        let sortOption = 'recent';
        var t = $('#active-restaurants').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            order: [
                [1, 'desc']
            ],
            bDestroy: true,
            dom: 'lrtip',
            ajax: {
                type: "GET",
                url: URL,
                "data": function(d) {
                    d.sortOption = sortOption;
                }
            },
            columns: [{
                    data: null
                },
                {
                    data: 'location'
                },
                {
                    data: 'phone_number',
                    orderable: false
                },
                {
                    data: 'rating',
                    orderable: true
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            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) {
                        var detail = '{{ route("restaurants-detail", ":id") }}';
                        detail = detail.replace(':id', data.id);
                        return `<div class="d-flex align-items-center">
                           <a href="${detail}"><b>${data.name}</b></a>
                        </div>`;
                    },
                    searchable: false,
                    orderable: true,
                    targets: 0
                },
                {
                    render: function(data, type, row) {

                        let rating = Math.round(data);
                        let fullStars = Math.floor(rating);
                        let halfStar = rating % 1 >= 0.5;
                        let emptyStars = 5 - fullStars - (halfStar ? 1 : 0);


                        let starsHtml = '';
                        for (let i = 0; i < fullStars; i++) {
                            starsHtml += '<span class="text-warning"><i class="bi bi-star-fill"></i></span>';
                        }
                        if (halfStar) {
                            starsHtml += '<span class="text-warning"><i class="bi bi-star-half"></i></span>';
                        }
                        for (let i = 0; i < emptyStars; i++) {
                            starsHtml += '<span class="text-warning"><i class="bi bi-star"></i></span>';
                        }

                        return `<div class="min-w-fit-content ms-2">${starsHtml}</div>`;
                    },
                    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);

                //         {{--                                                    <a href="javascript:void(0)" data-bs-toggle="tooltip"--}}
                //         {{--                                                       data-bs-custom-class="tooltip-primary" aria-label="Edit Restaurant"--}}
                //         {{--                                                       data-modal-target="#editRestaurant"--}}
                //         {{--                                                       class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn"--}}
                //         {{--                                                       data-bs-original-title="Edit Restaurant">--}}
                //         {{--                                                        <i class="ri-edit-line"></i>--}}
                //         {{--                                                    </a>--}}
                //         {{--                                                    <a href="{{route('admin-restaurant-detail')}}"--}}
                //         {{--                                                       data-bs-toggle="tooltip"--}}
                //         {{--                                                       data-bs-custom-class="tooltip-success"--}}
                //         {{--                                                       aria-label="Restaurant Detail"--}}
                //         {{--                                                       title="Restaurant Detail"--}}
                //         {{--                                                       class="btn btn-success-light btn-icon ms-1 btn-sm invoice-btn"><i--}}
                //         {{--                                                            class="ri-file-2-fill"></i></a>--}}
                //         {{--                                                    <button id="alert-confirm"--}}
                //         {{--                                                            data-bs-toggle="tooltip"--}}
                //         {{--                                                            data-bs-custom-class="tooltip-danger"--}}
                //         {{--                                                            aria-label="Cancel Order"--}}
                //         {{--                                                            title="Delete"--}}
                //         {{--                                                            data-modal-target="#delete-modal"--}}
                //         {{--                                                            class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn">--}}
                //         {{--                                                        <i class="ri-delete-bin-5-line"></i>--}}
                //         {{--                                                    </button>--}}


                //         return '<div class="d-flex">' +
                //             '<a href="javascript:void(0)" class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn" data-bs-toggle="tooltip" id="alert-confirm" data-bs-custom-class="tooltip-primary" title="Edit Restaurant">' +
                //             '<span type="button" data-id="' + row.id + '" data-name="' + row.name + '" data-location="' + row.location_full + '" data-latitude="' + row.latitude + '" data-longitude="' + row.longitude + '" data-status="' + row.status + '" data-phone="' + row.phone_number + '" data-code="' + row.phone_number  + '" data-url="'+update+'" data-bs-toggle="modal" data-bs-target="#editModal">' +
                //             '<i class="ri-edit-line"></i>' +
                //             '</span>' +
                //             '</a>' +
                //             '<a href="'+detail+'" class="btn btn-success-light btn-icon ms-1 btn-sm invoice-btn" data-bs-toggle="tooltip" id="alert-confirm" data-bs-custom-class="tooltip-primary" title="Restaurant Detail">' +

                //             '<i class="ri-file-2-fill"></i>' +
                //             '</span>' +
                //             '</a>' +
                //             '<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-danger" title="Delete 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>';
                //     },
                //     searchable: false,
                //     orderable: false,
                //     targets: -1
                // }
            ],
            drawCallback: function(settings) {
                var api = this.api();
                var dataCount = api.data().count();

                // Hide pagination if no data is available
                if (dataCount === 0) {
                    $('.dataTables_paginate').hide();
                } else {
                    $('.dataTables_paginate').show();
                }
                $('[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>

{{--Datatable Reject Restaurants--}}
<script>
    $(function() {
        let URL = "{{ route('get-reject-restaurants') }}";
        let sortOption = 'recent';
        var t = $('#reject-restaurants').DataTable({
            processing: true,
            serverSide: true,
            searching: true,
            order: [
                [1, 'desc']
            ],
            bDestroy: true,
            dom: 'lrtip',
            ajax: {
                type: "GET",
                url: URL,
                "data": function(d) {
                    d.sortOption = sortOption;
                }
            },
            columns: [{
                    data: null
                },
                {
                    data: 'location'
                },
                {
                    data: 'phone_number'
                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            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) {
                        var detail = '{{ route("restaurants-detail", ":id") }}';
                        detail = detail.replace(':id', data.id);
                        return `<div class="d-flex align-items-center">
                           <a href="${detail}"><b>${data.name}</b></a>
                        </div>`;
                    },
                    searchable: false,
                    orderable: false,
                    targets: 0
                },
                // {
                //     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);

                //         {{--                                                    <a href="javascript:void(0)" data-bs-toggle="tooltip"--}}
                //         {{--                                                       data-bs-custom-class="tooltip-primary" aria-label="Edit Restaurant"--}}
                //         {{--                                                       data-modal-target="#editRestaurant"--}}
                //         {{--                                                       class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn"--}}
                //         {{--                                                       data-bs-original-title="Edit Restaurant">--}}
                //         {{--                                                        <i class="ri-edit-line"></i>--}}
                //         {{--                                                    </a>--}}
                //         {{--                                                    <a href="{{route('admin-restaurant-detail')}}"--}}
                //         {{--                                                       data-bs-toggle="tooltip"--}}
                //         {{--                                                       data-bs-custom-class="tooltip-success"--}}
                //         {{--                                                       aria-label="Restaurant Detail"--}}
                //         {{--                                                       title="Restaurant Detail"--}}
                //         {{--                                                       class="btn btn-success-light btn-icon ms-1 btn-sm invoice-btn"><i--}}
                //         {{--                                                            class="ri-file-2-fill"></i></a>--}}
                //         {{--                                                    <button id="alert-confirm"--}}
                //         {{--                                                            data-bs-toggle="tooltip"--}}
                //         {{--                                                            data-bs-custom-class="tooltip-danger"--}}
                //         {{--                                                            aria-label="Cancel Order"--}}
                //         {{--                                                            title="Delete"--}}
                //         {{--                                                            data-modal-target="#delete-modal"--}}
                //         {{--                                                            class="btn btn-danger-light btn-icon ms-1 btn-sm invoice-btn">--}}
                //         {{--                                                        <i class="ri-delete-bin-5-line"></i>--}}
                //         {{--                                                    </button>--}}


                //             return '<div class="d-flex">' +
                //             // '<a href="javascript:void(0)" class="btn btn-primary-light btn-icon ms-1 btn-sm invoice-btn" data-bs-toggle="tooltip" id="alert-confirm" data-bs-custom-class="tooltip-primary" title="Edit Restaurant">' +
                //             // '<span type="button" data-id="' + row.id + '" data-name="' + row.name + '" data-location="' + row.location_full + '" data-latitude="' + row.latitude + '" data-longitude="' + row.longitude + '" data-status="' + row.status + '" data-phone="' + row.phone_number + '" data-url="'+update+'" data-bs-toggle="modal" data-bs-target="#editModal">' +
                //             // '<i class="ri-edit-line"></i>' +
                //             // '</span>' +
                //             // '</a>' +
                //             // '<a href="'+detail+'" class="btn btn-success-light btn-icon ms-1 btn-sm invoice-btn" data-bs-toggle="tooltip" id="alert-confirm" data-bs-custom-class="tooltip-primary" title="Restaurant Detail">' +
                //             //
                //             // '<i class="ri-file-2-fill"></i>' +
                //             // '</span>' +
                //             // '</a>' +
                //             '<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-danger" title="Delete 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>';
                //     },
                //     searchable: false,
                //     orderable: false,
                //     targets: -1
                // }
            ],
            drawCallback: function(settings) {
                var api = this.api();
                var dataCount = api.data().count();

                // Hide pagination if no data is available
                if (dataCount === 0) {
                    $('.dataTables_paginate').hide();
                } else {
                    $('.dataTables_paginate').show();
                }
                $('[data-bs-toggle="tooltip"]').tooltip();
            }
        });
        $('.sort-option-reject').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 Pending Status Approval--}}
<script>
    $(document).ready(function() {
        $("#orderStatus").on("show.bs.modal", function(event) {
            var triggerLink = $(event.relatedTarget);
            var url = triggerLink.data("url");
            $("#orderStatusForm").attr("action", url);
        });

        $("#orderStatusForm").on("submit", function(event) {
            event.preventDefault();

            var action = $("#actionInput").val();
            var actionUrl = $(this).attr("action");
            var submitButton = action === "approve" ? $("#approveButton") : $("#rejectButton");

            if (action === "approve") {
                submitButton.prop("disabled", true).text("Processing...");
            }

            $.ajax({
                type: "POST",
                url: actionUrl,
                data: $(this).serialize(),
                success: function(data) {
                    if (data.success) {
                        $("#orderStatus").modal("hide");

                        $("#pending-restaurants").DataTable().ajax.reload();
                        $("#active-restaurants").DataTable().ajax.reload();

                        submitButton.prop("disabled", false).text("Approve");

                        new Notyf({
                            duration: 3000,
                            position: {
                                x: 'right',
                                y: 'top'
                            },
                            ripple: true,
                            dismissible: true
                        }).success(data.message);
                    }
                    if (data.error === true) {
                        $("#orderStatus").modal("hide");

                        $("#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
                        }).warning(data.message);

                        if (action === "approve") {
                            submitButton.prop("disabled", false).text("Approve");
                        }
                    }
                },
                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 only for "Approve"
                    if (action === "approve") {
                        submitButton.prop("disabled", false).text("Approve");
                    }
                },
            });
        });
    });
</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();
                        $("#reject-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>

{{-- Edit Modal Data--}}
<script>
    $(document).ready(function() {
        $('#editModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var name = button.data('name');
            var location = button.data('location');
            var latitude = button.data('latitude');
            var longitude = button.data('longitude');
            var code = button.data('code');
            var countryCode = code.split('-')[0];
            var phone = button.data('phone');
            var phoneNumber = code.split('-')[1];
            var status = button.data('status');
            var url = button.data('url');


            // Update the modal's form action and fields
            var modal = $(this);
            modal.find('#editForm').attr('action', url);
            modal.find('#editId').val(id);
            modal.find('#editName').val(name);
            modal.find('#location').val(location);
            modal.find('#latitude').val(latitude);
            modal.find('#longitude').val(longitude);
            modal.find('#editCountryCode').val(countryCode);
            modal.find('#editPhoneNumber').val(phoneNumber);
            modal.find('#editResStatus').val(status);
        });
    });
</script>

<script>
    $(document).ready(function() {
        $('#approveOrder').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id'); // This is your JSON data

            var modal = $(this);
            modal.find('#resId').text(id);

        });
    });
</script>

{{--Ajax Update Restaurant--}}
<script>
    // Edit record with AJAX POST method
    $("#editForm").on('submit', function(event) {
        event.preventDefault();

        $('#nameError').addClass('d-none').text('');
        $('#locationError').addClass('d-none').text('');
        $('#country_codeError').addClass('d-none').text('');
        $('#phone_numberError').addClass('d-none').text('');
        $('#statusError').addClass('d-none').text('');


        // Re-enable the submit button and reset its text
        var submitButton = $('#editForm button[type="submit"]');
        submitButton.prop('disabled', true).text('Processing...');


        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var rowId = $('#editForm input[name="id"]').val();

        $.ajax({
            type: 'POST',
            url: "{{ route('restaurants.update', ':id') }}".replace(':id', rowId),
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                if (data.success) {
                    // Hide the modal
                    $('#editModal').modal('hide');

                    $("#pending-restaurants").DataTable().ajax.reload();
                    $("#active-restaurants").DataTable().ajax.reload();

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



                    var submitButton = $('#editForm button[type="submit"]');
                    submitButton.prop('disabled', false).text('Submit'); // Reset button state
                }
                if (data.error) {
                    // $('#editModal').modal('hide');

                    $("#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
                    }).error(data.message);



                    var submitButton = $('#editForm button[type="submit"]');
                    submitButton.prop('disabled', false).text('Submit');
                }
                // Re-enable the button and reset its text
                submitButton.prop('disabled', false).text('Submit'); // Change to original text or appropriate label
            },
            error: function(data) {
                // Clear previous error messages
                $('#nameError').addClass('d-none').text('');
                $('#locationError').addClass('d-none').text('');
                $('#country_codeError').addClass('d-none').text('');
                $('#phone_numberError').addClass('d-none').text('');
                $('#statusError').addClass('d-none').text('');


                var errors = data.responseJSON;
                if ($.isEmptyObject(errors) == false) {
                    // Display error messages
                    $.each(errors.errors, function(key, value) {
                        var ErrorID = '#' + key + 'Error'; // Ensure this ID is correct
                        $(ErrorID).removeClass("d-none").text(value);
                    });
                }

                // Re-enable the button and reset its text
                submitButton.prop('disabled', false).text('Submit'); // Change to original text or appropriate label
            }
        });
    });
    // Clear error messages on input change
    $('#editForm input, #editForm select').on('input change', function() {
        var errorID = '#' + $(this).attr('name') + 'Error';
        if ($(this).val() !== '') {
            $(errorID).addClass('d-none');
        }
    });
</script>

<script>
    // Activate the search button
    $('#search-btn-one').on('click', function() {
        let searchValue = $('#datatable-search-input').val();

        // You can implement logic to filter data based on date and price too
        let filterString = searchValue;

        ;
        $('#active-restaurants').DataTable().search(filterString).draw();
    });
</script>
<script>
    // Activate the search button
    $('#search-btn').on('click', function() {
        let searchValue = $('#datatable-pending-search-input').val();

        // You can implement logic to filter data based on date and price too
        let filterString = searchValue;

        $('#pending-restaurants').DataTable().search(filterString).draw();

    });
</script>

<script>
    // Activate the search button
    $('#search-btn-reject').on('click', function() {
        let searchValue = $('#datatable-reject-search-input').val();

        // You can implement logic to filter data based on date and price too
        let filterString = searchValue;

        $('#reject-restaurants').DataTable().search(filterString).draw();

    });
</script>

<script>
    function setAction(action) {
        document.getElementById('actionInput').value = action;
    }
</script>
{{--Ajax Approval--}}
<script>
    $(document).ready(function() {

        function setAction(value) {
            $("#actionInput").val(value);
        }
        // Show modal and set form action dynamically
        $("#approveOrder").on("show.bs.modal", function(event) {
            var triggerLink = $(event.relatedTarget);
            var url = triggerLink.data("url");
            $("#deleteCampForm").attr("action", url);
        });

        // Handle form submission
        $("#deleteCampForm").on("submit", function(event) {
            event.preventDefault();

            var action = $("#actionInput").val();
            var actionUrl = $(this).attr("action");
            var submitButton = action === "approve" ? $("#approveButton") : $("#rejectButton");

            // Disable the clicked button and change its text only for "Approve"
            if (action === "approve") {
                var submitButton = $('#deleteCampForm #approveButton[type="submit"]');
                submitButton.prop("disabled", true).text("Processing...");
            } else {
                submitButton.prop("disabled", true).text("Processing...");
            }

            $.ajax({
                type: "POST",
                url: actionUrl,
                data: {
                    _token: $('input[name="_token"]').val(), // Include CSRF token
                    action: action, // Explicitly passing action value
                    restaurant_id: $("#resId").val() // Include restaurant_id if needed
                },
                success: function(data) {
                    if (data.success) {
                        // Hide the modal
                        $("#approveOrder").modal("hide");

                        // Update the table content with the new HTML
                        $("#pending-restaurants").DataTable().ajax.reload();
                        $("#active-restaurants").DataTable().ajax.reload();
                        $("#reject-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);

                        if (action === "reject") {
                            submitButton.prop("disabled", false).text("Reject");
                        } else {
                            submitButton.prop("disabled", false).text("Approve");

                        }
                    } else if (data.error === true) {
                        // Hide the modal
                        $("#approveOrder").modal("hide");

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

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

                        if (action === "reject") {
                            submitButton.prop("disabled", false).text("Reject");
                        } else {
                            submitButton.prop("disabled", false).text("Approve");

                        }
                    }
                },
                error: function(data) {
                    // Handle errors here if needed

                    new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top'
                        },
                        ripple: true,
                        dismissible: true
                    }).error("Failed to complete the action!");

                    // Re-enable the button and reset its text
                    if (action === "reject") {
                        submitButton.prop("disabled", false).text("Reject");
                    } else {
                        submitButton.prop("disabled", false).text("Approve");

                    }
                },
            });
        });
        // Attach setAction function to buttons
        $("#approveButton").click(function() {
            setAction("approve");
        });

        $("#rejectButton").click(function() {
            setAction("reject");
        });
    });
</script>
<script>
    function setActionAndHideModal(action) {
        // Set the action or perform some logic
        console.log(`Action set to: ${action}`);

        // Hide the modal
        const modal = document.querySelector('.modal.show'); // Replace '.modal.show' with your modal's selector
        if (modal) {
            const modalInstance = bootstrap.Modal.getInstance(modal);
            modalInstance.hide();
        }
    }
</script>
@endsection