{{-- resources/views/auth/auth.blade.php --}}
@extends('layouts.public')

@section('title', 'Login & Register | ' . config('app.name'))

@section('content')
    <div class="flex flex-col md:flex-row">

        {{-- Left Section --}}
        <div class="w-full md:w-1/2 p-8 animate-slide-in-left">
            <div class="flex items-center justify-center mb-8">
                <img src="{{ asset('logo.png') }}" alt="Logo" class="h-8 w-4 mr-2 animate-pulse">
                <span class="text-2xl font-bold text-indigo-600">{{ config('app.name', 'Event Manager') }}</span>
            </div>

            <div class="flex mb-6 bg-gray-100 rounded-lg p-1">
                <button id="login-tab" class="flex-1 py-2 px-4 text-sm font-medium text-center rounded-md bg-white shadow-md text-indigo-600 transition-all duration-300">Login</button>
                <button id="register-tab" class="flex-1 py-2 px-4 text-sm font-medium text-center rounded-md text-gray-500 hover:bg-white hover:shadow-md transition-all duration-300">Register</button>
            </div>

            {{-- Login Form --}}
            <div id="login-form" class="space-y-4 animate-fade-in">
                <h2 class="text-2xl font-bold text-center mb-4 text-gray-800">Welcome Back!</h2>
                <form id="loginForm" method="POST" action="{{ route('logins') }}" class="space-y-3">
                    @csrf
                    <div>
                        <label class="block text-xs font-medium text-gray-700">Email</label>
                        <input name="email" type="email" class="w-full mt-1 px-3 py-2 text-xs border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500" required autofocus>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700">Password</label>
                        <input name="password" type="password" class="w-full mt-1 px-3 py-2 text-xs border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500" required>
                    </div>
                    <div class="flex items-center justify-between text-xs">
                        <label class="flex items-center">
                            <input type="checkbox" class="mr-2 rounded focus:ring-indigo-500"> Remember me
                        </label>
                        <a href="#" id="forgotPasswordLink" class="text-indigo-600 hover:underline">Forgot password?</a>
                    </div>
                    <button type="submit" class="w-full px-3 py-2 text-xs bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-lg hover:from-indigo-600 hover:to-purple-700 transition-all duration-300 shadow-lg">Login</button>
                </form>
            </div>

            {{-- Register Form --}}
            <div id="register-form" class="space-y-4 hidden animate-fade-in">
                <h2 class="text-2xl font-bold text-center mb-4 text-gray-800">Create an Account</h2>
                <form id="registerForm" method="POST" action="{{ route('register') }}" class="space-y-3">
                    @csrf
                    <input name="full_name" type="text" placeholder="Full Name" class="w-full px-3 py-2 text-xs border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500" required>
                    <input name="email" type="email" placeholder="Email" class="w-full px-3 py-2 text-xs border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500" required>
                    <input name="password" type="password" placeholder="Password" class="w-full px-3 py-2 text-xs border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500" required>
                    <input name="password_confirmation" type="password" placeholder="Confirm Password" class="w-full px-3 py-2 text-xs border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500" required>
                    <button type="submit" class="w-full px-3 py-2 text-xs bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-lg hover:from-indigo-600 hover:to-purple-700 transition-all duration-300 shadow-lg">Register</button>
                </form>
            </div>
        </div>

        {{-- Right Section --}}
        <div class="hidden md:flex w-full md:w-1/2 bg-gradient-to-br from-indigo-500 to-purple-600 text-white flex-col items-center justify-center p-8 space-y-6 animate-slide-in-right">
            <img src="{{ asset('android-chrome-512x512.png') }}" alt="Event Illustration" class="w-48 h-48 animate-bounce">
            <h2 class="text-3xl font-bold text-center">Manage Your Events Seamlessly</h2>
            <p class="text-center text-sm text-indigo-100 max-w-xs">
                Simplify event planning and registration with our intuitive tools.
                From small meetups to large conferences — organize everything in one place.
            </p>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        const loginTab = document.getElementById('login-tab');
        const registerTab = document.getElementById('register-tab');
        const loginForm = document.getElementById('login-form');
        const registerForm = document.getElementById('register-form');

        loginTab.addEventListener('click', () => {
            loginForm.classList.remove('hidden');
            registerForm.classList.add('hidden');
            loginTab.classList.add('bg-white', 'shadow-md', 'text-indigo-600');
            registerTab.classList.remove('bg-white', 'shadow-md', 'text-indigo-600');
            registerTab.classList.add('text-gray-500');
        });

        registerTab.addEventListener('click', () => {
            registerForm.classList.remove('hidden');
            loginForm.classList.add('hidden');
            registerTab.classList.add('bg-white', 'shadow-md', 'text-indigo-600');
            loginTab.classList.remove('bg-white', 'shadow-md', 'text-indigo-600');
            loginTab.classList.add('text-gray-500');
        });
    </script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        $(document).ready(function () {

            function clearValidationErrors(form) {
                $(form).find('.error-text').remove();
                $(form).find('input').removeClass('border-red-500');
            }

            function showValidationErrors(form, errors) {
                $.each(errors, function (field, messages) {
                    let input = $(form).find('[name="' + field + '"]');
                    input.addClass('border-red-500');
                    input.after('<p class="error-text text-red-500 text-xs mt-1">' + messages[0] + '</p>');
                });
            }

            // -------------------------------
            // REGISTER FORM
            // -------------------------------
            $('#registerForm').on('submit', function (e) {
                e.preventDefault();
                let form = this;
                clearValidationErrors(form);

                Swal.fire({
                    title: 'Registering...',
                    text: 'Please wait while we create your account.',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });

                $.ajax({
                    url: "{{ route('register') }}", // <-- explicitly use route
                    method: 'POST',
                    data: $(form).serialize(),
                    success: function (res) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: res.message ?? 'Account created successfully!',
                            timer: 1500,
                            showConfirmButton: false
                        }).then(() => {
                            window.location.href = "{{ route('dashboard') }}"; // redirect
                        });
                    },
                    error: function (xhr) {
                        Swal.close();
                        if (xhr.status === 422) {
                            showValidationErrors(form, xhr.responseJSON.errors);
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Registration Failed',
                                text: xhr.responseJSON?.error ?? 'Something went wrong. Please try again.'
                            });
                        }
                    }
                });
            });

            // -------------------------------
            // LOGIN FORM
            // -------------------------------
            $('#loginForm').on('submit', function (e) {
                e.preventDefault();
                let form = this;
                clearValidationErrors(form);

                Swal.fire({
                    title: 'Logging in...',
                    text: 'Please wait while we verify your credentials.',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });

                $.ajax({
                    url: "{{ route('logins') }}", // <-- explicitly use route
                    method: 'POST',
                    data: $(form).serialize(),
                    success: function (res) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Welcome Back!',
                            text: res.message ?? 'Login successful!',
                            timer: 1200,
                            showConfirmButton: false
                        }).then(() => {
                            window.location.href = res.redirect_url ?? "{{ route('dashboard') }}"; // redirect
                        });
                    },
                    error: function (xhr) {
                        Swal.close();
                        if (xhr.status === 422) {
                            showValidationErrors(form, xhr.responseJSON.errors);
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Login Failed',
                                text: xhr.responseJSON?.error ?? 'Invalid credentials, please try again.'
                            });
                        }
                    }
                });
            });

            // -------------------------------
            // FORGOT PASSWORD
            // -------------------------------
            $('#forgotPasswordLink').on('click', function (e) {
                e.preventDefault();
                Swal.fire({
                    title: 'Forgot Password?',
                    input: 'email',
                    inputLabel: 'Enter your registered email',
                    inputPlaceholder: 'you@example.com',
                    confirmButtonText: 'Send Reset Link',
                    showCancelButton: true,
                    preConfirm: (email) => {
                        if (!email) {
                            Swal.showValidationMessage('Email is required');
                            return false;
                        }
                        return $.ajax({
                            url: "{{ route('forgot.password') }}", // <-- explicitly use route
                            method: 'POST',
                            data: { email: email, _token: '{{ csrf_token() }}' },
                            beforeSend: () => Swal.showLoading()
                        })
                            .then(response => {
                                Swal.fire('Success!', response.message, 'success');
                            })
                            .catch(xhr => {
                                if (xhr.status === 422) {
                                    let msg = xhr.responseJSON.errors?.email?.[0] ?? 'Invalid email';
                                    Swal.fire('Validation Error', msg, 'warning');
                                } else {
                                    Swal.fire('Error', xhr.responseJSON?.error ?? 'Something went wrong', 'error');
                                }
                            });
                    }
                });
            });

        });
    </script>


@endpush