@extends('auth.layouts.app')

@section('meta_title', "انشاء حساب")

@section('content')

    <div class="mb-5 text-center">
        <h2 class="fw-bold">{{ __('app.Signup') }}</h2>

        @include('website.components.success-submit')
        @include('website.components.error-submit')
    </div>

    <form action="{{ route('register.post') }}" method="POST">
        @csrf
        
        <div class="mb-3">
            <div class="form-floating">
                <input type="text" name="name" value="{{ old('name') }}" id="name" class="form-control @error('name') is-invalid @enderror" placeholder="" required>
                <label for="name">{{ __('labels.Name') }}</label>
            </div>

            @include('website.components.invalid-input', ['name' => 'name'])
        </div>

        <div class="mb-3">
            <div class="form-floating">
                <input type="text" name="email" value="{{ old('email') }}" id="email" class="form-control @error('email') is-invalid @enderror" placeholder="" required>
                <label for="email">{{ __('labels.Email') }}</label>
            </div>

            @include('website.components.invalid-input', ['name' => 'email'])
        </div>

        <div class="mb-3">
            <div class="form-input-country-phone">
                <div class="form-floating flex-fill">
                    <input type="tel" name="phone" value="{{ old('phone') }}" id="phone" class="form-control @error('phone') is-invalid @enderror" placeholder="برجاء التاكد من صحة الرقم لاستخدامه فى التواصل مع العملاء" required>
                    <label for="email">{{ __('labels.Phone') }}</label>
                </div>

                <div>
                    <select name="country_code" class="form-select py-2 select2 country-code-select" style="max-width: 40%">
                        @foreach ($countries as $country)
                            <option value="{{ $country->code }}" data-icon="{{ $country->flag }}" data-name="{{ $country->name }}" @if(old('country_code', 20) == $country->code) selected @endif>
                                +{{ $country->code }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            @include('website.components.invalid-input', ['name' => 'country_code'])
            @include('website.components.invalid-input', ['name' => 'phone'])
        </div>

        <div class="mb-3">
            <div class="input-group">
                <div class="form-floating">
                    <input type="password" id="password" name="password" id="password" class="form-control @error('password') is-invalid @enderror" placeholder="" required />
                    <label for="password">{{ __('labels.Password') }}</label>
                </div>

                <span class="input-group-text" onclick="togglePasswordVisibility('password', this)">
                    <i class="show-password fa-solid fa-eye"></i>
                </span>
            </div>

            @include('website.components.invalid-input', ['name' => 'password'])
        </div>

        <div class="mb-4">
            <div class="input-group">
                <div class="form-floating">
                    <input type="password" name="password_confirmation" id="password_confirmation" class="form-control @error('password_confirmation') is-invalid @enderror" placeholder="" required />
                    <label for="password_confirmation">{{ __('labels.Confirm password') }}</label>
                </div>

                <span class="input-group-text" onclick="togglePasswordVisibility('password_confirmation', this)">
                    <i class="show-password fa-solid fa-eye"></i>
                </span>
            </div>

            @include('website.components.invalid-input', ['name' => 'password_confirmation'])
        </div>

        <div class="d-grid gap-3">
            <p class="fs-14 mb-0">
                ملحوظة: برجاء التاكد من صحة رقم الهاتف و وجود حساب واتساب للتواصل مع العملاء
            </p>

            <button type="submit" class="btn btn-primary fw-bold">{{ __('app.Signup') }}</button>

            <div class="lh-lg">
                <div class="text-center fs-14">
                    {{ __('app.messages.Already have account') }} 
                    <a href="{{ route('login') }}" class="text-primary text-decoration-underline fw-bold">{{ __('app.Signin') }}</a>
                </div>

                <div class="text-center fs-14">
                    عودة ل 
                    <a href="{{ route('website.index') }}" class="text-primary text-decoration-underline fw-bold">{{ __('app.Home') }}</a>
                </div>
            </div>
        </div>
    </form>

@endsection