@extends("admin.admin_app")

@section("content")
 <style type="text/css">
    .select2-container {
        width: 65% !important; 
        min-height: 31px;
    } 
</style>
<div class="content bg-gray-lighter">
    <div class="row items-push">
        <div class="col-sm-7">
            <h1 class="page-heading">
                {{ isset($hotel_gallery_obj->id) ? 'Edit Image' : 'Add Image' }} 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($hotel_gallery_obj->id) ? 'Edit Image ' : 'Add Image' }}</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($hotelID)?URL('admin/hotels/addhotel/'.$hotelID):'#'; @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($hotelID)?URL('admin/hotels/managevenues/'.$hotelID):'#'; @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($hotelID)?URL('admin/hotels/addroom/'.$hotelID):'#'; @endphp href="{{$roomUrl}}">No. of Rooms</a></li>
                                <li><a @php $roomFaciUrl=isset($hotelID)?URL('admin/hotels/addroomfacilities/'.$hotelID):'#'; @endphp href="{{$roomFaciUrl}}">Room Facilities</a></li>
                                <li><a @php $roomCat=isset($hotelID)?URL('admin/hotels/addroom/'.$hotelID.'/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($hotelID)?URL('admin/hotels/hotel-file/'.$hotelID):'#'; 
                                @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($hotelID)?URL('admin/hotels/addhotelimage/'.$hotelID):'#'; @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($hotelID)?URL('admin/hotels/hotel-file/'.$hotelID):'#'; @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 action="{{ URL($hotelFile.'/'.$fileType.'/'.$id) }}" method="POST" enctype="multipart/form-data"> 
                    @csrf 
                    <input type="hidden" name="hotel_id" value="{{ isset($hotelID) ? $hotelID : null }}">
                    <input type="hidden" name="redirect" value="{{ request('redirect', url()->previous()) }}">

                    @php
                        $fields = [
                            'fact-sheet' => 'fact_sheet',
                            'mot-certificate' => 'mot_certificate',
                            'hotel-certificate' => 'hotel_certificate'
                        ];
                    @endphp
                    <h3 class="block-title">@php echo ucwords(str_replace('-',' ',$fileType)); @endphp</h3>
                    <br>
                    @if(array_key_exists($fileType, $fields))
                        <label>Upload {{ ucfirst(str_replace('-', ' ', $fileType)) }}:</label>
                        <input type="file" name="{{ $fields[$fileType] }}" class="form-control"><br>
                        <input type="hidden" value="{{ $fields[$fileType] }}" name="doc_type">

                        <label>Document Name:</label>
                        <input type="text" name="doc_name" value="{{@$hotelFileDoc->doc_name}}" class="form-control"><br>

                        <label>Document Order:</label>
                        <input type="number" name="doc_order" value="{{@$hotelFileDoc->doc_order}}" class="form-control"><br>

                        <label>Document Validity:</label>
                        <input type="date" name="doc_validity" value="{{@$hotelFileDoc->doc_validity}}" class="form-control"><br>
                    @endif

                    @if($fileType == 'video_link') 
                        <label>Video Link:</label>
                        <input type="url" name="video_link" value="{{@$factCertificate->video_link}}" class="form-control"><br>
                        <input type="hidden" value="videos" name="doc_type">

                        <label>Video Name:</label>
                        <input type="text" name="doc_name" value="{{@$hotelFileDoc->doc_name}}" class="form-control"><br>

                        <label>Video Order:</label>
                        <input type="number" name="doc_order" value="{{@$hotelFileDoc->doc_order}}" class="form-control"><br>
                    @endif 
                    @if($fileType=='sightseeing')
                    <div class="form-group">  
                        <div class="row" style="margin-bottom: 10px;">
                            <label for="hotellocalattractionToggle" class="col-sm-2 control-label control-label1">Sightseeing <span style="color:red;font-weight: bold;">*</span></label>
                            <div class="col-sm-2">
                                <select class="form-control toggle-control get-access-bymodel" data-value="sightseeing" data-showon="localattractionShow" data-toggle-target="#localattractionDetails">
                                    <option value="no">No</option>
                                    <option value="yes" >Yes</option>
                                </select>
                            </div>
                            <div class="col-sm-8">
                                <div id="addMore8" class="addmorebutton get-access-bymodel" data-value="sightseeing" data-showon="localattractionShow">+</div>
                            </div>
                        </div>

                        <div id="localattractionDetails" class="toggle-section {{(isset($hotelAttr->sightseeing))?'':'displayNone'}}"> 
                                                        <div class="row bottommargin remove">
                                <div class="col-md-4">
                                    <select name="sightsee[localattraction_city_id][]" class="js-select2 form-control localattractionShow" onChange="getSightseeing(this.id, this.value)" id="localattraction_city_id_{{$ini}}"> 
                                    </select> 
                                </div>
                                <div class="col-md-4">
                                    <select id="localattraction_id_{{$ini}}" name="sightsee[localattraction][]" class="js-select2 form-control localattractionUpd">
                                        <option value="">--Choose City First--</option>
                                    </select>  
                                </div>
                                <div class="col-md-3">
                                    <input step="any" type="number" min="0" name="sightsee[localattraction_distance][]" value="" class="form-control" placeholder="Distance">
                                </div>
                                <div class="col-md-1">
                                    <div class="remove_field uk-icon-remove">X</div>
                                </div>
                            </div>
                        </div>

                        <div id="more_field8">
                        </div>
                    </div>
                    @endif
                    @if($fileType=='activities')
                    <div class="form-group">  
                        <div class="row" style="margin-bottom: 10px;">
                            <label class="col-sm-2 control-label control-label1">Activity <span style="color:red;font-weight: bold;">*</span></label>
                            <div class="col-sm-2">
                                <select class="form-control toggle-control get-access-bymodel" data-value="activity" data-showon="activityShow" data-toggle-target="#activityDetails">
                                    <option value="no">No</option>
                                    <option value="yes" >Yes</option>
                                </select>
                            </div>
                            <div class="col-sm-8">
                                <div id="addMore9" class="addmorebutton get-access-bymodel" data-value="activity" data-showon="activityShow">+</div>
                            </div>
                        </div>

                        <div id="activityDetails" class="toggle-section {{(isset($hotelAttr->activity))?'':'displayNone'}}"> 
                                                        <div class="row bottommargin remove">
                                <div class="col-md-4">
                                    <select name="activity[localattraction_city_id][]" class="js-select2 form-control activityShow" onChange="getActivity(this.id, this.value)" id="activity_city_id_{{$ini}}"> 
                                    </select> 
                                </div>
                                <div class="col-md-4">
                                    <select id="activity_id_{{$ini}}" name="activity[localattraction][]" class="js-select2 form-control activityUpd">
                                        <option value="">--Choose City First--</option>
                                    </select>  
                                </div>
                                <div class="col-md-3">
                                    <input step="any" type="number" min="0" name="activity[localattraction_distance][]" value="" class="form-control" placeholder="Distance">
                                </div>
                                <div class="col-md-1">
                                    <div class="remove_field uk-icon-remove">X</div>
                                </div>
                            </div>
                        </div>

                        <div id="more_field9">
                        </div>
                    </div>
                    @endif
                    <!-- <button type="submit" class="btn btn-primary">Submit</button> --> 

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

                </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">
     function getSightseeing(id,val)
           {
            var n = id.split("_")[3]; 
               $.ajax({ 
                   type: "GET",
           
                   url: "{{ URL::to('admin/hotels/get-sightseeing') }}/"+val,
           
                   success: function(result)
                   {
                    $('#localattraction_id_'+n).html(result);
                    $('.js-select2').select2();
                   }
               }); 
           } 
           function getActivity(id,val)
           {
            var n = id.split("_")[3]; 
               $.ajax({
           
                   type: "GET",
           
                   url: "{{ URL::to('admin/hotels/get-activity') }}/"+val,
           
                   success: function(result)
                   {
                    $('#activity_id_'+n).html(result);
           
                       $('.js-select2').select2();
                   }
               }); 
           }
$(document).ready(function() { 
    $(".get-access-bymodel").click(function() {
              //var citiID = $('#cities').val(); 
              var citiID = {{$hotels->city_id??null}}; 
              var model = $(this).data('value'); 
              var showon = $(this).data('showon'); 
              $.ajax({
                  url: '{{ route("access-data") }}',
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        city_id: citiID, 
                        model: model
                    },
                    success: function (response) { 
                        console.log('response',response);
                        $('.'+showon).html(response); 
                    },
                    error: function () {
                        alert('Error fetching data.');
                    }
              });
            });  
 
    let x = 1; // Define x properly
    const maxFields = 10; // Maximum fields allowed

    $("#addMore8").click(function (e) {
        e.preventDefault();

        if (x < maxFields) {
            let localattractionUpd = $('.localattractionUpd').length;
            let count = localattractionUpd ? localattractionUpd + 1 : 1; // Ensure count is initialized

            let cityDropdownHTML = $('.localattractionShow:first').html();

            x++; // Increment count of added fields

            $("#more_field8").append(`
                <div class="row bottommargin remove">
                    <div class="col-md-4">
                        <select name="sightsee[localattraction_city_id][]" 
                                class="js-select2 form-control" 
                                onChange="getSightseeing(this.id,this.value)" 
                                id="localattraction_city_id_${count}">
                            ${cityDropdownHTML}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select id="localattraction_id_${count}" 
                                name="sightsee[localattraction][]" 
                                class="js-select2 form-control localattractionUpd">
                            <option value="">--Choose City First--</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input step="any" type="number" min="0" name="sightsee[localattraction_distance][]" 
                               value="" class="form-control" placeholder="Distance">
                    </div>
                    <div class="col-md-1">
                        <div class="remove_field uk-icon-remove">X</div>
                    </div>
                </div>
            `);

            $(".js-select2").select2();
        }
    });

    // Corrected remove field event using delegation
    $("#more_field8").on("click", ".remove_field", function () {
        $(this).closest('.row').remove();
        x--; // Decrement count when a field is removed
    });

     $("#addMore9").click(function (e) {
        e.preventDefault();

        if (x < maxFields) {
            let activityUpd = $('.activityUpd').length;
            let count = activityUpd ? activityUpd + 1 : 1; // Ensure count is initialized

            let cityDropdownHTML = $('.activityShow:first').html();

            x++; // Increment count of added fields

            $("#more_field9").append(`
                <div class="row bottommargin remove">
                    <div class="col-md-4">
                        <select name="activity[localattraction_city_id][]" 
                                class="js-select2 form-control" 
                                onChange="getActivity(this.id,this.value)" 
                                id="activity_city_id_${count}">
                            ${cityDropdownHTML}
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select id="activity_id_${count}" 
                                name="activity[localattraction][]" 
                                class="js-select2 form-control activityUpd">
                            <option value="">--Choose City First--</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <input step="any" type="number" min="0" name="activity[localattraction_distance][]" 
                               value="" class="form-control" placeholder="Distance">
                    </div>
                    <div class="col-md-1">
                        <div class="remove_field uk-icon-remove">X</div>
                    </div>
                </div>
            `);

            $(".js-select2").select2();
        }
    });
     $("#more_field9").on("click", ".remove_field", function () {
        $(this).closest('.row').remove();
        x--; // Decrement count when a field is removed
    });

    // Toggle visibility based on Yes/No dropdown
    $('.toggle-control').on('change', function () {
        const target = $($(this).data('toggle-target'));
        if ($(this).val() === 'yes') {
            target.show();
        } else {
            target.hide();
            target.find('input, select').val(''); // Clear inputs when hidden
        }
    });
});

</script>