@extends('frontend.layouts.master')
@section('style')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
          integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/19.5.5/css/intlTelInput.css"
          integrity="sha512-Hjsts+5q0OWXb6jem9SwlTyJKJpnAXrTtoKIzKeekwUFG6QesBqmr/5+NBXiimtCEUphi7Os72nrefhPbCYqtA=="
          crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <style>
        .iti {
            width: 100% !important;
        }
    </style>
@endsection
@section('content')
    <section class="section border-0 m-0 py-5">
        <div class="container-lg">
            <div class="row justify-content-center">
                <div class="col-md-10 col-lg-8">
                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <div class="card">
                        <div class="card-body">
                            <h2 class="font-weight-bold text-5 text-capitalize">{{ __("routes.register") }}</h2>
                            <form action="{{ route('register') }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="form-group col">
                                        <label for="first_name"
                                               class="form-label text-color-dark text-3">{{ __("routes.First Name") }}
                                            <span class="text-color-danger">*</span></label>
                                        <input placeholder="{{ __("routes.Enter your First Name") }}" type="text"
                                               name="first_name" id="first_name"
                                               class="form-control form-control-lg text-4" required>
                                    </div>
                                    <div class="form-group col">
                                        <label for="last_name"
                                               class="form-label text-color-dark text-3">{{ __("routes.Last Name") }}
                                            <span class="text-color-danger">*</span></label>
                                        <input type="text" placeholder="{{ __("routes.Enter your Last Name") }}"
                                               name="last_name" id="last_name"
                                               class="form-control form-control-lg text-4" required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col">
                                        <label for="email"
                                               class="form-label text-color-dark text-3">{{ __("routes.Email Address") }}
                                            <span class="text-color-danger">*</span></label>
                                        <input placeholder="{{ __("routes.Enter your  Email address") }}"
                                               type="email" name="email" id="email"
                                               class="form-control form-control-lg text-4" required>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col">
                                        <label class="form-label" for="phone">{{ __("routes.Phone:") }} <small
                                                class="text-danger">*</small></label>
                                        <input type="hidden" name="country_code" id="country_code"
                                               readonly class="form-control w-100">
                                        <input type="tel" name="phone" id="phone"
                                               class="form-control w-100">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col">
                                        <label for="password" class="form-label text-color-dark text-3">
                                            {{ __('routes.Password') }} <span class="text-color-danger">*</span>
                                        </label>
                                        <div class="input-group" dir="ltr">
                                            <input type="password" name="password" id="password-id"  placeholder="{{ __('routes.Enter your Password') }}"
                                                   class="form-control form-control-lg text-4 @error('password') is-invalid @enderror"
                                                   required>
                                            <button type="button" onclick="showPassword()" class="btn btn-light border toggle-password">
                                                👁️
                                            </button>
                                        </div>
                                        @error('password')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                    <div class="form-group col">
                                        <label for="password" class="form-label text-color-dark text-3">
                                            {{ __('routes.Confirm Password') }} <span class="text-color-danger">*</span>
                                        </label>
                                        <div class="input-group" dir="ltr">
                                            <input type="password" name="password_confirmation" id="password_confirmation_id"  placeholder="{{ __('routes.Enter your Password Confirmation') }}"
                                                   class="form-control form-control-lg text-4 @error('password_confirmation') is-invalid @enderror"
                                                   required>
                                            <button type="button" onclick="showConfirmPassword()" class="btn btn-light border toggle-password">
                                                👁️
                                            </button>
                                        </div>
                                        @error('password')
                                        <span class="text-danger">{{ $message }}</span>
                                        @enderror
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col">
                                        <p class="text-2 mb-2">{{ __("routes.Your personal data will be used to support your experience throughout this website, to manage access to your account, and for other purposes described in our") }}
                                            <a href="#"
                                               class="text-decoration-none">{{ __("routes.privacy & policy") }}</a></p>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="form-group col">
                                        <button type="submit" onclick="loadingBtn(this)"
                                                class="btn btn-primary btn-modern w-100 text-uppercase rounded-0 font-weight-bold text-3"
                                                data-loading-text="Loading...">{{ __("routes.register") }}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('script')
    <script>
        function showPassword() {
            const password = document.querySelector('#password-id');
            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);
            if (type == "password") {
                document.getElementById("eye-icon").classList.remove("bi-eye-slash");
                document.getElementById("eye-icon").classList.add("bi-eye");
            } else {
                document.getElementById("eye-icon").classList.remove("bi-eye");
                document.getElementById("eye-icon").classList.add("bi-eye-slash");
            }
        }

        function showConfirmPassword() {
            const password_confirmation = document.querySelector('#password_confirmation_id');
            const type_cofirm = password_confirmation.getAttribute('type') === 'password' ? 'text' : 'password';
            password_confirmation.setAttribute('type', type_cofirm);
            if (type_cofirm == "password") {
                document.getElementById("eye-icon-confirm").classList.remove("bi-eye-slash");
                document.getElementById("eye-icon-confirm").classList.add("bi-eye");
            } else {
                document.getElementById("eye-icon-confirm").classList.remove("bi-eye");
                document.getElementById("eye-icon-confirm").classList.add("bi-eye-slash");
            }
        }

    </script>

    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@19.5.5/build/js/intlTelInput.min.js"></script>
    <script>
        const input = document.querySelector("#phone");
        // initial value
        document.getElementById("country_code").value = "+974";
        let iti = window.intlTelInput(input, {
            customPlaceholder: function (selectedCountryPlaceholder, selectedCountryData) {
                return "e.g. " + selectedCountryPlaceholder;
            },
            preferredCountries: ['ae', 'qa'],
            showSelectedDialCode: true,
            separateDialCode: true,
            countrySearch: false,
            autoInsertDialCode: true,
            autoPlaceholder: "polite",
            nationalMode: false,
            fixDropdownWidth: false,
            useFullscreenPopup: false,
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@19.5.5/build/js/utils.js"
        });

        input.addEventListener('input', function () {
            this.value = this.value.replace(/\D/g, '');
            let countryData = iti.getSelectedCountryData();
            document.getElementById("country_code").value = countryData.dialCode;
            $wire.set('personalDetails.country_code', countryData.dialCode);
        });

        input.addEventListener("countrychange", function () {
            let countryData = iti.getSelectedCountryData();
            document.getElementById("country_code").value = countryData.dialCode;
            $wire.set('personalDetails.country_code', countryData.dialCode);
        });

    </script>
@endsection