@extends('layouts.app')
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/css/intlTelInput.css" />
<div class="page-wrapper">
    <div class="row page-titles">
        <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">{{ trans('lang.bookit_plural') }}</h3>
        </div>
        <div class="col-md-7 align-self-center">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ url('/dashboard') }}">{{ trans('lang.dashboard') }}</a>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ route('bookit.index') }}">{{ trans('lang.bookit_plural') }}</a>
                </li>
                <li class="breadcrumb-item active">
                    {{ trans('lang.create_bookit') }}
                </li>
            </ol>
        </div>

        <div class="container-fluid">
            <div class="cat-edite-page max-width-box">
                <form id="store-form" action="{{ route('bookit.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="card pb-4">
                        <div class="card-header">
                            <ul class="nav nav-tabs align-items-end card-header-tabs w-100" role="tablist">
                                <li class="nav-item">
                                    <a href="#bookit_information" aria-controls="bookit_information" role="tab"
                                        data-toggle="tab" class="nav-link active">
                                        {{ trans('lang.bookit_information') }}
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#bookit_attributes" aria-controls="bookit_attributes" role="tab"
                                        data-toggle="tab" class="nav-link">
                                        {{ trans('lang.attribute') }}
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a href="#bookit_offer" aria-controls="bookit_offer" role="tab"
                                        data-toggle="tab" class="nav-link">
                                        {{ trans('lang.offers') }}
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <div class="tab-content p-3">

                            {{-- ✅ Bookit Information Tab --}}
                            <div role="tabpanel" class="tab-pane active" id="bookit_information">

                                <div id="data-table_processing" class="dataTables_processing panel panel-default" style="display: none;">
                                    {{ trans('lang.processing') }}
                                </div>
                                <div class="error_top" style="display:none"></div>
                                @include('alerts.error_messages')

                                <div class="row restaurant_payout_create">
                                    <div class="restaurant_payout_create-inner">

                                        <fieldset>
                                            <legend>{{ trans('lang.bookit_details') }}</legend>

                                            {{-- Restaurant Name --}}
                                            <div class="form-group row width-50">
                                                <label class="col-3 control-label">{{ trans('lang.restaurant_name') }}</label>
                                                <div class="col-7">
                                                    <input type="text" name="store_name" class="form-control restaurant_name" required>
                                                    <div class="form-text text-muted">{{ trans('lang.restaurant_name_help') }}</div>
                                                </div>
                                            </div>

                                            {{-- Vendor --}}
                                            <div class="form-group row width-50">
                                                <label class="col-3 control-label">{{ trans('lang.vendor') }}</label>
                                                <div class="col-7">
                                                    <select id="vendor" name="vendor" class="form-control" required>
                                                        <option value="">{{ trans('lang.select_vendor') }}</option>
                                                        @foreach ($vendors as $vendor)
                                                        <option value="{{ $vendor->id }}">{{ $vendor->business_name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <div class="form-text text-muted">{{ trans('lang.restaurant_vendor_help') }}</div>
                                                </div>
                                            </div>

                                            {{-- Description --}}
                                            <div class="form-group row width-100">
                                                <label class="col-3 control-label">{{ trans('lang.recipes_description') }}</label>
                                                <div class="col-7">
                                                    <textarea rows="7" class="category_description form-control"
                                                        id="category_description"
                                                        name="description">{{ old('description') }}</textarea>
                                                    <div class="form-text text-muted">
                                                        {{ trans('lang.category_description_help') }}
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- Category --}}
                                            <div class="form-group row width-50">
                                                <label class="col-3 control-label">{{ trans('lang.category') }}</label>
                                                <div class="col-7">
                                                    <select id="category" name="category" class="form-control" required>
                                                        <option value="">{{ trans('lang.select_cuisines') }}</option>
                                                        @foreach ($categories as $category)
                                                        <option value="{{ $category->id }}">{{ $category->name }}</option>
                                                        @endforeach
                                                    </select>
                                                    <div class="form-text text-muted">{{ trans('lang.restaurant_cuisines_help') }}</div>
                                                </div>
                                            </div>

                                            {{-- Subcategory --}}
                                            <div class="form-group row width-50">
                                                <label class="col-3 control-label">{{ trans('lang.sub_category') }}</label>
                                                <div class="col-7">
                                                    <select id="subcategories" name="subcategories[]" class="form-control" multiple></select>
                                                    <div class="form-text text-muted">{{ trans('lang.restaurant_subcategory_help') }}</div>
                                                </div>
                                            </div>

                                            {{-- Email --}}
                                            <div class="form-group row width-50">
                                                <label class="col-3 control-label">{{ trans('lang.email') }}</label>
                                                <div class="col-7">
                                                    <input type="email" name="email" class="form-control email" required>
                                                    <div class="form-text text-muted">{{ trans('lang.restaurant_email_help') }}</div>
                                                </div>
                                            </div>

                                            {{-- Phone --}}
                                            <div class="form-group row width-50">
                                                <label class="col-3 control-label">Phone</label>
                                                <div class="col-7 d-flex align-items-start">
                                                    <input id="phone" type="tel" name="phone_display" class="form-control"
                                                        value="{{ old('phone_number', $phone_number ?? '') }}" />
                                                </div>
                                                <input type="hidden" name="phone_country_code" id="phone_country_code"
                                                    value="{{ old('phone_code', $phone_code ?? '') }}">
                                                <input type="hidden" name="phone_number" id="phone_number"
                                                    value="{{ old('phone', $phone ?? '') }}">
                                                <div id="phone_error" class="text-danger"></div>
                                                <small class="form-text text-muted w-50">Enter your phone number with country.</small>
                                            </div>

                                            {{-- Address --}}
                                            <div class="form-group row width-50">
                                                <label class="col-3 control-label">{{ trans('lang.restaurant_address') }}</label>
                                                <div class="col-7">
                                                    <textarea name="address" class="form-control"></textarea>
                                                    <div class="form-text text-muted">{{ trans('lang.restaurant_address_help') }}</div>
                                                </div>
                                            </div>

                                            {{-- Latitude / Longitude --}}
                                            <div class="form-group row width-100">
                                                <div class="col-12">
                                                    <h6>* Don't Know your cordinates ? use
                                                        <a target="_blank" href="https://www.latlong.net/">
                                                            Latitude and Longitude Finder
                                                        </a>
                                                    </h6>
                                                </div>
                                            </div>

                                            <div class="form-group row width-50">
                                                <label class="col-3 control-label">{{ trans('lang.restaurant_latitude') }}</label>
                                                <div class="col-7">
                                                    <input name="latitude" step="any" class="form-control restaurant_latitude" type="number" min="-90" max="90">
                                                    <div class="form-text text-muted">{{ trans('lang.restaurant_latitude_help') }}</div>
                                                </div>
                                            </div>

                                            <div class="form-group row width-50">
                                                <label class="col-3 control-label">{{ trans('lang.restaurant_longitude') }}</label>
                                                <div class="col-7">
                                                    <input name="longitude" step="any" class="form-control restaurant_longitude" type="number" min="-180" max="180">
                                                    <div class="form-text text-muted">{{ trans('lang.restaurant_longitude_help') }}</div>
                                                </div>
                                            </div>

                                            {{-- Logo --}}
                                            <div class="form-group row width-50">
                                                <label class="col-3 control-label">{{ trans('lang.logo_image') }}</label>
                                                <div class="col-7">
                                                    <input type="file" name="image" onChange="handleFileSelect(event,'photo')">
                                                    <div id="uploding_image_restaurant"></div>
                                                    <div class="uploaded_image" style="display:none;">
                                                        <img id="uploaded_image" src="" width="150px" height="150px;">
                                                    </div>
                                                    <div class="form-text text-muted">{{ trans('lang.store_image_help') }}</div>
                                                </div>
                                            </div>
                                        </fieldset>

                                        {{-- Gallery --}}
                                        <fieldset>
                                            <legend>{{ trans('lang.gallery') }}</legend>
                                            <div class="form-group row width-50 restaurant_image">
                                                <div class="">
                                                    <div id="photos"></div>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <div>
                                                    <input type="file" name="gallery[]" id="galleryImage"
                                                        onChange="handleFileSelect(event,'photos')" multiple>
                                                    <div id="uploding_image_photos"></div>
                                                </div>
                                            </div>
                                            <div class="form-text text-muted">{{ trans('lang.store_gallery_image_help') }}</div>
                                        </fieldset>

                                        {{-- Working Hours --}}
                                        <fieldset>
                                            <legend>{{ trans('lang.working_hours') }}</legend>

                                            <div class="form-group row">

                                                <div class="form-group row width-100">
                                                    <div class="col-7">
                                                        <button type="button"
                                                            class="btn btn-primary  add_working_hours_restaurant_btn">
                                                            <i></i>{{ trans('lang.add_working_hours') }}
                                                        </button>
                                                    </div>
                                                </div>
                                                <div class="working_hours_div" style="display:none">
                                                    <div class="form-group row">

                                                        <div class="form-group row width-50">
                                                            <div class="form-check width-100">
                                                                <input name="copy_sunday_to_all_days" type="checkbox"
                                                                    onchange="copySundayToAll()" id="copy_sunday_to_all">
                                                                <label class="col-3 control-label"
                                                                    for="copy_sunday_to_all">{{ trans('lang.copy_sunday_to_all_days') }}</label>
                                                            </div>
                                                        </div>

                                                    </div>
                                                    {{-- <div class="form-group row mt-3">
                                                <div class="col-12">
                                                    <label>
                                                        <input type="checkbox" id="copy_sunday_to_all"
                                                            onchange="copySundayToAll()">
                                                        {{ trans('lang.copy_sunday_to_all_days') }}
                                                    </label>
                                                </div>
                                            </div> --}}



                                            <div class="form-group row mb-0">
                                                <label class="col-1 control-label">{{ trans('lang.monday') }}</label>
                                                <div class="col-12">
                                                    <button type="button" class="btn btn-primary add_more_sunday"
                                                        onclick="addMorehour('Monday','Monday', '1')">
                                                        {{ trans('lang.add_more') }}
                                                    </button>
                                                </div>
                                            </div>

                                            <div class="restaurant_working_hour_Monday_div restaurant_discount mb-5 form-group row mt-2"
                                                style="display:none">
                                                <div class="col-12">

                                                    <table class="booking-table" id="working_hour_table_Monday">
                                                        <tr>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.from') }}</label>
                                                            </th>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.to') }}</label>
                                                            </th>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.actions') }}</label>
                                                            </th>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                            <div class="form-group row mb-0">
                                                <label class="col-1 control-label">{{ trans('lang.tuesday') }}</label>
                                                <div class="col-12">
                                                    <button type="button" class="btn btn-primary"
                                                        onclick="addMorehour('Tuesday','Tuesday', '1')">
                                                        {{ trans('lang.add_more') }}
                                                    </button>
                                                </div>
                                            </div>

                                            <div class="restaurant_working_hour_Tuesday_div restaurant_discount mb-5 form-group row mt-2"
                                                style="display:none">
                                                <div class="col-12">

                                                    <table class="booking-table" id="working_hour_table_Tuesday">
                                                        <tr>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.from') }}</label>
                                                            </th>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.to') }}</label>
                                                            </th>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.actions') }}</label>
                                                            </th>
                                                        </tr>

                                                    </table>
                                                </div>
                                            </div>
                                            <div class="form-group row mb-0">
                                                <label class="col-1 control-label">{{ trans('lang.wednesday') }}</label>
                                                <div class="col-12">
                                                    <button type="button" class="btn btn-primary"
                                                        onclick="addMorehour('Wednesday','Wednesday', '1')">
                                                        {{ trans('lang.add_more') }}
                                                    </button>
                                                </div>
                                            </div>


                                            <div class="restaurant_working_hour_Wednesday_div restaurant_discount mb-5 form-group row mt-2"
                                                style="display:none">
                                                <div class="col-12">

                                                    <table class="booking-table" id="working_hour_table_Wednesday">
                                                        <tr>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.from') }}</label>
                                                            </th>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.to') }}</label>
                                                            </th>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.actions') }}</label>
                                                            </th>
                                                        </tr>

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

                                            <div class="form-group row mb-0">
                                                <label class="col-1 control-label">{{ trans('lang.thursday') }}</label>
                                                <div class="col-12">
                                                    <button type="button" class="btn btn-primary"
                                                        onclick="addMorehour('Thursday','Thursday', '1')">
                                                        {{ trans('lang.add_more') }}
                                                    </button>
                                                </div>
                                            </div>

                                            <div class="restaurant_working_hour_Thursday_div restaurant_discount mb-5 form-group row mt-2"
                                                style="display:none">
                                                <div class="col-12">

                                                    <table class="booking-table" id="working_hour_table_Thursday">
                                                        <tr>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.from') }}</label>
                                                            </th>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.to') }}</label>
                                                            </th>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.actions') }}</label>
                                                            </th>
                                                        </tr>

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

                                            <div class="form-group row mb-0">
                                                <label class="col-1 control-label">{{ trans('lang.friday') }}</label>
                                                <div class="col-12">
                                                    <button type="button" class="btn btn-primary"
                                                        onclick="addMorehour('Friday','Friday', '1')">
                                                        {{ trans('lang.add_more') }}
                                                    </button>
                                                </div>
                                            </div>

                                            <div class="restaurant_working_hour_Friday_div restaurant_discount mb-5 form-group row mt-2"
                                                style="display:none">
                                                <div class="col-12">

                                                    <table class="booking-table" id="working_hour_table_Friday">
                                                        <tr>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.from') }}</label>
                                                            </th>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.to') }}</label>
                                                            </th>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.actions') }}</label>
                                                            </th>
                                                        </tr>

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


                                            <div class="form-group row mb-0">
                                                <label class="col-1 control-label">{{ trans('lang.Saturday') }}</label>
                                                <div class="col-12">
                                                    <button type="button" class="btn btn-primary"
                                                        onclick="addMorehour('Saturday','Saturday','1')">
                                                        {{ trans('lang.add_more') }}
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="restaurant_working_hour_Saturday_div restaurant_discount mb-5 form-group row mt-2"
                                                style="display:none">
                                                <div class="col-12">

                                                    <table class="booking-table" id="working_hour_table_Saturday">
                                                        <tr>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.from') }}</label>
                                                            </th>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.to') }}</label>
                                                            </th>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.actions') }}</label>
                                                            </th>
                                                        </tr>
                                                    </table>
                                                </div>
                                            </div>
                                            <div class="form-group row mb-0">
                                                <label class="col-1 control-label">{{ trans('lang.sunday') }}</label>
                                                <div class="col-12">
                                                    <button type="button" class="btn btn-primary add_more_sunday"
                                                        onclick="addMorehour('Sunday','Sunday', '1')">
                                                        {{ trans('lang.add_more') }}
                                                    </button>
                                                </div>
                                            </div>


                                            <div class="restaurant_working_hour_Sunday_div restaurant_discount mb-5 form-group row mt-2"
                                                style="display:none">

                                                <div class="col-12">

                                                    <table class="booking-table" id="working_hour_table_Sunday">
                                                        <tr>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.from') }}</label>
                                                            </th>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.to') }}</label>
                                                            </th>
                                                            <th>
                                                                <label
                                                                    class="col-3 control-label">{{ trans('lang.actions') }}</label>
                                                            </th>
                                                        </tr>

                                                    </table>
                                                </div>
                                            </div>
                                    </div>
                                </div>
                                </fieldset>
                                {{-- Active/Deactive --}}
                                <fieldset>
                                    <legend>{{ trans('lang.bookit') }} {{ trans('lang.active_deactive') }}</legend>
                                    <div class="form-group row">
                                        <div class="form-group row width-50">
                                            <div class="form-check width-100">
                                                <input name="is_bookit" type="checkbox" id="is_bookit">
                                                <label class="col-3 control-label" for="is_bookit">{{ trans('lang.bookit') }}</label>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>

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

                    {{-- ✅ Bookit Attributes Tab --}}
                    <div role="tabpanel" class="tab-pane" id="bookit_attributes">
                        <div class="form-group col-12">
                            <table class="table table-bordered" id="bookit-attributes-table">
                                <thead>
                                    <tr>
                                        <th>{{ trans('lang.attribute_name') }}</th>
                                        <th>{{ trans('lang.count') }}</th>
                                        <th>{{ trans('lang.action') }}</th>
                                    </tr>
                                </thead>
                                <tbody id="bookit-attributes-rows">
                                    {{-- Rows dynamically added by JS --}}
                                </tbody>
                            </table>
                            <button type="button" class="btn btn-sm btn-success" id="add-bookit-attribute-row">
                                {{ trans('lang.add_attributes') }}
                            </button>
                        </div>
                    </div>

                    {{-- ✅ Bookit Offer Tab --}}
                    <div role="tabpanel" class="tab-pane" id="bookit_offer">
                        <div class="form-group col-12">
                            <table class="table table-bordered" id="bookit-offer-table">
                                <thead>
                                    <tr>
                                        <th>{{ trans('lang.offer') }}</th>
                                        <th>{{ trans('lang.action') }}</th>
                                    </tr>
                                </thead>
                                <tbody id="bookit-offer-rows">
                                    {{-- Rows dynamically added by JS --}}
                                </tbody>
                            </table>
                            <button type="button" class="btn btn-sm btn-success" id="add-bookit-offer-row">
                                {{ trans('lang.add_offers') }}
                            </button>
                        </div>
                    </div>
            </div>
            {{-- Submit Buttons --}}
            <div class="form-group col-12 text-center pb-3">
                <button type="submit" class="btn btn-primary create_restaurant_btn">
                    <i class="fa fa-save"></i> {{ trans('lang.save') }}
                </button>
                <a href="{!! route('bookit.index') !!}" class="btn btn-default">
                    <i class="fa fa-undo"></i>{{ trans('lang.cancel') }}
                </a>
            </div>
        </div>
        </form>
    </div>
</div>
</div>
</div>

@endsection
@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/compressorjs/1.1.1/compressor.min.js"
    integrity="sha512-VaRptAfSxXFAv+vx33XixtIVT9A/9unb1Q8fp63y1ljF+Sbka+eMJWoDAArdm7jOYuLQHVx5v60TQ+t3EA8weA=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/intlTelInput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"></script>

<script>
    $(document).ready(function() {
        $('#subcategories').select2({
            placeholder: 'Select Subcategories',
            width: '100%'
        });

        $('#category').on('change', function() {
            const categoryId = $(this).val();

            $('#subcategories').empty();
            if (categoryId) {
                $.ajax({
                    url: '{{ route("get.subcategories") }}', // ✅ fixed
                    type: 'GET',
                    data: {
                        category_id: categoryId
                    },
                    success: function(data) {
                        if (data.length) {
                            $.each(data, function(index, subcategory) {
                                $('#subcategories').append(
                                    $('<option>', {
                                        value: subcategory.id,
                                        text: subcategory.name
                                    })
                                );
                            });
                        } else {
                            $('#subcategories').append(
                                '<option value="">{{ trans("lang.no_subcategories_found") }}</option>' // ✅ fixed
                            );
                        }
                    },
                    error: function(xhr) {
                        console.error(xhr.responseText);
                    }
                });
            }
        });
    });
</script>

<script>
    $(document).ready(function() {

        // ✅ Working hours button
        $(".add_working_hours_restaurant_btn").click(function() {
            $(".working_hours_div").css("display", "block");
            $(".restaurant_working_hour_monday_div").show();
        });

    });

    // ------------------- WORKING HOURS FUNCTIONS -------------------
    var countAddhours = 1;

    function addMorehour(day, day2, count) {
        count = countAddhours;
        $(".restaurant_working_hour_" + day + "_div").show();

        $('#working_hour_table_' + day + ' tr:last').after('<tr id="row_' + day + count + '">' +
            '<td class="" style="width:45%;">' +
            '<input type="time" name="working_hours[' + day2 + '][' + count +
            '][from]" class="form-control" required>' +
            '</td>' +
            '<td class="" style="width:45%;">' +
            '<input type="time" name="working_hours[' + day2 + '][' + count +
            '][to]" class="form-control" required>' +
            '</td>' +
            '<td style="width:10%;">' +
            '<button type="button" class="btn btn-danger" onclick="removeWorkingHourRow(\'' + day + '\',\'row_' +
            day + count + '\')">' +
            '<i class="fa fa-trash" title="Delete"></i>' +
            '</button>' +
            '</td>' +
            '</tr>');

        countAddhours++;
    }

    function removeWorkingHourRow(day, rowId) {
        $('#' + rowId).remove();
        let remainingRows = $('#working_hour_table_' + day + ' tr').length;

        if (remainingRows <= 1) {
            $(".restaurant_working_hour_" + day + "_div").hide();
        }
    }
</script>


<script>
    document.addEventListener("DOMContentLoaded", function() {
        const input = document.querySelector("#phone");
        if (!input) return;

        const iti = window.intlTelInput(input, {
            separateDialCode: true,
            initialCountry: "auto",
            geoIpLookup: function(callback) {
                fetch(
                        "https://ipinfo.io?token=YOUR_TOKEN"
                    ) // ← Optional, replace with your token or remove
                    .then(res => res.json())
                    .then(data => callback(data.country))
                    .catch(() => callback("us"));
            },
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"
        });

        // Restore existing values (Edit case)
        const storedCode = document.getElementById("phone_country_code").value;
        const storedNumber = document.getElementById("phone_number").value;
        if (storedCode) {
            const countryData = iti.getSelectedCountryData();
            const allCountries = window.intlTelInputGlobals.getCountryData();
            const match = allCountries.find(c => `+${c.dialCode}` === storedCode);
            if (match) {
                iti.setCountry(match.iso2);
            }
        }
        if (storedNumber) {
            input.value = storedNumber;
        }

        // On form submit: update hidden fields
        input.form.addEventListener("submit", function() {
            const selected = iti.getSelectedCountryData();
            document.getElementById("phone_country_code").value = `+${selected.dialCode}`;
            document.getElementById("phone_number").value = input.value.trim();
        });
    });

    function copyMondayToAll() {
        const isChecked = document.getElementById('copy_sunday_to_all').checked;
        if (!isChecked) return;

        const mondayTable = document.getElementById('working_hour_table_Monday');
        const mondayRows = Array.from(mondayTable.querySelectorAll('tr:not(:first-child)'));

        const days = ['Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

        days.forEach(day => {
            const dayTable = document.getElementById('working_hour_table_' + day);

            dayTable.querySelectorAll('tr:not(:first-child)').forEach(row => row.remove());

            const sectionDiv = document.querySelector(`.restaurant_working_hour_${day}_div`);
            if (sectionDiv && sectionDiv.style.display === "none") {
                sectionDiv.style.display = "block";
            }

            mondayRows.forEach(row => {
                const clone = row.cloneNode(true);

                const inputs = clone.querySelectorAll('input');
                inputs.forEach(input => {
                    if (input.name) {
                        input.name = input.name.replace('Monday', day);
                    }
                    if (input.id) {
                        input.id = input.id.replace('Monday', day);
                    }
                });

                dayTable.appendChild(clone);
            });
        });
    }
</script>
<script>
    const phoneInputInstances = [];

    function initPhoneInputs() {
        $('.phone-input').each(function() {
            const input = this;

            // Avoid re-initializing already initialized inputs
            if (!input.classList.contains('iti-initialized')) {
                const iti = window.intlTelInput(input, {
                    initialCountry: 'lb',
                    separateDialCode: true,
                    nationalMode: true,
                    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
                });

                phoneInputInstances.push({
                    input,
                    iti
                });

                // Set initial phone_code
                const code = iti.getSelectedCountryData().dialCode;
                $(input).siblings('.phone-code').val('+' + code);

                input.addEventListener('countrychange', function() {
                    const updatedCode = iti.getSelectedCountryData().dialCode;
                    $(input).siblings('.phone-code').val('+' + updatedCode);
                });
            }
        });
    }

    $(document).ready(function() {
        initPhoneInputs();

        $('.add-driver').on('click', function() {
            const index = $('#drivers-table tbody tr').length;

            const newRow = `
                <tr>
                    <td><input type="text" name="drivers[${index}][first_name]" class="form-control" placeholder="First Name"></td>
                    <td><input type="text" name="drivers[${index}][last_name]" class="form-control" placeholder="Last Name"></td>
                    <td>
                        <input type="tel" name="drivers[${index}][phone]" class="form-control phone-input" placeholder="Mobile Number">
                        <input type="hidden" name="drivers[${index}][phone_code]" class="phone-code">
                    </td>
                    <td><button type="button" class="btn btn-danger remove-driver">-</button></td>
                </tr>`;
            $('#drivers-table tbody').append(newRow);

            initPhoneInputs(); // Reinitialize new phone input
        });

        $(document).on('click', '.remove-driver', function() {
            $(this).closest('tr').remove();
        });

        // Ensure phone_code is set before submitting the form
        $('#store-form').on('submit', function(event) {
            // event.preventDefault();
            phoneInputInstances.forEach(({
                input,
                iti
            }) => {
                const code = iti.getSelectedCountryData().dialCode;

                // Correctly find the corresponding hidden phone_code input
                const $phoneCodeInput = $(input).closest('td').find('.phone-code');

                $phoneCodeInput.val('+' + code);
                console.log('Phone code updated to: +' + code);
                console.log('phone code :', $phoneCodeInput.val());
            });
        });
    });
</script>
<script>
    $(document).ready(async function() {

        $('#enable_delivery').on('change', function() {
            if ($(this).is(':checked')) {
                $('#delivery_charge_fields').show();
            } else {
                $('#delivery_charge_fields').hide();
            }
        });


    })






    $("#dine_in_feature").change(function() {
        if (this.checked) {
            $(".divein_div").show();
        } else {
            $(".divein_div").hide();
        }
    });


    $(".add_special_offer_restaurant_btn").click(function() {
        if (specialDiscountOfferisEnable) {
            $(".special_offer_div").show();
        } else {
            alert("{{ trans('lang.special_offer_disabled') }}");
            return false;
        }
    })

    var countAddButton = 1;

    function addMoreButton(day, day2, count) {
        count = countAddButton;
        $(".restaurant_discount_options_" + day + "_div").show();
        // 	$(".restaurant_opentime_options_"+day).append('<input type="time" class="form-control" id="openTime'+day+'">');
        // $(".restaurant_closetime_options_"+day).append('<input type="time" class="form-control" id="closeTime'+day+'"  >');
        // $(".restaurant_discount_options_"+day).append('<input type="number" class="form-control" id="discount'+day+'">');
        // $(".restaurant_action_options_"+day+"_div").append('<button type="button" class="btn btn-primary save_option_day_button'+day+'" onclick="addMoreFunctionButton(`'+day2+'`,`'+day+'`)" >Save</button>');

        $('#special_offer_table_' + day + ' tr:last').after('<tr>' +
            '<td class="" style="width:10%;"><input type="time" class="form-control" id="openTime' + day + count +
            '"></td>' +
            '<td class="" style="width:10%;"><input type="time" class="form-control" id="closeTime' + day + count +
            '"></td>' +
            '<td class="" style="width:30%;">' +
            '<input type="number" class="form-control" id="discount' + day + count + '" style="width:60%;">' +
            '<select id="discount_type' + day + count +
            '" class="form-control" style="width:40%;"><option value="percentage"/>%</option><option value="amount"/>' +
            currentCurrency + '</option></select>' +
            '</td>' +
            '<td style="width:30%;"><select id="type' + day + count +
            '" class="form-control"><option value="delivery"/>Delivery Discount</option></select></td>' +
            '<td class="action-btn" style="width:20%;">' +
            '<button type="button" class="btn btn-primary save_option_day_button' + day + count +
            '" onclick="addMoreFunctionButton(`' + day2 + '`,`' + day + '`,' + countAddButton +
            ')" style="width:62%;"><i class="fa fa-save"></i> Save</button>' +
            '</td></tr>');
        countAddButton++;

    }

    function addMoreFunctionButton(day1, day2, count) {
        var discount = $("#discount" + day2 + count).val();
        var discount_type = $('#discount_type' + day2 + count).val();
        var type = $('#type' + day2 + count).val();
        var closeTime = $("#closeTime" + day2 + count).val();
        var openTime = $("#openTime" + day2 + count).val();
        if (discount == "" || closeTime == '' || openTime == '') {
            $(".error_top").show();
            $(".error_top").html("");
            $(".error_top").append("<p>Please Enter valid time or discount</p>");
            window.scrollTo(0, 0);
        } else if (discount > 100 || discount == 0) {
            $(".error_top").show();
            $(".error_top").html("");
            $(".error_top").append("<p>Please Enter valid discount</p>");
            window.scrollTo(0, 0);
        } else {

            var timeslotVar = {
                'discount': discount,
                'from': openTime,
                'to': closeTime,
                'type': discount_type,
                'discount_type': type
            };

            if (day1 == 'sunday') {
                timeslotSunday.push(timeslotVar);
            } else if (day1 == 'monday') {
                timeslotMonday.push(timeslotVar);
            } else if (day1 == 'tuesday') {
                timeslotTuesday.push(timeslotVar);
            } else if (day1 == 'wednesday') {
                timeslotWednesday.push(timeslotVar);
            } else if (day1 == 'thursday') {
                timeslotThursday.push(timeslotVar);
            } else if (day1 == 'friday') {
                timeslotFriday.push(timeslotVar);
            } else if (day1 == 'Saturday') {
                timeslotSaturday.push(timeslotVar);
            }

            /*$("#discount"+day2+"").remove();
            $("#discount_type"+day2+"").remove();
                $("#closeTime"+day2+"").remove();
                $("#openTime"+day2+"").remove();*/
            $(".save_option_day_button" + day2 + count).hide();
            $("#discount" + day2 + count).attr('disabled', "true");
            $("#discount_type" + day2 + count).attr('disabled', "true");
            $("#type" + day2 + count).attr('disabled', "true");
            $("#closeTime" + day2 + count).attr('disabled', "true");
            $("#openTime" + day2 + count).attr('disabled', "true");
        }

    }


    $(".add_working_hours_restaurant_btn").click(function() {
        $(".working_hours_div").show();
    })
    var countAddhours = 1;

    function addMorehour(day, day2, count) {
        count = countAddhours;
        $(".restaurant_working_hour_" + day + "_div").show();

        $('#working_hour_table_' + day + ' tr:last').after('<tr id="row_' + day + count + '">' +
            '<td class="" style="width:50%;">' +
            '<input type="time" name="working_hours[' + day2 + '][' + count +
            '][from]" class="form-control" required>' +
            '</td>' +
            '<td class="" style="width:50%;">' +
            '<input type="time" name="working_hours[' + day2 + '][' + count +
            '][to]" class="form-control" required>' +
            '</td>' +
            '<td>' +
            '<button type="button" class="btn btn-danger" onclick="removeWorkingHourRow(\'' + day + '\',\'row_' +
            day + count + '\')">' +
            '<i class="fa fa-trash" title="Delete"></i>' +
            '</button>' +
            '</td>' +
            '</tr>');

        countAddhours++;
    }

    function removeWorkingHourRow(day, rowId) {
        $('#' + rowId).remove();
        let remainingRows = $('#working_hour_table_' + day + ' tr').length;

        // If only header remains or no rows, hide the block
        if (remainingRows <= 1) {
            $(".restaurant_working_hour_" + day + "_div").hide();
        }
    }


    function addMoreFunctionhour(day1, day2, count) {
        var to = $("#to" + day2 + count).val();
        var from = $("#from" + day2 + count).val();
        if (to == '' || from == '') {
            $(".error_top").show();
            $(".error_top").html("");
            $(".error_top").append("<p>Please Enter valid time</p>");
            window.scrollTo(0, 0);

        } else {

            var timeslotworkVar = {
                'from': from,
                'to': to,
            };

            if (day1 == 'sunday') {
                timeslotworkSunday.push(timeslotworkVar);
            } else if (day1 == 'monday') {
                timeslotworkMonday.push(timeslotworkVar);
            } else if (day1 == 'tuesday') {
                timeslotworkTuesday.push(timeslotworkVar);
            } else if (day1 == 'wednesday') {
                timeslotworkWednesday.push(timeslotworkVar);
            } else if (day1 == 'thursday') {
                timeslotworkThursday.push(timeslotworkVar);
            } else if (day1 == 'friday') {
                timeslotworkFriday.push(timeslotworkVar);
            } else if (day1 == 'Saturday') {
                timeslotworkSaturday.push(timeslotworkVar);
            }

            $(".save_option_day_button" + day2 + count).hide();
            $("#to" + day2 + count).attr('disabled', "true");
            $("#from" + day2 + count).attr('disabled', "true");
        }

    }

    function chkAlphabets2(event, msg) {
        if (!(event.which >= 48 && event.which <= 57)) {
            document.getElementById(msg).innerHTML = "Accept only Number";
            return false;
        } else {
            document.getElementById(msg).innerHTML = "";
            return true;
        }
    }

    function chkNumbers2(event, msg) {
        if (!(event.which > 64 && event.which < 91 || event.which > 96 && event.which < 123)) {
            document.getElementById(msg).innerHTML = "Accept only letters";
            return false;
        } else {
            document.getElementById(msg).innerHTML = "";
            return true;
        }
    }
</script>


<script>
    document.addEventListener("DOMContentLoaded", function() {
        const input = document.querySelector("#phone");
        if (!input) return;

        const iti = window.intlTelInput(input, {
            separateDialCode: true,
            initialCountry: "auto",
            geoIpLookup: function(callback) {
                fetch(
                        "https://ipinfo.io?token=YOUR_TOKEN"
                    ) // ← Optional, replace with your token or remove
                    .then(res => res.json())
                    .then(data => callback(data.country))
                    .catch(() => callback("us"));
            },
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js"
        });

        // Restore existing values (Edit case)
        const storedCode = document.getElementById("phone_country_code").value;
        const storedNumber = document.getElementById("phone_number").value;
        if (storedCode) {
            const countryData = iti.getSelectedCountryData();
            const allCountries = window.intlTelInputGlobals.getCountryData();
            const match = allCountries.find(c => `+${c.dialCode}` === storedCode);
            if (match) {
                iti.setCountry(match.iso2);
            }
        }
        if (storedNumber) {
            input.value = storedNumber;
        }

        // On form submit: update hidden fields
        input.form.addEventListener("submit", function() {
            const selected = iti.getSelectedCountryData();
            document.getElementById("phone_country_code").value = `+${selected.dialCode}`;
            document.getElementById("phone_number").value = input.value.trim();
        });
    });

    function copySundayToAll() {
        const isChecked = document.getElementById('copy_sunday_to_all').checked;
        if (!isChecked) return;

        const sundayTable = document.getElementById('working_hour_table_Monday');
        const sundayRows = Array.from(sundayTable.querySelectorAll('tr:not(:first-child)'));

        const days = ['Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

        days.forEach(day => {
            const dayTable = document.getElementById('working_hour_table_' + day);

            // Clear existing rows
            dayTable.querySelectorAll('tr:not(:first-child)').forEach(row => row.remove());

            // Show the day's section if hidden
            const sectionDiv = document.querySelector(`.restaurant_working_hour_${day}_div`);
            if (sectionDiv && sectionDiv.style.display === "none") {
                sectionDiv.style.display = "block";
            }

            // Clone Sunday rows
            sundayRows.forEach(row => {
                const clone = row.cloneNode(true);

                // Optional: Adjust input names or IDs if needed
                const inputs = clone.querySelectorAll('input');
                inputs.forEach(input => {
                    if (input.name) {
                        input.name = input.name.replace('Monday', day);
                    }
                    if (input.id) {
                        input.id = input.id.replace('Monday', day);
                    }
                });

                dayTable.appendChild(clone);
            });
        });
    }
</script>
<script>
    const phoneInputInstances = [];

    function initPhoneInputs() {
        $('.phone-input').each(function() {
            const input = this;

            // Avoid re-initializing already initialized inputs
            if (!input.classList.contains('iti-initialized')) {
                const iti = window.intlTelInput(input, {
                    initialCountry: 'lb',
                    separateDialCode: true,
                    nationalMode: true,
                    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
                });

                phoneInputInstances.push({
                    input,
                    iti
                });

                // Set initial phone_code
                const code = iti.getSelectedCountryData().dialCode;
                $(input).siblings('.phone-code').val('+' + code);

                input.addEventListener('countrychange', function() {
                    const updatedCode = iti.getSelectedCountryData().dialCode;
                    $(input).siblings('.phone-code').val('+' + updatedCode);
                });
            }
        });
    }

    $(document).ready(function() {
        initPhoneInputs();

        $('.add-driver').on('click', function() {
            const index = $('#drivers-table tbody tr').length;

            const newRow = `
                <tr>
                    <td><input type="text" name="drivers[${index}][first_name]" class="form-control" placeholder="First Name"></td>
                    <td><input type="text" name="drivers[${index}][last_name]" class="form-control" placeholder="Last Name"></td>
                    <td>
                        <input type="tel" name="drivers[${index}][phone]" class="form-control phone-input" placeholder="Mobile Number">
                        <input type="hidden" name="drivers[${index}][phone_code]" class="phone-code">
                    </td>
                    <td><button type="button" class="btn btn-danger remove-driver">-</button></td>
                </tr>`;
            $('#drivers-table tbody').append(newRow);

            initPhoneInputs(); // Reinitialize new phone input
        });

        $(document).on('click', '.remove-driver', function() {
            $(this).closest('tr').remove();
        });

        // Ensure phone_code is set before submitting the form
        $('#store-form').on('submit', function(event) {
            // event.preventDefault();
            phoneInputInstances.forEach(({
                input,
                iti
            }) => {
                const code = iti.getSelectedCountryData().dialCode;

                // Correctly find the corresponding hidden phone_code input
                const $phoneCodeInput = $(input).closest('td').find('.phone-code');

                $phoneCodeInput.val('+' + code);
                console.log('Phone code updated to: +' + code);
                console.log('phone code :', $phoneCodeInput.val());
            });
        });
    });
</script>
<script>
    $(document).ready(function() {
        // Add new row
        $('#add-bookit-attribute-row').on('click', function() {
            let rowId = Date.now(); // unique row id

            let row = `
            <tr id="row-${rowId}">
                <td>
                    <select name="attributes[${rowId}][attribute_id]"
                            class="form-control select2 attribute-select attribute-required" required>
                        <option value="">{{ trans('lang.select_attribute') }}</option>
                        @foreach($masterAttributes as $attribute)
                            @if($attribute->type === 'attribute')
                                <option value="{{ $attribute->id }}">{{ $attribute->name }}</option>
                            @endif
                        @endforeach
                    </select>
                </td>
                <td>
                    <input type="number" name="attributes[${rowId}][count]"
                           class="form-control attribute-required" min="0" value="" placeholder="0" required>
                </td>
                <td>
                    <button type="button" class="btn btn-danger btn-sm remove-row" data-id="${rowId}">X</button>
                </td>
            </tr>
            `;

            $('#bookit-attributes-rows').append(row);

            // Initialize select2 for new dropdowns
            $('.select2').select2({
                width: '100%'
            });
        });

        // Remove row
        $(document).on('click', '.remove-row', function() {
            let id = $(this).data('id');
            $(`#row-${id}`).remove();
        });

        // ✅ Form validation before submit
        $('form').on('submit', function(e) {
            let isValid = true;

            // loop through each required field in attributes
            $('#bookit-attributes-rows').find('.attribute-required').each(function() {
                if (!$(this).val() || $(this).val().trim() === '') {
                    isValid = false;
                    $(this).addClass('is-invalid');
                } else {
                    $(this).removeClass('is-invalid');
                }
            });

            if (!isValid) {
                e.preventDefault();
                alert("⚠️ Please fill all attribute fields before saving.");
            }
        });
    });
</script>

<script>
    $(document).ready(function() {
        // Add new offer row
        $('#add-bookit-offer-row').on('click', function() {
            let rowId = Date.now(); // unique row id

            let row = `
            <tr id="offer-row-${rowId}">
                <td>
                    <select name="offers[${rowId}][offer_id]"
                            class="form-control select2 offer-select" required>
                        <option value="">{{ trans('lang.select_offer') }}</option>
                        @foreach($masterOffers as $offer)
                            <option value="{{ $offer->id }}">{{ $offer->name }}</option>
                        @endforeach
                    </select>
                </td>
                <td>
                    <button type="button" class="btn btn-danger btn-sm remove-offer-row" data-id="${rowId}">X</button>
                </td>
            </tr>
            `;

            $('#bookit-offer-rows').append(row);

            // Initialize select2 for new dropdowns
            $('.select2').select2({
                width: '100%'
            });
        });

        // Remove offer row
        $(document).on('click', '.remove-offer-row', function() {
            let id = $(this).data('id');
            $(`#offer-row-${id}`).remove();
        });
    });
</script>
@endsection