@extends('layouts.app')

@section('title', 'Edit Hotel')

@section('content_header_title', 'Hotels')
@section('content_header_subtitle', 'Edit Hotel')

@section('content_body')

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Edit 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.update', $hotel->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="form-group">
                    <label for="name">Hotel Name:</label>
                    <input type="text" class="form-control" id="name" name="name" value="{{ $hotel->name }}"
                        required>
                    @error('name')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </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 }}" {{ $hotel->country_id == $country->id ? 'selected' : '' }}>
                            {{ $country->name }}
                        </option>
                    @endforeach
                </select>
                @error('country_id') <span class="text-danger">{{ $message }}</span> @enderror
            </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"
                    value="{{ $hotel->city->name ?? '' }}">
                <div id="cityList" class="dropdown-menu show" style="width: 100%; display: none; position: absolute; top: 100%; left: 0;"></div>
                @error('city_id') <span class="text-danger">{{ $message }}</span> @enderror
            </div> --}}
                <div class="form-group">
                    <label for="location">Location</label>
                    <input type="text" id="location" name="location" class="form-control" maxlength="40"
                        placeholder="Enter location" value="{{ $hotel->location }}">
                </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>
                    @foreach ($cities as $city)
                        <option value="{{ $city->id }}" {{ $hotel->city_id == $city->id ? 'selected' : '' }}>
                            {{ $city->name }}
                        </option>
                    @endforeach
                </select>
                @error('city_id') <span class="text-danger">{{ $message }}</span> @enderror
            </div> --}}

                <div class="form-group">
                    <label for="feature_image">Feature Image:</label>
                    <input type="file" class="form-control" name="feature_image">
                    @error('feature_image')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

                @if ($hotel->feature_image)
                    <div class="form-group">
                        <label>Current Image:</label><br>
                        <img src="{{ getImageUrl($hotel->feature_image) }}" width="100">
                    </div>
                @endif

                <!-- Existing Gallery -->
                <div class="mb-3">
                    <label class="form-label">Existing Gallery Images</label>
                    <div class="row">
                        @foreach ($hotel->images as $image)
                            <div class="col-md-3 text-center">
                                <img src="{{ getImageUrl($image->path) }}" width="100">
                                <p>{{ $image->title }}</p>
                                <input type="checkbox" name="delete_images[]" value="{{ $image->id }}"> Delete
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- New Gallery Upload -->
                <div class="mb-3">
                    <label class="form-label">Add More Images</label>
                    <div id="image-gallery">
                        {{-- <div class="gallery-item d-flex">
                            <input type="file" name="gallery_images[]" class="form-control me-2">
                            <input type="text" name="gallery_titles[]" class="form-control" placeholder="Image Title" required>
                            <button type="button" class="btn btn-danger remove-image">X</button>
                        </div> --}}
                    </div>
                    <button type="button" class="btn btn-primary mt-2" id="add-gallery-image">+ Add More</button>
                </div>


                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Update 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() {
            // Load cities when typing
            $('#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" href="#">' +
                                        city + '</a>');
                                });
                                dropdown.show();
                            } else {
                                dropdown.hide();
                            }
                        }
                    });
                } else {
                    $('#cityList').hide();
                }
            });

            // Select city from dropdown
            $(document).on('click', '.city-item', function(e) {
                e.preventDefault();
                $('#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>
    <script>
        document.getElementById('add-gallery-image').addEventListener('click', function() {
            let gallery = document.getElementById('image-gallery');
            let newImage = document.createElement('div');
            newImage.classList.add('gallery-item', 'd-flex');
            newImage.innerHTML = `
                <input type="file" name="gallery_images[]" class="form-control me-2">
                <input type="text" name="gallery_titles[]" class="form-control" placeholder="Image Title" required>
                <button type="button" class="btn btn-danger remove-image">X</button>
            `;
            gallery.appendChild(newImage);
        });

        document.addEventListener('click', function(e) {
            if (e.target.classList.contains('remove-image')) {
                e.target.parentElement.remove();
            }
        });
    </script>
@endpush