@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="{{ route('admin.flights.index') }}">
                        مدیریت پروازها
                    </a>
                </li>

                <li class="breadcrumb-item active" aria-current="page">
                    ویرایش پرواز
                </li>
            </ol>
        </nav>
    </div>
@endsection

@section('content')
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="container-fluid pt-4">

        @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
        @endif

        <div class="row">
            <div class="col-xl-12">

                <form action="{{ route('admin.flights.update', $flight->id) }}"
                      method="POST"
                      enctype="multipart/form-data">

                    @csrf
                    @method('PUT')

                    <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', $flight->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', $flight->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', $flight->flight_scope?->value) == $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', $flight->flight_type?->value) == $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="trip_type">

                                        <option value="">
                                            یک مورد را انتخاب کنید
                                        </option>

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

                                    @error('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', $flight->status?->value) == $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"
                                            name="origin_country_id"
                                            id="origin_country_id">

                                        <option value="">
                                            کشور مبدأ را انتخاب کنید
                                        </option>

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

                                    @error('origin_country_id')
                                    <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"
                                            name="destination_country_id"
                                            id="destination_country_id">

                                        <option value="">
                                            کشور مقصد را انتخاب کنید
                                        </option>

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

                                    @error('destination_country_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="origin_city_id"
                                            id="origin_city_id">

                                        <option value="">
                                            ابتدا کشور مبدأ را انتخاب کنید
                                        </option>
                                    </select>

                                    @error('origin_city_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="destination_city_id"
                                            id="destination_city_id">

                                        <option value="">
                                            ابتدا کشور مقصد را انتخاب کنید
                                        </option>
                                    </select>

                                    @error('destination_city_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="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="destination_airport_id"
                                            id="destination_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', $flight->departure_time ? \Verta::instance($flight->departure_time)->format('Y/m/d H:i') : '') }}">

                                    @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', $flight->arrival_time ? \Verta::instance($flight->arrival_time)->format('Y/m/d H:i') : '') }}">

                                    @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', $flight->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', $flight->capacity) }}">

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

                            </div>

                            <hr class="my-4">

                            <h6 class="fw-bold mb-3">
                                گالری تصاویر فعلی
                            </h6>

                            <div class="d-flex flex-wrap gap-3 mb-4">

                                @forelse($flight->images as $image)
                                    <div class="position-relative"
                                         style="width:150px; height:150px;">

                                        <img src="{{ getFileUrl($image->file_id) }}"
                                             class="w-100 h-100 rounded"
                                             style="object-fit:cover;"
                                             alt="{{ $flight->flight_number }}">

                                        @if($image->is_default)
                                            <span class="badge bg-primary position-absolute top-0 start-0 m-1">
                                                اصلی
                                            </span>
                                        @endif

                                        <button type="button"
                                                class="btn btn-danger btn-sm position-absolute bottom-0 end-0 m-1 delete-image-btn"
                                                data-bs-toggle="modal"
                                                data-bs-target="#deleteImageModal"
                                                data-image-id="{{ $image->id }}">
                                            حذف
                                        </button>
                                    </div>
                                @empty
                                    <span class="text-muted">
                                        هیچ تصویری ثبت نشده است.
                                    </span>
                                @endforelse
                            </div>


                            <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 class="modal fade"
                     id="deleteImageModal"
                     tabindex="-1"
                     aria-labelledby="deleteImageModalLabel"
                     aria-hidden="true">

                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">

                            <div class="modal-header">
                                <h5 class="modal-title" id="deleteImageModalLabel">
                                    حذف تصویر
                                </h5>

                                <button type="button"
                                        class="btn-close"
                                        data-bs-dismiss="modal"
                                        aria-label="بستن">
                                </button>
                            </div>

                            <div class="modal-body">
                                آیا از حذف این تصویر اطمینان دارید؟
                            </div>

                            <div class="modal-footer">
                                <button type="button"
                                        class="btn btn-light"
                                        data-bs-dismiss="modal">
                                    انصراف
                                </button>

                                <form id="deleteImageForm" method="POST">
                                    @csrf
                                    @method('DELETE')

                                    <button type="submit" class="btn btn-danger">
                                        حذف تصویر
                                    </button>
                                </form>
                            </div>

                        </div>
                    </div>
                </div>


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

                const citiesRoute = @json(
            route('admin.flights.cities-by-country', [
                'country' => '__COUNTRY__'
            ])
        );

                const airportsRoute = @json(
            route('admin.flights.airports-by-city', [
                'city' => '__CITY__'
            ])
        );

                const deleteImageRoute = @json(
            route('admin.flights.images.destroy', [
                'flight' => $flight->id,
                'image' => '__IMAGE_ID__'
            ])
        );

                const oldOriginAirportId = @json(
            old('origin_airport_id', $flight->origin_airport_id)
        );

                const oldDestinationAirportId = @json(
            old('destination_airport_id', $flight->destination_airport_id)
        );

                const oldOriginCityId = @json(
            old('origin_city_id', $flight->origin_airport?->city_id)
        );

                const oldDestinationCityId = @json(
            old('destination_city_id', $flight->airport?->city_id)
        );

                const datePickerOptions = {
                    format: 'YYYY/MM/DD HH:mm',

                    minDate: new persianDate().startOf('day').valueOf(),

                    timePicker: {
                        enabled: true,

                        meridiem: {
                            enabled: false
                        }
                    },

                    autoClose: false,
                    initialValue: false,
                    initialValueType: 'persian',

                    toolbox: {
                        calendarSwitch: {
                            enabled: false
                        }
                    }
                };

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


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


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

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

                        return $.Deferred().resolve().promise();
                    }

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

                    return $.get(url)
                        .done(function (cities) {
                            let options = `<option value="">${placeholder}</option>`;

                            cities.forEach(function (city) {
                                const selected =
                                    String(city.id) === String(selectedCityId)
                                        ? 'selected'
                                        : '';

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

                            $(citySelector)
                                .html(options)
                                .trigger('change.select2');
                        })
                        .fail(function () {
                            resetSelect(
                                citySelector,
                                'خطا در دریافت شهرها'
                            );
                        });
                }


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

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

                        return $.Deferred().resolve().promise();
                    }

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

                    return $.get(url)
                        .done(function (airports) {
                            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.select2');
                        })
                        .fail(function () {
                            resetSelect(
                                airportSelector,
                                'خطا در دریافت فرودگاه‌ها'
                            );
                        });
                }

                function resetLocations() {
                    resetSelect(
                        '#origin_city_id',
                        'ابتدا کشور مبدأ را انتخاب کنید'
                    );

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

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

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


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

                    let originCountryId = $('#origin_country_id').val();
                    let destinationCountryId = $('#destination_country_id').val();

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

                        originCountryId = iranCountryId;
                        destinationCountryId = iranCountryId;

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

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


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

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

                        resetLocations();

                        return;
                    }

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

                    await loadAirports(
                        oldOriginCityId,
                        '#origin_airport_id',
                        'فرودگاه مبدأ را انتخاب کنید',
                        oldOriginAirportId
                    );

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

                    await loadAirports(
                        oldDestinationCityId,
                        '#destination_airport_id',
                        'فرودگاه مقصد را انتخاب کنید',
                        oldDestinationAirportId
                    );
                }

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

                    resetLocations();


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

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

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

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

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

                        return;
                    }


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

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

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

                        return;
                    }

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

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


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

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

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

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

                    loadAirports(
                        cityId,
                        '#origin_airport_id',
                        'فرودگاه مبدأ را انتخاب کنید'
                    );
                });


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

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

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

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

                    loadAirports(
                        cityId,
                        '#destination_airport_id',
                        'فرودگاه مقصد را انتخاب کنید'
                    );
                });

                $('#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 (readerEvent) {
                            container.append(`
                    <div class="image-preview-item position-relative"
                         style="width:150px; height:150px;">

                        <img src="${readerEvent.target.result}"
                             alt="پیش‌نمایش تصویر"
                             style="
                                width:100%;
                                height:100%;
                                object-fit:cover;
                                border-radius:8px;
                             ">
                    </div>
                `);
                        };

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

                $('#deleteImageModal').on('show.bs.modal', function (event) {
                    const button = $(event.relatedTarget);
                    const imageId = button.data('image-id');

                    const deleteUrl = deleteImageRoute.replace(
                        '__IMAGE_ID__',
                        imageId
                    );

                    $('#deleteImageForm').attr('action', deleteUrl);
                });

                loadInitialLocations();
            });
        </script>
    @endpush

@endsection