@extends('layouts.app')

@section('title', 'ثبت نام | آژانس مسافرتی')

@section('content')

    <div class="auth-page">

        <div class="container">

            <div class="auth-card register-card">

                {{-- =========================================
                     عنوان
                ========================================== --}}

                <div class="auth-header">

                    <div class="auth-icon">
                        <i class="fa fa-user-plus"></i>
                    </div>

                    <h1>
                        ایجاد حساب کاربری
                    </h1>

                    <p>
                        برای استفاده از امکانات سایت، اطلاعات خود را وارد کنید.
                    </p>

                </div>


                {{-- =========================================
                     خطاهای کلی
                ========================================== --}}

                @if($errors->any())

                    <div class="auth-alert auth-alert-danger">

                        <i class="fa fa-exclamation-circle"></i>

                        <div>

                            <strong>
                                لطفاً خطاهای زیر را بررسی کنید:
                            </strong>

                            <ul>

                                @foreach($errors->all() as $error)

                                    <li>
                                        {{ $error }}
                                    </li>

                                @endforeach

                            </ul>

                        </div>

                    </div>

                @endif


                {{-- =========================================
                     فرم ثبت نام
                ========================================== --}}

                <form
                    action="{{ route('auth.register.post') }}"
                    method="POST"
                    enctype="multipart/form-data"
                    class="auth-form"
                >

                    @csrf


                    {{-- =====================================
                         اطلاعات شخصی
                    ====================================== --}}

                    <div class="form-section">

                        <div class="form-section-title">

                            <i class="fa fa-user"></i>

                            اطلاعات شخصی

                        </div>


                        <div class="row">


                            {{-- نام --}}
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label for="first_name">
                                        نام
                                        <span>*</span>
                                    </label>

                                    <input
                                        type="text"
                                        id="first_name"
                                        name="first_name"
                                        value="{{ old('first_name') }}"
                                        class="form-control"
                                        placeholder="نام خود را وارد کنید"
                                        maxlength="100"
                                        required
                                    >
                                    @error('first_name')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror
                                </div>


                            </div>


                            {{-- نام خانوادگی --}}
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label for="last_name">
                                        نام خانوادگی
                                        <span>*</span>
                                    </label>

                                    <input
                                        type="text"
                                        id="last_name"
                                        name="last_name"
                                        value="{{ old('last_name') }}"
                                        class="form-control"
                                        placeholder="نام خانوادگی خود را وارد کنید"
                                        maxlength="100"
                                        required
                                    >
                                    @error('last_name')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror
                                </div>


                            </div>


                            {{-- کد ملی --}}
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label for="national_code">
                                        کد ملی
                                        <span>*</span>
                                    </label>

                                    <input
                                        type="text"
                                        id="national_code"
                                        name="national_code"
                                        value="{{ old('national_code') }}"
                                        class="form-control"
                                        placeholder="مثلاً 0012345678"
                                        maxlength="10"
                                        inputmode="numeric"
                                        required
                                    >
                                    @error('national_code')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror
                                </div>


                            </div>


                            {{-- جنسیت --}}
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label for="gender">
                                        جنسیت
                                        <span>*</span>
                                    </label>

                                    <select
                                        id="gender"
                                        name="gender"
                                        class="form-control"
                                        required
                                    >

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

                                        <option
                                            value="1"
                                            {{ old('gender') == 1 ? 'selected' : '' }}
                                        >
                                            مرد
                                        </option>

                                        <option
                                            value="2"
                                            {{ old('gender') == 2 ? 'selected' : '' }}
                                        >
                                            زن
                                        </option>

                                    </select>

                                </div>

                            </div>


                            {{-- وضعیت تأهل --}}
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label for="marital_status">
                                        وضعیت تأهل
                                        <span>*</span>
                                    </label>

                                    <select
                                        id="marital_status"
                                        name="marital_status"
                                        class="form-control"
                                        required
                                    >

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

                                        <option
                                            value="1"
                                            {{ old('marital_status') == 1 ? 'selected' : '' }}
                                        >
                                            مجرد
                                        </option>

                                        <option
                                            value="2"
                                            {{ old('marital_status') == 2 ? 'selected' : '' }}
                                        >
                                            متأهل
                                        </option>

                                        <option
                                            value="3"
                                            {{ old('marital_status') == 3 ? 'selected' : '' }}
                                        >
                                            متارکه
                                        </option>

                                    </select>

                                </div>

                            </div>


                            {{-- نام همسر --}}
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label for="spouse_name">
                                        نام و نام خانوادگی همسر
                                    </label>

                                    <input
                                        type="text"
                                        id="spouse_name"
                                        name="spouse_name"
                                        value="{{ old('spouse_name') }}"
                                        class="form-control"
                                        placeholder="در صورت تأهل وارد کنید"
                                        maxlength="200"
                                    >
                                    @error('spouse_name')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror
                                </div>


                            </div>


                        </div>

                    </div>


                    {{-- =====================================
                         اطلاعات تماس
                    ====================================== --}}

                    <div class="form-section">

                        <div class="form-section-title">

                            <i class="fa fa-phone"></i>

                            اطلاعات تماس

                        </div>


                        <div class="row">


                            {{-- موبایل --}}
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label for="mobile">
                                        شماره همراه
                                        <span>*</span>
                                    </label>

                                    <input
                                        type="text"
                                        id="mobile"
                                        name="mobile"
                                        value="{{ old('mobile') }}"
                                        class="form-control"
                                        placeholder="09123456789"
                                        maxlength="11"
                                        inputmode="numeric"
                                        required
                                    >
                                    @error('mobile')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror
                                </div>


                            </div>


                            {{-- ایمیل --}}
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label for="email">
                                        ایمیل
                                        <span>*</span>
                                    </label>

                                    <input
                                        type="email"
                                        id="email"
                                        name="email"
                                        value="{{ old('email') }}"
                                        class="form-control"
                                        placeholder="example@email.com"
                                        maxlength="150"
                                        dir="ltr"
                                        required
                                    >
                                    @error('email')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror
                                </div>


                            </div>


                        </div>

                    </div>


                    {{-- =====================================
                         اطلاعات حساب
                    ====================================== --}}

                    <div class="form-section">

                        <div class="form-section-title">

                            <i class="fa fa-lock"></i>

                            اطلاعات حساب کاربری

                        </div>


                        <div class="row">


                            {{-- نام کاربری --}}
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label for="username">
                                        نام کاربری
                                        <span>*</span>
                                    </label>

                                    <input
                                        type="text"
                                        id="username"
                                        name="username"
                                        value="{{ old('username') }}"
                                        class="form-control"
                                        placeholder="مثلاً ali123"
                                        maxlength="100"
                                        dir="ltr"
                                        pattern="[A-Za-z0-9]+"
                                        required
                                    >
                                    @error('username')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror

                                    <small class="form-help">
                                        فقط حروف انگلیسی و اعداد مجاز است.
                                    </small>

                                </div>


                            </div>


                            {{-- رمز --}}
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label for="password">
                                        رمز عبور
                                        <span>*</span>
                                    </label>

                                    <input
                                        type="password"
                                        id="password"
                                        name="password"
                                        class="form-control"
                                        placeholder="رمز عبور"
                                        minlength="8"
                                        required
                                    >

                                </div>

                            </div>


                            {{-- تکرار رمز --}}
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label for="password_confirmation">
                                        تکرار رمز عبور
                                    </label>

                                    <input
                                        type="password"
                                        id="password_confirmation"
                                        name="password_confirmation"
                                        class="form-control"
                                        placeholder="تکرار رمز عبور"
                                        minlength="8"
                                    >

                                </div>

                            </div>


                        </div>

                    </div>


                    {{-- =====================================
                         استان و شهرستان
                    ====================================== --}}

                    <div class="form-section">

                        <div class="form-section-title">

                            <i class="fa fa-map-marker"></i>

                            محل سکونت

                        </div>


                        <div class="row">


                            {{-- استان --}}
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label for="province_id">
                                        استان
                                    </label>

                                    <select
                                        name="province_id"
                                        id="province_id"
                                        class="form-control"
                                    >

                                        <option value="">
                                            انتخاب استان
                                        </option>

                                        @if(isset($provinces))

                                            @foreach($provinces as $province)

                                                <option
                                                    value="{{ $province->id }}"
                                                    {{ old('province_id') == $province->id ? 'selected' : '' }}
                                                >
                                                    {{ $province->name }}
                                                </option>

                                            @endforeach

                                        @endif

                                    </select>

                                </div>

                            </div>


                            {{-- شهرستان --}}
                            <div class="col-md-6">

                                <div class="form-group">

                                    <label for="city_id">
                                        شهرستان
                                    </label>

                                    <select
                                        name="city_id"
                                        id="city_id"
                                        class="form-control"
                                    >

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

                                    </select>

                                </div>

                            </div>


                        </div>

                    </div>


                    {{-- =====================================
                         عکس
                    ====================================== --}}

                    <div class="form-section">

                        <div class="form-section-title">

                            <i class="fa fa-image"></i>

                            تصویر پروفایل

                        </div>


                        <div class="form-group">

                            <label for="image">
                                عکس
                            </label>

                            <input
                                type="file"
                                id="image"
                                name="image"
                                class="form-control"
                                accept="image/jpeg,image/png,image/jpg"
                            >
                            @error('image')
                            <span style="color: red">{{ $message }}</span>
                            @enderror

                            <small class="form-help">

                                فرمت‌های مجاز:
                                JPG ، JPEG ، PNG

                                <br>

                                حداکثر حجم:
                                800 کیلوبایت

                            </small>

                        </div>


                    </div>


                    {{-- =====================================
                         دکمه ثبت
                    ====================================== --}}

                    <div class="auth-submit">

                        <button
                            type="submit"
                            class="auth-btn"
                        >

                            <i class="fa fa-user-plus"></i>

                            ایجاد حساب کاربری

                        </button>

                    </div>


                </form>


                {{-- =====================================
                     ورود
                ====================================== --}}

                <div class="auth-footer">

                    قبلاً حساب ساخته‌اید؟

                    <a href="{{ route('auth.login.index') }}">
                        وارد شوید
                    </a>

                </div>

            </div>

        </div>

    </div>

@endsection

@push('scripts')

    <script>
        document.addEventListener('DOMContentLoaded', function () {

            const provinceSelect = document.getElementById('province_id');
            const citySelect = document.getElementById('city_id');

            provinceSelect.addEventListener('change', function () {

                const provinceId = this.value;

                // پاک کردن شهرستان‌ها
                citySelect.innerHTML = `
                <option value="">
                    در حال دریافت شهرستان‌ها...
                </option>
            `;

                if (!provinceId) {

                    citySelect.innerHTML = `
                    <option value="">
                        ابتدا استان را انتخاب کنید
                    </option>
                `;

                    return;
                }

                fetch(`/auth/register/provinces/${provinceId}/cities`)
                    .then(response => {

                        if (!response.ok) {
                            throw new Error('خطا در دریافت شهرستان‌ها');
                        }

                        return response.json();
                    })
                    .then(cities => {

                        citySelect.innerHTML = `
                        <option value="">
                            انتخاب شهرستان
                        </option>
                    `;

                        if (cities.length === 0) {

                            citySelect.innerHTML = `
                            <option value="">
                                شهرستانی برای این استان پیدا نشد
                            </option>
                        `;

                            return;
                        }

                        cities.forEach(city => {

                            const option = document.createElement('option');

                            option.value = city.id;
                            option.textContent = city.name;

                            citySelect.appendChild(option);
                        });

                    })
                    .catch(error => {

                        console.error(error);

                        citySelect.innerHTML = `
                        <option value="">
                            خطا در دریافت شهرستان‌ها
                        </option>
                    `;
                    });

            });

        });
    </script>

@endpush