@extends('admin.layout')
@section('main')
    <!-- BEGIN: Content-->

    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <!-- Dashboard Ecommerce Starts -->
            <section id="dashboard-ecommerce">
                <div class="row match-height justify-content-end g-2 mb-2">
                    <div class="col-lg-auto col-md-auto col-sm-auto col-auto mr-auto my-auto">
                        <h2 class="m-0">
                            <a href="{{ route('division.otherServices.hotel.list') }}" class="ml-1 mr-1">
                                <i class="fa-solid fa-arrow-left-long"></i>
                            </a>
                            Add Hotel
                            <a href="" data-toggle="tooltip" data-placement="right" title=""
                                data-original-title="Add/Edit Hotel" class="ml-1"><i data-feather="help-circle"></i></a>
                        </h2>
                    </div>
                </div>
            </section>

            <!-- Dashboard Ecommerce ends -->
            <section id="">
                <div class="row">
                    <div class="col-12">
                        <form id="add-hotel-form" enctype="multipart/form-data">
                            @csrf
                            <div class="row">

                                <input type="hidden" class="form-control" name="hotel_master_id" id="hotel_master_id"
                                    value="{{ old('hotel_master_id', isset($hotel) ? $hotel->id : '') }}" required>

                                <div class="col-lg-6 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">Hotel ID<span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" placeholder="Hotel ID" name="hotel_id"
                                            id="hotel_id" readonly
                                            value="{{ old('hotel', isset($hotel) ? $hotel->vHotelID : '') }}">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">Hotel Name<span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" name="hotel" id="hotel"
                                            placeholder="Hotel Name"
                                            value="{{ old('hotel', isset($hotel) ? $hotel->vHotelName : '') }}" required>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">Address<span
                                                class="text-danger">*</span></label>
                                        <textarea name="address" class="form-control" placeholder="Address" rows="3" spellcheck="false" required>{{ old('address', isset($hotel) ? $hotel->vHotelAddress : '') }}</textarea>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">Country<span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" placeholder="Country" id="country"
                                            name="country" required
                                            value="{{ old('country', isset($hotel) ? $hotel->vCountry : '') }}">
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-4 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">Pincode <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="pincode" name="pincode"
                                            placeholder="Pincode" required pattern="\d{6}" minlength="6" maxlength="6"
                                            inputmode="numeric"
                                            oninput="this.value = this.value.replace(/[^0-9]/g, '').slice(0, 6); getPincodeDetails(this.value)"
                                            value="{{ old('pincode', isset($hotel) ? $hotel->vPincode : '') }}">

                                    </div>
                                </div>
                                {{-- <div class="col-lg-4 col-md-4 col-sm-4 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">State<span
                                                class="text-danger">*</span></label>
                                        <select name="state" id="state"  class="form-control">
                                            <option selected disabled>Select State</option>
                                            @foreach ($states as $state)
                                                <option value="{{ $state->id }}"
                                                    {{ old('state', isset($hotel) ? $hotel->vState : '') == $state->vStateName ? 'selected' : '' }}>
                                                    {{ $state->vStateName }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div> --}}
                                <div class="col-lg-4 col-md-4 col-sm-4 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">State<span
                                                class="text-danger">*</span></label>
                                        <select name="state_display" id="state" class="form-control" disabled>
                                            <option selected disabled>Select State</option>
                                            @foreach ($states as $state)
                                                <option value="{{ $state->id }}"
                                                    {{ old('state', isset($hotel) ? $hotel->vState : '') == $state->vStateName ? 'selected' : '' }}>
                                                    {{ $state->vStateName }}
                                                </option>
                                            @endforeach
                                        </select>
                                        <!-- Hidden input to ensure the value is submitted with the form -->
                                        <input type="hidden" name="state" id="state_hidden"
                                            value="{{ old('state', isset($hotel) ? $hotel->iStateID : '') }}">
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">City<span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" placeholder="City" id="city"
                                            name="city" readonly
                                            value="{{ old('city', isset($hotel) ? $hotel->vCity : '') }}">
                                        {{-- <input type="hidden" id="cityId" name="cityId" value=""> --}}
                                    </div>
                                </div>






                                <div class="col-lg-4 col-md-4 col-sm-4 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">Type</label>
                                        <input type="text" class="form-control" placeholder="Type" name="type"
                                            value="{{ old('type', isset($hotel) ? $hotel->vType : '') }}">
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-4 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">Fax</label>
                                        <input type="number" class="form-control" placeholder="Fax" name="fax"
                                            value="{{ old('fax', isset($hotel) ? $hotel->vFax : '') }}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">Phone 01 <span
                                                class="text-danger">*</span></label>
                                        <input type="number" class="form-control" placeholder="Phone 01"
                                            name="phoneOne"
                                            value="{{ old('phoneOne', isset($hotel) ? $hotel->vPhoneFirst : '') }}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">Phone 02</label>
                                        <input type="number" class="form-control" placeholder="Phone 02"
                                            name="phoneTwo"
                                            value="{{ old('phoneTwo', isset($hotel) ? $hotel->vPhoneSecond : '') }}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">Phone 03</label>
                                        <input type="number" class="form-control" placeholder="Phone 03"
                                            name="phoneThree"
                                            value="{{ old('phoneThree', isset($hotel) ? $hotel->vPhoneThird : '') }}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">Email</label>
                                        <input type="email" class="form-control" placeholder="Email" name="email"
                                            value="{{ old('email', isset($hotel) ? $hotel->vEmail : '') }}">
                                    </div>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-12 col-12">
                                    <div class="form-group mb-2">
                                        <label for="preferenceFor" class="form-label">Preference For</label>
                                        <select name="preferenceFor[]" id="preferenceFor" class="form-control select2"
                                            multiple>
                                            <option value="FIT"
                                                {{ in_array('FIT', explode(',', old('preferenceFor', isset($hotel) ? $hotel->vPreferenceFor : ''))) ? 'selected' : '' }}>
                                                FIT</option>
                                            <option value="PPM"
                                                {{ in_array('PPM', explode(',', old('preferenceFor', isset($hotel) ? $hotel->vPreferenceFor : ''))) ? 'selected' : '' }}>
                                                PPM</option>
                                            <option value="RESI-CONF"
                                                {{ in_array('RESI-CONF', explode(',', old('preferenceFor', isset($hotel) ? $hotel->vPreferenceFor : ''))) ? 'selected' : '' }}>
                                                RESI-CONF</option>
                                            <option value="NON-RESI"
                                                {{ in_array('NON-RESI', explode(',', old('preferenceFor', isset($hotel) ? $hotel->vPreferenceFor : ''))) ? 'selected' : '' }}>
                                                NON-RESI</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-lg-4 col-md-4 col-sm-4 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">Website</label>
                                        <input type="text" class="form-control" placeholder="Website" name="website"
                                            value="{{ old('website', isset($hotel) ? $hotel->vWebsite : '') }}">
                                    </div>
                                </div>

                                <div class="col-12">
                                    @if (@isset($hotel) && count($hotel->hotelPersonContact) > 0)
                                        <!-- Show this section only when editing and contact data exists -->
                                        <div class="col-12" id="contact-container">
                                            @foreach ($hotel->hotelPersonContact as $index => $contactPerson)
                                                <div class="contact_repect rs_white_shadow mb-2 contact-item">
                                                    <div class="row">
                                                        <div class="col-lg-2 col-md-2 col-sm-4 col-12">
                                                            <div class="form-group mb-2">
                                                                <label for="" class="form-label">Contact
                                                                    Person</label>
                                                                <input type="text" class="form-control"
                                                                    placeholder="Contact Person" name="contactPerson[]"
                                                                    value="{{ old('contactPerson.' . $index, $contactPerson->vContactPerson) }}">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3 col-md-2 col-sm-4 col-12">
                                                            <div class="form-group mb-2">
                                                                <label for="" class="form-label">Contact Person
                                                                    Designation</label>
                                                                <input type="text" class="form-control"
                                                                    placeholder="Contact Person Designation"
                                                                    name="contactDesignation[]"
                                                                    value="{{ old('contactDesignation.' . $index, $contactPerson->vContactPersonDesignation) }}">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-2 col-md-2 col-sm-4 col-12">
                                                            <div class="form-group mb-2">
                                                                <label for="" class="form-label">Contact Person
                                                                    Email</label>
                                                                <input type="text" class="form-control"
                                                                    placeholder="Contact Person Email"
                                                                    name="contactEmail[]"
                                                                    value="{{ old('contactEmail.' . $index, $contactPerson->vContactPersonEmail) }}">
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-3 col-md-2 col-sm-4 col-12">
                                                            <div class="form-group mb-2">
                                                                <label for="" class="form-label">Contact Person
                                                                    Mobile number</label>
                                                                <input type="number" class="form-control"
                                                                    placeholder="Contact Person Mobile number"
                                                                    name="contactPhone[]"
                                                                    value="{{ old('contactPhone.' . $index, $contactPerson->vContactPersonMobileNumber) }}">
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <!-- Show this section when adding a new hotel or when no contact data exists -->
                                        <div class="contact_repect rs_white_shadow mb-2">
                                            <div class="row">
                                                <div class="col-lg-2 col-md-2 col-sm-4 col-12">
                                                    <div class="form-group mb-2">
                                                        <label for="" class="form-label">Contact Person</label>
                                                        <input type="text" name="contactPerson" id="contactPerson"
                                                            class="form-control" placeholder="Contact Person">
                                                    </div>
                                                </div>
                                                <div class="col-lg-3 col-md-2 col-sm-4 col-12">
                                                    <div class="form-group mb-2">
                                                        <label for="" class="form-label">Contact Person
                                                            Designation</label>
                                                        <input type="text" class="form-control"
                                                            name="contactDesignation" id="contactDesignation"
                                                            placeholder="Contact Person Designation">
                                                    </div>
                                                </div>
                                                <div class="col-lg-2 col-md-2 col-sm-4 col-12">
                                                    <div class="form-group mb-2">
                                                        <label for="" class="form-label">Contact Person
                                                            Email</label>
                                                        <input type="text" class="form-control" name="contactEmail"
                                                            id="contactEmail" placeholder="Contact Person Email">
                                                    </div>
                                                </div>
                                                <div class="col-lg-3 col-md-2 col-sm-4 col-12">
                                                    <div class="form-group mb-2">
                                                        <label for="" class="form-label">Contact Person Mobile
                                                            number</label>
                                                        <input type="text" class="form-control" name="contactPhone"
                                                            id="contactPhone" placeholder="Contact Person Mobile number">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>


                                <div class="col-lg-6 col-md-4 col-sm-4 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">Accounts Contact Number</label>
                                        <input type="number" class="form-control" placeholder="Accounts Contact Number"
                                            name="accountsPhone"
                                            value="{{ old('accountsPhone', isset($hotel) ? $hotel->vAccountsPhone : '') }}">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-4 col-sm-4 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">Accounts Email ID</label>
                                        <input type="email" class="form-control" placeholder="Accounts Email ID"
                                            name="accountsEmail"
                                            value="{{ old('accountsEmail', isset($hotel) ? $hotel->vAccountsEmail : '') }}">
                                    </div>
                                </div>

                                <div class="col-lg-12 col-12">
                                    <div class="form-group mb-2">
                                        <label for="" class="form-label">Remarks</label>
                                        <textarea name="remarks" class="form-control" placeholder="Remarks" name="remarks" rows="3"
                                            spellcheck="false">{{ old('remarks', isset($hotel) ? $hotel->vRemarks : '') }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 p-0">
                                <div class="form-group mb-1 text-right">
                                    <button type="submit" class="btn btn-primary waves-effect waves-float waves-light">
                                        <span class="">Add Hotel</span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
        </div>
        </section>
        <!-- Dashboard Ecommerce ends -->
    </div>
    </div>
@endsection

@section('scripts')
    <script>
        function getPincodeDetails(pincode) {
            if (pincode.length === 6) {
                $.ajax({
                    url: "{{ route('division.get.pincode.details') }}",
                    type: "GET",
                    data: {
                        pincode: pincode
                    },
                    success: function(response) {
                        // In your getPincodeDetails function
                        if (response.success) {
                            // Set city value
                            $('#city').val(response.city.vCityName);
                            // $('#cityId').val(response.city.iCityID);

                            // Set state value in dropdown and hidden input
                            $('#state').val(response.state.id);
                            $('#state_hidden').val(response.state.id);

                            // If using Select2 for dropdowns
                            if ($.fn.select2) {
                                $('#state').trigger('change');
                            }
                        } else {
                            $('#city').val('');
                            // $('#cityId').val('');
                            $('#state').val('');

                            $.notify('Pincode not found in our database.', 'error');
                        }
                    },
                    error: function() {
                        alert('Error fetching pincode details. Please try again.');
                    }
                });
            }
        }
    </script>
    <script>
        $(document).ready(function() {
            // Main Tabs
            $('ul.tabs li').click(function() {
                var tab_id = $(this).attr('data-tab');
                $('ul.tabs li').removeClass('current');
                $('.tab-content').removeClass('current');
                $(this).addClass('current');
                $("#" + tab_id).addClass('current');
            });

            // Nested Tabs
            $('.tab').on('click', function(evt) {
                evt.preventDefault();
                var $parentTabContent = $(this).closest('.tab-content'); // Find closest parent .tab-content

                $parentTabContent.find('.tab').removeClass(
                    'active'); // Remove active class from all tabs within this .tab-content
                $(this).addClass('active'); // Add active class to clicked tab

                var sel = this.getAttribute('data-toggle-target');
                $parentTabContent.find('.tab-content').removeClass('active').filter(sel).addClass('active');
            });


            $(".tab_down_view").click(function() {
                $(this).closest(".item").find(".sub_tab").slideToggle();
            });
        })
    </script>
    <script>
        $('.center_code_div>.unlock_center_code').hide();
        $('.center_code_div>.unlock_center').hide();
        $('.center_code_div').on('click', function() {
            $('.center_code_div>.unlock_center').show();
            $('.center_code_div>.unlock_center_code').show();
            $('.center_code_div>.lock_center').hide();
        })
        $('.center_code_div').on('click', function() {
            $('.center_code_div>.lock_center').show();
            $('.center_code_div>.unlock_center').hide();
            $('.center_code_div>.unlock_center_code').hide();
        })
        dt_filter_table = $('.dt-column-search');
        if (dt_filter_table.length) {

            var dt_filter = dt_filter_table.DataTable({
                'scrollX': true,
            });
        }
    </script>

    <script>
        $(".js-example-basic-multiple").select2({
            placeholder: "Select"
        });
    </script>
    <script>
        $(document).ready(function() {

            $.validator.addMethod("noSpaces", function(value, element) {
                return this.optional(element) || $.trim(value).length > 0;
            }, "Please enter valid text, not just spaces.");

            jQuery.validator.addMethod("validateEmail", function(value, element) {
                var regex =
                    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

                if (value !== '') {
                    return regex.test(value);
                }
                return true;
            }, "Please enter a valid email address");

            $('#add-hotel-form').validate({
                rules: {
                    hotel: {
                        required: true,
                        maxlength: 255
                    },
                    address: {
                        required: true
                    },
                    country: {
                        required: true,
                        // maxlength: 100
                    },
                    state: {
                        // required: true
                    },
                    city: {
                        required: true,
                        // maxlength: 100
                    },
                    pincode: {
                        required: true,
                        digits: true,
                        maxlength: 6,
                        minlength: 6
                    },
                    // type: {
                    //     maxlength: 100
                    // },
                    // fax: {
                    //     digits: true,
                    //     maxlength: 50
                    // },
                    phoneOne: {
                        required: true,
                        digits: true,
                        // maxlength: 15,
                        minlength: 10
                    },
                    // phoneTwo: {
                    //     digits: true,
                    //     maxlength: 15
                    // },
                    // phoneThree: {
                    //     digits: true,
                    //     maxlength: 15
                    // },
                    // email: {
                    //     email: true,
                    //     maxlength: 255
                    // },
                    // website: {
                    //     // url: true,
                    //     maxlength: 255
                    // },
                    // accountsPhone: {
                    //     digits: true,
                    //     maxlength: 15
                    // },
                    // accountsEmail: {
                    //     email: true,
                    //     maxlength: 80
                    // },
                    // remarks: {
                    //     maxlength: 255
                    // },
                    // contactPerson: {
                    //     maxlength: 100
                    // },
                    // contactDesignation: {
                    //     maxlength: 100
                    // },
                    // contactEmail: {
                    //     email: true,
                    //     maxlength: 100
                    // },
                    // contactPhone: {
                    //     digits: true,
                    //     maxlength: 15
                    // }
                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                },

                submitHandler: function(form) {
                    let formData = $(form).serialize();
                    let hotelId = $('#hotel_master_id').val();

                    let ajaxUrl = hotelId ?
                        "{{ route('division.otherServices.hotel.update', ':id') }}".replace(':id',
                            hotelId) :
                        "{{ route('division.otherServices.hotel.store') }}";

                    let ajaxMethod = hotelId ? "PUT" : "POST";

                    $.ajax({
                        url: ajaxUrl,
                        type: ajaxMethod,
                        data: formData,
                        success: function(response) {
                            if (response.success) {
                                alert(response.message);
                                window.location.href =
                                    "{{ route('division.otherServices.hotel.list') }}";
                            }
                        },
                        error: function(xhr) {
                            if (xhr.status === 422) {
                                let errors = xhr.responseJSON.errors;
                                let errorMessage = '';
                                for (let field in errors) {
                                    errorMessage += errors[field][0] + '\n';
                                }
                                $.notify(errorMessage, 'error');
                            } else {
                                $.notify('Something went wrong. Please try again.',
                                'error');
                            }
                        }
                    });
                }
            });
        });
    </script>

    <script>
        $(function() {
            $('.select_multiple').multipleSelect({
                filter: true,
                placeholder: 'Select Food',
                customFilter: function({
                    text,
                    search,
                    originalText,
                    originalSearch
                }) {
                    if ($('input').prop('checked')) {
                        return originalText.indexOf(originalSearch) === 0
                    }
                    return text.indexOf(search) === 0
                }
            })
        })
    </script>
@endsection