@extends('layouts.app')

@php
    use App\Enums\UserGender;
    use App\Enums\UserMaritalStatus;
@endphp

@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="{{ UserGender::MALE->value }}"
                                            {{ old('gender') == UserGender::MALE->value ? 'selected' : '' }}>
                                            مرد
                                        </option>

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

                                        <option value="{{ UserGender::UNKNOWN->value }}"
                                            {{ old('gender') == UserGender::UNKNOWN->value ? 'selected' : '' }}>
                                            نامشخص
                                        </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="{{ UserMaritalStatus::SINGLE->value }}"
                                                {{ old('marital_status') == UserMaritalStatus::SINGLE->value ? 'selected' : '' }}>
                                                مجرد
                                            </option>

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

                                            <option value="{{ UserMaritalStatus::SEPARATED->value }}"
                                                {{ old('marital_status') == UserMaritalStatus::SEPARATED->value ? 'selected' : '' }}>
                                                متارکه
                                            </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>
                                        <i class="far fa-map-marker"></i>
                                    </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