@extends('layouts.app')


@section('content')
    <main class="main">
        <div class="site-breadcrumb" style="background: url({{asset('assets/img/breadcrumb/02.jpg')}})">
            <div class="container">
                <h2 class="breadcrumb-title">ثبت نام</h2>
                <ul class="breadcrumb-menu">
                    <li><a href="{{route('index')}}">صفحه اصلی</a></li>
                    <li class="active">ثبت نام</li>
                </ul>
            </div>
        </div>

        <div class="login-area py-120">
            <div class="container">
                <div class="col-md-5 mx-auto">
                    <div class="login-form">
                        <div class="login-header">
                            <img src="{{asset('assets/img/logo/logo-dark.png')}}" alt>
                            <p>حساب MyTrip خود را ایجاد کنید</p>
                        </div>
                        <form action="{{route('auth.register.post')}}"
                              method="POST"
                              enctype="multipart/form-data"
                        >
                            @csrf

                            <div class="form-group">
                                <label>نام</label>
                                <div class="form-group-icon">
                                    <input type="text"
                                           id="first_name"
                                           name="first_name"
                                           class="form-control"
                                           value="{{old('first_name')}}"
                                           placeholder="اسم شما">
                                    <i class="far fa-user"></i>
                                </div>
                                <!-- ERROR -->
                                @error('first_name')
                                <span style="color: red"> {{$message}}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label>نام خانوادگی</label>
                                <div class="form-group-icon">
                                    <input type="text"
                                           id="last_name"
                                           name="last_name"
                                           class="form-control"
                                           value="{{old('last_name')}}"
                                           placeholder="نام خانوادگی شما">
                                    <i class="far fa-user"></i>
                                </div>
                                <!-- ERROR -->
                                @error('last_name')
                                <span style="color: red"> {{$message}}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label>کد ملی</label>
                                <div class="form-group-icon">
                                    <input type="text"
                                           id="national_code"
                                           name="national_code"
                                           class="form-control"
                                           value="{{old('national_code')}}"
                                           placeholder="کد ملی خود را وارد کنید">
                                    <i class="far fa-user"></i>
                                </div>
                                <!-- ERROR -->
                                @error('national_code')
                                <span style="color: red"> {{$message}}</span>
                                @enderror
                            </div>

                            <div class="form-group">
                                <label>جنسیت</label>

                                <div class="form-group-icon">
                                    <select
                                        name="gender"
                                        id="gender"
                                        class="form-control"
                                    >
                                        <option value="">جنسیت خود را انتخاب کنید</option>

                                        <option value="{{ \App\Enums\UserGender::MALE->value }}"
                                            @selected(old('gender') == \App\Enums\UserGender::MALE->value  && old('gender') !== null) >
                                            مرد
                                        </option>

                                        <option value="{{ \App\Enums\UserGender::FEMALE->value }}"
                                            @selected(old('gender') == \App\Enums\UserGender::FEMALE->value && old('gender') !== null)>
                                            زن
                                        </option>

                                        <option value="{{ \App\Enums\UserGender::UNKNOWN->value }}"
                                            @selected(old('gender') == \App\Enums\UserGender::UNKNOWN->value && old('gender') !== null)>
                                            نامشخص
                                        </option>
                                    </select>

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

                                @error('gender')
                                <span style="color: red">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="form-group">

                                <div class="form-group">
                                    <label>وضعیت تأهل</label>

                                    <div class="form-group-icon">
                                        <select
                                            name="marital_status"
                                            id="marital_status"
                                            class="form-control"
                                        >
                                            <option value="">وضعیت تأهل خود را انتخاب کنید</option>

                                            <option value="{{\App\Enums\UserMaritalStatus::SINGLE->value }}"
                                                @selected(old('marital_status') == \App\Enums\UserMaritalStatus::SINGLE->value  && old('gender') !== null)>
                                                مجرد
                                            </option>

                                            <option value="{{\App\Enums\UserMaritalStatus::MARRIED->value }}"
                                                @selected(old('marital_status') == \App\Enums\UserMaritalStatus::SINGLE->value  && old('gender') !== null)>
                                                متأهل
                                            </option>

                                            <option value="{{ \App\Enums\UserMaritalStatus::SEPARATED->value }}"
                                                @selected(old('marital_status') == \App\Enums\UserMaritalStatus::SINGLE->value  && old('gender') !== null)>
                                                متارکه
                                            </option>
                                        </select>

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

                                    @error('marital_status')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label>
                                        نام و نام خانوادگی همسر
                                        (اختیاری)
                                    </label>
                                    <div class="form-group-icon">
                                        <input type="text"
                                               id="spouse_name"
                                               name="spouse_name"
                                               class="form-control"
                                               value="{{ old('spouse_name') }}"
                                               placeholder="نام و نام خانوادگی همسر خود را وارد کنید">
                                        <i class="far fa-user"></i>
                                    </div>
                                    @error('spouse_name')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label>شماره همراه</label>
                                    <div class="form-group-icon">
                                        <input type="text"
                                               id="mobile"
                                               name="mobile"
                                               class="form-control"
                                               value="{{ old('mobile') }}"
                                               placeholder="شماره همراه خود را وارد کنید">
                                        <i class="far fa-phone"></i>
                                    </div>
                                    @error('mobile')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label>آدرس ایمیل</label>
                                    <div class="form-group-icon">
                                        <input type="email"
                                               id="email"
                                               name="email"
                                               class="form-control"
                                               value="{{ old('email') }}"
                                               placeholder="ایمیل خود را وارد کنید">
                                        <i class="far fa-envelope"></i>
                                    </div>
                                    @error('email')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label>تصویر پروفایل
                                        (اختیاری)
                                    </label>

                                    <div class="form-group-icon">
                                        <input
                                            type="file"
                                            id="image "
                                            name="image"
                                            class="form-control"
                                            accept=".jpg,.jpeg,.png,.webp"
                                        >
                                        <i class="far fa-image"></i>
                                    </div>

                                    @error('image ')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label>نام کاربری</label>
                                    <div class="form-group-icon">
                                        <input type="text"
                                               id="username"
                                               name="username"
                                               class="form-control"
                                               value="{{ old('username') }}"
                                               placeholder="نام کاربری خود را وارد کنید">
                                        <i class="far fa-user"></i>
                                    </div>
                                    @error('username')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label>رمز عبور</label>
                                    <div class="form-group-icon">
                                        <input type="password"
                                               class="form-control"
                                               id="password"
                                               name="password"
                                               placeholder="رمز عبور را وارد کنید">
                                        <i class="far fa-lock"></i>
                                    </div>
                                    <!-- ERROR -->
                                    @error('password')
                                    <span style="color: red"> {{$message}}</span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label>تکرار رمز عبور
                                        (اختیاری)
                                    </label>
                                    <div class="form-group-icon">
                                        <input type="password"
                                               id="password_confirmation"
                                               name="password_confirmation"
                                               class="form-control"
                                               placeholder="رمز عبور را مجدداً وارد کنید">
                                        <i class="far fa-lock"></i>
                                    </div>

                                    @error('password_confirmation')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror
                                </div>
                                <div class="form-group">
                                    <label>
                                        استان
                                        (اختیاری)
                                    </label>
                                    <div class="form-group-icon">
                                        <select name="province_id"
                                                id="province_id"
                                                class="form-control">
                                            <option value="">استان خود را انتخاب کنید</option>
                                        </select>
                                    </div>

                                    @error('province_id')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label>
                                        شهرستان
                                        (اختیاری)
                                    </label>
                                    <div class="form-group-icon">
                                        <select name="city_id"
                                                id="city_id"
                                                class="form-control">

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

                                        </select>
                                        <i class="far fa-map-marker"></i>
                                    </div>

                                    @error('city_id')
                                    <span style="color: red">{{ $message }}</span>
                                    @enderror
                                </div>

                                <div class="d-flex align-items-center">
                                    <button type="submit" class="theme-btn"><i class="far fa-paper-plane"></i> ثبت نام
                                    </button>
                                </div>
                            </div>
                        </form>

                        <div class="login-footer">
                            <p>از قبل حساب کاربری دارید؟ <a href="{{route('auth.login.index')}}">وارد شدن.</a></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </main>
@endsection

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

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

        fetch('{{ asset('assets/data/iran-cities.json') }}')
            .then(response => response.json())
            .then(data => {

                const provinces = [];

                data.forEach(item => {

                    const exists = provinces.some(
                        province => province.id === item.provinceId
                    );

                    if (!exists) {
                        provinces.push({
                            id: item.provinceId,
                            name: item.provinceName
                        });
                    }
                });

                provinces.forEach(province => {

                    provinceSelect.innerHTML += `
                        <option value="${province.id}">
                            ${province.name}
                        </option>
                    `;

                });

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

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

                    const provinceId = this.value;

                    if (!provinceId) {
                        return;
                    }

                    const cities = data.filter(
                        item => item.provinceId === provinceId
                    );

                    cities.forEach(city => {

                        citySelect.innerHTML += `
                            <option value="${city.cityId}">
                                ${city.cityName}
                            </option>
                        `;

                    });

                });

            })
            .catch(error => {
                console.error('Error loading cities:', error);
            });

    });
</script>