@extends('admin.layouts.app')

@section('breadcrumb')
    <div>
        <h1 class="page-title fw-medium fs-18 mb-2">ایجاد پرواز جدید</h1>

        <nav>
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item">
                    <a href="javascript:void(0);">مدیریت پروازها</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">
                    ایجاد پرواز
                </li>
            </ol>
        </nav>
    </div>
@endsection

@section('content')
    <div class="container-fluid pt-4">
        <div class="row">
            <div class="col-xl-12">
                <form action="{{ route('admin.flights.store') }}"
                      method="POST"
                      enctype="multipart/form-data">
                    @csrf

                    <div class="card custom-card">
                        <div class="card-header">
                            <div class="card-title">
                                مشخصات اصلی پرواز
                            </div>
                        </div>

                        <div class="card-body pt-0">
                            <div class="row gy-3">
                                <div class="col-xl-4">
                                    <label class="form-label">
                                        شماره پرواز
                                        <span class="text-danger">*</span>
                                    </label>

                                    <input type="text"
                                           class="form-control"
                                           name="flight_number"
                                           placeholder="مثال: IR-625"
                                           value="{{ old('flight_number') }}">

                                    @error('flight_number')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-xl-4">
                                    <label class="form-label">
                                        ایرلاین
                                        <span class="text-danger">*</span>
                                    </label>

                                    <select class="form-control select2" name="airline_id">
                                        <option value="">ایرلاین را انتخاب کنید</option>

                                        @foreach($airlines as $airline)
                                            <option value="{{ $airline->id }}"
                                                @selected(old('airline_id') == $airline->id)>
                                                {{ $airline->name }}
                                            </option>
                                        @endforeach
                                    </select>

                                    @error('airline_id')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-xl-4">
                                    <label class="form-label">
                                        گستره پرواز
                                        <span class="text-danger">*</span>
                                    </label>

                                    <select class="form-control" name="flight_scope" id="flight_scope">
                                        <option value="">یک مورد را انتخاب کنید</option>

                                        @foreach(\App\Enums\Flight\FlightScope::cases() as $scope)
                                            <option value="{{ $scope->value }}"
                                                @selected(old('flight_scope') == $scope->value)>
                                                {{ method_exists($scope, 'label') ? $scope->label() : $scope->name }}
                                            </option>
                                        @endforeach
                                    </select>

                                    @error('flight_scope')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-xl-4">
                                    <label class="form-label">
                                        نوع پرواز
                                        <span class="text-danger">*</span>
                                    </label>

                                    <select class="form-control" name="flight_type">
                                        <option value="">یک مورد را انتخاب کنید</option>

                                        @foreach(\App\Enums\Flight\FlightType::cases() as $type)
                                            <option value="{{ $type->value }}"
                                                @selected(old('flight_type') == $type->value)>
                                                {{ method_exists($type, 'label') ? $type->label() : $type->name }}
                                            </option>
                                        @endforeach
                                    </select>

                                    @error('flight_type')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-xl-4">
                                    <label class="form-label">
                                        نوع سفر
                                        <span class="text-danger">*</span>
                                    </label>

                                    <select class="form-control" name="flight_trip_type">
                                        <option value="">یک مورد را انتخاب کنید</option>

                                        @foreach(\App\Enums\Flight\FlightTripType::cases() as $tripType)
                                            <option value="{{ $tripType->value }}"
                                                @selected(old('flight_trip_type') == $tripType->value)>
                                                {{ method_exists($tripType, 'label') ? $tripType->label() : $tripType->name }}
                                            </option>
                                        @endforeach
                                    </select>

                                    @error('flight_trip_type')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-xl-4">
                                    <label class="form-label">
                                        وضعیت پرواز
                                        <span class="text-danger">*</span>
                                    </label>

                                    <select class="form-control" name="status">
                                        <option value="">یک مورد را انتخاب کنید</option>

                                        @foreach(\App\Enums\Flight\FlightStatus::cases() as $status)
                                            <option value="{{ $status->value }}"
                                                @selected(old('status') == $status->value)>
                                                {{ method_exists($status, 'label') ? $status->label() : $status->name }}
                                            </option>
                                        @endforeach
                                    </select>

                                    @error('status')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-xl-6 country-wrapper">
                                    <label class="form-label">
                                        کشور مبدأ
                                        <span class="text-danger">*</span>
                                    </label>

                                    <select class="form-control select2" id="origin_country_id">
                                        <option value="">کشور مبدأ را انتخاب کنید</option>

                                        @foreach($countries as $country)
                                            <option value="{{ $country->id }}"
                                                @selected(old('origin_country_id') == $country->id)>
                                                {{ $country->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-xl-6 country-wrapper">
                                    <label class="form-label">
                                        کشور مقصد
                                        <span class="text-danger">*</span>
                                    </label>

                                    <select class="form-control select2" id="destination_country_id">
                                        <option value="">کشور مقصد را انتخاب کنید</option>

                                        @foreach($countries as $country)
                                            <option value="{{ $country->id }}"
                                                @selected(old('destination_country_id') == $country->id)>
                                                {{ $country->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-xl-6">
                                    <label class="form-label">
                                        شهر مبدأ
                                        <span class="text-danger">*</span>
                                    </label>

                                    <select class="form-control select2"
                                            id="origin_city_id">
                                        <option value="">ابتدا کشور مبدأ را انتخاب کنید</option>
                                    </select>
                                </div>

                                <div class="col-xl-6">
                                    <label class="form-label">
                                        شهر مقصد
                                        <span class="text-danger">*</span>
                                    </label>

                                    <select class="form-control select2"
                                            id="destination_city_id">
                                        <option value="">ابتدا کشور مقصد را انتخاب کنید</option>
                                    </select>
                                </div>

                                <div class="col-xl-6">
                                    <label class="form-label">
                                        فرودگاه مبدأ
                                        <span class="text-danger">*</span>
                                    </label>

                                    <select class="form-control select2"
                                            name="origin_airport_id"
                                            id="origin_airport_id">
                                        <option value="">ابتدا شهر مبدأ را انتخاب کنید</option>
                                    </select>

                                    @error('origin_airport_id')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-xl-6">
                                    <label class="form-label">
                                        فرودگاه مقصد
                                        <span class="text-danger">*</span>
                                    </label>

                                    <select class="form-control select2"
                                            name="airport_id"
                                            id="airport_id">
                                        <option value="">ابتدا شهر مقصد را انتخاب کنید</option>
                                    </select>

                                    @error('airport_id')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <hr class="my-4">

                            <h6 class="fw-bold mb-3">زمان‌بندی و ظرفیت پرواز</h6>

                            <div class="row gy-3">
                                <div class="col-xl-3">
                                    <label class="form-label">
                                        زمان حرکت
                                        <span class="text-danger">*</span>
                                    </label>

                                    <input type="text"
                                           id="departureTimeInput"
                                           class="form-control"
                                           name="departure_time"
                                           placeholder="تاریخ و ساعت حرکت"
                                           value="{{ old('departure_time') }}">

                                    @error('departure_time')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-xl-3">
                                    <label class="form-label">
                                        زمان رسیدن
                                        <span class="text-danger">*</span>
                                    </label>

                                    <input type="text"
                                           id="arrivalTimeInput"
                                           class="form-control"
                                           name="arrival_time"
                                           placeholder="تاریخ و ساعت رسیدن"
                                           value="{{ old('arrival_time') }}">

                                    @error('arrival_time')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-xl-3">
                                    <label class="form-label">
                                        قیمت (تومان)
                                        <span class="text-danger">*</span>
                                    </label>

                                    <input type="number"
                                           min="0"
                                           class="form-control"
                                           name="price"
                                           placeholder="مثال: 3500000"
                                           value="{{ old('price') }}">

                                    @error('price')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-xl-3">
                                    <label class="form-label">
                                        ظرفیت مسافر
                                        <span class="text-danger">*</span>
                                    </label>

                                    <input type="number"
                                           min="1"
                                           class="form-control"
                                           name="capacity"
                                           placeholder="مثال: 180"
                                           value="{{ old('capacity') }}">

                                    @error('capacity')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <hr class="my-4">

                            <h6 class="fw-bold mb-2">گالری تصاویر پرواز</h6>

                            <div class="image-upload-wrapper d-flex flex-wrap gap-2 px-0 pt-0 mt-2"
                                 id="imagePreviewContainer"
                                 style="border-radius: 8px; padding: 10px;">

                                <label id="uploadPlaceholder"
                                       class="upload-placeholder"
                                       for="imageInput"
                                       style="cursor: pointer; width:150px; height:150px; display:flex; justify-content:center; align-items:center; border:2px dashed #ccc; border-radius:8px; padding:20px; text-align:center;">
                                    <div>
                                        📷<br>
                                        <strong>آپلود تصاویر</strong><br>
                                        <small style="color:#999;">JPG / PNG / WEBP</small>
                                    </div>
                                </label>

                                <input id="imageInput"
                                       name="images[]"
                                       type="file"
                                       accept=".jpg,.png,.jpeg,.webp"
                                       multiple
                                       style="display:none">
                            </div>

                            @error('images')
                            <span class="text-danger small d-block">{{ $message }}</span>
                            @enderror

                            @if($errors->has('images.*'))
                                @foreach($errors->get('images.*') as $messages)
                                    @foreach($messages as $message)
                                        <span class="text-danger small d-block">{{ $message }}</span>
                                    @endforeach
                                @endforeach
                            @endif
                        </div>

                        <div class="card-footer text-end">
                            <a href="{{ route('admin.flights.index') }}" class="btn btn-light">
                                انصراف
                            </a>

                            <button type="submit" class="btn btn-primary">
                                ثبت و ایجاد پرواز
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
        <script>
            $(document).ready(function () {
                const iranCountryId = {{ $iranCountry->id }};

                const citiesRoute = '{{ route('admin.flights.cities-by-country', ['country' => '__COUNTRY__']) }}';
                const airportsRoute = '{{ route('admin.flights.airports-by-city', ['city' => '__CITY__']) }}';

                const oldOriginAirportId = '{{ old('origin_airport_id') }}';
                const oldDestinationAirportId = '{{ old('airport_id') }}';

                const datePickerOptions = {
                    format: 'YYYY/MM/DD HH:mm',
                    timePicker: {
                        enabled: true,
                        meridiem: {
                            enabled: false
                        }
                    },
                    autoClose: false,
                    initialValue: false,
                    minDate: new persianDate().valueOf(),
                    toolbox: {
                        calendarSwitch: {
                            enabled: false
                        }
                    }
                };

                $('#departureTimeInput').persianDatepicker(datePickerOptions);
                $('#arrivalTimeInput').persianDatepicker(datePickerOptions);

                function resetSelect(selector, placeholder) {
                    $(selector)
                        .html(`<option value="">${placeholder}</option>`)
                        .val('')
                        .trigger('change');
                }


                let citiesRequestTokens = {};
                let airportsRequestTokens = {};

                function loadCities(countryId, citySelector, placeholder) {
                    resetSelect(citySelector, 'در حال دریافت شهرها...');

                    if (!countryId) {
                        resetSelect(citySelector, placeholder);
                        return;
                    }

                    citiesRequestTokens[citySelector] = (citiesRequestTokens[citySelector] || 0) + 1;
                    const currentToken = citiesRequestTokens[citySelector];

                    const url = citiesRoute.replace('__COUNTRY__', countryId);

                    $.get(url, function (cities) {

                        if (currentToken !== citiesRequestTokens[citySelector]) {
                            return;
                        }

                        let options = `<option value="">${placeholder}</option>`;

                        cities.forEach(function (city) {
                            options += `<option value="${city.id}">${city.name}</option>`;
                        });

                        $(citySelector).html(options).trigger('change');
                    }).fail(function () {
                        if (currentToken !== citiesRequestTokens[citySelector]) {
                            return;
                        }

                        resetSelect(citySelector, 'خطا در دریافت شهرها');
                    });
                }

                function loadAirports(cityId, airportSelector, placeholder, selectedAirportId = null) {
                    resetSelect(airportSelector, 'در حال دریافت فرودگاه‌ها...');

                    if (!cityId) {
                        resetSelect(airportSelector, placeholder);
                        return;
                    }

                    airportsRequestTokens[airportSelector] = (airportsRequestTokens[airportSelector] || 0) + 1;
                    const currentToken = airportsRequestTokens[airportSelector];

                    const url = airportsRoute.replace('__CITY__', cityId);

                    $.get(url, function (airports) {
                        if (currentToken !== airportsRequestTokens[airportSelector]) {
                            return;
                        }

                        let options = `<option value="">${placeholder}</option>`;

                        airports.forEach(function (airport) {
                            const code = airport.code ? ` (${airport.code})` : '';
                            const selected = String(airport.id) === String(selectedAirportId)
                                ? 'selected'
                                : '';

                            options += `
                            <option value="${airport.id}" ${selected}>
                                ${airport.name}${code}
                            </option>
                        `;
                        });

                        $(airportSelector).html(options).trigger('change');
                    }).fail(function () {
                        if (currentToken !== airportsRequestTokens[airportSelector]) {
                            return;
                        }

                        resetSelect(airportSelector, 'خطا در دریافت فرودگاه‌ها');
                    });
                }

                function resetLocations() {
                    resetSelect('#origin_city_id', 'ابتدا کشور مبدأ را انتخاب کنید');
                    resetSelect('#destination_city_id', 'ابتدا کشور مقصد را انتخاب کنید');
                    resetSelect('#origin_airport_id', 'ابتدا شهر مبدأ را انتخاب کنید');
                    resetSelect('#airport_id', 'ابتدا شهر مقصد را انتخاب کنید');
                }

                function toggleScopeUI() {
                    const scope = $('#flight_scope').val();

                    resetLocations();

                    if (scope === '1') {
                        $('.country-wrapper').hide();

                        $('#origin_country_id').val(iranCountryId).trigger('change');
                        $('#destination_country_id').val(iranCountryId).trigger('change');

                        return;
                    }

                    if (scope === '2') {
                        $('.country-wrapper').show();

                        $('#origin_country_id').val('').trigger('change');
                        $('#destination_country_id').val('').trigger('change');

                        return;
                    }

                    $('.country-wrapper').hide();
                }

                $('#flight_scope').on('change', toggleScopeUI);

                $('#origin_country_id').on('change', function () {
                    const countryId = $(this).val();

                    resetSelect('#origin_airport_id', 'ابتدا شهر مبدأ را انتخاب کنید');

                    loadCities(
                        countryId,
                        '#origin_city_id',
                        'شهر مبدأ را انتخاب کنید'
                    );
                });

                $('#destination_country_id').on('change', function () {
                    const countryId = $(this).val();

                    resetSelect('#airport_id', 'ابتدا شهر مقصد را انتخاب کنید');

                    loadCities(
                        countryId,
                        '#destination_city_id',
                        'شهر مقصد را انتخاب کنید'
                    );
                });

                $('#origin_city_id').on('change', function () {
                    loadAirports(
                        $(this).val(),
                        '#origin_airport_id',
                        'فرودگاه مبدأ را انتخاب کنید',
                        oldOriginAirportId
                    );
                });

                $('#destination_city_id').on('change', function () {
                    loadAirports(
                        $(this).val(),
                        '#airport_id',
                        'فرودگاه مقصد را انتخاب کنید',
                        oldDestinationAirportId
                    );
                });

                $('#imageInput').on('change', function (event) {
                    const files = event.target.files;
                    const container = $('#imagePreviewContainer');

                    container.find('.image-preview-item').remove();

                    if (!files.length) {
                        return;
                    }

                    Array.from(files).forEach(function (file) {
                        const reader = new FileReader();

                        reader.onload = function (e) {
                            container.append(`
                            <div class="image-preview-item position-relative"
                                 style="width:150px; height:150px;">
                                <img src="${e.target.result}"
                                     alt="پیش‌نمایش تصویر"
                                     style="width:100%; height:100%; object-fit:cover; border-radius:8px;">
                            </div>
                        `);
                        };

                        reader.readAsDataURL(file);
                    });
                });

                toggleScopeUI();
            });
        </script>
    @endpush
@endsection