@extends('layouts.client')

@section('title', 'Register')

@section('content')
    <section id="checkout" class="animation-fade-in grow  py-40"
        style="
    background: url('img/bg_packages.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    ">
        <div class="container space-y-10">
            <h1 class="uppercase text-3xl xl:text-4xl font-bold text-center text-blue-700">
                Register
            </h1>
            <div class="w-4/5 bg-white rounded-lg flex flex-col px-4 py-6 space-y-4 mx-auto">
                <form id="registerForm" method="POST" action="{{ route('register') }}" enctype="multipart/form-data"
                    class="grid lg:grid-cols-2 gap-y-6 gap-x-10">
                    @csrf
                    <div class="relative col-span-2 h-40 w-full bg-red-500 rounded-lg mb-24"
                        style="
                    background: url('img/bg_register.jpg');
                    background-size: cover;
                    background-position: center;
                    background-repeat: no-repeat;
                  ">
                        <div id="avatar"
                            class="absolute border-4 border-white w-[150px] h-[150px] lg:w-[180px] lg:h-[180px] rounded-full bottom-[0px] translate-y-[50%] left-[50%] translate-x-[-50%] bg-white flex items-center"
                            style="
                      background-image: url('img/avatar.png');
                      background-size: cover;
                      background-position: center;
                      background-repeat: no-repeat;
                    ">
                            <input type="file" class="hidden" name="avatar" id="input_avatar" accept="image/*" />

                            <div class="absolute w-[30px] h-[30px] top-[5%] right-[10%] bg-gray-100 rounded-[50%] flex items-center justify-center hover:scale-110"
                                id="btn_trigger_remove_avatar">

                                <i class="ri-close-line text-3xl text-red-500"></i>
                            </div>

                            <div id="btn_trigger_avatar"
                                class="absolute w-[30px] h-[30px] bottom-[1%] right-[10%] bg-gray-100 rounded-[50%] flex items-center justify-center hover:scale-110">
                                <i class="ri-camera-line text-3xl"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-span-2 text-center">
                        @error('avatar')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>

                    <div class="col-span-2 md:col-span-1">
                        <label for="name" class="block mb-2 text-base font-medium text-gray-900">
                            Your name
                        </label>

                        <input type="text" id="name" autocomplete="name" placeholder="Name" name="name"
                            value="{{ old('name') }}" autofocus required
                            class="@error('name') is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:ring-4 focus:ring-blue-200" />

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

                    <div class="col-span-2 md:col-span-1">
                        <label for="email" class="block mb-2 text-base font-medium text-gray-900">
                            Your Email
                        </label>
                        <input id="email" type="email" placeholder="Email"
                            class="@error('email') is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:ring-4 focus:ring-blue-200"
                            name="email" value="{{ old('email') }}" required autocomplete="email" />
                        @error('email')
                            <span class="invalid-feedback text-red-500" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    <div class="col-span-2 md:col-span-1">
                        <label for="country" class="block mb-2 text-base font-medium text-gray-900">
                            Your Country
                        </label>
                    
                        <select id="country" name="country" required
                            class="@error('country') is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:ring-4 focus:ring-blue-200">
                            <option value="" selected disabled>Select your country</option>
                            @foreach($countries as $country_code => $country_name)
                                <option value="{{ $country_code }}" {{ old('country') == $country_code ? 'selected' : '' }}>{{ $country_name }}</option>
                            @endforeach
                        </select>
                    
                        @error('country')
                            <span class="invalid-feedback text-red-500" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    <div class="col-span-2 md:col-span-1">
                        <label for="phone" class="block mb-2 text-base font-medium text-gray-900">
                            Your Phone
                        </label>
                        <input type="text" id="phone" placeholder="Phone"
                            class="@error('phone') is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:ring-4 focus:ring-blue-200"
                            name="phone" value="{{ old('phone') }}" required autocomplete="phone" />
                        @error('phone')
                            <span class="invalid-feedback text-red-500" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    <div class="col-span-2 md:col-span-1">
                        <label for="company" class="block mb-2 text-base font-medium text-gray-900">Your Company</label>
                        <input type="text" id="company" placeholder="Company"
                            class="@error('company') is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:ring-4 focus:ring-blue-200"
                            name="company" value="{{ old('company') }}" required autocomplete="company" />
                            @error('company')
                            <span class="invalid-feedback text-red-500" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    <div class="col-span-2 md:col-span-1">
                    </div>
                    <div class="col-span-2 md:col-span-1">
                        <label class="font-medium text-base block mb-1 text-gray-700" for="password">
                            Your Password
                            <span class="tooltip"
                                title="Your password must meet the following requirements:
                            &#10;• Length: 8-32 characters
                            &#10;• Includes at least one number
                            &#10;• Includes at least one lowercase letter
                            &#10;• Includes at least one uppercase letter
                            &#10;• Includes at least one special symbol">
                                <i class="ri-question-line text-gray-600 ml-2"></i>
                            </span>
                        </label>
                        <div class="relative w-full">
                            <div class="absolute inset-y-0 right-0 flex">
                                <input class="hidden js-new-password-toggle" id="toggleNewPassword" type="checkbox" />
                                <label class="rounded px-2 py-1 text-xl text-gray-600 cursor-pointer js-new-password-label"
                                    for="toggleNewPassword"><i class="ri-eye-line"></i></label>
                            </div>
                            <input id="password" type="password" placeholder="password"
                                class="@error('password') is-invalid @enderror px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:ring-4 focus:ring-blue-200 js-new-password"
                                autocomplete="off" name="password" required autocomplete="new-password" />
                            @error('password')
                                <span class="invalid-feedback text-red-500" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                    </div>
                    <div class="col-span-2 md:col-span-1">
                        <label class="font-medium text-base block mb-1 text-gray-700" for="password-confirm">
                            Confirm Password
                            <span class="tooltip"
                                title="Your password must meet the following requirements:
                                &#10;• Length: 8-32 characters
                                &#10;• Includes at least one number
                                &#10;• Includes at least one lowercase letter
                                &#10;• Includes at least one uppercase letter
                                &#10;• Includes at least one special symbol">
                                    <i class="ri-question-line text-gray-600 ml-2"></i>
                            </span>
                        </label>
                        <div class="relative w-full">
                            <div class="absolute inset-y-0 right-0 flex">
                                <input class="hidden js-confirm-password-toggle" id="toggleConfirmNewPassword"
                                    type="checkbox" />
                                <label
                                    class="rounded px-2 py-1 text-xl text-gray-600 cursor-pointer js-confirm-password-label"
                                    for="toggleConfirmNewPassword"><i class="ri-eye-line"></i></label>
                            </div>
                            <input placeholder="Confirm password"
                                class="px-4 py-2 transition duration-300 w-full border border-gray-300 rounded focus:border-transparent focus:ring-4 focus:ring-blue-200 js-confirm-password"
                                id="password-confirm" type="password" name="password_confirmation" required
                                autocomplete="new-password" />
                        </div>
                    </div>
                    <div class="col-span-2 text-center">
                        <button type="submit" id="registerButton"
                            class="w-1/2 py-2 rounded-lg text-lg font-bold text-neutral-50 bg-blue-500 text-center hover:opacity-80">
                            <div class="flex flex justify-center">
                                <span class="me-3"> {{ __('Register') }}</span>
                                <div class="flex flex-row space-x-4">
                                    <div
                                        class="w-6 h-6 rounded-full animate-spin border-4 border-solid border-neutral-50 border-t-transparent hidden">
                                    </div>
                                </div>
                            </div>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var registerForm = document.getElementById('registerForm');

        registerForm.addEventListener('submit', function() {
            // Get the button and spinner elements
            var registerButton = document.getElementById('registerButton');
            var spinner = registerButton.querySelector('.animate-spin');

            // Disable the button and remove the spinner animation
            registerButton.disabled = true;
            //  spinner.classList.remove('animate-spin');
            spinner.classList.remove('hidden');
        });
    });

    window.addEventListener("load", (event) => {
        function togglePasswordVisibility(passwordInput, label) {
            if (passwordInput.attr("type") === "password") {
                passwordInput.attr("type", "text");
                label.html('<i class="ri-eye-off-line"></i>');
            } else {
                passwordInput.attr("type", "password");
                label.html('<i class="ri-eye-line"></i>');
            }
        }
        $(".js-old-password-toggle").on("click", function() {
            var passwordInput = $(".js-old-password");
            var label = $(".js-old-password-label");
            togglePasswordVisibility(passwordInput, label);
        });

        $(".js-new-password-toggle").on("click", function() {
            var passwordInput = $(".js-new-password");
            var label = $(".js-new-password-label");
            togglePasswordVisibility(passwordInput, label);
        });

        $(".js-confirm-password-toggle").on("click", function() {
            var passwordInput = $(".js-confirm-password");
            var label = $(".js-confirm-password-label");
            togglePasswordVisibility(passwordInput, label);
        });
    });
</script>

<script>
    window.addEventListener("load", (event) => {
        $("#btn_trigger_avatar").click(() => {
            $("#input_avatar").click();
        });

        $("#input_avatar").change((e) => {
            const file = e.target.files[0];
            const reader = new FileReader();

            reader.onload = function(e) {
                $("#avatar").css("background-image", "url(" + e.target.result + ")");
            };

            if (file) {
                reader.readAsDataURL(file);
                $("#btn_trigger_remove_avatar").removeClass("hidden");
                //e.target.value = "";
            }
        });

        $("#btn_trigger_remove_avatar").click(function() {
            $("#avatar").css("background-image", "url('img/avatar.png')");
            $(this).addClass("hidden");
        });

        //Show #btn_trigger_remove_avatar
        const currentImage = $("#avatar").css("background-image");
        if (currentImage.includes("img/avatar.png")) {
            $("#btn_trigger_remove_avatar").addClass("hidden");
        }
    });
</script>
