@extends('auth.main')

@section('content-auth')
<form method="POST" id="form-register" action="{{ route('register') }}">
    @csrf
    <input id="input-timezone" type="hidden" name="timezone" />
    <div class="row">
        <div class="col-md-8 p-0 m-0 pe-1">
            <div class="form-floating mb-3">
                <input id="name" type="text" class="form-control @error('name') is-invalid @enderror"
                    placeholder="" name="name" value="{{ old('name') }}" required autocomplete="name"
                    autofocus>
                @error('name')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
                <label for="floatingInput">{{ __('validation.attributes.name') }}<span class="text-danger">*</span></label>
            </div>
        </div>
        <div class="col-md-4 p-0 m-0 pe-1">
            <div class="form-floating mb-3">
                <input id="login" type="text" class="form-control @error('login') is-invalid @enderror"
                    placeholder="" name="login" value="{{ old('login') }}" required autocomplete="login"
                    autofocus onkeyup="this.value=this.value.replace(/\s/g,'')">
                @error('login')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
                <label for="floatingInput">{{ __('general.user') .' '. __('validation.attributes.name') }}<span class="text-danger">*</span></label>
            </div>
        </div>
        <div class="col-md-6 p-0 m-0 pe-1">
            <div class="form-floating mb-3">
                <input id="email" type="email"
                    class="form-control @error('email') is-invalid @enderror" placeholder=""
                    name="email" value="{{ old('email') }}" required autocomplete="email" onkeyup="this.value=this.value.replace(/\s/g,'')">
                @error('email')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
                <label for="floatingEmail">{{__('validation.attributes.email')}}<span class="text-danger">*</span></label>
            </div>
        </div>
        <div class="col-md-6 p-0 m-0 pe-1">
            <div class="form-floating mb-3">
                <input id="phone" type="number" placeholder=""
                    maxlength="12"
                    class="form-control @error('phone') is-invalid @enderror" name="phone"
                    value="{{ old('phone') }}" required autocomplete="phone" >
                @error('phone')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
                <label for="floatingPhone">{{__('validation.attributes.phone')}}<span class="text-danger">*</span></label>
            </div>
        </div>
        <div class="col-md-6 p-0 m-0 pe-1">
            <div class="form-floating mb-3">
                <input type="password" class="form-control @error('password') is-invalid @enderror" placeholder="" name="password" required autocomplete="new-password">
                @error('password')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
                <label for="floatingPassword">{{__('validation.attributes.password')}}
            </div>
        </div>
        <div class="col-md-6 p-0 m-0 pe-1">
            <div class="form-floating mb-3">
                <input type="password" class="form-control" id="password_confirmation" name="password_confirmation" placeholder=""
                    required autocomplete="new-password">
                @error('password_confirmation')
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
                @enderror
                <label for="floatingEmail">
                    {{__('validation.attributes.confirm_password')}}</label>
            </div>
        </div>
        <div class="col-12 p-0 m-0 pe-1">
             <button type="submit" id="submit-register" class="btn btn-outline-success w-100 btn-block">
                <i class="fa fa-fw fa-sign-in-alt me-1"></i> {{ __('general.register') }}
            </button>
            <hr class="my-4">
            <div class="d-flex justify-content-center align-items-center">
                <a href="/"
                    class="btn btn-sm btn-alt-success p-1 m-1 ">
                    <i class="fa fa-fw fa-sign-in-alt me-1"></i> {{ __('general.login') }}
                </a>
            </div>
        </div>
    </div>

</form>
@endsection
@push('scripts')
<script type="module">
    $(document).ready(function () {
        $('#input-timezone').val(moment.tz.guess())
    });

    let inputPass = document.getElementById("password_confirmation");
    // Execute a function when the user presses a key on the keyboard
    inputPass.addEventListener("keypress", function (event) {
        // If the user presses the "Enter" key on the keyboard
        if (event.key === "Enter") {
            // Cancel the default action, if needed
            event.preventDefault();
            // Trigger the button element with a click
            document.getElementById("submit-register").click();
        }
    });
</script>
@endpush