@extends('admin.admin_app')

@section('content')
        <!-- Page Header -->
    <div class="content bg-gray-lighter">
        <div class="row items-push">
            <div class="col-sm-7">
                <h1 class="page-heading">
                    {{ isset($roomfacilities->id) ? 'Edit Room' : 'Add Room' }} Details for
                    {{ isset($hotels->hotel_name) ? $hotels->hotel_name : null }}
                </h1>
            </div>
            <div class="col-sm-5 text-right hidden-xs">
                <ol class="breadcrumb push-10-t">
                    <li><a href="{{ URL::to('admin/hotel-list') }}">Hotels</a></li>
                    <li><a class="link-effect"
                            href="">{{ isset($roomfacilities->id) ? 'Edit Hotel ' : 'Add Room' }}</a></li>
                </ol>
            </div>
        </div>
    </div>
    <!-- END Page Header -->
    <!-- Page Content -->
    <div class="content content-boxed">
        <div class="row">
            <div class="col-sm-12 col-lg-12">
                <div class="block">
                    <!-- Tab Navigation -->
                    <!-- <ul class="nav nav-tabs nav-tabs-alt" role="tablist">
                                <li role="presentation" class="dropdown">
                                    <a href="#" role="tab" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> General Information <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                    @php $hotelUrl=isset($hotels->id)?URL('admin/hotels/addhotel/'.$hotels->id):'#'; @endphp
                                        <li><a href="{{ $hotelUrl }}">Hotel Info</a></li>
                                        <li><a href="{{ $hotelUrl }}">Hotel Facilities</a></li>
                                        <li><a href="{{ $hotelUrl }}">Restaurants & Bars</a></li>
                                        <li><a href="{{ $hotelUrl }}">Access to Hotel</a></li>
                                        <li><a href="{{ $hotelUrl }}">Hotel Action</a></li>
                                    </ul>
                                </li>
                                <li role="presentation" class="dropdown">
                                    <a href="#" role="tab" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> Hall & Hall Facility <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="{{ $hotelUrl }}">Hall Facility</a></li>
                                        @php $hotelVenUrl=isset($hotels->id)?URL('admin/hotels/managevenues/'.$hotels->id):'#'; @endphp
                                        <li><a href="{{ $hotelVenUrl }}">Manage Hall</a></li>
                                    </ul>
                                </li>
                                <li role="presentation" class="dropdown">
                                    <a href="#" role="tab" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> Room & Room Facility <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li><a @php $roomUrl=isset($hotels->id)?URL('admin/hotels/addroom/'.$hotels->id):'#'; @endphp href="{{ $roomUrl }}">No. of Rooms</a></li>
                                        <li><a @php $roomFaciUrl=isset($hotels->id)?URL('admin/hotels/addroomfacilities/'.$hotels->id):'#'; @endphp href="{{ $roomFaciUrl }}">Room Facilities</a></li>
                                        <li><a @php $roomCat=isset($hotels->id)?URL('admin/hotels/addroom/'.$hotels->id.'/category'):'#'; @endphp href="{{ $roomCat }}">Room Category</a></li>
                                    </ul>
                                </li>
                                <li role="presentation" class="dropdown">
                                    <a href="#" role="tab" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> Certificate, Image & Video <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        @php $hotelFile=isset($hotels->id)?URL('admin/hotels/hotel-file/'.$hotels->id):'#'; @endphp
                                        <li><a href="{{ $hotelFile }}/factsheet">Fact Sheet</a></li>
                                        <li><a href="{{ $hotelFile }}/mot-certificate">Mot Certificate</a></li>
                                        <li><a href="{{ $hotelFile }}/hotel-certificate">Hotel Certificate</a></li>
                                        <li><a @php $hotelimage=isset($hotels->id)?URL('admin/hotels/addhotelimage/'.$hotels->id):'#'; @endphp href="{{ $hotelimage }}">Images</a></li>
                                        <li><a href="{{ $hotelFile }}/videos">Videos</a></li>
                                    </ul>
                                </li>
                                <li role="presentation" class="dropdown">
                                    <a href="#" role="tab" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"> Sightseeing & Activities <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        @php $hotelFile=isset($hotels->id)?URL('admin/hotels/hotel-file/'.$hotels->id):'#'; @endphp
                                        <li><a href="{{ $hotelFile }}/sightseeing">Sightseeing</a></li>
                                        <li><a href="{{ $hotelFile }}/activities">Activities</a></li>
                                    </ul>
                                </li>
                            </ul> -->
                    @include('admin.navigation-tabs')
                    <div class="block-content block-content-narrow">
                        @if (count($errors) > 0)
                            <div class="alert alert-danger">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                        aria-hidden="true">&times;</span></button>
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @if (Session::has('flash_message'))
                            <div class="alert alert-success">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span></button>
                                {{ Session::get('flash_message') }}
                            </div>
                        @endif
                        {!! Form::open([
                            'url' => ['admin/hotels/addroomfacilities'],
                            'class' => 'form-horizontal padding-15',
                            'name' => 'category_form',
                            'id' => 'category_form',
                            'role' => 'form',
                            'enctype' => 'multipart/form-data',
                        ]) !!}
                        <input type="hidden" name="hotel_id" value="{{ isset($hotels->id) ? $hotels->id : null }}">
                        <input type="hidden" name="cat_id" value="0">
                        <!-- <div class="row">
             <a class="pull-right btn btn-info push-5-r push-10" href="{{ URL::to('admin/hotels/viewhotel/' . $hotels->id) }}"><i class="fa fa-angle-left"></i>  Back To Hotel</a>
             </div> -->
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">

                                    <label for="" class="col-sm-3 control-label">Tea Coffee Maker</label>
                                    <div class="col-sm-9">
                                        <select name="tea_coffee_maker" class="form-control">
                                            <option value="NA" >NA</option>
                                            <option value="FOC" selected=selected>Free Of Cost</option>
                                            <option value="C" >Chargeable</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="col-sm-3 control-label">Television</label>
                                    <div class="col-sm-9">
                                        <select name="television" class="form-control">
                                            <option value="NA" >NA</option>
                                            <option value="FOC" selected=selected>Free Of Cost</option>
                                            <option value="C" >Chargeable</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="col-sm-3 control-label">Refrigerator</label>
                                    <div class="col-sm-9">
                                        <select name="refrigerator" class="form-control">
                                            <option value="NA" >NA</option>
                                            <option value="FOC" selected=selected>Free Of Cost</option>
                                            <option value="C" >Chargeable</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="col-sm-3 control-label">Iron And Ironing Board</label>
                                    <div class="col-sm-9">
                                        <select name="iron_ironing_board" class="form-control">
                                            <option value="NA" >NA</option>
                                            <option value="FOC" selected=selected>Free Of Cost</option>
                                            <option value="C" >Chargeable</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="col-sm-3 control-label">Shaving Kit</label>
                                    <div class="col-sm-9">
                                        <select name="shaving_kit" class="form-control">
                                            <option value="NA" >NA</option>
                                            <option value="FOC" selected=selected>Free Of Cost</option>
                                            <option value="C" >Chargeable</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="col-sm-3 control-label">Hair Dryer</label>
                                    <div class="col-sm-9">
                                        <select name="hair_dryer" class="form-control">
                                            <option value="NA" >NA</option>
                                            <option value="FOC" selected=selected>Free Of Cost</option>
                                            <option value="C" >Chargeable</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="col-sm-3 control-label">Dental Kit</label>
                                    <div class="col-sm-9">
                                        <select name="dental_kit" class="form-control">
                                            <option value="NA" >NA</option>
                                            <option value="FOC" selected=selected>Free Of Cost</option>
                                            <option value="C" >Chargeable</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="col-sm-3 control-label">Mini Bar</label>
                                    <div class="col-sm-9">
                                        <select name="mini_bar" class="form-control">
                                            <option value="NA" >NA</option>
                                            <option value="FOC" selected=selected>Free Of Cost</option>
                                            <option value="C" >Chargeable</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="col-sm-3 control-label">Phone Near Toilet Seat</label>
                                    <div class="col-sm-9">
                                        <select name="phone_near_toilet_seat" class="form-control">
                                            <option value="NA" >NA</option>
                                            <option value="FOC" selected=selected>Free Of Cost</option>
                                            <option value="C" >Chargeable</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="col-sm-3 control-label">In Room Service</label>
                                    <div class="col-sm-9">
                                        <select name="in_room_service" class="form-control">
                                            <option value="NA" >NA</option>
                                            <option value="FOC" selected=selected>Free Of Cost</option>
                                            <option value="C" >Chargeable</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="col-sm-3 control-label">Wheelchair</label>
                                    <div class="col-sm-9">
                                        <select name="wheelchair" class="form-control">
                                            <option value="NA" >NA</option>
                                            <option value="FOC" selected=selected>Free Of Cost</option>
                                            <option value="C" >Chargeable</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="" class="col-sm-3 control-label">Room for Physically
                                        Chalanged</label>
                                    <div class="col-sm-9">
                                        <select name="room_physical_challenge" class="form-control">
                                            <option value="NA" >NA</option>
                                            <option value="FOC" selected=selected>Free Of Cost</option>
                                            <option value="C" >Chargeable</option>
                                        </select>
                                    </div>
                                </div>
                                <!-- <div class="form-group">
                <label for="" class="col-sm-3 control-label">Other Room Facilities</label>
                <div class="col-sm-9">
                 <textarea type="text" name="other_room_facility" class="js-summernote" rows="5">{{ isset($roomfacilities->other_room_facility) ? $roomfacilities->other_room_facility : null }}</textarea>
                </div>
               </div> -->

                                <div class="form-group">
                                    <div class="row" style="margin-bottom: 10px;">
                                        <label for="barToggle" class="col-sm-2 control-label control-label1">Other
                                            Services <span style="color:red;font-weight: bold;">*</span></label>
                                        <div class="col-sm-2">
                                            <select id="barToggle" name="other_room_facility"
                                                class="form-control toggle-control" data-toggle-target="#otherService">
                                                <option value="no">No</option>
												<--- FIX: Ensure proper selection of 'Yes' option -->
                                                <option {{ (isset($roomfacilities->other_room_facility) && $roomfacilities->other_room_facility == 'yes') ? 'selected' : '' }}
                                                    value="yes">Yes</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-8">
                                            <div class="addmorebutton addMoreResBar" data-target="#more_field_bar"
                                                data-template="bar-row">+</div>
                                        </div>
                                    </div>
                                    <div id="otherService"
                                        class="toggle-section {{ !empty($roomfacilities->other_service) ? '' : 'displayNone' }}">

                                        @if (!empty($roomfacilities->other_service))

                                            @php
                                                // FIX: clean double-encoded JSON
                                                $rawOtherService = $roomfacilities->other_service ?? '';
                                                $cleanJson = is_string($rawOtherService)
                                                    ? stripslashes(trim($rawOtherService, '"'))
                                                    : '';
                                                $otherService = json_decode($cleanJson, true);
                                            @endphp

                                            @if (is_array($otherService) && isset($otherService['name']))
                                                @foreach ($otherService['name'] as $key => $otherServ)
                                                    <div class="row bottommargin bar-row">

                                                        <div class="col-md-3 bottommargin my-custom-single-dropdown-container"
                                                            data-save-url="{{ route('add.venueCategory') }}"
                                                            data-model="Amenities" data-field="name">

                                                            <select id="bar-name" name="other_service[name][]"
                                                                class="form-control my-custom-single-dropdown-select bar-service-dropdown">
                                                                <option value="">--Select Name--</option>

                                                                @if (isset($amenityArr))
                                                                    @foreach ($amenityArr as $bar)
                                                                        <option value="{{ $bar->id }}"
                                                                            {{ $bar->id == $otherServ ? 'selected' : '' }}>
                                                                            {{ $bar->name }}
                                                                        </option>
                                                                    @endforeach
                                                                @endif
                                                            </select>
                                                        </div>

                                                        <div class="col-sm-8">
                                                            <select name="other_service[type][]" class="form-control">
                                                                <option value="NA"
                                                                    {{ ($otherService['type'][$key] ?? '') == 'NA' ? 'selected' : '' }}>
                                                                    NA
                                                                </option>
                                                                <option value="FOC"
                                                                    {{ ($otherService['type'][$key] ?? '') == 'FOC' ? 'selected' : '' }}>
                                                                    Free Of Cost
                                                                </option>
                                                                <option value="C"
                                                                    {{ ($otherService['type'][$key] ?? '') == 'C' ? 'selected' : '' }}>
                                                                    Chargeable
                                                                </option>
                                                            </select>
                                                        </div>

                                                        <div style="text-align: right;" class="col-md-1">
                                                            <button class="btn btn-danger removeFieldResBar">X</button>
                                                        </div>

                                                    </div>
                                                @endforeach
                                            @endif
                                        @else
                                            {{-- Default empty row (used for Add New feature) --}}
                                            <div class="row bottommargin bar-row">

                                                <div class="col-md-3 bottommargin my-custom-single-dropdown-container"
                                                    data-save-url="{{ route('add.venueCategory') }}"
                                                    data-model="Amenities" data-field="name">

                                                    <select id="bar-name" name="other_service[name][]"
                                                        class="form-control my-custom-single-dropdown-select bar-service-dropdown">
                                                        <option value="">--Select Name--</option>

                                                        @if (isset($amenityArr))
                                                            @foreach ($amenityArr as $bar)
                                                                <option value="{{ $bar->id }}">{{ $bar->name }}
                                                                </option>
                                                            @endforeach
                                                        @endif
                                                    </select>
                                                </div>

                                                <div class="col-sm-8">
                                                    <select name="other_service[type][]" class="form-control">
                                                        <option value="NA">NA</option>
                                                        <option value="FOC">Free Of Cost</option>
                                                        <option value="C">Chargeable</option>
                                                    </select>
                                                </div>

                                                <div style="text-align: right;" class="col-md-1">
                                                    <button class="btn btn-danger removeFieldResBar">X</button>
                                                </div>

                                            </div>

                                        @endif

                                        <div id="more_field_bar"></div>
                                    </div>

                                </div>

                                <hr>
                                <div class="form-group">
                                    <div class="col-md-offset-3 col-sm-9 ">
                                        <!-- <button type="submit" class="btn btn-primary">{{ isset($hotels->id) ? 'Update' : 'Save' }}</button> -->

                                        <input type="submit" class="btn btn-primary"
                                            value="{{ isset($hotels->id) ? 'Update & Next' : 'Save & Next' }}"
                                            name="updateNext">
                                        <input type="submit" class="btn btn-primary"
                                            value="{{ isset($hotels->id) ? 'Update' : 'Save' }}" name="saveformdata">
                                        <a href="{{ URL::to('admin/hotel-list') }}" class="btn btn-info">Cancel</a>
                                    </div>
                                </div>
                            </div>





                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END Page Content -->
    @endsection
    <script src="{{ URL::asset('public/admin_assets/js/core/jquery.min.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            function bindDuplicateCheckAndRequired(selector) {
                $(document).off('change', selector).on('change', selector, function(e) {
                    const selectedValue = $(this).val();
                    let isDuplicate = false;

                    $(selector).each(function() {
                        if (this !== e.target && $(this).val() === selectedValue &&
                            selectedValue !== '') {
                            isDuplicate = true;
                        }
                    });

                    if (isDuplicate) {
                        alert('This option has already been selected. Please choose a different one.');
                        $(this).val('').trigger('change');
                    }
                });
                // $(selector).attr('required', true);
                // Apply required only to all but the first row
                $(selector).each(function(index) {
                    if (index === 0) {
                        $(this).removeAttr('required'); // First row not required
                    } else {
                        $(this).attr('required', true); // Other rows required
                    }
                });
            }
            bindDuplicateCheckAndRequired('.bar-service-dropdown');
            $(document).on("click", ".addMoreResBar", function(e) {
                e.preventDefault();
                var newRow = `
          <div class="row bottommargin bar-row">  
            <div class="col-md-3 bottommargin my-custom-single-dropdown-container" data-save-url="{{ route('add.venueCategory') }}" data-model="Amenities" data-field="name">
                
                <select id="bar-name" name="other_service[name][]" class="form-control my-custom-single-dropdown-select bar-service-dropdown">
                    <option value="">--Select Name--</option>
                    @if (isset($amenityArr))
                        @foreach ($amenityArr as $bar)
                            <option value="{{ $bar->id }}">{{ $bar->name }}</option>
                        @endforeach
                    @endif
                </select>
            </div>  
            <div class="col-sm-8">
				<select name="other_service[type][]" class="form-control">
				   <option value="NA" >NA</option>
				   <option value="FOC">Free Of Cost</option>
				   <option value="C">Chargeable</option>
				</select>
			</div>
            
            <div style="text-align: right;" class="col-md-1">
                <button class="btn btn-danger removeFieldResBar">X</button>
            </div>
        </div>`;

                var newElement = $("#more_field_bar").append(newRow);
                bindDuplicateCheckAndRequired('.bar-service-dropdown');
                newElement.find(".my-custom-single-dropdown-select").each(function() {
                    initializeSelect2($(this));
                });
            });
            // Remove dynamically added bar fields
            $(document).on("click", ".removeFieldResBar", function() {
                $(this).closest(".bar-row").remove();
            });

            function bindDuplicateCheckAndRequired(selector) {
                $(document).off('change', selector).on('change', selector, function(e) {
                    const selectedValue = $(this).val();
                    let isDuplicate = false;

                    $(selector).each(function() {
                        if (this !== e.target && $(this).val() === selectedValue &&
                            selectedValue !== '') {
                            isDuplicate = true;
                        }
                    });

                    if (isDuplicate) {
                        alert('This option has already been selected. Please choose a different one.');
                        $(this).val('').trigger('change');
                    }
                });
                // $(selector).attr('required', true);
                // Apply required only to all but the first row
                $(selector).each(function(index) {
                    if (index === 0) {
                        $(this).removeAttr('required'); // First row not required
                    } else {
                        $(this).attr('required', true); // Other rows required
                    }
                });
            }
            bindDuplicateCheckAndRequired('.bar-service-dropdown');
        });
    </script>