@extends('auth.user.base')

@section('title', 'Ark Sign Up')

@section('content')
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('assets/css/signup.css') }}">
    <div class="ark__container">
        <div class="ark__image-section">
            <div class="ark__image-overlay"></div>
        </div>

        <div class="ark__form-section">
            <div class="ark__logo">Sign<span>Up</span></div>

            <div class="ark__auth-header">
                <h1 class="ark__title">Create An Account</h1>
                <p class="ark__subtitle mb-0">
                    Create Your Account To Manage And Track Your Quotes With Ease.
                </p>
            </div>

            <div class="ark__social-buttons">
                <a href="{{ route('social.redirect', ['provider' => 'google']) }}" class="ark__social-btn ark__google">
                    <div class="ark__icon-wrap">
                        <img src="{{ asset('assets/images/GoogleIcon.svg') }}" alt="Google">
                    </div>
                    <p class="mb-0">Sign up with Google</p>
                </a>
                <a href="{{ route('social.redirect', ['provider' => 'facebook']) }}" class="ark__social-btn ark__facebook">
                    <div class="ark__icon-wrap">
                        <img src="{{ asset('assets/images/Facebook.svg') }}" alt="Facebook">
                    </div>
                    <p class="mb-0">Sign up with Facebook</p>
                </a>
            </div>

            <div class="ark__divider"><span>Or</span></div>

            <form method="POST" action="{{ route('register') }}"  id="registerForm">
                @csrf
                <div class="ark__form-group">
                    <label class="ark__label" for="fullname">Full Name</label>
                        <input type="text" name="fullname" id="fullname" class="ark__input"
                            placeholder="Enter Your Full Name" value="{{ old('fullname') }}" required>
                        <span tooltip="Please Enter Full Name" class="error-message">
                            <img src="{{ asset('assets/images/input-error.svg') }}" alt="">
                        </span>
                </div>

                <div class="ark__form-group">
                    <label class="ark__label" for="email">Email</label>
                    <div class="ark__input-wrapper">
                        <input type="email" name="email" id="email" class="ark__input" placeholder="you@example.com"
                            value="{{ old('email') }}" required>
                        <span tooltip="Please Enter Email Address" class="error-message">
                            <img src="{{ asset('assets/images/input-error.svg') }}" alt="">
                        </span>
                    </div>
                    @error('email')
                        <span class="text-danger small ark__input--defaul-error">{{ $message }}</span>
                    @enderror
                </div>

                <div class="ark__form-group">
                    <label class="ark__label" for="password">Password</label>
                    <div class="ark__password-wrapper">
                        <input type="password" name="password" id="password" class="ark__input"
                            placeholder="Enter Your Password" required>
                        <span class="ark__password-toggle" style="display: none;">
                            <i class="fas fa-eye"></i>
                        </span>
                        <span tooltip="Please Enter Password" class="error-message">
                            <img src="{{ asset('assets/images/input-error.svg') }}" alt="">
                        </span>
                    </div>
                    @error('password')
                        <span class="text-danger small ark__input--defaul-error">{{ $message }}</span>
                    @enderror
                </div>

                <div class="ark__form-group">
                    <label class="ark__label" for="password_confirmation">Confirm Password</label>
                    <div class="ark__password-wrapper">
                        <input type="password" name="password_confirmation" id="password_confirmation" class="ark__input"
                            placeholder="Re-enter Password" required>
                        <span class="ark__password-toggle" style="display: none;">
                            <i class="fas fa-eye"></i>
                        </span>
                    </div>
                    <span tooltip="Please Enter Confirm Password" class="error-message">
                        <img src="{{ asset('assets/images/input-error.svg') }}" alt="">
                    </span>
                </div>

                <div class="ark__checkbox-group">
                    <input type="checkbox" id="terms" class="ark__checkbox" >
                    <label for="terms">
                        I Agree To The <a href="#">Terms & Conditions</a> And <a href="#">Privacy Policy</a>
                    </label>
                </div>

                <button type="submit" class="ark__submit-btn">Sign Up</button>

                <p class="ark__login-link">
                    Already Have An Account? <a href="{{ route('login') }}">Log In</a>
                </p>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#password, #password_confirmation').on('input', function() {
                const $toggle = $(this).next('.ark__password-toggle');
                $toggle.toggle($(this).val().length > 0);
            });

            $('.ark__password-toggle').click(function() {
                const $input = $(this).prev('input');
                const $eye = $(this).find('i');

                $input.attr('type', $input.attr('type') === 'password' ? 'text' : 'password');
                $eye.toggleClass('fa-eye fa-eye-slash');
            });
        });

        $(document).ready(function() {
            tippy("[tooltip]", {
                arrow: true,
                placement: "top",
                delay: 5,
                distance: 15,
                maxWidth: 300,

                followCursor: true,
                allowHTML: true,
                theme: "custom",
                ignoreAttributes: true,
                content(reference) {
                    const tooltip = reference.getAttribute("tooltip");
                    reference.removeAttribute("tooltip");
                    return tooltip;
                },
            });
        });

        const inputs = document.querySelectorAll(".ark__input");

        inputs.forEach((input) => {
            const formGroup = input.closest(".ark__form-group");
            const errorMessage = formGroup.querySelector(".error-message");

            input.addEventListener("invalid", (e) => {
                e.preventDefault();
                formGroup.classList.add("error");
                errorMessage.classList.add("show");
            });

            input.addEventListener("input", () => {
                if (input.checkValidity()) {
                    formGroup.classList.remove("error");
                    errorMessage.classList.remove("show");
                }
            });
        });

        document.getElementById('registerForm').addEventListener('submit', function(e) {
            const checkbox = document.getElementById('terms');

            if (!checkbox.checked) {
                e.preventDefault(); 
                checkbox.classList.add('error');
            } else {
                checkbox.classList.remove('error');
            }
        });
    </script>
@endsection