{{-- resources/views/admin/faqs/create.blade.php --}}
{{-- FAQ: linked to Category + Country + Destination + Hotel + Airline (Flight) --}}
{{-- Controller: Admin\FaqController@create / @store --}}

@extends('layouts.admin')

@section('title', 'Add FAQ')
@section('page_title', 'Add FAQ')

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

@section('content')

    <x-admin.page-header
        title="Add New FAQ"
        :breadcrumb="[
            ['label' => 'FAQs', 'url' => route('admin.faqs.index')],
            ['label' => 'Add New']
        ]"
    />

    <x-admin.form-card
        title="FAQ Details"
        :action="route('admin.faqs.store')"
        method="POST"
    >

        {{-- Top row: Category + Sort Order --}}
        <div class="form-grid">

            <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="">All Categories</option>
                    @foreach($categories as $cat)
                        <option value="{{ $cat->id }}" {{ old('category_id') == $cat->id ? 'selected' : '' }}>
                            {{ $cat->name }}
                        </option>
                    @endforeach
                </select>
                <span class="form-hint">General grouping for this FAQ</span>
            </div>

            <div class="form-group">
                <label class="form-label" for="sort_order">Sort Order</label>
                <input type="number" name="sort_order" id="sort_order"
                    value="{{ old('sort_order', 0) }}" class="form-input" min="0">
                <span class="form-hint">Lower number = shown first</span>
            </div>

        </div>

        {{-- Link to specific content (optional) --}}
        <div class="form-section-label">
            <i class="bi bi-link-45deg"></i>
            Link FAQ to Specific Content <span class="form-hint-inline">(all optional — leave blank for general FAQ)</span>
        </div>

        <div class="form-grid">

            {{-- Country --}}
            <div class="form-group">
                <label class="form-label" for="country_id">
                    <i class="bi bi-flag form-label-icon"></i> Country
                </label>
                <select name="country_id" id="country_id" class="form-select"
                    data-chained-target="#destination_id"
                    data-chained-url="{{ route('admin.ajax.destinations') }}"
                    data-chained-param="country_id">
                    <option value="">— Not linked to Country —</option>
                    @foreach($countries as $country)
                        <option value="{{ $country->id }}" {{ old('country_id') == $country->id ? 'selected' : '' }}>
                            {{ $country->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Destination (AJAX) --}}
            <div class="form-group">
                <label class="form-label" for="destination_id">
                    <i class="bi bi-geo-alt form-label-icon"></i> Destination
                </label>
                <select name="destination_id" id="destination_id" class="form-select"
                    data-error-msg="Failed to load destinations">
                    <option value="">— Not linked to Destination —</option>
                </select>
            </div>

            {{-- Hotel --}}
            <div class="form-group">
                <label class="form-label" for="hotel_id">
                    <i class="bi bi-building form-label-icon"></i> Hotel
                </label>
                <select name="hotel_id" id="hotel_id" class="form-select">
                    <option value="">— Not linked to Hotel —</option>
                    @foreach($hotels as $hotel)
                        <option value="{{ $hotel->id }}" {{ old('hotel_id') == $hotel->id ? 'selected' : '' }}>
                            {{ $hotel->name }}
                            @if($hotel->destination) — {{ $hotel->destination->name }} @endif
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- Airline / Flight --}}
            <div class="form-group">
                <label class="form-label" for="flight_id">
                    <i class="bi bi-airplane form-label-icon"></i> Airline / Flight
                </label>
                <select name="flight_id" id="flight_id" class="form-select">
                    <option value="">— Not linked to Airline —</option>
                    @foreach($flights as $flight)
                        <option value="{{ $flight->id }}" {{ old('flight_id') == $flight->id ? 'selected' : '' }}>
                            {{ $flight->name }}
                        </option>
                    @endforeach
                </select>
            </div>

        </div>

        {{-- Question --}}
        <div class="form-group form-group--full">
            <label class="form-label" for="question">
                Question <span class="form-required">*</span>
            </label>
            <input type="text" name="question" id="question" value="{{ old('question') }}"
                class="form-input {{ $errors->has('question') ? 'form-input--error' : '' }}"
                placeholder="e.g. What is the check-in time at this hotel?" required>
            @error('question') <span class="form-error">{{ $message }}</span> @enderror
        </div>

        {{-- Answer --}}
        <div class="form-group form-group--full">
            <label class="form-label" for="answer">
                Answer <span class="form-required">*</span>
            </label>
            <textarea name="answer" id="answer" rows="6"
                class="form-textarea {{ $errors->has('answer') ? 'form-textarea--error' : '' }}"
                placeholder="Write a clear, helpful answer..." required>{{ old('answer') }}</textarea>
            @error('answer') <span class="form-error">{{ $message }}</span> @enderror
        </div>

        {{-- Status --}}
        <div class="form-toggles-row">
            <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', 'active') === 'active' ? 'checked' : '' }}>
                    <span class="toggle-slider"></span>
                </label>
            </div>
        </div>

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

    </x-admin.form-card>

@endsection

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