{{-- resources/views/admin/hotels/edit.blade.php --}}
{{-- Edit hotel form: pre-filled fields, current image thumbnail, AJAX dropdowns --}}
{{-- Controller: Admin\HotelController@edit / @update --}}

@extends('layouts.admin')

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

@section('page_css')
    <link rel="stylesheet" href="{{ asset('css/admin/forms.css') }}">
@endsection

@section('content')

    <x-admin.page-header
        title="Edit Hotel"
        :breadcrumb="[
            ['label' => 'Hotels', 'url' => route('admin.hotels.index')],
            ['label' => $hotel->name]
        ]"
    />

    <x-admin.form-card
        title="Edit Hotel Details"
        :action="route('admin.hotels.update', $hotel->id)"
        method="PUT"
        enctype="multipart"
    >

        <div class="form-grid">

            {{-- Category --}}
            <div class="form-group">
                <label class="form-label" for="category_id">Category</label>
                <select name="category_id" id="category_id" class="form-select {{ $errors->has('category_id') ? 'form-select--error' : '' }}">
                    <option value="">Select Category</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ old('category_id', $hotel->category_id) == $cat->id ? 'selected' : '' }}>
                            {{ $cat->name }}
                        </option>
                    @endforeach
                </select>
                @error('category_id') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            {{-- Country --}}
            <div class="form-group">
                <label class="form-label" for="country_id">Country</label>
                <select
                    name="country_id"
                    id="country_id"
                    class="form-select {{ $errors->has('country_id') ? 'form-select--error' : '' }}"
                    data-chained-target="#destination_id"
                    data-chained-url="{{ route('admin.ajax.destinations') }}"
                    data-chained-param="country_id"
                    data-selected="{{ old('country_id', $hotel->country_id) }}"
                >
                    <option value="">Select Country</option>
                    @foreach($countries as $country)
                        <option value="{{ $country->id }}" {{ old('country_id', $hotel->country_id) == $country->id ? 'selected' : '' }}>
                            {{ $country->name }}
                        </option>
                    @endforeach
                </select>
                @error('country_id') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            {{-- Destination (AJAX populated, pre-selected) --}}
            <div class="form-group">
                <label class="form-label" for="destination_id">Destination</label>
                <select
                    name="destination_id"
                    id="destination_id"
                    class="form-select {{ $errors->has('destination_id') ? 'form-select--error' : '' }}"
                    data-selected="{{ old('destination_id', $hotel->destination_id) }}"
                    data-error-msg="Failed to load destinations"
                >
                    @if($hotel->destination)
                        <option value="{{ $hotel->destination->id }}" selected>
                            {{ $hotel->destination->name }}
                        </option>
                    @else
                        <option value="">Select Country first</option>
                    @endif
                </select>
                @error('destination_id') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            {{-- Name --}}
            <div class="form-group">
                <label class="form-label" for="name">Hotel Name <span class="form-required">*</span></label>
                <input
                    type="text"
                    name="name"
                    id="name"
                    value="{{ old('name', $hotel->name) }}"
                    class="form-input {{ $errors->has('name') ? 'form-input--error' : '' }}"
                    required
                >
                @error('name') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            {{-- URL --}}
            <div class="form-group">
                <label class="form-label" for="url">Deal URL</label>
                <input
                    type="url"
                    name="url"
                    id="url"
                    value="{{ old('url', $hotel->url) }}"
                    class="form-input {{ $errors->has('url') ? 'form-input--error' : '' }}"
                    placeholder="https://..."
                >
                @error('url') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            {{-- Discount % --}}
            <div class="form-group">
                <label class="form-label" for="discount_percent">Discount %</label>
                <input
                    type="number"
                    name="discount_percent"
                    id="discount_percent"
                    value="{{ old('discount_percent', $hotel->discount_percent) }}"
                    class="form-input {{ $errors->has('discount_percent') ? 'form-input--error' : '' }}"
                    min="0"
                    max="100"
                >
                @error('discount_percent') <span class="form-error">{{ $message }}</span> @enderror
            </div>

        </div>

        {{-- Description --}}
        <div class="form-group form-group--full">
            <label class="form-label" for="description">Description</label>
            <textarea
                name="description"
                id="description"
                rows="4"
                class="form-textarea {{ $errors->has('description') ? 'form-textarea--error' : '' }}"
            >{{ old('description', $hotel->description) }}</textarea>
            @error('description') <span class="form-error">{{ $message }}</span> @enderror
        </div>

        {{-- Toggles row --}}
        <div class="form-toggles-row">

            <div class="form-toggle">
                <label class="toggle-label" for="is_top">Top Deal</label>
                <label class="toggle-switch">
                    <input type="hidden" name="is_top" value="0">
                    <input type="checkbox" name="is_top" id="is_top" value="1" {{ old('is_top', $hotel->is_top) ? 'checked' : '' }}>
                    <span class="toggle-slider"></span>
                </label>
            </div>

            <div class="form-toggle">
                <label class="toggle-label" for="is_popular">Popular</label>
                <label class="toggle-switch">
                    <input type="hidden" name="is_popular" value="0">
                    <input type="checkbox" name="is_popular" id="is_popular" value="1" {{ old('is_popular', $hotel->is_popular) ? 'checked' : '' }}>
                    <span class="toggle-slider"></span>
                </label>
            </div>

            <div class="form-toggle">
                <label class="toggle-label" for="show_on_homepage">Show on Homepage</label>
                <label class="toggle-switch">
                    <input type="hidden" name="show_on_homepage" value="0">
                    <input type="checkbox" name="show_on_homepage" id="show_on_homepage" value="1" {{ old('show_on_homepage', $hotel->show_on_homepage) ? 'checked' : '' }}>
                    <span class="toggle-slider"></span>
                </label>
            </div>

            <div class="form-toggle">
                <label class="toggle-label" for="show_in_header">Show in Header</label>
                <label class="toggle-switch">
                    <input type="hidden" name="show_in_header" value="0">
                    <input type="checkbox" name="show_in_header" id="show_in_header" value="1" {{ old('show_in_header', $hotel->show_in_header) ? 'checked' : '' }}>
                    <span class="toggle-slider"></span>
                </label>
            </div>

            <div class="form-toggle">
                <label class="toggle-label" for="status">Status (Active)</label>
                <label class="toggle-switch">
                    <input type="hidden" name="status" value="inactive">
                    <input type="checkbox" name="status" id="status" value="active" {{ old('status', $hotel->status) === 'active' ? 'checked' : '' }}>
                    <span class="toggle-slider"></span>
                </label>
            </div>

        </div>

        {{-- Image upload with current image preview --}}
        <x-admin.image-upload
            name="image"
            :current="$hotel->image"
            label="Hotel Image"
        />

        {{-- Form actions --}}
        <div class="form-actions">
            <button type="submit" class="btn-primary-action">
                <i class="bi bi-check-lg"></i> Update Hotel
            </button>
            <a href="{{ route('admin.hotels.index') }}" class="btn-cancel">
                Cancel
            </a>
        </div>

    </x-admin.form-card>

@endsection

@section('page_js')
    <script src="{{ asset('js/admin/ajax-dropdowns.js') }}"></script>
    <script src="{{ asset('js/admin/image-preview.js') }}"></script>
@endsection