@extends('admin.layouts.app')

@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

                    @error('general')
                    <div class="alert alert-danger">
                        {{ $message }}
                    </div>
                    @enderror


                    <div class="card custom-card">

                        <div class="card-header">
                            <div class="card-title">
                                ایجاد تور
                            </div>
                        </div>


                        <div class="card-body">

                            <div class="row gy-3">

                                {{-- عنوان --}}
                                <div class="col-xl-6">

                                    <label class="form-label">
                                        عنوان تور
                                    </label>

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

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

                                </div>


                                {{-- مبدأ --}}
                                <div class="col-xl-3">

                                    <label class="form-label">
                                        مبدأ
                                    </label>

                                    <input
                                        type="text"
                                        class="form-control"
                                        name="origin"
                                        value="{{ old('origin') }}"
                                        placeholder="مبدأ"
                                    >

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

                                </div>


                                {{-- مقصد --}}
                                <div class="col-xl-3">

                                    <label class="form-label">
                                        مقصد
                                    </label>

                                    <input
                                        type="text"
                                        class="form-control"
                                        name="destination"
                                        value="{{ old('destination') }}"
                                        placeholder="مقصد"
                                    >

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

                                </div>


                                {{-- مدت تور --}}
                                <div class="col-xl-4">

                                    <label class="form-label">
                                        مدت تور
                                    </label>

                                    <input
                                        type="number"
                                        class="form-control"
                                        name="duration"
                                        value="{{ old('duration') }}"
                                        min="1"
                                        placeholder="تعداد روز"
                                    >

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

                                </div>


                                {{-- قیمت تور --}}
                                <div class="col-xl-4">

                                    <label class="form-label">
                                        قیمت تور
                                    </label>

                                    <input
                                        type="number"
                                        class="form-control"
                                        name="price"
                                        value="{{ old('price') }}"
                                        min="0"
                                        placeholder="قیمت به تومان"
                                    >

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

                                </div>


                                {{-- وضعیت تور --}}
                                <div class="col-xl-4">

                                    <label class="form-label">
                                        وضعیت تور
                                    </label>

                                    <select
                                        class="form-control"
                                        name="status"
                                    >

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

                                        <option
                                            value="{{ \App\Enums\TourStatus::ENABLE->value }}"
                                            @selected(
                                                old('status') ==
                                                \App\Enums\TourStatus::ENABLE->value
                                            )
                                        >
                                            فعال
                                        </option>

                                        <option
                                            value="{{ \App\Enums\TourStatus::DISABLE->value }}"
                                            @selected(
                                                old('status') ==
                                                \App\Enums\TourStatus::DISABLE->value
                                            )
                                        >
                                            غیرفعال
                                        </option>

                                    </select>

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

                                </div>


                                {{-- خلاصه --}}
                                <div class="col-xl-12">

                                    <label class="form-label">
                                        خلاصه تور
                                    </label>

                                    <textarea
                                        class="form-control"
                                        name="summary"
                                        rows="3"
                                        placeholder="خلاصه تور را وارد کنید"
                                    >{{ old('summary') }}</textarea>

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

                                </div>


                                {{-- توضیحات --}}
                                <div class="col-xl-12">

                                    <label class="form-label">
                                        توضیحات تور
                                    </label>

                                    <textarea
                                        class="form-control"
                                        name="descriptions"
                                        rows="5"
                                        placeholder="توضیحات کامل تور را وارد کنید"
                                    >{{ old('descriptions') }}</textarea>

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

                                </div>


                                {{-- تصویر --}}
                                <div class="col-xl-12">

                                    <label class="form-label">
                                        تصویر تور
                                    </label>

                                    <input
                                        type="file"
                                        class="form-control"
                                        name="image"
                                        accept=".jpg,.jpeg,.png,.webp"
                                    >

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

                                </div>


                                <hr class="mt-4">


                                {{-- اطلاعات تاریخ --}}
                                <div class="col-12">

                                    <h5 class="mb-3">
                                        اطلاعات تاریخ حرکت
                                    </h5>

                                </div>


                                {{-- تاریخ شروع --}}
                                <div class="col-xl-6">

                                    <label class="form-label">
                                        تاریخ شروع حرکت
                                    </label>

                                    {{-- تاریخ شروع --}}
                                    <input
                                        type="text"
                                        class="form-control"
                                        name="start_date_jalali"
                                        id="start_date_jalali"
                                        data-jdp
                                        data-jdp-min-date="today"
                                        data-jdp-target-value-input="#start_date"
                                        data-jdp-target-value-type="gregorian"
                                        autocomplete="off"
                                        placeholder="مثلاً 1405/06/01"
                                        value="{{ old('start_date_jalali') }}"
                                    >

                                    <input
                                        type="hidden"
                                        name="start_date"
                                        id="start_date"
                                        value="{{ old('start_date') }}"
                                    >

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

                                </div>


                                {{-- تاریخ پایان --}}
                                <div class="col-xl-6">

                                    <label class="form-label">
                                        تاریخ پایان حرکت
                                    </label>

                                    {{-- تاریخ پایان --}}
                                    <input
                                        type="text"
                                        class="form-control"
                                        name="end_date_jalali"
                                        id="end_date_jalali"
                                        data-jdp
                                        data-jdp-min-date="today"
                                        data-jdp-target-value-input="#end_date"
                                        data-jdp-target-value-type="gregorian"
                                        autocomplete="off"
                                        placeholder="مثلاً 1405/06/05"
                                        value="{{ old('end_date_jalali') }}"
                                    >

                                    <input
                                        type="hidden"
                                        name="end_date"
                                        id="end_date"
                                        value="{{ old('end_date') }}"
                                    >

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

                                </div>


                                {{-- قیمت تاریخ --}}
                                <div class="col-xl-4">

                                    <label class="form-label">
                                        قیمت این تاریخ
                                    </label>

                                    <input
                                        type="number"
                                        class="form-control"
                                        name="tour_date_price"
                                        value="{{ old('tour_date_price') }}"
                                        min="0"
                                        placeholder="قیمت"
                                    >

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

                                </div>


                                {{-- ظرفیت --}}
                                <div class="col-xl-4">

                                    <label class="form-label">
                                        ظرفیت
                                    </label>

                                    <input
                                        type="number"
                                        class="form-control"
                                        name="capacity"
                                        value="{{ old('capacity') }}"
                                        min="1"
                                        placeholder="ظرفیت"
                                    >

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

                                </div>


                                {{-- وضعیت تاریخ --}}
                                <div class="col-xl-4">

                                    <label class="form-label">
                                        وضعیت تاریخ حرکت
                                    </label>

                                    <select
                                        class="form-control"
                                        name="tour_date_status"
                                    >

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

                                        <option
                                            value="{{ \App\Enums\TourDateStatus::ENABLE->value }}"
                                            @selected(
                                                old('tour_date_status') ==
                                                \App\Enums\TourDateStatus::ENABLE->value
                                            )
                                        >
                                            فعال
                                        </option>

                                        <option
                                            value="{{ \App\Enums\TourDateStatus::DISABLE->value }}"
                                            @selected(
                                                old('tour_date_status') ==
                                                \App\Enums\TourDateStatus::DISABLE->value
                                            )
                                        >
                                            غیرفعال
                                        </option>

                                    </select>

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

                                </div>

                            </div>

                        </div>


                        {{-- Footer --}}
                        <div class="card-footer text-end">

                            <button
                                type="submit"
                                class="btn btn-primary"
                            >
                                ایجاد تور
                            </button>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>
    @push('js')

        <link
            rel="stylesheet"
            href="https://unpkg.com/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.css"
        >

        <script src="https://unpkg.com/@majidh1/jalalidatepicker/dist/jalalidatepicker.min.js"></script>

        <script>

            jalaliDatepicker.startWatch({
                date: true,
                time: true,
                hasSecond: false,
                targetValueInput: 'attr',
                targetValueType: 'attr'
            });

            // جلوگیری از انتخاب تاریخ پایان قبل از تاریخ شروع
            document.getElementById('start_date_jalali').addEventListener('change', function () {
                const endInput = document.getElementById('end_date_jalali');
                if (this.value) {
                    endInput.setAttribute('data-jdp-min-date', this.value);
                }
            });

            document
                .getElementById('imageInput')
                .addEventListener('change', function (event) {

                    const file = event.target.files[0];

                    if (!file) {
                        return;
                    }

                    const preview = document.getElementById('flightImagePreview');
                    const reader = new FileReader();

                    reader.onload = function (e) {
                        preview.src = e.target.result;
                    };

                    reader.readAsDataURL(file);

                });

        </script>

    @endpush

@endsection