@extends('layouts.auth')

@section('title')
    Login
@endsection

@section('content')
    <style>
        /* Password Toggle Icon Styling */
        .password-toggle-icon {
            position: absolute !important;
            top: 50% !important;
            right: 15px !important;
            transform: translateY(-50%) !important;
            cursor: pointer !important;
            color: #525f7f !important;
            transition: all 0.2s ease-in-out !important;
            z-index: 999 !important;
            padding: 8px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: transparent !important;
            pointer-events: auto !important;
            width: 36px !important;
            height: 36px !important;
            user-select: none !important;
            border: none !important;
            outline: none !important;
        }

        .password-toggle-icon:hover {
            color: #5e72e4 !important;
            background: rgba(94, 114, 228, 0.1) !important;
            border-radius: 6px !important;
        }

        .password-toggle-icon svg {
            width: 20px !important;
            height: 20px !important;
            fill: currentColor !important;
            pointer-events: none !important;
        }

        .password-toggle-icon .eye-icon {
            pointer-events: none !important;
        }

        .password-toggle-icon .eye-slash {
            display: block;
        }

        .password-toggle-icon .eye-open {
            display: none;
        }

        /* When password is visible */
        .password-toggle-icon .eye-slash.hide {
            display: none !important;
        }

        .password-toggle-icon .eye-open.show {
            display: block !important;
        }

        /* Adjust password input padding to accommodate eye icon */
        .position-relative input[type="password"],
        .position-relative input[type="text"].password-field {
            padding-right: 50px !important;
        }

        /* Ensure position relative is set */
        .position-relative {
            position: relative !important;
            display: block !important;
        }

        /* Override any conflicting input styles */
        #password {
            padding-right: 50px !important;
        }

        /* Make form-control-lg respect padding */
        .form-control-lg.form-control {
            padding-right: 50px !important;
        }
    </style>


    <div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column mx-lg-0 mx-auto">
        <div class="card card-plain">
            <div class="card-header pb-0 text-start">
                @if (session('error'))
                    <div class="alert alert-danger">
                        {{ session('error') }}
                    </div>
                @endif
                <h4 class="font-weight-bolder">Sign In</h4>
                <p class="mb-0">Enter your email and password to sign in</p>
            </div>
            <div class="card-body">
                <form role="form" id="loginForm" method="POST" action="{{ route('login.post') }}">
                    @csrf
                    <div class="mb-3">
                        <input type="text" name="email" id="email"
                            class="form-control form-control-lg @error('email') is-invalid @enderror" placeholder="Email"
                            aria-label="Email" value="{{ old('email') }}">
                        @error('email')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    <div class="mb-3">
                        <div class="position-relative">
                            <input type="password" name="password" id="password"
                                class="form-control form-control-lg @error('password') is-invalid @enderror"
                                placeholder="Password" aria-label="Password">
                            <span class="password-toggle-icon" data-target="password" title="Show/Hide Password"
                                id="togglePassword">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    class="eye-icon eye-slash" viewBox="0 0 16 16">
                                    <path
                                        d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z" />
                                    <path
                                        d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z" />
                                    <path
                                        d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z" />
                                </svg>
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    class="eye-icon eye-open" style="display: none;" viewBox="0 0 16 16">
                                    <path
                                        d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
                                    <path
                                        d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
                                </svg>
                            </span>
                        </div>
                        @error('password')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>
                    {{-- <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="rememberMe" name="remember">
                        <label class="form-check-label" for="rememberMe">Remember me</label>
                    </div> --}}
                    <div class="text-center">
                        <button type="submit" id="loginBtn" class="btn btn-lg btn-primary btn-lg w-100 mt-4 mb-0">
                            <span class="btn-text">Sign in</span>
                            <span class="btn-loading d-none">
                                <span class="spinner-border spinner-border-sm me-2" role="status"
                                    aria-hidden="true"></span>
                                Signing in...
                            </span>
                        </button>
                    </div>
                </form>
            </div>

            <div class="card-footer text-center pt-0 px-lg-2 ">
                <p class="text-sm mx-auto">
                    Forgot password you can reset it <a href="{{ route('forgot-password') }}"
                        class="text-primary text-gradient font-weight-bold">here</a>
                </p>
            </div>
        </div>
    </div>
    <div
        class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 end-0 text-center justify-content-center flex-column">
        <div class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center overflow-hidden"
            style="background-image: url('{{ asset('img/cover.png') }}');
        background-size: cover;">
            <span class="mask "></span>
            {{-- <h4 class="mt-5 text-white font-weight-bolder position-relative">"SL Charge Map – Admin Portal"</h4>
            <p class="text-white position-relative">Comprehensive management system for electric vehicle charging networks.
                Monitor, control, and optimize your charging infrastructure with ease.</p> --}}
        </div>
    </div>

    <script>
        // Pure JavaScript - Password Toggle Function
        function togglePasswordVisibility() {
            const passwordField = document.getElementById('password');
            const eyeSlash = document.querySelector('.eye-slash');
            const eyeOpen = document.querySelector('.eye-open');

            console.log('=== Toggle Password Clicked ===');
            console.log('Password field found:', !!passwordField);
            console.log('Eye icons found:', !!eyeSlash, !!eyeOpen);

            if (passwordField && eyeSlash && eyeOpen) {
                if (passwordField.type === 'password') {
                    // Show password in plain text
                    passwordField.type = 'text';
                    eyeSlash.classList.add('hide');
                    eyeOpen.classList.add('show');
                    console.log('✅ PASSWORD NOW SHOWING AS PLAIN TEXT');
                    console.log('👁️ Icon changed to OPEN EYE');
                } else {
                    // Hide password
                    passwordField.type = 'password';
                    eyeSlash.classList.remove('hide');
                    eyeOpen.classList.remove('show');
                    console.log('🔒 PASSWORD NOW HIDDEN');
                    console.log('👁️‍🗨️ Icon changed to EYE-SLASH');
                }
            } else {
                console.error('❌ Elements not found!');
            }
        }

        // Wait for page to load, then attach event
        document.addEventListener('DOMContentLoaded', function() {
            console.log('🚀 Page loaded');

            const toggleButton = document.getElementById('togglePassword');
            if (toggleButton) {
                console.log('✅ Toggle button found, attaching click event');
                toggleButton.addEventListener('click', togglePasswordVisibility);
            } else {
                console.error('❌ Toggle button NOT found');
            }
        });

        // Backup: Also attach with jQuery when ready
        $(document).ready(function() {
            $('#togglePassword').off('click').on('click', function(e) {
                e.preventDefault();
                togglePasswordVisibility();
            });

            // Handle form submission
            $('#loginForm').on('submit', function(e) {
                e.preventDefault();

                // Clear previous errors
                clearErrors();

                // Show loading state
                showLoading(true);

                // Get form data
                var formData = {
                    email: $('#email').val(),
                    password: $('#password').val(),
                    remember: $('#rememberMe').is(':checked'),
                    _token: $('meta[name="csrf-token"]').attr('content')
                };

                // Submit form via AJAX
                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        // If successful, redirect to dashboard
                        window.location.href = '/dashboard';
                    },
                    error: function(xhr) {
                        showLoading(false);

                        if (xhr.status === 422) {
                            // Validation errors - using global validation handler
                            displayFormErrors(xhr.responseJSON.errors, '#loginForm');
                        } else if (xhr.status === 419) {
                            // CSRF token mismatch
                            displayError(
                                'Session expired. Please refresh the page and try again.');
                        } else {
                            // Other errors
                            displayError('An error occurred. Please try again.');
                        }
                    }
                });
            });

            // Note: Error clearing on focus is now handled globally by validation-handler.js
            // No need for manual input event handlers!

            function displayError(message) {
                // Display general error message
                if ($('.alert-danger').length === 0) {
                    $('#loginForm').prepend(
                        '<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
                        message +
                        '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                        '</div>');
                } else {
                    $('.alert-danger').text(message);
                }
            }

            function showLoading(show) {
                if (show) {
                    $('#loginBtn').prop('disabled', true);
                    $('.btn-text').addClass('d-none');
                    $('.btn-loading').removeClass('d-none');
                } else {
                    $('#loginBtn').prop('disabled', false);
                    $('.btn-text').removeClass('d-none');
                    $('.btn-loading').addClass('d-none');
                }
            }
        });
    </script>
@endsection