@extends('partial.authLayout')
@section('content')
    {!! NoCaptcha::renderJs('fa') !!}
    <div class="container sp_top_50 sp_bottom_50">
        <div class="row">
            <div class="col-12">
                <div class="auth-register-section">
                    <div class="text-center sp_bottom_80">
                        <a href="/"><img src="{{ $config['logo'] ?? '/theme/img/logo/logo__3.png' }}" alt="{{ $config['site_title'] ?? '' }}"></a>
                    </div>
                    @if($errors->any())
                        <div class="alert alert-danger mb-0" role="alert">
                            {{ $errors->first() }}
                        </div>
                    @endif

                    @error('g-recaptcha-response')
                    <div class="alert alert-danger mt-2" role="alert">
                        {{ $message }}</div>
                    @enderror
                    <p class="h3 text-end mb-3">ورود | ثبت نام</p>
                    <form action="{{route('register')}}" method="post">
                        @csrf

                        <div class="row">
                            <div class="col-12 col-md-6">
                                <div class="auth-form mt-3">
                                    <label class="h6" for="first_name">* نام</label>
                                    <input type="text" class="form-control auth-input" name="first_name" id="first_name"
                                           placeholder="نام خود را وارد نمائید" value="{{ old('first_name') }}">
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="auth-form mt-3">
                                    <label class="h6" for="last_name">* نام خانوادگی</label>
                                    <input type="text" class="form-control auth-input" name="last_name" id="last_name"
                                           placeholder="نام خانوادگی خود را وارد نمائید" value="{{ old('last_name') }}">
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="auth-form mt-3">
                                    <label class="h6" for="email">ایمیل *</label>
                                    <input type="text" class="form-control auth-input" name="email" id="email"
                                           placeholder="ایمیل خود را وارد نمائید" value="{{ old('email') }}">
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="auth-form mt-3">
                                    <label class="h6" for="mobile">موبایل *</label>
                                    <input type="text" class="form-control auth-input" name="mobile" id="mobile"
                                           placeholder="شماره موبایل خود را وارد نمائید" value="{{ old('mobile') }}">
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="auth-form mt-3">
                                    <label class="h6" for="phone">شماره تماس *</label>
                                    <input type="text" class="form-control auth-input" name="phone" id="phone"
                                           placeholder="شماره تماس خود را وارد نمائید" value="{{ old('phone') }}">
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="auth-form mt-3">
                                    <label class="h6" for="national_code">کد ملی *</label>
                                    <input type="text" class="form-control auth-input" name="national_code"
                                           id="national_code"
                                           placeholder="کد ملی خود را وارد نمائید" value="{{ old('national_code') }}">
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="auth-form mt-3">
                                    <label class="h6" for="password">رمز عبور *</label>
                                    <input type="password" class="form-control auth-input" name="password" id="password"
                                           placeholder="رمز عبور خود را وارد نمائید">
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="auth-form mt-3">
                                    <label class="h6" for="password_confirmation">تایید رمز عبور *</label>
                                    <input type="password" class="form-control auth-input" name="password_confirmation"
                                           id="password_confirmation"
                                           placeholder="تایید رمز عبور خود را وارد نمائید">
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="auth-form mt-3">
                                    <label class="h6" for="user_name">تاریخ تولد *</label>
                                    <input type="text" class="form-control auth-input" name="user_name" id="user_name"
                                           placeholder="تاریخ تولد خود را وارد نمائید" value="{{ old('user_name') }}">
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="auth-form mt-3">
                                    <label class="h6" for="gender">جنسیت</label>
                                    <div class="gender-options">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="gender" id="genderMen"
                                                   value="men">
                                            <label class="form-check-label" for="genderMen">
                                                <i class="fa-duotone fa-mars"></i>
                                                آقا
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="gender" id="genderWomen"
                                                   value="women">
                                            <label class="form-check-label" for="genderWomen">
                                                <i class="fa-duotone fa-venus"></i>
                                                خانم
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mt-2 text-center">
                                {!! NoCaptcha::display() !!}

                            </div>
                        </div>

                        <div class="auth-form mt-4 w-100">
                            <button type="submit" class="w-100 btn btn-auth btn-block">عضویت</button>
                        </div>
                    </form>
                    <p class="primary__color mt-3 mb-0">
                        آیا در {{ $config['site_title'] ?? config('app.name') }} حساب کاربری دارید؟
                    </p>
                    <a href="{{route('customer.login')}}" class="secondary-color"> رفتن به حساب کاربری</a>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        /* Existing styles */

        /* Gender field styles */
        .gender-options {
            display: flex;
            gap: 2rem;
            margin-top: 0.5rem;
        }

        .form-check {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
        }

        .form-check-input {
            width: 1.2em;
            height: 1.2em;
            margin-top: 0;
            border: 2px solid var(--primaryColor);
            cursor: pointer;
        }

        .form-check-input:checked {
            background-color: var(--primaryColor);
            border-color: var(--primaryColor);
        }

        .form-check-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            font-size: 1rem;
            color: #333;
        }

        .form-check-label i {
            font-size: 1.2rem;
        }

        .form-check-label i.fa-mars {
            color: #2196F3;
        }

        .form-check-label i.fa-venus {
            color: #E91E63;
        }

        @media (max-width: 576px) {
            .gender-options {
                gap: 1rem;
            }
        }
        .g-recaptcha div {
            width: 100% !important;
        }

    </style>
@endpush