@extends('restaurant.layout.index')
@section('title', 'Muftaax | Restaurant Profile')
@section('custom-style')
<style>
    .card-body a {
        position: relative;
        z-index: 9;
    }

    .account-type-option {
        border: 2px solid #e9ecef;
        border-radius: 8px;
        padding: 15px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .account-type-option:hover {
        border-color: #007bff;
        background-color: rgba(0, 123, 255, 0.02);
    }

    .account-type-option input[type="radio"]:checked+label {
        color: #007bff;
    }

    .account-type-option input[type="radio"]:checked~* {
        border-color: #007bff !important;
        background-color: rgba(0, 123, 255, 0.05) !important;
    }

    #merchantFields {
        background-color: #f8f9ff;
        border-radius: 8px;
        padding: 20px;
        border-left: 4px solid #007bff;
    }
</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">Restaurant Profile</h1>
                <div class="">
                    <nav>
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="javascript:void(0);">Restaurant</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Restaurant Profile</li>
                        </ol>
                    </nav>
                </div>
            </div>
            {{-- <div class="btn-list">--}}
            {{-- <a href="orders" class="btn btn-primary-light btn-wave me-2">--}}
            {{-- <i class="bi bi-layers align-middle"></i> Redeemed Offers--}}
            {{-- </a>--}}

            {{-- </div>--}}
        </div>
        <!-- Page Header Close -->

        <!-- Start::row-2 -->
        <div class="row">
            <div class="col-lg-6">
                <div class="card custom-card">
                    <div class="card-body">
                        <div class="d-flex align-items-center flex-wrap justify-content-between gap-2">
                            <div id="profileData">
                                @include('restaurant.includes.profile_detail')
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card custom-card">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title">
                            <h5 class="mb-0 fw-medium fs-22">
                                Overview
                            </h5>
                        </div>
                        <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#overviewModal"
                            class="btn btn-info-light btn-icon ms-1 btn-sm invoice-btn" data-id="{{$restaurant->id}}"
                            data-overview="{{$restaurant->overview}}"
                            data-url="{{route('overview.update', $restaurant->id)}}"><i class="ri-edit-line"></i></a>
                    </div>
                    <div class="card-body p-0 candidate-edu-timeline">
                        <div id="overviewData">
                            @include('restaurant.includes.overview_profile')
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- End::row-2 -->

        <!-- Start:: row-9 -->
        <div class="row">
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header d-flex justify-content-between">
                        <div class="card-title">
                            Other Information
                        </div>
                    </div>
                    <div class="card-body">
                        <ul class="nav nav-pills nav-style-3 mb-3" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab"
                                    data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home"
                                    aria-selected="true"><i
                                        class="ri-clockwise-2-fill me-1 align-middle d-inline-block"></i>Working
                                    Hours
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab"
                                    data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile"
                                    aria-selected="false"><i
                                        class="ri-clockwise-2-fill me-1 align-middle d-inline-block"></i>
                                    Delivery Charges
                                </button>
                            </li>
                            {{-- New QR Code Tab --}}
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="nav-qr-code-tab" data-bs-toggle="tab"
                                    data-bs-target="#nav-qr-code" type="button" role="tab" aria-controls="nav-qr-code"
                                    aria-selected="false">
                                    <i class="ri-qr-code-line me-1 align-middle d-inline-block"></i>QR Codes
                                </button>
                            </li>

                            {{-- New Bank Details Tab --}}
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="nav-waafipay-tab" data-bs-toggle="tab"
                                    data-bs-target="#nav-waafipay" type="button" role="tab" aria-controls="nav-waafipay"
                                    aria-selected="false">
                                    <i class="ri-wallet-3-line me-1 align-middle d-inline-block"></i>
                                    WaafiPay Account
                                </button>
                            </li>

                        </ul>
                        <div class="tab-content" id="nav-tabContent">
                            <div class="tab-pane fade show active" id="nav-home" role="tabpanel"
                                aria-labelledby="nav-home-tab">
                                <div id="timetableData">
                                    @include('restaurant.includes.timetable_detail')
                                </div>
                            </div>
                            <div class="tab-pane fade" id="nav-profile" role="tabpanel"
                                aria-labelledby="nav-profile-tab">

                                <!-- <h1>Deliver CHarges</h1> -->
                                {{-- <form id="chargesForm" method="post" enctype="multipart/form-data">--}}
                                {{-- <div class="working-hours">--}}
                                {{-- <div class="row working-hours-record mt-2">--}}
                                {{-- <div class="col-md-4">--}}
                                {{-- <div class="form-group">--}}
                                {{-- <label for="day1">Distance</label>--}}
                                {{-- <select class="form-control day-select" name="delivery_km[]" id="delivery_km">--}}
                                {{-- <option value="1">1 km</option>--}}
                                {{-- <option value="2">2 km</option>--}}
                                {{-- <option value="3">3 km</option>--}}
                                {{-- <option value="4">4 km</option>--}}
                                {{-- <option value="5">5 km</option>--}}
                                {{-- <option value="6">6 km</option>--}}
                                {{-- <option value="7">7 km</option>--}}
                                {{-- <option value="8">8 km</option>--}}
                                {{-- <option value="9">9 km</option>--}}
                                {{-- <option value="10">10 km</option>--}}
                                {{-- <option value="11">11 km</option>--}}
                                {{-- <option value="12">12 km</option>--}}
                                {{-- <option value="13">13 km</option>--}}
                                {{-- <option value="14">14 km</option>--}}
                                {{-- <option value="15">15 km</option>--}}
                                {{-- <option value="16">16 km</option>--}}
                                {{-- <option value="17">17 km</option>--}}
                                {{-- <option value="18">18 km</option>--}}
                                {{-- <option value="19">19 km</option>--}}
                                {{-- <option value="20">20 km</option>--}}
                                {{-- </select>--}}
                                {{-- </div>--}}
                                {{-- </div>--}}
                                {{-- <div class="col-md-3">--}}
                                {{-- <div class="form-group">--}}
                                {{-- <label for="from1">Delivery Charges</label>--}}
                                {{-- <input type="text" class="form-control" name="delivery_charges[]"--}}
                                {{-- id="delivery_charges" required>--}}
                                {{-- </div>--}}
                                {{-- </div>--}}
                                {{-- <div class="col-md-3">--}}
                                {{-- <div class="form-group form-check mt-4">--}}
                                {{-- <input type="hidden" name="free_delivery" value="0">--}}
                                {{-- <input type="checkbox" class="form-check-input" name="free_delivery" id="free_delivery" value="1">--}}
                                {{-- <label class="form-check-label" for="free_delivery">Free Delivery</label>--}}
                                {{-- </div>--}}
                                {{-- </div>--}}


                                {{-- <div class="col-md-2 mt-4 d-flex align-items-center">--}}
                                {{-- <button type="button" class="btn btn-danger btn-sm delete-btn">--}}
                                {{-- remove--}}
                                {{-- </button>--}}
                                {{-- </div>--}}
                                {{-- </div>--}}
                                {{-- </div>--}}
                                {{-- <div class="d-flex align-items-center py-2 mt-2 gap-1" id="flexDiv">--}}
                                {{-- <button id="addBtn" type="button" class="btn btn-primary btn-sm">--}}
                                {{-- Add--}}
                                {{-- </button>--}}
                                {{-- </div>--}}
                                {{-- </form>--}}

                                <div id="chargesData">
                                    @include('restaurant.includes.charges_data')
                                </div>

                            </div>
                            {{-- New QR Code Tab Content --}}
                            <div class="tab-pane fade" id="nav-qr-code" role="tabpanel" aria-labelledby="nav-qr-code-tab">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="mb-0 fw-medium">QR Code Management</h6>
                                    <div id="qrCodeBtn">
                                        @include('restaurant.includes.qr_code_btn')
                                    </div>
                                </div>
                                <div id="qrCodeData">
                                    @include('restaurant.includes.qr_code_data')
                                </div>
                            </div>
                            {{-- New Bank Details Tab Content --}}
                            <div class="tab-pane fade" id="nav-waafipay" role="tabpanel" aria-labelledby="nav-waafipay-tab">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="mb-0 fw-medium">WaafiPay Account Information</h6>
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-primary-light btn-sm" data-bs-toggle="modal"
                                            data-bs-target="#waafipayAccountModal"
                                            data-id="{{$restaurant->id}}"
                                            data-url="{{route('waafipay-account.update', $restaurant->id)}}">
                                            <i class="ri-bank-line me-1"></i> Account Details
                                        </button>
                                        <!-- @if($restaurant->waafipayAccount)
                                        <button type="button" class="btn btn-outline-danger btn-sm ms-1"
                                            onclick="deleteWaafipayAccount({{$restaurant->id}})">
                                            <i class="ri-delete-bin-line me-1"></i>Delete
                                        </button>
                                        @endif -->
                                    </div>
                                </div>
                                <div id="waafipayAccountData">
                                    @include('restaurant.includes.waafipay_account')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

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


    </div>
</div>

<!-- QR Code Create Modal -->
<div class="modal fade" id="qrCodeModal" tabindex="-1" aria-labelledby="qrCodeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="qrCodeModalLabel">Create QR Code</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" id="qrCodeForm" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">QR Code Name *</label>
                            <input type="text" class="form-control" name="name" placeholder="QR Name">
                            <div class="text-danger d-none" id="nameError"></div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">QR Code Type *</label>
                            <select class="form-select" name="type" id="qrType">
                                <option value="">Select Type</option>
                                <!-- <option value="restaurant_profile">Restaurant Profile</option> -->
                                <option value="menu">Restaurant Menu</option>
                                <!-- <option value="contact">Contact Info</option>
                                <option value="location">Location</option>
                                <option value="custom">Custom URL</option> -->
                            </select>
                            <div class="text-danger d-none" id="typeError"></div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">QR Code URL *</label>
                            <input type="url" class="form-control" name="qr_url" id="qrUrl" placeholder="https://example.com" style="pointer-events: none; opacity: 0.75;">
                            <small class="text-muted">This URL will be opened when someone scans the QR code</small>
                            <!-- <div class="text-danger d-none" id="qr_urlError"></div> -->
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">QR Code Size</label>
                            <select class="form-select" name="size">
                                <option value="200">Small (200px)</option>
                                <option value="300" selected>Medium (300px)</option>
                                <option value="400">Large (400px)</option>
                                <option value="500">Extra Large (500px)</option>
                            </select>
                            <div class="text-danger d-none" id="sizeError"></div>
                        </div>
                        <!-- <div class="col-md-6">
                            <div class="form-check mt-4">
                                <input class="form-check-input" type="checkbox" name="is_default" id="isDefault">
                                <label class="form-check-label" for="isDefault">
                                    Set as Default QR Code
                                </label>
                            </div>
                        </div> -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="ri-save-line me-1"></i>Create QR Code
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- QR Code Edit Modal -->
<div class="modal fade" id="editQrCodeModal" tabindex="-1" aria-labelledby="editQrCodeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title" id="editQrCodeModalLabel">Edit QR Code</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form method="post" id="editQrCodeForm" enctype="multipart/form-data">
                @csrf
                {{ method_field('PUT') }}
                <input type="hidden" id="editQrCodeId" name="qr_code_id">
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">QR Code Name *</label>
                            <input type="text" class="form-control" name="name" id="editQrName" placeholder="e.g., Restaurant Menu">
                            <div class="text-danger d-none" id="editNameError"></div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">QR Code Type *</label>
                            <select class="form-select" name="type" id="editQrType">
                                <option value="">Select Type</option>
                                <!-- <option value="restaurant_profile">Restaurant Profile</option> -->
                                <option value="menu">Restaurant Menu</option>
                                <!-- <option value="contact">Contact Info</option>
                                <option value="location">Location</option>
                                <option value="custom">Custom URL</option> -->
                            </select>
                            <div class="text-danger d-none" id="editTypeError"></div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">QR Code URL *</label>
                            <input type="url" class="form-control" name="qr_url" id="editQrUrl" placeholder="https://example.com" style="pointer-events: none; opacity: 0.75;">
                            <div class="text-danger d-none" id="editQr_urlError"></div>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">QR Code Size</label>
                            <select class="form-select" name="size" id="editQrSize">
                                <option value="200">Small (200px)</option>
                                <option value="300">Medium (300px)</option>
                                <option value="400">Large (400px)</option>
                                <option value="500">Extra Large (500px)</option>
                            </select>
                            <div class="text-danger d-none" id="editSizeError"></div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check mt-4">
                                <input class="form-check-input" type="checkbox" name="is_active" id="editIsActive">
                                <label class="form-check-label" for="editIsActive">
                                    Active
                                </label>
                            </div>
                            <!-- <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="is_default" id="editIsDefault">
                                <label class="form-check-label" for="editIsDefault">
                                    Set as Default
                                </label>
                            </div> -->
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">
                        <i class="ri-save-line me-1"></i>Update QR Code
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Delete QR Code Modal -->
<div class="modal fade flip" id="deleteQrModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body p-5 text-center">
                <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"
                    colors="primary:#405189,secondary:#f06548" style="width:90px;height:90px">
                </lord-icon>
                <div class="mt-4 text-center">
                    <h4>Are You Sure?</h4>
                    <p class="text-muted fs-15 mb-4">You won't be able to revert this action!</p>
                    <form method="POST" id="deleteQrForm" class="form-submit">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <input type="hidden" name="_method" value="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>

<!-- Regenerate QR Code Modal -->
<div class="modal fade flip" id="regenerateQrModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body p-5 text-center">
                <lord-icon src="https://cdn.lordicon.com/lupuorrc.json" trigger="loop"
                    colors="primary:#405189,secondary:#0ab39c" style="width:90px;height:90px">
                </lord-icon>
                <div class="mt-4 text-center">
                    <h4>Regenerate QR Code?</h4>
                    <p class="text-muted fs-15 mb-4">This will create a new QR code image. The old QR code will be replaced.</p>
                    <form method="POST" id="regenerateQrForm" class="form-submit">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <button type="button" class="btn btn-sm btn-outline-secondary m-1" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button class="btn btn-sm btn-primary m-1" type="submit">Yes, Regenerate</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Set Default QR Code Modal -->
<div class="modal fade flip" id="setDefaultQrModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body p-5 text-center">
                <lord-icon src="https://cdn.lordicon.com/lomfljuq.json" trigger="loop"
                    colors="primary:#405189,secondary:#f7b84b" style="width:90px;height:90px">
                </lord-icon>
                <div class="mt-4 text-center">
                    <h4>Set as Default?</h4>
                    <p class="text-muted fs-15 mb-4">This QR code will become the default for your restaurant.</p>
                    <form method="POST" id="setDefaultQrForm" class="form-submit">
                        <input type="hidden" name="_token" value="{{ csrf_token() }}">
                        <button type="button" class="btn btn-sm btn-outline-secondary m-1" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button class="btn btn-sm btn-primary m-1" type="submit">Yes, Set Default</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- End::app-content -->
{{-- Add this modal after your existing modals --}}

<div class="modal fade" id="waafipayAccountModal" tabindex="-1" aria-labelledby="waafipayAccountModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary-transparent">
                <h6 class="modal-title d-flex align-items-center" id="waafipayAccountModalLabel">
                    <i class="ri-wallet-3-line me-2 text-primary"></i>
                    WaafiPay Account Setup
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="waafipayAccountForm" method="post" enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="waafipayRestaurantId" name="restaurant_id" />
                <div class="modal-body">
                    <div class="row">
                        {{-- Account Type Selection --}}
                        <div class="col-12 mb-4">
                            <div class="card border-0 bg-light">
                                <div class="card-body p-3">
                                    <label for="account_type" class="form-label fw-semibold mb-3">
                                        <i class="ri-settings-4-line me-2"></i>Account Type <span class="text-danger">*</span>
                                    </label>
                                    <div class="row g-3">
                                        <div class="col-md-4">
                                            <div class="form-check account-type-option">
                                                <input class="form-check-input" type="radio" name="account_type" id="account_type_evc" value="EVC">
                                                <label class="form-check-label w-100" for="account_type_evc">
                                                    <div class="d-flex align-items-center">
                                                        <div class="bg-success-transparent rounded p-2 me-3">
                                                            <i class="ri-smartphone-line text-success"></i>
                                                        </div>
                                                        <div>
                                                            <h6 class="mb-1">EVC Wallet</h6>
                                                            <small class="text-muted">Mobile money wallet</small>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="form-check account-type-option">
                                                <input class="form-check-input" type="radio" name="account_type" id="account_type_merchant" value="MERCHANT">
                                                <label class="form-check-label w-100" for="account_type_merchant">
                                                    <div class="d-flex align-items-center">
                                                        <div class="bg-primary-transparent rounded p-2 me-3">
                                                            <i class="ri-store-2-line text-primary"></i>
                                                        </div>
                                                        <div>
                                                            <h6 class="mb-1">Merchant</h6>
                                                            <small class="text-muted">Business account</small>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                        <!-- <div class="col-md-4">
                                            <div class="form-check account-type-option">
                                                <input class="form-check-input" type="radio" name="account_type" id="account_type_customer" value="CUSTOMER">
                                                <label class="form-check-label w-100" for="account_type_customer">
                                                    <div class="d-flex align-items-center">
                                                        <div class="bg-info-transparent rounded p-2 me-3">
                                                            <i class="ri-user-line text-info"></i>
                                                        </div>
                                                        <div>
                                                            <h6 class="mb-1">Customer</h6>
                                                            <small class="text-muted">Personal account</small>
                                                        </div>
                                                    </div>
                                                </label>
                                            </div>
                                        </div> -->
                                    </div>
                                    <span class="text-danger d-none" id="account_typeError"></span>
                                </div>
                            </div>
                        </div>

                        {{-- Basic Account Information --}}
                        <div class="col-12 mb-3">
                            <h6 class="text-muted mb-3"><i class="ri-user-settings-line me-2"></i>Basic Information</h6>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="account_holder_name" class="form-label">Account Holder Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="account_holder_name" id="account_holder_name"
                                    placeholder="Enter account holder full name">
                                <span class="text-danger d-none" id="account_holder_nameError"></span>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="phone_number" class="form-label">
                                    Phone Number
                                    <span class="text-danger phone-required">*</span>
                                    <span class="text-muted phone-optional" style="display: none;"></span>
                                </label>
                                <!-- <div class="input-group">
                                    <span class="input-group-text">+252</span>
                                    <input type="text" class="form-control" name="phone_number" id="phone_number"
                                        placeholder="612345678" maxlength="9">
                                </div> -->
                                <div class="input-group">
                                    <input type="text" class="form-control input-group-text"
                                        name="country_code" id="country_code"
                                        placeholder="+252" maxlength="4"
                                        style="max-width: 80px; text-align: center;">

                                    <input type="text" class="form-control"
                                        name="phone_number" id="phone_number"
                                        placeholder="612345678" maxlength="9">
                                </div>

                                <!-- <small class="form-text text-muted">Enter Somali phone number without country code</small> -->
                                <span class="text-danger d-none" id="phone_numberError"></span>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group mb-3">
                                <label for="account_no" class="form-label">Account/Wallet Number</label>
                                <input type="text" class="form-control" name="account_no" id="account_no"
                                    placeholder="Enter account or wallet number">
                                <span class="text-danger d-none" id="account_noError"></span>
                            </div>
                        </div>

                        {{-- Merchant Specific Fields (Hidden by default) --}}
                        <div id="merchantFields" style="display: none;" class="col-12">
                            <hr class="my-4">
                            <h6 class="text-primary mb-4">
                                <i class="ri-store-2-line me-2"></i>Merchant Account Credentials
                            </h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="merchant_uid" class="form-label">Merchant UID <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="merchant_uid" id="merchant_uid"
                                            placeholder="Enter unique merchant identifier">
                                        <small class="form-text text-muted">Provided by WaafiPay during merchant registration</small>
                                        <span class="text-danger d-none" id="merchant_uidError"></span>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group mb-3">
                                        <label for="api_user_id" class="form-label">API User ID <span class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="api_user_id" id="api_user_id"
                                            placeholder="Enter API user identifier">
                                        <small class="form-text text-muted">Your WaafiPay API username</small>
                                        <span class="text-danger d-none" id="api_user_idError"></span>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-group mb-3">
                                        <label for="api_key" class="form-label">API Key <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <input type="password" class="form-control" name="api_key" id="api_key"
                                                placeholder="Enter your WaafiPay API key">
                                            <button class="btn btn-outline-secondary" type="button" id="toggleApiKey">
                                                <i class="ri-eye-line" id="toggleIcon"></i>
                                            </button>
                                        </div>
                                        <small class="form-text text-muted">
                                            <i class="ri-lock-line me-1"></i>
                                            API key will be encrypted and stored securely
                                        </small>
                                        <span class="text-danger d-none" id="api_keyError"></span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Additional Information --}}
                        <div class="col-12">
                            <hr class="my-4">
                            <div class="form-group mb-3">
                                <label for="notes" class="form-label">
                                    <i class="ri-file-text-line me-2"></i>Additional Notes
                                </label>
                                <textarea class="form-control" name="notes" id="notes"
                                    rows="3" placeholder="Enter any additional notes or comments (Optional)"></textarea>
                                <span class="text-danger d-none" id="notesError"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">
                        <i class="ri-close-line me-2"></i>Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        <i class="ri-save-line me-1"></i>Save WaafiPay Account
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="profileModal" tabindex="-1" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLgLabel">Profile Detail
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editForm" method="post" enctype="multipart/form-data">
                @csrf
                {{ method_field('PUT') }}
                <div class="modal-body">

                    {{-- <div class="form-group mb-2">--}}
                    {{-- <label for="input-label" class="form-label">Location</label>--}}
                    {{-- <input type="text" class="form-control" name="location" id="loaction" --}} {{--
                            placeholder="Enter Location">--}}
                    {{-- </div>--}}
                    <input type="hidden" id="editId" name="id" />

                    <div class="form-group mb-2">
                        <div class="col-xl-12">
                            <label for="city" class="form-label text-default">Country</label>
                            <select id="country" name="country_id" class="form-control">
                                <option value="">Select Country</option>
                                @foreach ($countries as $country)
                                <option value="{{ $country->id }}"
                                    data-iso="{{ $country->iso3 }}"
                                    {{ old('country_id', $user->country_id ?? '') == $country->id ? 'selected' : '' }}>
                                    {{ $country->name }}
                                </option>

                                @endforeach
                            </select>
                            <span class="text-danger d-none" id="country_idError"></span>
                        </div>
                    </div>
                    <div class="form-group mb-2">
                        <div class="col-xl-12">
                            <label for="city" class="form-label text-default">City</label>
                            <select id="city" name="city_id" class="form-control">
                                <option value="">Select City</option>
                            </select>
                            <span class="text-danger d-none" id="city_idError"></span>
                        </div>

                    </div>


                    <div class="form-group mb-2" id="location-wrapper" style="opacity: 0.5; pointer-events: none;">
                        <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>

                        <!-- Hidden inputs -->
                        <input type="hidden" id="full_address" name="full_address">
                        <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-2">
                        <label for="input-label" class="form-label">Image</label>
                        <input type="file" class="form-control" name="image" id="editImage">
                        <span class="text-danger d-none" id="imageError"></span>
                    </div>

                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Icon</label>
                        <input type="file" class="form-control" name="icon" id="editIcon">
                        <span class="text-danger d-none" id="iconError"></span>
                    </div>

                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Phone Number</label>
                        <input type="text" class="form-control" name="phone_number" id="editPhone"
                            placeholder="Enter Phone Number">
                        <span class="text-danger d-none" id="phone_numberError"></span>
                    </div>
                    <label for="weeklySchedule" class="form-label">Weekly Schedule</label>
                    <div class="form-group mb-2 d-flex gap-2">
                        <div class="w-50">
                            <select class="form-control" id="startDay" name="startDay">
                                <option value="">Select Start Day</option>
                                <option value="Mon">Mon</option>
                                <option value="Tue">Tue</option>
                                <option value="Wed">Wed</option>
                                <option value="Thu">Thu</option>
                                <option value="Fri">Fri</option>
                                <option value="Sat">Sat</option>
                                <option value="Sun">Sun</option>
                            </select>
                            <span class="text-danger d-none" id="startDayError"></span>
                        </div>

                        <div class="w-50">
                            <select class="form-control" id="endDay" name="endDay">
                                <option value="">Select End Day</option>
                                <option value="Mon">Mon</option>
                                <option value="Tue">Tue</option>
                                <option value="Wed">Wed</option>
                                <option value="Thu">Thu</option>
                                <option value="Fri">Fri</option>
                                <option value="Sat">Sat</option>
                                <option value="Sun">Sun</option>
                            </select>
                            <span class="text-danger d-none" id="endDayError"></span>
                        </div>
                    </div>

                    <div class="form-group mb-2 d-flex gap-2">
                        <div class="w-50">
                            <input type="time" class="form-control" id="startTime" name="startTime" placeholder="10:00 AM">
                            <span class="text-danger d-none" id="startTimeError"></span>
                        </div>

                        <div class="w-50">
                            <input type="time" class="form-control" id="endTime" name="endTime" placeholder="7:00 PM">
                            <span class="text-danger d-none" id="endTimeError"></span>
                        </div>
                    </div>

                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Estimated Preparation Time</label>
                        <input type="number" class="form-control" name="estimated_preparation_time" id="editEstimatedPreparationTime">
                        <span class="text-danger d-none" id="estimated_preparation_timeError"></span>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="overviewModal" tabindex="-1" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLgLabel">Restaurant Overview
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="overviewForm" method="post" enctype="multipart/form-data">
                @csrf
                <input type="hidden" id="editId" name="id" />
                <div class="modal-body">
                    <div class="form-group mb-2">
                        <label for="input-label" class="form-label">Description</label>
                        <textarea class="form-control" name="overview" id="editOverview" cols="30" rows="10"></textarea>
                        <span class="text-danger d-none" id="overviewError"></span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
<meta name="csrf-token" content="{{ csrf_token() }}">
@endsection
@section('custom-script')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Candidate Details JS -->
<script src="{{asset('assets/js/job-candidate-details.js')}}"></script>
<!-- Custom-Switcher JS -->
<script src="{{asset('assets/js/custom-switcher.min.js')}}"></script>

<script src="{{asset('assets/js/jquery-3.5.1.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>


{{-- Google Map Api --}}

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add CSS styles dynamically using JavaScript
        const style = document.createElement('style');
        style.innerHTML = `
        .disabled-input {
            pointer-events: none; /* Prevent user interaction */
            background-color: #e9ecef; /* Light gray background */
            color: #6c757d; /* Muted text color */
        }
    `;
        document.head.appendChild(style);

        // Function to toggle the "disabled" class
        function toggleDeliveryCharges(event) {
            const deliveryChargesInput = event.target.closest('.working-hours-record').querySelector('.delivery-charges');

            if (event.target.checked) {
                deliveryChargesInput.value = '0'; // Set value to 0
                deliveryChargesInput.classList.add('disabled-input'); // Apply the CSS class
            } else {
                deliveryChargesInput.value = ''; // Clear the value
                deliveryChargesInput.classList.remove('disabled-input'); // Remove the CSS class
            }
        }

        // Attach event listeners to all existing checkboxes
        function attachCheckboxListeners() {
            document.querySelectorAll('.free-delivery').forEach(function(checkbox) {
                checkbox.removeEventListener('change', toggleDeliveryCharges); // Prevent duplicate listeners
                checkbox.addEventListener('change', toggleDeliveryCharges);
            });
        }

        // Initial attachment for existing rows
        attachCheckboxListeners();

        // Add event listener for the "Add" button to handle new rows
        document.querySelector('#addBtn').addEventListener('click', function() {
            // Add a new row dynamically
            const index = document.querySelectorAll('.working-hours-record').length; // Get current row count
            const newRow = `
            <div class="row working-hours-record mt-2">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="distance_km">Distance (km)</label>
                        <select class="form-control" name="entries[${index}][distance_km]">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="delivery_charges">Delivery Charges</label>
                        <input type="text" class="form-control delivery-charges" name="entries[${index}][delivery_charges]">
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group form-check mt-4">
                        <input type="hidden" name="entries[${index}][free_delivery]" value="0">
                        <input type="checkbox" class="form-check-input free-delivery" name="entries[${index}][free_delivery]" value="1">
                        <label class="form-check-label">Free Delivery</label>
                    </div>
                </div>
                <div class="col-md-2 mt-4 d-flex align-items-center">
                    <button type="button" class="btn btn-danger btn-sm delete-btn">Remove</button>
                </div>
            </div>
        `;
            document.querySelector('.working-hours').insertAdjacentHTML('beforeend', newRow);

            // Reattach listeners for new checkboxes
            attachCheckboxListeners();

            // Attach delete functionality for the new row
            attachDeleteListeners();
        });

        // Attach delete functionality
        function attachDeleteListeners() {
            document.querySelectorAll('.delete-btn').forEach(function(btn) {
                btn.removeEventListener('click', handleDeleteRow); // Remove existing listener
                btn.addEventListener('click', handleDeleteRow); // Add listener
            });
        }

        // Function to delete a row
        function handleDeleteRow(event) {
            event.target.closest('.working-hours-record').remove();
        }

        // Initial attachment for delete buttons
        attachDeleteListeners();
    });
</script>
<script>
    $(document).ready(function() {
        $('#country').select2({
            placeholder: "Select Country",
            allowClear: false,
            dropdownParent: $('#profileModal')
        });

        $('#city').select2({
            placeholder: "Select City",
            allowClear: false,
            dropdownParent: $('#profileModal')
        });

        let URL = "{{ route('get-cities', ['country_id' => ':countryId']) }}";

        let selectedCountry = "{{ old('country_id', $user->country_id ?? '') }}";
        let selectedCity = "{{ old('city_id', $user->city_id ?? '') }}";

        // If country is selected (edit mode), trigger city fetch
        if (selectedCountry) {
            let fetchUrl = URL.replace(':countryId', selectedCountry);

            $.ajax({
                url: fetchUrl,
                type: 'GET',
                success: function(cities) {
                    let cityDropdown = $('#city');
                    cityDropdown.empty().append('<option value="">Select City</option>');

                    cities.forEach(city => {
                        let selected = city.id == selectedCity ? 'selected' : '';
                        cityDropdown.append(`<option value="${city.id}" ${selected}>${city.name}</option>`);
                    });

                    // Refresh select2
                    cityDropdown.val(selectedCity).trigger('change');
                }
            });
        }

        // When user changes country manually
        $('#country').on('change', function() {
            let countryId = $(this).val();
            let cityDropdown = $('#city');
            cityDropdown.empty().append('<option value="">Select City</option>');

            if (countryId) {
                let fetchUrl = URL.replace(':countryId', countryId);

                $.ajax({
                    url: fetchUrl,
                    type: 'GET',
                    success: function(cities) {
                        cities.forEach(city => {
                            cityDropdown.append(`<option value="${city.id}">${city.name}</option>`);
                        });
                    }
                });
            }

            cityDropdown.trigger('change');
        });
    });
</script>


<!-- <script>
    let map;
    let autocomplete;
    let marker;
    let infowindow;

    function initMap() {
        const defaultLocation = {
            lat: 30.3753,
            lng: 69.3451
        }; // Pakistan default

        map = new google.maps.Map(document.querySelector("#profileModal #map"), {
            center: defaultLocation,
            zoom: 8,
            mapTypeControl: false,
        });

        const input = document.querySelector("#profileModal #location");

        autocomplete = new google.maps.places.Autocomplete(input, {
            types: ["geocode"]
        });
        autocomplete.bindTo("bounds", map);

        infowindow = new google.maps.InfoWindow();
        marker = new google.maps.Marker({
            map: map,
            visible: false
        });

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

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

            // Set marker
            marker.setPosition(place.geometry.location);
            marker.setVisible(true);
            map.setCenter(place.geometry.location);
            map.setZoom(17);

            // Extract address
            let street = '';
            let number = '';
            place.address_components.forEach(component => {
                if (component.types.includes("route")) {
                    street = component.long_name;
                }
                if (component.types.includes("street_number")) {
                    number = component.long_name;
                }
            });

            const streetAddress = `${number} ${street}`.trim();

            // Update form inputs inside #profileModal
            document.querySelector("#profileModal #location").value = streetAddress || place.name;
            document.querySelector("#profileModal #full_address").value = place.formatted_address;
            document.querySelector("#profileModal #latitude").value = place.geometry.location.lat();
            document.querySelector("#profileModal #longitude").value = place.geometry.location.lng();

            infowindow.setContent(streetAddress || place.formatted_address);
            infowindow.open(map, marker);
        });
    }

    function updateAutocompleteRestriction() {
        const selectedIso = $('#profileModal #country option:selected').attr('data-iso');
        console.log('ISO:', selectedIso);  // Expect something like 'US', 'PK'

        const selectedCity = $('#profileModal #city option:selected').text();
        const locationWrapper = $('#profileModal #location-wrapper');
        console.log(selectedIso,selectedCity,locationWrapper)

        if (selectedIso && selectedCity && selectedCity !== 'Select City') {
            console.log('1')
            // Enable location input
            locationWrapper.css({
                opacity: 1,
                pointerEvents: 'auto'
            });

            if (autocomplete) {
                autocomplete.setComponentRestrictions({
                    country: selectedIso
                });

                const geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    address: `${selectedCity}, ${selectedIso}`
                }, function(results, status) {
                    if (status === 'OK' && results[0].geometry) {
                        const cityLocation = results[0].geometry.location;
                        map.setCenter(cityLocation);
                        map.setZoom(12);
                        autocomplete.setBounds(results[0].geometry.viewport);
                    }
                });
            }
        } else {
            console.log('2')
            // Disable location input
            locationWrapper.css({
                opacity: 0.5,
                pointerEvents: 'none'
            });
            $('#profileModal #location').val('');
            $('#profileModal #full_address').val('');
            $('#profileModal #latitude').val('');
            $('#profileModal #longitude').val('');
        }
    }


    $(document).ready(function() {
        $('#country').on('change', function() {
            $('#city').val('').trigger('change');
            updateAutocompleteRestriction();
        });

        $('#city').on('change', function() {
            updateAutocompleteRestriction();
        });

        // Call initially in case country/city are pre-filled
        updateAutocompleteRestriction();

        // Re-render map properly when the modal opens
        $('#profileModal').on('shown.bs.modal', function() {
            google.maps.event.trigger(map, 'resize');
            initMap();
        });
    });

    // Load base map setup
    google.maps.event.addDomListener(window, 'load', initMap);
</script> -->

<script>
    let map;
    let autocomplete;
    let marker;
    let infowindow;

    function initMap() {
        const defaultLocation = {
            lat: 30.3753,
            lng: 69.3451
        }; // Pakistan default

        map = new google.maps.Map(document.querySelector("#profileModal #map"), {
            center: defaultLocation,
            zoom: 8,
            mapTypeControl: false,
        });

        const input = document.querySelector("#profileModal #location");

        autocomplete = new google.maps.places.Autocomplete(input, {
            types: ["geocode"]
        });
        autocomplete.bindTo("bounds", map);

        infowindow = new google.maps.InfoWindow();
        marker = new google.maps.Marker({
            map: map,
            visible: false
        });

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

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

            marker.setPosition(place.geometry.location);
            marker.setVisible(true);
            map.setCenter(place.geometry.location);
            map.setZoom(17);

            let street = '';
            let number = '';
            place.address_components.forEach(component => {
                if (component.types.includes("route")) {
                    street = component.long_name;
                }
                if (component.types.includes("street_number")) {
                    number = component.long_name;
                }
            });

            const streetAddress = `${number} ${street}`.trim();

            document.querySelector("#profileModal #location").value = streetAddress || place.name;
            document.querySelector("#profileModal #full_address").value = place.formatted_address;
            document.querySelector("#profileModal #latitude").value = place.geometry.location.lat();
            document.querySelector("#profileModal #longitude").value = place.geometry.location.lng();

            infowindow.setContent(streetAddress || place.formatted_address);
            infowindow.open(map, marker);
        });

        // Call initially to apply restriction
        updateAutocompleteRestriction();
    }

    function updateAutocompleteRestriction() {
        const selectedIso = $('#profileModal #country option:selected').attr('data-iso');
        const selectedCity = $('#profileModal #city option:selected').text();
        const locationWrapper = $('#profileModal #location-wrapper');

        if (selectedIso && selectedCity && selectedCity !== 'Select City') {
            // Enable location input
            locationWrapper.css({
                opacity: 1,
                pointerEvents: 'auto'
            });

            if (autocomplete) {
                autocomplete.setComponentRestrictions({
                    country: selectedIso
                });

                const geocoder = new google.maps.Geocoder();
                geocoder.geocode({
                    address: `${selectedCity}, ${selectedIso}`
                }, function(results, status) {
                    if (status === 'OK' && results[0].geometry) {
                        const cityLocation = results[0].geometry.location;
                        map.setCenter(cityLocation);
                        map.setZoom(12);
                        autocomplete.setBounds(results[0].geometry.viewport);
                    } else {
                        // fallback to country if city fails
                        geocoder.geocode({
                            address: selectedIso
                        }, function(res, stat) {
                            if (stat === 'OK' && res[0].geometry) {
                                map.setCenter(res[0].geometry.location);
                                map.setZoom(6);
                                autocomplete.setBounds(res[0].geometry.viewport);
                            }
                        });
                    }
                });
            }
        } else {
            // Disable location input
            locationWrapper.css({
                opacity: 0.5,
                pointerEvents: 'none'
            });

            $('#profileModal #location').val('');
            $('#profileModal #full_address').val('');
            $('#profileModal #latitude').val('');
            $('#profileModal #longitude').val('');
        }
    }

    $(document).ready(function() {
        $('#country').on('change', function() {
            $('#city').val('').trigger('change');
            updateAutocompleteRestriction();
        });

        $('#city').on('change', function() {
            updateAutocompleteRestriction();
        });

        // Load map once the modal is fully shown
        $('#profileModal').on('shown.bs.modal', function() {
            google.maps.event.trigger(map, 'resize');
            initMap(); // reinitialize map + autocomplete
        });

        // Also apply restriction in case form pre-filled
        updateAutocompleteRestriction();
    });

    // Load map base setup
    google.maps.event.addDomListener(window, 'load', initMap);
</script>


<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB0NWIAcfZjLVpYWWVcddq_A2qpZAV39EA&libraries=places&callback=initMap" async defer></script>

<script>
    $(document).ready(function() {
        $('#overviewModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var overview = button.data('overview');
            var url = button.data('url');


            // Update the modal's form action and fields
            var modal = $(this);
            modal.find('#overviewForm').attr('action', url);
            modal.find('#editId').val(id);
            modal.find('#editOverview').val(overview);
        });
    });
</script>

<script>
    $(document).ready(function() {
        $('#profileModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            // var location = button.data('location');
            var location = button.data('street');
            var phone = button.data('phone');
            var delivery = button.data('delivery');
            var weekly = button.data('weekly');
            var estimate = button.data('estimate');
            var country = button.data('country');
            var city = button.data('city');
            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('#location').val(location);
            modal.find('#editPhone').val(phone);
            modal.find('#editDelivery').val(delivery);
            modal.find('#editWeekly').val(weekly);
            modal.find('#country').val(country);
            modal.find('#city').val(city);
            modal.find('#editEstimatedPreparationTime').val(estimate);

            if (weekly) {
                var parts = weekly.split(' | ');
                if (parts.length === 2) {
                    var days = parts[0].split(' - ');
                    var times = parts[1].split(' - ');

                    if (days.length === 2) {
                        modal.find('#startDay').val(days[0]);
                        modal.find('#endDay').val(days[1]);
                    }

                    if (times.length === 2) {
                        modal.find('#startTime').val(convertTo24Hour(times[0]));
                        modal.find('#endTime').val(convertTo24Hour(times[1]));
                    }
                }
            }
        });

        function convertTo24Hour(time) {
            var hours = parseInt(time.substr(0, 2));
            var minutes = time.substr(3, 2);
            var ampm = time.substr(6, 2).toUpperCase();
            if (ampm === 'PM' && hours < 12) hours += 12;
            if (ampm === 'AM' && hours === 12) hours -= 12;
            return (hours < 10 ? '0' : '') + hours + ':' + minutes;
        }
    });
</script>

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

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

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


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

        $.ajax({
            type: 'POST',
            url: "{{ route('overview.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
                    $('#overviewModal').modal('hide');


                    // Trigger the success toast notification
                    Toast.fire({
                        icon: 'success',
                        title: data.message
                    });

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

                    // Trigger the success toast notification
                    Toast.fire({
                        icon: 'warning',
                        title: data.message
                    });

                    var submitButton = $('#overviewForm button[type="submit"]');
                    submitButton.prop('disabled', false).text('Submit'); // Reset button state
                }
                // Re-enable the button and reset its text
                submitButton.prop('disabled', false).text('Submit'); // Change to original text or appropriate label
                $('#overviewData').html(data.overview_html);

            },
            error: function(data) {
                // Clear previous error messages
                $('#overviewError').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
    $('#overviewForm input, #overviewForm select').on('input change', function() {
        var errorID = '#' + $(this).attr('name') + 'Error';
        if ($(this).val() !== '') {
            $(errorID).addClass('d-none');
        }
    });
</script>

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

        $('#locationError').addClass('d-none').text('');
        $('#phone_numberError').addClass('d-none').text('');
        $('#weekly_scheduleError').addClass('d-none').text('');
        $('#estimated_preparation_timeError').addClass('d-none').text('');
        $('#startDayError').addClass('d-none').text('');
        $('#endDayError').addClass('d-none').text('');
        $('#startTimeError').addClass('d-none').text('');
        $('#endTimeError').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('profile.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
                    $('#profileModal').modal('hide');


                    // Trigger the success toast notification
                    Toast.fire({
                        icon: 'success',
                        title: data.message
                    });

                    var submitButton = $('#editForm button[type="submit"]');
                    submitButton.prop('disabled', false).text('Submit'); // Reset button state
                    $('#profileData').html(data.profile_html);

                    setTimeout(function() {
                        location.reload();
                    });
                }
                if (data.error) {
                    $('#profileModal').modal('hide');

                    // Trigger the success toast notification
                    Toast.fire({
                        icon: 'warning',
                        title: data.message
                    });

                    var submitButton = $('#editForm button[type="submit"]');
                    submitButton.prop('disabled', false).text('Submit'); // Reset button state
                }
                // 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
                $('#locationError').addClass('d-none').text('');
                $('#phone_numberError').addClass('d-none').text('');
                $('#weekly_scheduleError').addClass('d-none').text('');
                $('#estimated_preparation_timeError').addClass('d-none').text('');
                $('#startDayError').addClass('d-none').text('');
                $('#endDayError').addClass('d-none').text('');
                $('#startTimeError').addClass('d-none').text('');
                $('#endTimeError').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>
    $("#timetableForm").on('submit', function(event) {
        event.preventDefault();

        var isValid = true;

        // Loop through all start time and end time inputs
        $("input[name='start_times[]']").each(function(index) {
            var startTime = $(this).val();
            var endTime = $("input[name='end_times[]']").eq(index).val();

            if (startTime >= endTime) {
                isValid = false;
                Toast.fire({
                    icon: 'warning',
                    title: "Start time must be before the end time for all days."
                });
                return false; // Exit loop early
            }
        });

        if (!isValid) return;

        // Proceed with AJAX submission
        var submitButton = $('#timetableForm button[type="submit"]');
        submitButton.prop('disabled', true).text('Processing...');

        $.ajax({
            type: 'POST',
            url: "{{ route('timetable.update') }}",
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                if (data.success) {
                    Toast.fire({
                        icon: 'success',
                        title: data.message
                    });
                    submitButton.prop('disabled', false).text('Update');
                    $('#timetableData').html(data.timetable_html);
                    setTimeout(function() {
                        location.reload();
                    });
                }
            },
            error: function(data) {
                var errors = data.responseJSON;
                if (errors.errors) {
                    $.each(errors.errors, function(key, value) {
                        Toast.fire({
                            icon: 'warning',
                            title: value
                        });
                    });
                }
                submitButton.prop('disabled', false).text('Update');
            }
        });
    });
</script>

<script>
    $("#chargesForm").on('submit', function(event) {
        event.preventDefault();

        // Disable the submit button and change its text
        var submitButton = $('#chargesForm button[type="submit"]');
        submitButton.prop('disabled', true).text('Processing...');

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

        $.ajax({
            type: 'POST',
            url: "{{ route('restaurant.delivery-charges') }}",
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                if (data.success) {
                    // Success toast notification
                    Toast.fire({
                        icon: 'success',
                        title: data.message
                    });
                    // Reset the form
                    $('#chargesForm')[0].reset();
                    $('#chargesData').html(data.charges_html);

                    setTimeout(function() {
                        location.reload();
                    });
                }
                if (data.error) {
                    // Error toast notification
                    Toast.fire({
                        icon: 'warning',
                        title: data.message
                    });
                }

                // Re-enable the button and reset its text
                submitButton.prop('disabled', false).text('Update');
            },
            error: function(data) {
                // Hide all error messages
                var errors = data.responseJSON.errors;
                if (errors) {
                    $.each(errors, function(key, value) {
                        var ErrorID = '#' + key + 'Error';
                        $(ErrorID).removeClass("d-none").text(value);
                    });
                }

                // Re-enable the button and reset its text
                submitButton.prop('disabled', false).text('Update');
            }
        });
    });

    // Clear error messages on input change
    $('#chargesForm input, #chargesForm select').on('input change', function() {
        var errorID = '#' + $(this).attr('name') + 'Error';
        if ($(this).val() !== '') {
            $(errorID).addClass('d-none');
        }
    });
</script>



<script>
    $(document).ready(function() {
        // When 'Free Delivery' checkbox is changed
        $('.free-delivery').on('change', function() {
            var deliveryChargesInput = $(this).closest('.row').find('input[name*="delivery_charges"]');

            if ($(this).is(':checked')) {
                deliveryChargesInput.val(0); // Set to 0 but keep it editable
            }
        });

        // When user types in the delivery charges input
        $('input[name*="delivery_charges"]').on('keyup change', function() {
            var freeDeliveryCheckbox = $(this).closest('.row').find('.free-delivery');

            if ($(this).val() > 0) {
                freeDeliveryCheckbox.prop('checked', false); // Uncheck free delivery
            }
        });

        // Trigger change on page load if 'Free Delivery' is already checked
        $('.free-delivery:checked').trigger('change');
    });
</script>

// Add this JavaScript to your existing custom-script section

<script>
    $(document).ready(function() {
        // Bank Details Modal Show Event
        $('#bankDetailsModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var url = button.data('url');

            var modal = $(this);
            modal.find('#bankDetailsForm').attr('action', url);
            modal.find('#bankRestaurantId').val(id);

            // Load existing bank details if available
            $.ajax({
                url: "{{ route('bank-details.get', ':id') }}".replace(':id', id),
                type: 'GET',
                success: function(response) {
                    if (response.success && response.bank_details) {
                        var bankDetails = response.bank_details;
                        modal.find('#bank_name').val(bankDetails.bank_name);
                        modal.find('#account_holder_name').val(bankDetails.account_holder_name);
                        modal.find('#account_number').val(bankDetails.account_number);
                        modal.find('#account_type').val(bankDetails.account_type);
                        modal.find('#iban').val(bankDetails.iban);
                        modal.find('#swift_code').val(bankDetails.swift_code);
                        modal.find('#routing_number').val(bankDetails.routing_number);
                        modal.find('#branch_address').val(bankDetails.branch_address);
                    }
                },
                error: function() {
                    // Clear form if no existing data
                    modal.find('#bankDetailsForm')[0].reset();
                }
            });
        });

        // Bank Details Form Submission
        $("#bankDetailsForm").on('submit', function(event) {
            event.preventDefault();

            // Clear previous errors
            $('.text-danger').addClass('d-none').text('');

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

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

            var restaurantId = $('#bankRestaurantId').val();

            $.ajax({
                type: 'POST',
                url: "{{ route('bank-details.update', ':id') }}".replace(':id', restaurantId),
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                cache: false,
                processData: false,
                success: function(data) {
                    if (data.success) {
                        $('#bankDetailsModal').modal('hide');

                        Toast.fire({
                            icon: 'success',
                            title: data.message
                        });

                        $('#bankDetailsData').html(data.bank_details_html);
                        $('#bankDetailsForm')[0].reset();
                    }

                    submitButton.prop('disabled', false).text('Save Bank Details');
                },
                error: function(data) {
                    var errors = data.responseJSON;
                    if (errors && errors.errors) {
                        $.each(errors.errors, function(key, value) {
                            var errorId = '#' + key + 'Error';
                            $(errorId).removeClass("d-none").text(value[0]);
                        });
                    }

                    if (errors && errors.message) {
                        Toast.fire({
                            icon: 'error',
                            title: errors.message
                        });
                    }

                    submitButton.prop('disabled', false).text('Save Bank Details');
                }
            });
        });

        // Clear error messages on input change
        $('#bankDetailsForm input, #bankDetailsForm select, #bankDetailsForm textarea').on('input change', function() {
            var errorID = '#' + $(this).attr('name') + 'Error';
            if ($(this).val() !== '') {
                $(errorID).addClass('d-none');
            }
        });

        // Format account number input (remove spaces and special characters except numbers)
        $('#account_number').on('input', function() {
            var value = $(this).val().replace(/\D/g, ''); // Remove non-digits
            $(this).val(value);
        });

        // Format IBAN input (uppercase and remove spaces)
        $('#iban').on('input', function() {
            var value = $(this).val().toUpperCase().replace(/\s/g, '');
            $(this).val(value);
        });

        // Format SWIFT code input (uppercase)
        $('#swift_code').on('input', function() {
            var value = $(this).val().toUpperCase();
            $(this).val(value);
        });
    });
</script>

<script>
    $(document).ready(function() {
        // Handle account type change with radio buttons
        $('input[name="account_type"]').on('change', function() {
            const accountType = $(this).val();
            const merchantFields = $('#merchantFields');
            const phoneRequired = $('.phone-required');
            const phoneOptional = $('.phone-optional');
            const phoneInput = $('#phone_number');

            // Reset all account type options styling
            $('.account-type-option').removeClass('border-primary bg-primary-transparent');

            // Highlight selected option
            $(this).closest('.account-type-option').addClass('border-primary bg-primary-transparent');

            // Show/hide merchant fields and handle phone requirement
            if (accountType === 'MERCHANT') {
                merchantFields.slideDown();
                phoneRequired.hide();
                phoneOptional.show();
                phoneInput.removeAttr('required');
            } else {
                merchantFields.slideUp();
                phoneRequired.show();
                phoneOptional.hide();
                phoneInput.attr('required', 'required');

                // Clear merchant fields
                $('#merchant_uid, #api_user_id, #api_key').val('');
            }

            // Clear any previous errors
            $('.text-danger').addClass('d-none').text('');
        });

        // Format phone number input (remove non-digits and limit to 9 chars)
        $('#phone_number').on('input', function() {
            let value = $(this).val().replace(/\D/g, '');
            if (value.length > 9) {
                value = value.substring(0, 9);
            }
            $(this).val(value);
        });

        // Toggle API key visibility
        $('#toggleApiKey').on('click', function() {
            const apiKeyInput = $('#api_key');
            const toggleIcon = $('#toggleIcon');

            if (apiKeyInput.attr('type') === 'password') {
                apiKeyInput.attr('type', 'text');
                toggleIcon.removeClass('ri-eye-line').addClass('ri-eye-off-line');
            } else {
                apiKeyInput.attr('type', 'password');
                toggleIcon.removeClass('ri-eye-off-line').addClass('ri-eye-line');
            }
        });

        // WaafiPay Account Modal Show Event
        $('#waafipayAccountModal').on('show.bs.modal', function(event) {
            var button = $(event.relatedTarget);
            var id = button.data('id');
            var url = button.data('url');

            var modal = $(this);
            modal.find('#waafipayAccountForm').attr('action', url);
            modal.find('#waafipayRestaurantId').val(id);

            // Reset form and styling
            modal.find('#waafipayAccountForm')[0].reset();
            $('.account-type-option').removeClass('border-primary bg-primary-transparent');
            $('#merchantFields').hide();
            $('.phone-required').show();
            $('.phone-optional').hide();
            $('.text-danger').addClass('d-none').text('');

            // Load existing WaafiPay account details if available
            $.ajax({
                url: "{{ route('waafipay-account.get', ':id') }}".replace(':id', id),
                type: 'GET',
                success: function(response) {
                    if (response.success && response.waafipay_account) {
                        var account = response.waafipay_account;

                        // Set account type radio button
                        $(`input[name="account_type"][value="${account.account_type}"]`).prop('checked', true).trigger('change');

                        modal.find('#account_holder_name').val(account.account_holder_name);

                        // Format phone number for display (remove +252)
                        // if (account.phone_number) {
                        //     let displayPhone = account.phone_number.replace(/^\+252/, '');
                        //     modal.find('#phone_number').val(displayPhone);
                        // }


                        modal.find('#country_code').val(account.country_code);
                        modal.find('#phone_number').val(account.number);
                        modal.find('#account_no').val(account.account_no);
                        modal.find('#merchant_uid').val(account.merchant_uid);
                        modal.find('#api_user_id').val(account.api_user_id);
                        modal.find('#api_key').val(''); // Don't pre-fill API key for security
                        modal.find('#notes').val(account.notes);
                    }
                },
                error: function() {
                    console.log('No existing WaafiPay account found or error loading data');
                }
            });
        });

        // WaafiPay Account Form Submission
        $("#waafipayAccountForm").on('submit', function(event) {
            event.preventDefault();

            // Clear previous errors
            $('.text-danger').addClass('d-none').text('');

            var submitButton = $('#waafipayAccountForm button[type="submit"]');
            var originalText = submitButton.html();
            submitButton.prop('disabled', true).html('<i class="ri-loader-2-line me-1"></i>Processing...');
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            var restaurantId = $('#waafipayRestaurantId').val();

            $.ajax({
                type: 'POST',
                url: "{{ route('waafipay-account.update', ':id') }}".replace(':id', restaurantId),
                data: new FormData(this),
                dataType: 'JSON',
                contentType: false,
                cache: false,
                processData: false,
                success: function(data) {
                    if (data.success) {
                        $('#waafipayAccountModal').modal('hide');

                        Toast.fire({
                            icon: 'success',
                            title: data.message
                        });

                        $('#waafipayAccountData').html(data.waafipay_account_html);
                        $('#waafipayAccountForm')[0].reset();


                        // refresh after 3 seconds
                        // setTimeout(function() {
                        //     location.reload(); // full page reload
                        // }, 2000);
                    }

                    submitButton.prop('disabled', false).html(originalText);
                },
                error: function(data) {
                    var errors = data.responseJSON;
                    if (errors && errors.errors) {
                        $.each(errors.errors, function(key, value) {
                            var errorId = '#' + key + 'Error';
                            $(errorId).removeClass("d-none").text(Array.isArray(value) ? value[0] : value);
                        });
                    }

                    if (errors && errors.message) {
                        Toast.fire({
                            icon: 'error',
                            title: errors.message
                        });
                    }

                    submitButton.prop('disabled', false).html(originalText);
                }
            });
        });

        // Clear error messages on input change
        $('#waafipayAccountForm input, #waafipayAccountForm select, #waafipayAccountForm textarea').on('input change', function() {
            var errorID = '#' + $(this).attr('name') + 'Error';
            $(errorID).addClass('d-none');
        });
    });

    // Delete WaafiPay Account
    function deleteWaafipayAccount(restaurantId) {
        Swal.fire({
            title: 'Delete WaafiPay Account?',
            text: "This will permanently remove the WaafiPay account configuration. This action cannot be undone!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: '<i class="ri-delete-bin-line me-2"></i>Yes, Delete',
            cancelButtonText: '<i class="ri-close-line me-2"></i>Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('waafipay-account.delete', ':id') }}".replace(':id', restaurantId),
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            Toast.fire({
                                icon: 'success',
                                title: response.message
                            });

                            $('#waafipayAccountData').html(response.waafipay_account_html);

                            // refresh after 3 seconds
                            setTimeout(function() {
                                location.reload(); // full page reload
                            }, 2000);

                        }
                    },
                    error: function() {
                        Toast.fire({
                            icon: 'error',
                            title: 'Failed to delete WaafiPay account'
                        });
                    }
                });
            }
        });
    }

    // Toggle Account Status
    function toggleAccountStatus(restaurantId) {
        $.ajax({
            url: "{{ route('waafipay-account.toggle-status', ':id') }}".replace(':id', restaurantId),
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    Toast.fire({
                        icon: 'success',
                        title: response.message
                    });
                    $('#waafipayAccountData').html(response.waafipay_account_html);
                }
            },
            error: function() {
                Toast.fire({
                    icon: 'error',
                    title: 'Failed to update account status'
                });
            }
        });
    }
</script>
<script>
    // QR Type URL suggestions (Replace with your actual URLs)
    const qrTypeUrls = {
        restaurant_profile: '{{ url("/restaurant/" . base64_encode($restaurant->id)) }}',
        menu: '{{ url("/restaurant/" . base64_encode($restaurant->id) . "/menu") }}',
    };

    // Handle QR type change - Using event delegation
    $(document).on('change', '#qrType', function() {
        const urlInput = $('#qrUrl');
        if (this.value && qrTypeUrls[this.value]) {
            urlInput.val(qrTypeUrls[this.value]);
        } else if (this.value === 'custom') {
            urlInput.val('').focus();
        }
    });
    // QR Code Form Submission - Using event delegation
    $(document).on('submit', "#qrCodeForm", function(event) {
        event.preventDefault();

        var submitButton = $('#qrCodeForm button[type="submit"]');
        submitButton.prop('disabled', true).html('<i class="ri-loader-2-line me-1"></i>Processing...');

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

        $.ajax({
            type: 'POST',
            url: "{{route('qr-code.store',$restaurant->id)}}",
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                console.log('QR Code creation response:', data);
                if (data.success) {
                    $('#qrCodeModal').modal('hide');
                    Toast.fire({
                        icon: 'success',
                        title: data.message
                    });
                    $('#qrCodeForm')[0].reset();
                    loadQrCodeData();
                    loadQrCodeBtn();
                    // Reload QR code data after a short delay
                    setTimeout(function() {

                    }, 500);
                }
                if (data.error) {
                    Toast.fire({
                        icon: 'warning',
                        title: data.message
                    });
                }
                submitButton.prop('disabled', false).html('<i class="ri-save-line me-1"></i>Create QR Code');
            },
            error: function(data) {
                // Clear previous errors
                $('#nameError').addClass('d-none');
                $('#typeError').addClass('d-none');
                $('#qr_urlError').addClass('d-none');
                $('#sizeError').addClass('d-none');

                var errors = data.responseJSON;
                if ($.isEmptyObject(errors) == false) {
                    $.each(errors.errors, function(key, value) {
                        var ErrorID = '#' + key + 'Error';
                        $(ErrorID).removeClass("d-none");
                        $(ErrorID).text(value);
                    });
                }
                submitButton.prop('disabled', false).html('<i class="ri-save-line me-1"></i>Create QR Code');
            }
        });
    });

    // Clear error messages on input change for create form - Using event delegation
    $(document).on('input change', '#qrCodeForm input, #qrCodeForm select', function() {
        var errorID = '#' + $(this).attr('name') + 'Error';
        if ($(this).val() !== '') {
            $(errorID).addClass('d-none');
        }
    });
</script>
<script>
    // Edit QR Code Modal Setup - Using event delegation
    $(document).on('show.bs.modal', '#editQrCodeModal', function(event) {
        var button = $(event.relatedTarget);
        console.log('Edit button clicked:', button);
        console.log('Button data attributes:', button.data());

        var qrCodeId = button.attr('data-id');
        var name = button.attr('data-name');
        var type = button.attr('data-type');
        var qrUrl = button.attr('data-qr-url');
        var size = button.attr('data-size') || 300;
        var isActive = button.attr('data-is-active');
        var isDefault = button.attr('data-is-default');

        console.log('Extracted data:', {
            qrCodeId: qrCodeId,
            name: name,
            type: type,
            qrUrl: qrUrl,
            size: size,
            isActive: isActive,
            isDefault: isDefault
        });

        // Update the modal's form fields
        var modal = $(this);
        modal.find('#editQrCodeId').val(qrCodeId);
        modal.find('#editQrName').val(name);
        modal.find('#editQrType').val(type);
        modal.find('#editQrUrl').val(qrUrl);
        modal.find('#editQrSize').val(size);
        modal.find('#editIsActive').prop('checked', isActive == 1);
        modal.find('#editIsDefault').prop('checked', isDefault == 1);

        console.log('Modal fields updated');

        // Debug: Show what was actually set
        console.log('Modal field values after update:', {
            id: modal.find('#editQrCodeId').val(),
            name: modal.find('#editQrName').val(),
            type: modal.find('#editQrType').val(),
            url: modal.find('#editQrUrl').val(),
            size: modal.find('#editQrSize').val(),
            isActive: modal.find('#editIsActive').prop('checked'),
            isDefault: modal.find('#editIsDefault').prop('checked')
        });
    });
</script>
<script>
    // Update QR Code Form Submission - Using event delegation
    $(document).on('submit', "#editQrCodeForm", function(event) {
        event.preventDefault();

        var submitButton = $('#editQrCodeForm button[type="submit"]');
        var qrCodeId = $('#editQrCodeId').val();

        submitButton.prop('disabled', true).html('<i class="ri-loader-2-line me-1"></i>Updating...');

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

        $.ajax({
            type: 'POST',
            url: "{{ route('restaurant.qr-code.update', ':id') }}".replace(':id', qrCodeId),
            data: new FormData(this),
            dataType: 'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success: function(data) {
                console.log('QR Code update response:', data);
                if (data.success) {
                    $('#editQrCodeModal').modal('hide');
                    // $('#qrCodeData').html(data);
                    Toast.fire({
                        icon: 'success',
                        title: data.message
                    });
                    loadQrCodeData();
                    loadQrCodeBtn();
                    $('#editQrCodeForm')[0].reset();
                }
                if (data.error) {
                    Toast.fire({
                        icon: 'warning',
                        title: data.message
                    });
                }
                submitButton.prop('disabled', false).html('<i class="ri-save-line me-1"></i>Update QR Code');
            },
            error: function(data) {
                // Handle validation errors for edit form
                $('#editNameError').addClass('d-none');
                $('#editTypeError').addClass('d-none');
                $('#editQr_urlError').addClass('d-none');
                $('#editSizeError').addClass('d-none');

                var errors = data.responseJSON;
                if ($.isEmptyObject(errors) == false) {
                    $.each(errors.errors, function(key, value) {
                        var ErrorID = '#edit' + key.charAt(0).toUpperCase() + key.slice(1) + 'Error';
                        $(ErrorID).removeClass("d-none");
                        $(ErrorID).text(value);
                    });
                }
                submitButton.prop('disabled', false).html('<i class="ri-save-line me-1"></i>Update QR Code');
            }
        });
    });

    // Clear error messages on input change for edit form - Using event delegation
    $(document).on('input change', '#editQrCodeForm input, #editQrCodeForm select', function() {
        var fieldName = $(this).attr('name');
        var errorID = '#edit' + fieldName.charAt(0).toUpperCase() + fieldName.slice(1) + 'Error';
        if ($(this).val() !== '') {
            $(errorID).addClass('d-none');
        }
    });
</script>
<script>
    // Delete QR Code Modal Setup - Using event delegation
    $(document).on('show.bs.modal', '#deleteQrModal', function(event) {
        var triggerLink = $(event.relatedTarget);
        var qrCodeId = triggerLink.data("id");
        var url = "{{ route('restaurant.qr-code.delete', ':id') }}".replace(':id', qrCodeId);
        $("#deleteQrForm").attr('action', url);

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

    // Handle Delete Form Submission - Using event delegation
    $(document).on('submit', "#deleteQrForm", function(event) {
        event.preventDefault();

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

        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {
                if (data.success) {
                    $('#deleteQrModal').modal('hide');
                    loadQrCodeData();
                    loadQrCodeBtn();
                    Toast.fire({
                        icon: 'success',
                        title: data.message
                    });
                }
            },
            error: function(data) {
                Toast.fire({
                    icon: 'error',
                    title: 'Failed to delete the QR code!'
                });
                submitButton.prop('disabled', false).text('Yes, Delete It');
            }
        });
    });
</script>
<script>
    // Regenerate QR Code Modal Setup - Using event delegation
    $(document).on('show.bs.modal', '#regenerateQrModal', function(event) {
        var triggerLink = $(event.relatedTarget);
        var qrCodeId = triggerLink.data("id");
        var url = "{{ route('restaurant.qr-code.regenerate', ':id') }}".replace(':id', qrCodeId);
        $("#regenerateQrForm").attr('action', url);

        var submitButton = $("#regenerateQrForm button[type='submit']");
        submitButton.prop('disabled', false).text('Yes, Regenerate');
    });

    // Handle Regenerate Form Submission - Using event delegation
    $(document).on('submit', "#regenerateQrForm", function(event) {
        event.preventDefault();

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

        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {
                if (data.success) {
                    $('#regenerateQrModal').modal('hide');
                    loadQrCodeData();
                    Toast.fire({
                        icon: 'success',
                        title: data.message
                    });
                }
            },
            error: function(data) {
                Toast.fire({
                    icon: 'error',
                    title: 'Failed to regenerate QR code!'
                });
                submitButton.prop('disabled', false).text('Yes, Regenerate');
            }
        });
    });
</script>
<script>
    // Set Default QR Code Modal Setup - Using event delegation
    $(document).on('show.bs.modal', '#setDefaultQrModal', function(event) {
        var triggerLink = $(event.relatedTarget);
        var qrCodeId = triggerLink.data("id");
        var url = "{{ route('restaurant.qr-code.set-default', ':id') }}".replace(':id', qrCodeId);
        $("#setDefaultQrForm").attr('action', url);

        var submitButton = $("#setDefaultQrForm button[type='submit']");
        submitButton.prop('disabled', false).text('Yes, Set Default');
    });

    // Handle Set Default Form Submission - Using event delegation
    $(document).on('submit', "#setDefaultQrForm", function(event) {
        event.preventDefault();

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

        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(data) {
                if (data.success) {
                    $('#setDefaultQrModal').modal('hide');
                    loadQrCodeData();
                    Toast.fire({
                        icon: 'success',
                        title: data.message
                    });
                }
            },
            error: function(data) {
                Toast.fire({
                    icon: 'error',
                    title: 'Failed to set default QR code!'
                });
                submitButton.prop('disabled', false).text('Yes, Set Default');
            }
        });
    });
</script>
<script>
    // Download QR Code
    function downloadQrCode(qrCodeId) {
        console.log('Downloading QR code:', qrCodeId);
        var downloadUrl = "{{ route('restaurant.qr-download') }}?id=" + qrCodeId;
        console.log('Download URL:', downloadUrl);
        window.location.href = downloadUrl;
    }

    // Share QR Code
    function shareQrCode(qrCodeId) {
        console.log('Sharing QR code:', qrCodeId);
        const qrUrl = "{{ route('restaurant.qr-download') }}?id=" + qrCodeId;
        console.log('Share URL:', qrUrl);

        if (navigator.share) {
            navigator.share({
                title: 'Restaurant QR Code',
                text: 'Check out our restaurant QR code',
                url: qrUrl
            });
        } else {
            // Fallback: copy to clipboard
            navigator.clipboard.writeText(qrUrl).then(() => {
                Toast.fire({
                    icon: 'success',
                    title: 'QR code download link copied to clipboard!'
                });
            });
        }
    }

    // Load QR Code Data
    function loadQrCodeData() {
        console.log('Loading QR code data...');
        $.ajax({
            url: "{{ route('qr-code.data', $restaurant->id) }}",
            method: 'GET',
            success: function(data) {
                console.log('QR code data loaded successfully:', data);
                loadQrCodeBtn();
                $('#qrCodeData').html(data);

                //  $('#categoriesTbody').html(json.rows);

            },
            error: function(error) {
                console.error('Error loading QR code data:', error);
                Toast.fire({
                    icon: 'error',
                    title: 'Failed to load QR code data'
                });
            }
        });
    }

    function loadQrCodeBtn() {
        console.log('Loading QR code button...');
        $.ajax({
            url: "{{ route('qr-code.btn', $restaurant->id) }}",
            method: 'GET',
            success: function(data) {
                console.log('QR code button loaded successfully:', data);
                $('#qrCodeBtn').html(data);
            },
            error: function(error) {
                console.error('Error loading QR code button:', error);
                Toast.fire({
                    icon: 'error',
                    title: 'Failed to load QR code button'
                });
            }
        });
    }




    // Initialize when document is ready
    $(document).ready(function() {
        // Load initial QR code data
        loadQrCodeData();
    });

    // Event delegation for download and share buttons
    $(document).on('click', '.download-qr-btn', function() {
        var qrCodeId = $(this).data('qr-id');
        downloadQrCode(qrCodeId);
    });

    $(document).on('click', '.share-qr-btn', function() {
        var qrCodeId = $(this).data('qr-id');
        shareQrCode(qrCodeId);
    });
</script>
@endsection