{{-- resources/views/admin/destinations/edit.blade.php --}}
{{-- Edit destination: Category + Country + Short + Long description --}}
{{-- Controller: Admin\DestinationController@edit / @update --}}

@extends('layouts.admin')

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

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

@section('content')

    <x-admin.page-header
        title="Edit Destination"
        :breadcrumb="[
            ['label' => 'Destinations', 'url' => route('admin.destinations.index')],
            ['label' => $destination->name]
        ]"
    />

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

        <div class="form-grid">

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

            {{-- Category --}}
            <div class="form-group">
                <label class="form-label" for="category_id">Category</label>
                <select name="category_id" id="category_id" class="form-select">
                    <option value="">Select Category</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}"
                            {{ old('category_id', $destination->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 <span class="form-required">*</span>
                </label>
                <select name="country_id" id="country_id" class="form-select" required>
                    <option value="">Select Country</option>
                    @foreach($countries as $country)
                        <option value="{{ $country->id }}"
                            {{ old('country_id', $destination->country_id) == $country->id ? 'selected' : '' }}>
                            {{ $country->name }} ({{ strtoupper($country->code ?? '') }})
                        </option>
                    @endforeach
                </select>
                @error('country_id') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            {{-- Short Description --}}
            <div class="form-group form-group--full">
                <label class="form-label" for="short_description">
                    Short Description
                    <span class="form-hint-inline">(max 300 chars — shown in cards/listings)</span>
                </label>
                <input
                    type="text"
                    name="short_description"
                    id="short_description"
                    value="{{ old('short_description', $destination->short_description) }}"
                    class="form-input {{ $errors->has('short_description') ? 'form-input--error' : '' }}"
                    maxlength="300"
                    placeholder="A brief tagline for this destination..."
                >
                @error('short_description') <span class="form-error">{{ $message }}</span> @enderror
            </div>

            {{-- Long Description --}}
            <div class="form-group form-group--full">
                <label class="form-label" for="long_description">
                    Long Description
                    <span class="form-hint-inline">(full detail — shown on destination page)</span>
                </label>
                <textarea
                    name="long_description"
                    id="long_description"
                    rows="6"
                    class="form-textarea {{ $errors->has('long_description') ? 'form-textarea--error' : '' }}"
                    placeholder="Write a detailed description..."
                >{{ old('long_description', $destination->long_description) }}</textarea>
                @error('long_description') <span class="form-error">{{ $message }}</span> @enderror
            </div>

        </div>

        {{-- Toggles --}}
        <div class="form-toggles-row">
            <div class="form-toggle">
                <label class="toggle-label" for="is_popular">Popular Destination</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', $destination->is_popular) ? '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', $destination->status) === 'active' ? 'checked' : '' }}>
                    <span class="toggle-slider"></span>
                </label>
            </div>
        </div>

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

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

    </x-admin.form-card>

@endsection

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