@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-6 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"
                                           placeholder="نام خود را وارد کنید"
                                           value="{{ old('first_name') }}">
                                    <i class="far fa-user"></i>
                                </div>
                                @error('first_name')
                                <span class="text-danger">{{ $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"
                                           placeholder="نام خانوادگی خود را وارد کنید"
                                           value="{{ old('last_name') }}">
                                    <i class="far fa-user"></i>
                                </div>
                                @error('last_name')
                                <span class="text-danger">{{ $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"
                                           placeholder="نام کاربری خود را وارد کنید"
                                           value="{{ old('username') }}">
                                    <i class="far fa-user"></i>
                                </div>
                                @error('username')
                                <span class="text-danger">{{ $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"
                                           placeholder="کد ملی خود را وارد کنید"
                                           value="{{ old('national_code') }}">
                                    <i class="far fa-id-card"></i>
                                </div>
                                @error('national_code')
                                <span class="text-danger">{{ $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"
                                           placeholder="شماره همراه خود را وارد کنید"
                                           value="{{ old('mobile') }}">
                                    <i class="far fa-phone"></i>
                                </div>
                                @error('mobile')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>


                            <div class="form-group">
                                <label>جنسیت</label>
                                <div class="form-group-icon">
                                    <select name="gender" class="form-control">
                                        <option value="" selected>جنسیت را انتخاب کنید</option>
                                        <option value="{{ \App\Enums\UserGenderStatus::MALE->value }}"
                                            {{ old('gender') == \App\Enums\UserGenderStatus::MALE->value ? 'selected' : '' }}>
                                            مرد
                                        </option>

                                        <option value="{{ \App\Enums\UserGenderStatus::FEMALE->value }}"
                                            {{ old('gender') == \App\Enums\UserGenderStatus::FEMALE->value ? 'selected' : '' }}>
                                            زن
                                        </option>

                                        <option value="{{ \App\Enums\UserGenderStatus::UNKNOWN->value }}"
                                            {{ old('gender') == \App\Enums\UserGenderStatus::UNKNOWN->value ? 'selected' : '' }}>
                                            ترجیح می‌دهم نگویم
                                        </option>
                                    </select>
                                    <i class="far fa-venus-mars"></i>
                                </div>
                                @error('gender')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>


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

                                <div class="form-group-icon">
                                    <select name="marital_status" class="form-control">

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

                                        <option value="{{ \App\Enums\UserMaritalStatus::SINGLE }}"
                                            {{ old('marital_status') == \App\Enums\UserMaritalStatus::SINGLE ? 'selected' : '' }}>
                                            مجرد
                                        </option>

                                        <option value="{{ \App\Enums\UserMaritalStatus::MARRIED }}"
                                            {{ old('marital_status') == \App\Enums\UserMaritalStatus::MARRIED ? 'selected' : '' }}>
                                            متأهل
                                        </option>

                                        <option value="{{ \App\Enums\UserMaritalStatus::SEPARATED }}"
                                            {{ old('marital_status') == \App\Enums\UserMaritalStatus::SEPARATED ? 'selected' : '' }}>
                                            متارکه
                                        </option>

                                    </select>

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

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


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



                            <div class="form-group">
                                <label>
                                    استان
                                    <small class="text-muted">(اختیاری)</small>
                                </label>
                                <div class="form-group-icon">
                                    <select name="province_id" id="province_id" class="form-control">
                                        <option value="">استان خود را انتخاب کنید</option>
                                        @foreach($provinces as $province)
                                            <option value="{{ $province->id }}" @selected(old('province_id') == $province->id)>
                                                {{ $province->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <i class="far fa-map-marker-alt"></i>
                                </div>
                                @error('province_id')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>


                            <div class="form-group">
                                <label>
                                    شهرستان
                                    <small class="text-muted">(اختیاری)</small>
                                </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-alt"></i>
                                </div>
                                @error('city_id')
                                <span class="text-danger">{{ $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"
                                           placeholder="ایمیل خود را وارد کنید"
                                           value="{{ old('email') }}">
                                    <i class="far fa-envelope"></i>
                                </div>
                                @error('email')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>


                            <div class="form-group">
                                <label>
                                    عکس پروفایل
                                    <small class="text-muted">(اختیاری)</small>
                                </label>
                                <div class="form-group-icon">
                                    <input type="file"
                                           id="image"
                                           name="image"
                                           class="form-control"
                                           accept="image/*"
                                           value="{{ old('image') }}"
                                    >
                                    <i class="far fa-image"></i>
                                </div>
                                @error('file_id')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>


                            <div class="form-group">
                                <label>رمز عبور</label>
                                <div class="form-group-icon">
                                    <input type="password"
                                           id="password"
                                           name="password"
                                           class="form-control"
                                           placeholder="رمز عبور را وارد کنید">
                                    <i class="far fa-lock"></i>
                                </div>
                                @error('password')
                                <span class="text-danger">{{ $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 class="text-danger">{{ $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>

                        </form>

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

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

    </main>

    <script>
        document.getElementById('province_id').addEventListener('change', function () {
            const provinceId = this.value;
            const citySelect = document.getElementById('city_id');

            citySelect.innerHTML = '<option value="">در حال بارگذاری...</option>';

            if (!provinceId) {
                citySelect.innerHTML = '<option value="">ابتدا استان را انتخاب کنید</option>';
                return;
            }

            fetch(`/auth/cities-by-province/${provinceId}`)
                .then(response => response.json())
                .then(cities => {
                    citySelect.innerHTML = '<option value="">شهرستان خود را انتخاب کنید</option>';

                    cities.forEach(city => {
                        const option = document.createElement('option');
                        option.value = city.id;
                        option.textContent = city.name;
                        citySelect.appendChild(option);
                    });
                });
        });
    </script>
@endsection