@extends('frontend.template-login')
@section('title', 'Log Masuk | Amal Prihatin Sabah')
@section('meta_description', 'Log masuk ke akaun Amal Prihatin Sabah anda untuk menguruskan sumbangan dan aktiviti amal.')
@section('meta_keywords', 'log masuk, login, sign in, akaun, amal prihatin sabah')
@section('content')
    @if ($errors->any())
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4" role="alert">
            <ul class="list-disc list-inside">
                @foreach ($errors->all() as $error)
                    <li class="text-sm">{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4" role="alert">
            <span class="block sm:inline  text-sm">{{ session('error') }}</span>
        </div>
    @endif

    <form action="/proccess-login" method="POST">
        @csrf
        <div class="mb-6">
            <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Emel</label>
            <input type="email" id="email"
                class="bg-gray-50 border-2 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500"
                placeholder="Emel" required name="email" value="{{ old('email') }}">
        </div>
        <div class="mb-6">
            <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Kata Laluan</label>
            <input type="password" id="password"
                class="bg-gray-50 border-2 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500"
                required name="password" placeholder="Kata Laluan">
        </div>

        <div class="grid">
            <button type="submit"
                class="text-white transition hover:text-orange-500 bg-orange-400 hover:bg-orange-300 focus:ring-4 focus:outline-none focus:ring-orange-300 font-medium rounded-md text-md w-full sm:w-auto px-7 py-3 text-center dark:bg-orange-600 dark:hover:bg-orange-700 dark:focus:ring-orange-800">Masuk</button>
        </div>
    </form>
    <div class="text-center my-4">
        <p class="text-sm">Belum mendaftar? ? <a class="font-semibold text-orange-600 hover:underline" href="/register"
                wire:navigate.hover>Daftar Sekarang</a></a>
    </div>
@endsection

@push('script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DEBUG: DOMContentLoaded event fired');

            // Check if there's an intended URL stored in localStorage
            const intendedUrl = localStorage.getItem('intended_url');
            console.log('DEBUG: Intended URL from localStorage:', intendedUrl);
            console.log('DEBUG: All localStorage keys:', Object.keys(localStorage));

            if (intendedUrl && intendedUrl.trim() !== '') {
                console.log('DEBUG: Found intended URL, adding to form:', intendedUrl);

                // Store the intended URL in a form field so it gets submitted
                const form = document.querySelector('form[action="/proccess-login"]');
                console.log('DEBUG: Form found:', form);

                if (form) {
                    // Check if hidden input already exists
                    const existingInput = form.querySelector('input[name="intended_url"]');
                    if (existingInput) {
                        console.log('DEBUG: Hidden input already exists, updating value');
                        existingInput.value = intendedUrl;
                    } else {
                        console.log('DEBUG: Creating new hidden input');
                        const hiddenInput = document.createElement('input');
                        hiddenInput.type = 'hidden';
                        hiddenInput.name = 'intended_url';
                        hiddenInput.value = intendedUrl;
                        form.appendChild(hiddenInput);
                        console.log('DEBUG: Hidden input created and appended');
                    }

                    // Verify the form now contains the intended_url input
                    const checkInput = form.querySelector('input[name="intended_url"]');
                    console.log('DEBUG: Final check - intended_url input exists:', checkInput !== null);
                    console.log('DEBUG: Final check - intended_url input value:', checkInput ? checkInput.value :
                        'NULL');

                    // Also log the form's serialized data
                    const formData = new FormData(form);
                    console.log('DEBUG: Form data before submit:', Object.fromEntries(formData.entries()));
                } else {
                    console.error('DEBUG: Login form not found!');
                    console.log('DEBUG: Available forms on page:', document.querySelectorAll('form'));
                }
            } else {
                console.log('DEBUG: No intended URL found in localStorage');
            }

            // Add form submit listener to verify data is being sent
            const form = document.querySelector('form[action="/proccess-login"]');
            if (form) {
                form.addEventListener('submit', function(e) {
                    console.log('DEBUG: Form being submitted');
                    const formData = new FormData(form);
                    console.log('DEBUG: Form submit data:', Object.fromEntries(formData.entries()));
                });
            }
        });
    </script>
@endpush