@extends('layouts.app')

@section('title', 'Add New Hotel')

@section('content_header_title', 'Hotels')
@section('content_header_subtitle', 'Add New Hotel')

@section('content_body')

<div class="card">
    <div class="card-header">
        <h3 class="card-title">Add New Hotel</h3>
    </div>
    
    <div class="card-body">
    {{-- Show General Validation Errors --}}
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form action="{{ route('hotels.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="form-group">
                <label for="name">Hotel Name:  <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="name" name="name" placeholder="Enter Hotel Name" required>
            </div>

            {{-- <div class="form-group">
                <label for="country_id">Country:</label>
                <select class="form-control" name="country_id" id="country-select" required>
                    <option value="">Select Country</option>
                    @foreach($countries as $country)
                        <option value="{{ $country->id }}">{{ $country->name }}</option>
                    @endforeach
                </select>
            </div> --}}
            <!-- New Location Text Box -->
            <div class="form-group">
                <label for="location">Location  <span class="text-danger">*</span></label>
                <input type="text" id="location" name="location" class="form-control" maxlength="90" placeholder="Enter location" required>
            </div>

            {{-- <div class="form-group">
                <label for="city_id">City:</label>
                <select class="form-control" name="city_id" id="city-select" required>
                    <option value="">Select City</option>
                </select>
            </div> --}}
            {{-- <div class="form-group position-relative">
                <label for="city">City</label>
                <input type="text" id="city" name="city" class="form-control" placeholder="Enter city name">
                <div id="cityList" class="dropdown-menu show" style="width: 100%; display: none; position: absolute; top: 100%; left: 0;"></div>
            </div> --}}

            <div class="form-group">
                <label for="feature_image">Feature Image:</label>
                <input type="file" class="form-control" name="feature_image">
            </div>

            <div class="form-group">
                <button type="submit" class="btn btn-primary">Save Hotel</button>
                <a href="{{ route('hotels.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

@endsection

@push('js')
{{-- <script>
    $(document).ready(function () {
        $('#country-select').on('change', function () {
            var countryId = $(this).val();
            var citySelect = $('#city-select');
            citySelect.html('<option value="">Loading...</option>');

            if (countryId) {
                $.ajax({
                    url: '/cities-by-country/' + countryId,
                    type: 'GET',
                    success: function (data) {
                        citySelect.html('<option value="">Select City</option>');
                        $.each(data, function (key, city) {
                            citySelect.append('<option value="' + city.id + '">' + city.name + '</option>');
                        });
                    }
                });
            } else {
                citySelect.html('<option value="">Select Country First</option>');
            }
        });
        
    });
</script> --}}
<script>
    $(document).ready(function() {
        $('#city').on('keyup', function() {
            var query = $(this).val();
            var countryId = $('#country-select').val();
    
            if (query.length >= 2 && countryId) {
                $.ajax({
                    url: "{{ route('cities.autocomplete') }}",
                    data: { query: query, country_id: countryId },
                    success: function(data) {
                        var dropdown = $('#cityList');
                        dropdown.empty();
    
                        if (data.length > 0) {
                            data.forEach(function(city) {
                                dropdown.append('<a class="dropdown-item city-item">' + city + '</a>');
                            });
                            dropdown.show();
                        } else {
                            dropdown.hide();
                        }
                    }
                });
            } else {
                $('#cityList').hide();
            }
        });
    
        // Select city from autocomplete
        $(document).on('click', '.city-item', function() {
            $('#city').val($(this).text());
            $('#cityList').hide();
        });
    
        // Hide dropdown when clicking outside
        $(document).click(function(event) {
            if (!$(event.target).closest('#cityList, #city').length) {
                $('#cityList').hide();
            }
        });
    });
    </script>
@endpush