@extends('admin.layout.index')
@section('title','Admin | WithDrawals 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">Withdrawals List</h1>
                <div class="">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Withdrawals</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Withdrawals 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">Total Drivers</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="{{$total_drivers     }}">{{$total_drivers}}</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">Total Pending Restaurants Requests</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="{{$total_pending_restaurant_requests}}">{{$total_pending_restaurant_requests}}</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">Total Drivers Pending Requests</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="{{$total_pending_driver_requests}}">{{$total_pending_driver_requests}}</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>Restaurants Withdrawals
                                </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>Drivers Withdrawals
                                </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">
                                        Restaurants Withdrawals
                                    </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-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="restaurants-withdrawals-table" style="width: 100% !important;">
                                        <thead>
                                            <tr>
                                                <th scope="col">Restaurant Name</th>
                                                <th scope="col">Account</th>
                                                <th scope="col">Withdrawal Amount</th>
                                                <th scope="col">Current Balance</th>
                                                <th scope="col">Requested At</th>
                                                <th scope="col">Status</th>
                                                <th scope="col">Action</th>
                                            </tr>
                                        </thead>
                                    </table>
                                    <div class="card-footer border-top-0">
                                    </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">
                                        Drivers Withdrawals
                                    </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="drivers-withdrawals-table" style="width: 100% !important;">
                                        <thead>
                                            <tr>
                                                <th scope="col">Driver Name</th>
                                                <th scope="col">Account</th>
                                                <th scope="col">Withdrawal Amount</th>
                                                <th scope="col">Current Balance</th>
                                                <th scope="col">Requested At</th>
                                                <th scope="col">Status</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>


<!-- Restaurant Withdrawal Modal -->
<div class="modal fade" id="approveResWithDrawal" tabindex="-1" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLgLabel">Approve Restaurant Withdrawal</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" id="resWithdrawalForm" enctype="multipart/form-data">
                @csrf
                {{ method_field('PUT') }}
                <div class="modal-body">
                    <input type="hidden" id="editId" name="id" />

                    <!-- Payment Slip Upload Section -->
                    <div class="form-group mb-3">
                        <label class="form-label fw-medium mb-2">Payment Slip</label>
                        <div class="card border-dashed border-2">
                            <div class="card-body text-center p-4">
                                <div class="position-relative d-inline-block">
                                    <!-- Image Preview Area -->
                                    <div class="image-preview-container mb-3">
                                        <img src="" id="product-img-edit" class="img-fluid rounded border"
                                            style="display:none; max-width: 200px; max-height: 150px; object-fit: cover;" />
                                        <div id="placeholder-restaurant" class="placeholder-content"
                                            style="width: 200px; height: 150px; border: 2px dashed #dee2e6; border-radius: 8px; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                                            <div class="text-center text-muted">
                                                <i class="ri-image-line fs-2 mb-2 d-block"></i>
                                                <small>No image selected</small>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="d-flex justify-content-center align-items-center gap-2 mt-3">
                                        <!-- Upload Button -->
                                        <label for="restaurant-image-input" class="btn btn-outline-primary btn-sm">
                                            <i class="ri-upload-2-line me-1"></i>
                                            Choose File
                                        </label>
                                        <input class="form-control d-none" id="restaurant-image-input" type="file"
                                            accept="image/png, image/gif, image/jpeg" name="image"
                                            onchange="previewImageEdit(event)">

                                        <!-- Remove Button -->
                                        <button type="button" id="remove-restaurant-image" class="btn btn-outline-danger btn-sm"
                                            style="display:none;" onclick="removeImageEdit()">
                                            <i class="ri-delete-bin-line me-1"></i>
                                            Remove
                                        </button>
                                    </div>
                                </div>
                                <small class="text-muted mt-2 d-block">Accepted formats: JPG, PNG, GIF , JPEG , WEBP (Max: 2MB)</small>
                            </div>
                        </div>
                        <span class="text-danger d-none" id="imageEditError"></span>
                    </div>

                    <!-- Note Section -->
                    <div class="form-group mb-3">
                        <label for="editNote" class="form-label fw-medium">Admin Notes</label>
                        <textarea class="form-control" name="note" id="editNote" rows="3"
                            placeholder="Add any notes or comments about this withdrawal..."></textarea>
                    </div>

                    <!-- Status Section -->
                    <div class="form-group mb-2">
                        <label for="editStatus" class="form-label fw-medium">Status <span class="text-danger">*</span></label>
                        <select class="form-select" name="status" id="editStatus">
                            <option value="">-- Select Status --</option>
                            <option value="pending">Pending</option>
                            <option value="completed">Completed</option>
                            <option value="rejected">Rejected</option>
                        </select>
                        <span class="text-danger d-none" id="statusEditError"></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">
                        <i class="ri-check-line me-1"></i>
                        Update Withdrawal
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Driver Withdrawal Modal -->
<div class="modal fade" id="approveDriverWithdrawal" tabindex="-1" aria-labelledby="driverModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="driverModalLabel">Approve Driver Withdrawal</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="post" id="driverWithdrawalForm" enctype="multipart/form-data">
                @csrf
                {{ method_field('PUT') }}
                <div class="modal-body">
                    <input type="hidden" id="editDriverId" name="id" />

                    <!-- Payment Slip Upload Section -->
                    <div class="form-group mb-3">
                        <label class="form-label fw-medium mb-2">Payment Slip</label>
                        <div class="card border-dashed border-2">
                            <div class="card-body text-center p-4">
                                <div class="position-relative d-inline-block">
                                    <!-- Image Preview Area -->
                                    <!-- <div class="image-preview-container mb-3">
                                    <img src="" id="product-img-driver-edit" class="img-fluid rounded border"
                                        style="display:none; max-width: 200px; max-height: 150px; object-fit: cover;" />
                                    <div id="placeholder-driver" class="placeholder-content"
                                        style="width: 200px; height: 150px; border: 2px dashed #dee2e6; border-radius: 8px; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa; margin: 0 auto;">
                                        <div class="text-center text-muted">
                                            <i class="ri-image-line fs-2 mb-2 d-block"></i>
                                            <small>No image selected</small>
                                        </div>
                                    </div>
                                    </div> -->

                                    <div class="image-preview-container mb-3 text-center">
                                        <img src="" id="product-img-driver-edit" class="img-fluid rounded border mx-auto d-block"
                                            style="display:none; max-width: 200px; max-height: 150px; object-fit: cover;" />
                                        <div id="placeholder-driver" class="placeholder-content mx-auto"
                                            style="width: 200px; height: 150px; border: 2px dashed #dee2e6; border-radius: 8px; display: flex; align-items: center; justify-content: center; background-color: #f8f9fa;">
                                            <div class="text-center text-muted">
                                                <i class="ri-image-line fs-2 mb-2 d-block"></i>
                                                <small>No image selected</small>
                                            </div>
                                        </div>
                                    </div>


                                    <!-- Button Controls -->
                                    <div class="d-flex justify-content-center align-items-center gap-2 mt-3">
                                        <!-- Upload Button -->
                                        <label for="driver-image-input" class="btn btn-outline-primary btn-sm">
                                            <i class="ri-upload-2-line me-1"></i>
                                            Choose File
                                        </label>
                                        <input class="form-control d-none" id="driver-image-input" type="file"
                                            accept="image/png, image/gif, image/jpeg" name="image_driver"
                                            onchange="previewImageDriverEdit(event)">

                                        <!-- Remove Button -->
                                        <button type="button" id="remove-driver-image" class="btn btn-outline-danger btn-sm"
                                            style="display:none;" onclick="removeImageDriverEdit()">
                                            <i class="ri-delete-bin-line me-1"></i>
                                            Remove
                                        </button>
                                    </div>

                                    <small class="text-muted mt-3 d-block">Accepted formats: JPG, PNG, GIF , JPEG , WEBP (Max: 2MB)</small>
                                </div>
                            </div>
                        </div>
                        <span class="text-danger d-none" id="image_driverEditError"></span>
                    </div>

                    <!-- Note Section -->
                    <div class="form-group mb-3">
                        <label for="editDriverNote" class="form-label fw-medium">Admin Notes</label>
                        <textarea class="form-control" name="note" id="editDriverNote" rows="3"
                            placeholder="Add any notes or comments about this withdrawal..."></textarea>
                    </div>

                    <!-- Status Section -->
                    <div class="form-group mb-2">
                        <label for="editDriverStatus" class="form-label fw-medium">Status <span class="text-danger">*</span></label>
                        <select class="form-select" name="status_driver" id="editDriverStatus">
                            <option value="">-- Select Status --</option>
                            <option value="pending">Pending</option>
                            <option value="completed">Completed</option>
                            <option value="rejected">Rejected</option>
                        </select>
                        <span class="text-danger d-none" id="status_driverEditError"></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">
                        <i class="ri-check-line me-1"></i>
                        Update Withdrawal
                    </button>
                </div>
            </form>
        </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>

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

                },
                {
                    data: 'available_balance',
                    orderable: false

                },
                {
                    data: 'created_at',
                    orderable: false

                },
                {
                    data: null,
                    orderable: false

                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            columnDefs: [{
                render: function(data, type, row, meta) {

                    if (data.status == 'completed') {
                        return `<div class="d-flex align-items-center">
                            <span class="badge bg-success-transparent">${data.display_status}</span>
                        </div>`;
                    }
                    if (data.status == 'pending') {
                        return `<div class="d-flex align-items-center">
                            <span class="badge bg-warning-transparent">${data.display_status}</span>
                        </div>`;
                    }
                    if (data.status == 'rejected') {
                        return `<div class="d-flex align-items-center">
                            <span class="badge bg-danger-transparent">${data.display_status}</span>
                        </div>`;
                    } else {
                        return `<div class="d-flex align-items-center">

                        </div>`;
                    }
                },
                searchable: false,
                orderable: false,
                targets: 5
            }, {
                render: function(data, type, row, meta) {
                    var url = '{{ route("restaurant-withdrawal.approve") }}';
                    url = url; // Make sure data.id is correct

                    return '<div class="d-flex">' +
                        '<a data-url="' + url + '" data-id="' + row.id + '" data-note="' + row.admin_notes + '" data-status="' + row.status + '" data-image="' + row.payment_slip + '" data-bs-toggle="modal" data-bs-target="#approveResWithDrawal" 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 Withdrawal">' +
                        '<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>
<script>
    // Activate the search button
    $('#search-btn').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;

        ;
        $('#restaurants-withdrawals-table').DataTable().search(filterString).draw();
    });
</script>

<script>
    $(function() {
        let URL = "{{ route('get-driver-withdrawals') }}";
        let sortOption = 'recent';
        var t = $('#drivers-withdrawals-table').DataTable({
            processing: false,
            serverSide: true,
            searching: true,
            order: [
                [1, 'desc']
            ],
            bDestroy: true,
            dom: 'lrtip',
            ajax: {
                type: "GET",
                url: URL,
                "data": function(d) {
                    d.sortOption = sortOption;
                }
            },
            columns: [{
                    data: 'driver'
                },
                {
                    data: 'account'
                },
                {
                    data: 'amount',
                    orderable: false

                },
                {
                    data: 'available_balance',
                    orderable: false

                },
                {
                    data: 'created_at',
                    orderable: false

                },
                {
                    data: null,
                    orderable: false

                },
                {
                    data: 'action',
                    orderable: false,
                    searchable: false
                }
            ],
            columnDefs: [{
                render: function(data, type, row, meta) {

                    if (data.status == 'completed') {
                        return `<div class="d-flex align-items-center">
                            <span class="badge bg-success-transparent">${data.display_status}</span>
                        </div>`;
                    }
                    if (data.status == 'pending') {
                        return `<div class="d-flex align-items-center">
                            <span class="badge bg-warning-transparent">${data.display_status}</span>
                        </div>`;
                    }
                    if (data.status == 'rejected') {
                        return `<div class="d-flex align-items-center">
                            <span class="badge bg-danger-transparent">${data.display_status}</span>
                        </div>`;
                    } else {
                        return `<div class="d-flex align-items-center">

                        </div>`;
                    }
                },
                searchable: false,
                orderable: false,
                targets: 5
            }, {
                render: function(data, type, row, meta) {
                    var url = '{{ route("driver-withdrawal.approve") }}';
                    url = url; // Make sure data.id is correct

                    return '<div class="d-flex">' +
                        '<a data-url="' + url + '" data-id="' + row.id + '" data-note="' + row.admin_notes + '" data-status="' + row.status + '" data-image="' + row.payment_slip + '" data-bs-toggle="modal" data-bs-target="#approveDriverWithdrawal" 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 Driver Withdrawal">' +
                        '<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>
<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;

        ;
        $('#drivers-withdrawals-table').DataTable().search(filterString).draw();
    });
</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> -->


{{-- Edit Modal Data--}}
<script>
    $(document).ready(function() {
        $('#approveResWithDrawal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var notes = button.data('note');
            var status = button.data('status');
            var url = button.data('url');
            var image = button.data('image');

            var modal = $(this);
            modal.find('#editId').val(id);
            modal.find('#editNote').val(notes);
            modal.find('#editStatus').val(status);
            modal.find('#resWithdrawalForm').attr('action', url);

            // Handle existing image
            if (image && image.trim() !== '' && image !== 'null') {
                modal.find('#product-img-edit').attr('src', image).show();
                modal.find('#placeholder-restaurant').hide();
                modal.find('#remove-restaurant-image').show();
            } else {
                resetImageEdit();
            }

        });
    });
</script>

<script>
    $(document).ready(function() {
        $('#approveDriverWithdrawal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var notes = button.data('note');
            var status = button.data('status');
            var url = button.data('url');
            var image = button.data('image');

            var modal = $(this);
            modal.find('#editDriverId').val(id);
            modal.find('#editDriverNote').val(notes);
            modal.find('#editDriverStatus').val(status);
            modal.find('#driverWithdrawalForm').attr('action', url);

            // Handle existing image
            if (image && image !== '') {
                modal.find('#product-img-driver-edit').attr('src', image).show();
                modal.find('#placeholder-driver').hide();
                modal.find('#remove-driver-image').show();
            } else {
                resetImageDriverEdit();
            }
        });
    });
</script>
{{--Preview Image--}}
<script>
    function previewImageEdit(event) {
        const file = event.target.files[0];
        const imgElement = document.getElementById('product-img-edit');
        const placeholder = document.getElementById('placeholder-restaurant');
        const removeBtn = document.getElementById('remove-restaurant-image');

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                imgElement.src = e.target.result;
                imgElement.style.display = 'block';
                imgElement.style.margin = '0 auto'; // Center the image
                placeholder.style.display = 'none';
                removeBtn.style.display = 'inline-block';
            };
            reader.readAsDataURL(file);
        } else {
            resetImageEdit();
        }
    }

    function removeImageEdit() {
        document.getElementById('restaurant-image-input').value = '';
        resetImageEdit();
    }

    function resetImageEdit() {
        const imgElement = document.getElementById('product-img-edit');
        const placeholder = document.getElementById('placeholder-restaurant');
        const removeBtn = document.getElementById('remove-restaurant-image');

        imgElement.src = '';
        imgElement.style.display = 'none';
        placeholder.style.display = 'flex';
        removeBtn.style.display = 'none';
    }
</script>

<script>
    function previewImageDriverEdit(event) {
        const file = event.target.files[0];
        const imgElement = document.getElementById('product-img-driver-edit');
        const placeholder = document.getElementById('placeholder-driver');
        const removeBtn = document.getElementById('remove-driver-image');

        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                imgElement.src = e.target.result;
                imgElement.style.display = 'block';
                placeholder.style.display = 'none';
                removeBtn.style.display = 'inline-block';
            };
            reader.readAsDataURL(file);
        } else {
            resetImageDriverEdit();
        }
    }

    function removeImageDriverEdit() {
        document.getElementById('driver-image-input').value = '';
        resetImageDriverEdit();
    }

    function resetImageDriverEdit() {
        const imgElement = document.getElementById('product-img-driver-edit');
        const placeholder = document.getElementById('placeholder-driver');
        const removeBtn = document.getElementById('remove-driver-image');

        imgElement.src = '';
        imgElement.style.display = 'none';
        placeholder.style.display = 'flex';
        removeBtn.style.display = 'none';
    }
</script>



<script>
    // Edit record with AJAX POST method
    $("#resWithdrawalForm").on('submit', function(event) {
        event.preventDefault();

        $('#imageEditError').addClass('d-none').text('');
        $('#statusEditError').addClass('d-none').text('');

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

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

        var rowId = $('#editId').val(); // Get the ID from the hidden input field
        var formData = new FormData(this);

        // Use the action URL that was set when the modal was opened
        var actionUrl = $('#resWithdrawalForm').attr('action');

        $.ajax({
            type: 'POST',
            url: actionUrl, // Use the action URL directly instead of constructing it
            data: formData,
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                if (data.success) {
                    $('#approveResWithDrawal').modal('hide');
                    $('#restaurants-withdrawals-table').DataTable().ajax.reload();
                    $('#drivers-withdrawals-table').DataTable().ajax.reload();

                    new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top'
                        },
                        ripple: true,
                        dismissible: true
                    }).success(data.message);
                }
                if (data.error) {
                    $('#approveResWithDrawal').modal('hide');
                    $('#restaurants-withdrawals-table').DataTable().ajax.reload();
                    $('#drivers-withdrawals-table').DataTable().ajax.reload();

                    new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top'
                        },
                        ripple: true,
                        dismissible: true
                    }).error(data.message);
                }
                submitButton.prop('disabled', false).text('Submit');
            },
            error: function(data) {
                $('#imageEditError').addClass('d-none').text('');
                $('#statusEditError').addClass('d-none').text('');

                var errors = data.responseJSON;
                if ($.isEmptyObject(errors) == false) {
                    $.each(errors.errors, function(key, value) {
                        var ErrorID = '#' + key + 'EditError';
                        $(ErrorID).removeClass("d-none").text(value);
                    });
                }
                submitButton.prop('disabled', false).text('Submit');
            }
        });
    });
</script>

<script>
    // Edit record with AJAX POST method
    $("#driverWithdrawalForm").on('submit', function(event) {
        event.preventDefault();

        $('#image_driverEditError').addClass('d-none').text('');
        $('#status_driverEditError').addClass('d-none').text('');

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

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

        var rowId = $('#editDriverId').val(); // Get the ID from the hidden input field
        var formData = new FormData(this);

        // Use the action URL that was set when the modal was opened
        var actionUrl = $('#driverWithdrawalForm').attr('action');

        $.ajax({
            type: 'POST',
            url: actionUrl, // Use the action URL directly instead of constructing it
            data: formData,
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                if (data.success) {
                    $('#approveDriverWithdrawal').modal('hide');
                    $('#drivers-withdrawals-table').DataTable().ajax.reload();
                    $('#restaurants-withdrawals-table').DataTable().ajax.reload();

                    new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top'
                        },
                        ripple: true,
                        dismissible: true
                    }).success(data.message);
                }
                if (data.error) {
                    $('#approveDriverWithdrawal').modal('hide');
                    $('#drivers-withdrawals-table').DataTable().ajax.reload();
                    $('#restaurants-withdrawals-table').DataTable().ajax.reload();

                    new Notyf({
                        duration: 3000,
                        position: {
                            x: 'right',
                            y: 'top'
                        },
                        ripple: true,
                        dismissible: true
                    }).error(data.message);
                }
                submitButton.prop('disabled', false).text('Submit');
            },
            error: function(data) {
                $('#image_driverEditError').addClass('d-none').text('');
                $('#status_driverEditError').addClass('d-none').text('');

                var errors = data.responseJSON;
                if ($.isEmptyObject(errors) == false) {
                    $.each(errors.errors, function(key, value) {
                        var ErrorID = '#' + key + 'EditError';
                        $(ErrorID).removeClass("d-none").text(value);
                    });
                }
                submitButton.prop('disabled', false).text('Submit');
            }
        });
    });
</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