@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.edit_bookit') }}
                </li>
            </ol>
        </div>

        <div class="container-fluid">
            <div class="cat-edite-page max-width-box">
                <form id="store-form" action="{{ route('bookit.update', $bookit->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <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">
                                @include('alerts.error_messages')

                                <div class="row restaurant_payout_create">
                                    <div class="restaurant_payout_create-inner">
                                        <fieldset>
                                            <legend>{{ trans('lang.bookit_details') }}</legend>

                                            {{-- 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" value="{{ $bookit->name }}" name="store_name"
                                                        class="form-control restaurant_name" required>
                                                    <div class="form-text text-muted">
                                                        {{ trans('lang.restaurant_name_help') }}
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- Vendor Dropdown --}}
                                            <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 }}"
                                                            {{ $bookit->vendor_id == $vendor->id ? 'selected' : '' }}>
                                                            {{ $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', $bookit->description) }}</textarea>
                                                    <div class="form-text text-muted">
                                                        {{ trans('lang.category_description_help') }}
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- Category Dropdown --}}
                                            <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 }}"
                                                            {{ in_array($category->id, $storeCategories) ? 'selected' : '' }}>
                                                            {{ $category->name }}
                                                        </option>
                                                        @endforeach
                                                    </select>
                                                    <div class="form-text text-muted">{{ trans('lang.restaurant_cuisines_help') }}</div>
                                                </div>
                                            </div>

                                            {{-- Subcategory Dropdown --}}
                                            <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>
                                                        @foreach ($subcategories as $subcategory)
                                                        <option value="{{ $subcategory->id }}"
                                                            {{ in_array($subcategory->id, $storeSubcategories) ? 'selected' : '' }}>
                                                            {{ $subcategory->name }}
                                                        </option>
                                                        @endforeach
                                                    </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"
                                                        value="{{ old('email', $bookit->email) }}" required>
                                                </div>
                                            </div>

                                            {{-- Phone --}}
                                            <div class="form-group row width-50">
                                                <label class="col-3 control-label">Phone</label>
                                                <div class="col-7">
                                                    <input id="phone" type="tel" name="phone_display" class="form-control"
                                                        value="{{ old('phone', $bookit->phone) }}">
                                                </div>
                                                <input type="hidden" name="phone_country_code" id="phone_country_code"
                                                    value="{{ old('phone_code', $bookit->phone_code) }}">
                                                <input type="hidden" name="phone_number" id="phone_number"
                                                    value="{{ old('phone', $bookit->phone) }}">
                                            </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">{{ old('address', $bookit->address) }}</textarea>
                                                </div>
                                            </div>

                                            {{-- Lat / Lng --}}
                                            <div class="form-group row width-100">
                                                <div class="col-12">
                                                    <h6>* Don't Know your coordinates ? 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"
                                                        value="{{ old('latitude', $bookit->latitude ?? '') }}">
                                                    <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"
                                                        value="{{ old('longitude', $bookit->longitude ?? '') }}">
                                                    <div class="form-text text-muted">{{ trans('lang.restaurant_longitude_help') }}</div>
                                                </div>
                                            </div>

                                            {{-- Logo Image Upload --}}
                                            <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>
                                            {{-- Existing Logo Image (if any) --}}
                                            @if ($bookit->getMedia('logo_image')->count())
                                            <table class="table mt-3">
                                                <thead>
                                                    <tr>
                                                        <th>{{ trans('lang.image') }}</th>
                                                        <th>{{ trans('lang.actions') }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($bookit->getMedia('logo_image') as $media)
                                                    <tr>
                                                        <td>
                                                            <img src="{{ $media->getUrl() }}" alt="Logo"
                                                                class="img-thumbnail" style="width: 150px;">
                                                        </td>
                                                        <td>
                                                            <button type="button" class="btn btn-danger btn-sm"
                                                                onclick="deleteMedia('{{ route('bookit.media.destroy', [$bookit->id, $media->id]) }}')">
                                                                ✕ Delete
                                                            </button>
                                                        </td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                            @endif
                                            {{-- <div class="form-group row width-100">
                                    <label class="col-3 control-label ">{{ trans('lang.restaurant_description') }}</label>
                                            <div class="col-7">
                                                <textarea rows="7" name="description" class="restaurant_description form-control" id="restaurant_description"></textarea>
                                            </div>
                                    </div> --}}
                                    </fieldset>

                                    <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 class="form-text text-muted">
                                                {{ trans('lang.store_gallery_image_help') }}
                                            </div>
                                        </div>
                                    </fieldset>
                                    @if ($bookit->getMedia('banner_image')->count())
                                    <table class="table mt-3">
                                        <thead>
                                            <tr>
                                                <th>{{ trans('lang.image') }}</th>
                                                <th>{{ trans('lang.actions') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($bookit->getMedia('banner_image') as $media)
                                            <tr>
                                                <td>
                                                    <img src="{{ $media->getUrl() }}" alt="gallery"
                                                        class="img-thumbnail" style="width: 150px;">
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-danger btn-sm"
                                                        onclick="deleteMedia('{{ route('bookit.media.destroy', [$bookit->id, $media->id]) }}')">
                                                        ✕ Delete
                                                    </button>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    @endif
                                    <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 class="form-check mt-2">
                                                    <input name="copy_monday_to_all_days" type="checkbox"
                                                        onchange="copyMondayToAll()" id="copy_monday_to_all">
                                                    <label class="col-12 control-label" for="copy_monday_to_all">
                                                        {{ trans('lang.copy_sunday_to_all_days') }}
                                                    </label>
                                                </div>
                                            </div>

                                            <div class="working_hours_div" style="display:block">
                                                @php
                                                $days = [
                                                'Monday',
                                                'Tuesday',
                                                'Wednesday',
                                                'Thursday',
                                                'Friday',
                                                'Saturday',
                                                'Sunday',
                                                ];
                                                @endphp

                                                @foreach ($days as $day)
                                                @php
                                                $dayWorkingHours = $workingHours->where('day', $day);
                                                $dayKey = $day;
                                                @endphp

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

                                                <div class="restaurant_working_hour_{{ $day }}_div restaurant_discount mb-5 form-group row mt-2"
                                                    style="{{ count($dayWorkingHours) > 0 ? 'display:block' : 'display:none' }}">
                                                    <div class="col-12">
                                                        <table class="booking-table" id="working_hour_table_{{ $day }}">
                                                            <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>

                                                            @foreach ($dayWorkingHours as $index => $wh)
                                                            <tr id="row_{{ $day }}{{ $index }}">
                                                                <td style="width:50%;">
                                                                    <input type="time"
                                                                        name="working_hours[{{ $dayKey }}][{{ $index }}][from]"
                                                                        value="{{ $wh->from }}" class="form-control" required>
                                                                </td>
                                                                <td style="width:50%;">
                                                                    <input type="time"
                                                                        name="working_hours[{{ $dayKey }}][{{ $index }}][to]"
                                                                        value="{{ $wh->to }}" class="form-control" required>
                                                                </td>
                                                                <td>
                                                                    <button type="button" class="btn btn-danger"
                                                                        onclick="removeWorkingHourRow('{{ $day }}','row_{{ $day }}{{ $index }}')">
                                                                        <i class="fa fa-trash" title="Delete"></i>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                            @endforeach
                                                        </table>
                                                    </div>
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </fieldset>

                                    {{-- Active --}}
                                    <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"
                                                        value="1" {{ $bookit->is_bookit ? 'checked' : '' }}>
                                                    <label class="col-3 control-label" for="is_bookit">{{ trans('lang.bookit') }}</label>
                                                </div>
                                            </div>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>

                        {{-- ✅ Attributes --}}
                        <div role="tabpanel" class="tab-pane" id="bookit_attributes">
                            <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">
                                    @foreach($bookit->attributes as $attr)
                                    <tr id="row-{{ $attr->id }}">
                                        <td>
                                            <select name="attributes[{{ $attr->id }}][attribute_id]" class="form-control select2" required>
                                                @foreach($masterAttributes as $attribute)
                                                @if($attribute->type === 'attribute')
                                                <option value="{{ $attribute->id }}" {{ $attribute->id == $attr->attribute_id ? 'selected' : '' }}>
                                                    {{ $attribute->name }}
                                                </option>
                                                @endif
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <input type="number" name="attributes[{{ $attr->id }}][count]"
                                                class="form-control" value="{{ $attr->count }}" min="0" required>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-danger btn-sm remove-row" data-id="{{ $attr->id }}">X</button>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <button type="button" class="btn btn-sm btn-success" id="add-bookit-attribute-row">
                                {{ trans('lang.add_attributes') }}
                            </button>
                        </div>

                        {{-- ✅ Offers --}}
                        <div role="tabpanel" class="tab-pane" id="bookit_offer">
                            <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">
                                    @foreach($bookit->offers as $offer)
                                    <tr id="offer-row-{{ $offer->id }}">
                                        <td>
                                            <select name="offers[{{ $offer->id }}][offer_id]" class="form-control select2" required>
                                                <option value="">{{ trans('lang.select_offer') }}</option>
                                                @foreach($masterOffers as $o)
                                                <option value="{{ $o->id }}"
                                                    {{ $o->id == $offer->masterAttribute->id ? 'selected' : '' }}>
                                                    {{ $o->name }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-danger btn-sm remove-offer-row"
                                                data-id="{{ $offer->id }}">
                                                X
                                            </button>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                            <button type="button" class="btn btn-sm btn-success" id="add-bookit-offer-row">
                                {{ trans('lang.add_offers') }}
                            </button>
                        </div>
                    </div>

                    {{-- Save --}}
                    <div class="form-group col-12 text-center pb-3">
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-save"></i> {{ trans('lang.update') }}
                        </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") }}',
                    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>'
                            );
                        }
                        $('#subcategories').trigger('change');
                    },
                    error: function(xhr) {
                        console.error(xhr.responseText);
                    }
                });
            }
        });
    });
</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 copyMondayToAll() {
        const isChecked = document.getElementById('copy_monday_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);
            });
        });
    }


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

        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;
        }
    }

    function deleteMedia(url) {
        if (confirm('Are you sure you want to delete this image?')) {
            const form = document.getElementById('delete-media-form');
            form.action = url;
            form.submit();
        }
    }
</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();
        });
    });
</script>
<script>
    $(document).ready(function() {

        // ================= ATTRIBUTES =================
        $('#add-bookit-attribute-row').on('click', function() {
            let rowId = Date.now();

            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);
            $('.select2').select2({
                width: '100%'
            });
        });

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

        // ================= OFFERS =================
        // Add new offer row
        $('#add-bookit-offer-row').on('click', function() {
            let rowId = Date.now();

            let row = `
        <tr id="offer-row-new-${rowId}">
            <td>
                <select name="offers[new-${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="new-${rowId}">X</button>
            </td>
        </tr>
    `;

            $('#bookit-offer-rows').append(row);
            $('.select2').select2({
                width: '100%'
            });
        });

        // Remove offer row
        $(document).on('click', '.remove-offer-row', function() {
            let id = $(this).data('id');
            $(`#offer-row-${id}, #offer-row-new-${id}`).remove();
        });
    });
</script>
<script>
    function deleteMedia(mediaId) {
        if (confirm("Are you sure you want to delete this image?")) {
            $.ajax({
                url: "{{ route('bookit.media.destroy', ':id') }}".replace(':id', mediaId),
                type: "DELETE",
                data: {
                    _token: "{{ csrf_token() }}"
                },
                success: function(response) {
                    if (response.success) {
                        alert(response.message);
                        location.reload();
                    }
                },
                error: function(xhr) {
                    alert("Error deleting media");
                }
            });
        }
    }
</script>
@endsection