@extends('layouts.auth')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">
    <style>
        .iti__country-list {
            background-color: #1a1c1e;
        }

        .iti__divider {
            border-bottom: 1px solid #fff;
        }

        .iti__country.iti__highlight {
            background-color: #1a99ae;
        }

        .iti.iti--allow-dropdown.iti--show-flags {
            width: 100%;
        }

        @media (min-width: 1400px) {
            .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
                    max-width: 1620px;
            }
        }

        @media (min-width: 1200px) {
            .container, .container-lg, .container-md, .container-sm, .container-xl {
                max-width: 1640px;
            }
        }
    </style>
@endsection

@section('content')
    <!-- CONTAINER OPEN -->
    <div class="container-lg">
        <div class="row justify-content-center mt-4 mx-0">
            <div class="col-xl-4 col-lg-6">
                <div class="card shadow-none">
                    <div class="card-body p-sm-6">
                        <div class="mb-4">
                            <div class="text-center">
                                <a href="/"><img src="{{asset('build/assets/images/brand/desktop-dark.png')}}" class="header-brand-img" alt=""></a>
                            </div>
                        </div>

                        <div class="text-center mb-4">
                            <h4 class="mb-1">Join the Winning Team! 🥇</h4>
                            <p>Sign up and let the adventure begin!</p>
                        </div>

                        <form method="POST" action="{{ route('register') }}" id="submit-form">
                            @csrf
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="mb-3">
                                        <label class="mb-2 fw-500">First Name <span class="text-danger ms-1">*</span></label>
                                        <input type="text" name="name" class="form-control ms-0 @error('name') is-text-invalid is-invalid @enderror" placeholder="Enter your Name" value="{{ old('name') }}">

                                        @error('name')
                                            <span class="invalid-feedback d-block" role="alert">
                                                {{ $message }}
                                            </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-sm-6">
                                    <div class="mb-3">
                                        <label class="mb-2 fw-500">Last Name <span class="text-danger ms-1">*</span></label>
                                        <input type="text" name="last_name" class="form-control ms-0 @error('last_name') is-text-invalid is-invalid @enderror" placeholder="Enter your Last Name" value="{{ old('last_name') }}">

                                        @error('last_name')
                                            <span class="invalid-feedback d-block" role="alert">
                                                {{ $message }}
                                            </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-sm-12">
                                    <div class="mb-3">
                                        <label class="mb-2 fw-500">Email<span class="text-danger ms-1">*</span></label>
                                        <input class="form-control ms-0 @error('email') is-text-invalid is-invalid @enderror" name="email" type="email" placeholder="Enter your Email" value="{{ old('email') }}">

                                        @error('email')
                                            <span class="invalid-feedback d-block" role="alert">
                                                {{ $message }}
                                            </span>
                                        @enderror
                                    </div>
                                </div>

                                <div class="col-sm-12">
                                    <div class="mb-3">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <label class="form-label">Phone <span class="text-danger ms-1">*</span></label>
                                                <input type="tel" name="phone" id="phone" class="form-control @error('phone') is-invalid is-text-invalid @enderror" value="{{ old('phone') }}">

                                                <span id="phone-validation" class="invalid-feedback d-block" role="alert">
                                                    <p id="output" class="d-none mb-0">Please enter a valid number below</p>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-12">
                                    <div class="mb-3">
                                        <label class="mb-2 fw-500">Create a Password<span class="text-danger ms-1">*</span></label>
                                        <div class="input-group has-validation">
                                            <input type="password" name="password" class="@error('password') is-text-invalid is-invalid @enderror form-control ms-0 border-end-0" placeholder="Create a Password" id="signup-password" value="{{ old('password') }}">
                                            <button class="btn btn-light" onclick="createpassword('signup-password',this)" type="button" id="button-addon2"><i class="ri-eye-off-line align-middle"></i></button>

                                            @error('password')
                                                <span class="invalid-feedback d-block" role="alert">
                                                    {{ $message }}
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-12 mb-4">
                                    <div class="mb-3">
                                        <label class="mb-2 fw-500">Confirm Password<span class="text-danger ms-1">*</span></label>
                                        <div class="input-group has-validation">
                                            <input type="password" name="password_confirmation" class="@error('password_confirmation') is-text-invalid is-invalid @enderror form-control ms-0 border-end-0" placeholder="Confirm your Password" id="signup-confirmpassword" value="{{ old('password_confirmation') }}">
                                            <button type="button" class="btn btn-light" onclick="createpassword('signup-confirmpassword',this)" id="button-addon21"><i class="ri-eye-off-line align-middle"></i></button>

                                            @error('password_confirmation')
                                                <span class="invalid-feedback d-block" role="alert">
                                                    {{ $message }}
                                                </span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-12">
                                    <div class="d-grid mb-3">
                                        <button type="submit" class="btn btn-primary"> Create an Account</button>
                                    </div>
                                    <div class="text-center">
                                        <p class="mb-0 tx-14">Already have an account ?
                                            <a href="{{ route('get.login') }}" class="tx-primary ms-1 text-decoration-underline">Login</a>
                                        </p>
                                    </div>
                                </div>
                                <p class="text-center mt-3 mb-2">Signup with</p>
                                <div class="d-flex justify-content-center">
                                    <div class="btn-list">
                                        <button class="btn btn-icon bg-primary-transparent rounded-pill border-0" type="button">
                                            <span class="btn-inner--icon"><i class="fa fa-facebook"></i></span>
                                        </button>
                                        <button class="btn btn-icon bg-primary-transparent rounded-pill border-0" type="button">
                                                <span class="btn-inner--icon"><i class="fa fa-google"></i></span>
                                            </button>
                                        <button class="btn btn-icon bg-primary-transparent rounded-pill border-0" type="button">
                                                <span class="btn-inner--icon"><i class="fa fa-twitter"></i></span>
                                            </button>
                                        <button class="btn btn-icon bg-primary-transparent rounded-pill border-0" type="button">
                                                <span class="btn-inner--icon"><i class="fa fa-linkedin"></i></span>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <input type="hidden" name="full_phone" id="full_phone">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- CONTAINER CLOSED -->
@endsection

@section('scripts')
    <script>
        var translations = {
            validNumber: "{{ trans('global.js_strings.valid_number', ['number' => ':number']) }}",
            invalidNumber: "{{ trans('global.js_strings.invalid_number') }}",
            pleaseValid: "{{ trans('global.js_strings.please_enter_valid_number') }}",
        };
    </script>
    
	<!-- Show Password JS -->
    <script src="{{asset('build/assets/show-password.js')}}"></script>

    <!-- IntelTel JS -->
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>
    <script src="{{ asset('assets/js/auth/intelTel.js')}}"></script>
@endsection