@extends('admin.layouts.app')

@section('breadcrumb')
    <div>
        <div>
            <h1 class="page-title fw-medium fs-18 mb-2">ایجاد تور جدید</h1>
            <div>
                <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>
        </div>
    </div>
@endsection

@section('content')
    <div class="container-fluid pt-4">
        <div class="row">
            <div class="col-xl-12">
                <form action="{{ route('admin.tours.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-6">
                                    <label class="form-label">عنوان تور <span class="text-danger">*</span></label>
                                    <input
                                        type="text"
                                        class="form-control"
                                        name="title"
                                        placeholder="مثال: تور تفریحی استانبول ویژه نوروز"
                                        value="{{ old('title') }}"
                                    />
                                    @error('title')
                                    <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" name="tour_scope">
                                        <option value="">یک مورد را انتخاب کنید</option>
                                        @foreach(\App\Enums\Tour\TourScope::cases() as $scope)
                                            <option
                                                value="{{ $scope->value }}" {{ old('tour_scope') == $scope->value ? 'selected' : '' }}>
                                                {{ method_exists($scope, 'label') ? $scope->label() : $scope->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('tour_scope')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-xl-6" id="countryWrapper" style="display:none;">
                                    <label class="form-label">کشور مقصد <span class="text-danger">*</span></label>
                                    <select class="form-control" id="country_id" disabled>
                                        <option value="">یک مورد را انتخاب کنید</option>
                                        @foreach($countries as $country)
                                            <option value="{{ $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" name="tour_mode">
                                        <option value="">یک مورد را انتخاب کنید</option>
                                        @foreach(\App\Enums\Tour\TourMode::cases() as $mode)
                                            <option
                                                value="{{ $mode->value }}" {{ old('tour_mode') == $mode->value ? 'selected' : '' }}>
                                                {{ method_exists($mode, 'label') ? $mode->label() : $mode->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('tour_mode')
                                    <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" name="tour_type">
                                        <option value="">یک مورد را انتخاب کنید</option>
                                        @foreach(\App\Enums\Flight\TourType::cases() as $type)
                                            <option
                                                value="{{ $type->value }}" {{ old('tour_type') == $type->value ? 'selected' : '' }}>
                                                {{ method_exists($type, 'label') ? $type->label() : $type->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('tour_type')
                                    <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">
                                        <option value="">شهر مبدا را انتخاب کنید</option>
                                        @foreach($cities as $city)
                                            <option
                                                value="{{ $city->id }}" {{ old('origin_city_id') == $city->id ? 'selected' : '' }}>
                                                {{ $city->name }}
                                            </option>
                                        @endforeach
                                    </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">
                                        <option value="">شهر مقصد را انتخاب کنید</option>
                                        @foreach($cities as $city)
                                            <option
                                                value="{{ $city->id }}" {{ old('destination_city_id') == $city->id ? 'selected' : '' }}>
                                                {{ $city->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('destination_city_id')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>


                                <div class="col-xl-12">
                                    <label class="form-label">خلاصه تور</label>
                                    <textarea class="form-control" name="summary" rows="2"
                                              placeholder="توضیح کوتاه و جذاب در مورد تور...">{{ old('summary') }}</textarea>
                                    @error('summary')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-xl-12">
                                    <label class="form-label">توضیحات کامل و برنامه سفر</label>
                                    <textarea class="form-control" name="description" rows="5"
                                              placeholder="جزئیات برنامه سفر، خدمات تور و توضیحات تکمیلی...">{{ old('description') }}</textarea>
                                    @error('description')
                                    <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">تاریخ رفت (شروع)</label>
                                    <input type="text" id="startDateInput" class="form-control" name="start_date"
                                           placeholder="تاریخ رفت را وارد کنید" value="{{ old('start_date') }}">
                                    @error('start_date')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-xl-3">
                                    <label class="form-label">تاریخ برگشت (پایان)</label>
                                    <input type="text" id="endDateInput" class="form-control" name="end_date"
                                           placeholder="تاریخ برگشت را وارد کنید" value="{{ old('end_date') }}">
                                    @error('end_date')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-xl-3">
                                    <label class="form-label">قیمت (تومان)</label>
                                    <input type="text" class="form-control" name="price" placeholder="مثال: ۱۵۰۰۰۰۰۰"
                                           value="{{ old('price') }}">
                                    @error('price')
                                    <span class="text-danger small">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="col-xl-3">
                                    <label class="form-label">ظرفیت مسافر</label>
                                    <input type="number" class="form-control" name="capacity" placeholder="مثال: ۳۰"
                                           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></div>
                                    <small style="color:#999;">JPG / PNG / WEBP</small>
                                </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">
                            <button type="submit" class="btn btn-primary">ثبت و ایجاد تور</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @push('scripts')
        <script>
            $(document).ready(function () {

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

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

                const originalDestHtml = $('select[name="destination_city_id"]').html();

                function toggleScopeUI() {
                    const scope = $('select[name="tour_scope"]').val();

                    if (scope === '1') {
                        $('#countryWrapper').show();
                        $('#country_id').prop('disabled', false);
                    } else {
                        $('#countryWrapper').hide();
                        $('#country_id').prop('disabled', true).val('');

                        $('select[name="destination_city_id"]').html(originalDestHtml).trigger('change');
                    }
                }

                $('select[name="tour_scope"]').on('change', toggleScopeUI);
                toggleScopeUI();

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

                    if (!countryId) return;

                    $.get(`/admin/tours/cities-by-country/${countryId}`, function (cities) {
                        let options = '<option value="">شهر را انتخاب کنید</option>';
                        cities.forEach(function (city) {
                            options += `<option value="${city.id}">${city.name}</option>`;
                        });

                        $('select[name="destination_city_id"]').html(options).trigger('change');
                    }).fail(function () {
                        alert('خطا در دریافت لیست شهرهای این کشور');
                    });
                });

            });
        </script>
    @endpush
@endsection