@extends('layouts.auth')

@section('title', 'Login')

@section('content')
    <div class="min-h-screen grid grid-cols-1 md:grid-cols-2 relative overflow-hidden">

        {{-- LEFT SIDE : Portal Information --}}
        <div class="hidden md:flex flex-col justify-center px-12 relative overflow-hidden
            bg-gradient-to-br from-amber-400 via-amber-500 to-amber-600 text-white">

            {{-- Decorative animated circles --}}
            <span class="absolute top-0 left-1/4 w-32 h-32 bg-yellow-200 opacity-20 rounded-full animate-bounce-slow"></span>
            <span class="absolute bottom-20 right-1/3 w-48 h-48 bg-orange-300 opacity-15 rounded-full animate-bounce-slow"></span>

            {{-- Portal content --}}
            <div class="max-w-lg relative z-10">
                <div class="mb-6">
                    <h1 class="text-2xl font-bold">Biller Portal</h1>
                    <p class="text-amber-100 text-sm mt-1">Secure & Reliable Payment Management System</p>
                </div>

                <p class="text-sm leading-relaxed mb-6 text-amber-100">
                    This portal is designed for billers to manage all bKash payment related operations efficiently and securely from a single platform.
                </p>

                <ul class="space-y-3 text-sm">
                    <li class="flex items-start"><span class="mr-2">✔</span> Payment History & Transaction Records</li>
                    <li class="flex items-start"><span class="mr-2">✔</span> Real-time Payment Status & Summary</li>
                    <li class="flex items-start"><span class="mr-2">✔</span> Summary Reports</li>
                    <li class="flex items-start"><span class="mr-2">✔</span> Detailed Reports</li>
                    <li class="flex items-start"><span class="mr-2">✔</span> Secure Login & Role-based Access</li>
                </ul>

                <div class="mt-10 flex items-center space-x-4">
                    <img src="{{ asset('cdsl_logo.png') }}" class="h-8 w-8 p-1 rounded" alt="CDSL">
                    <span class="text-xs text-amber-100">Powered by <strong>CDSL</strong></span>
                </div>

                <div class="mt-4 text-amber-200 text-xs">Version: {{ config('app.version', '1.0.0') }}</div>
            </div>
        </div>

        {{-- RIGHT SIDE : Login --}}
        <div class="flex items-center justify-center px-4 relative
            bg-gradient-to-br from-amber-200 via-amber-300 to-amber-400">

            {{-- Decorative floating shapes --}}
            <span class="absolute top-10 left-1/4 w-24 h-24 bg-yellow-100 opacity-20 rounded-full animate-bounce-slow"></span>
            <span class="absolute bottom-20 right-1/4 w-32 h-32 bg-orange-100 opacity-15 rounded-full animate-bounce-slow"></span>

            <div class="w-full max-w-sm bg-amber-50 rounded-lg shadow-xl p-6 flex flex-col justify-between relative z-10">

                {{-- Logo --}}
                <div>
                    {{--<div class="flex justify-center mb-2">
                        <img src="{{ asset('android-chrome-192x192.png') }}" alt="Logo 1" class="h-16 w-16">
                    </div>
                    <hr><hr class="border-0 h-0.5 bg-amber-600"><hr>--}}
                    <h1 class="text-lg font-bold text-amber-900 text-center mb-1">Welcome to Biller Portal</h1>
                    <p class="text-sm font-bold text-amber-700 text-center mb-1">Sign In</p>
                    <small class="block text-amber-500 text-center">
                        Please enter your username and password to sign in
                    </small>
                    <div id="loginMessage" class="mb-3 text-center text-sm"></div>

                    {{-- Form --}}
                    <form id="loginForm" class="space-y-3">
                        @csrf
                        <div>
                            <label for="email" class="block text-xs font-medium text-amber-900 mb-1">User Name</label>
                            <input id="email" type="text" name="email"
                                   class="w-full px-2 py-1 text-sm border border-amber-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500" autofocus>
                            <p id="error-email" class="mt-2 text-sm text-red-600 hidden"></p>
                        </div>
                        <div class="relative">
                            <label for="password" class="block text-xs font-medium text-amber-900 mb-1">Password</label>
                            <input id="password" type="password" name="password"
                                   class="w-full px-2 py-1 text-sm border border-amber-300 rounded focus:outline-none focus:ring-1 focus:ring-amber-500 pr-10">
                            <!-- Eye toggle button -->
                            <button type="button" id="togglePassword"
                                    class="absolute right-2 top-[2.25rem] transform -translate-y-1/2 text-amber-700 focus:outline-none">
                                <i class="fas fa-eye-slash" id="toggleIcon"></i>
                            </button>
                            <p id="error-password" class="mt-2 text-sm text-red-600 hidden"></p>
                        </div>
                        <div class="flex items-center">
                            <input id="remember" type="checkbox" name="remember"
                                   class="h-3 w-3 text-amber-600 border-amber-300 rounded">
                            <label for="remember" class="ml-1 block text-xs text-amber-800">
                                Remember Me
                            </label>
                        </div>
                        <div>
                            <button type="submit" id="loginBtn"
                                    class="w-full bg-amber-700 hover:bg-amber-800 text-white text-sm font-semibold py-1 px-2 rounded transition duration-150 flex items-center justify-center">
                                <svg id="btnSpinner" class="animate-spin h-4 w-4 mr-2 text-white hidden"
                                     xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor"
                                          d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                                </svg>
                                <span id="btnText">Login</span>
                            </button>
                        </div>
                    </form>
                    <hr><hr>
                    <div class="mt-3 mb-2 text-center">
                        <a href="{{ route('forget-password') }}" class="text-xs text-amber-700 hover:underline">
                            Forgot Password?
                        </a>
                    </div>
                </div><hr class="border-0 h-0.5 bg-amber-700">

                {{-- Portal Version --}}
                <div class="mt-4 text-amber-600 text-xs text-center">
                    Version: {{ config('app.version', '1.0.1') }}
                </div>
            </div>
        </div>
    </div>

    {{-- jQuery for AJAX --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const passwordInput = document.getElementById('password');
            const togglePassword = document.getElementById('togglePassword');
            const toggleIcon = document.getElementById('toggleIcon');

            togglePassword.addEventListener('click', function() {
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';        // Show password
                    toggleIcon.classList.remove('fa-eye-slash');
                    toggleIcon.classList.add('fa-eye'); // Icon shows "open eye"
                } else {
                    passwordInput.type = 'password';     // Hide password
                    toggleIcon.classList.remove('fa-eye');
                    toggleIcon.classList.add('fa-eye-slash'); // Icon shows "closed eye"
                }
            });
        });
    </script>
    <script>
        $(function(){
            $('#loginForm').on('submit', function(e){
                e.preventDefault();

                $('#error-email, #error-password').text('').addClass('hidden');

                let $btn = $('#loginBtn');
                let $spinner = $('#btnSpinner');
                let $btnText = $('#btnText');

                $btn.prop('disabled', true);
                $spinner.removeClass('hidden');   // Show spinner
                $btnText.text('Processing…');     // Change text

                $.ajax({
                    url: "{{ route('biller.login.post') }}",
                    method: "POST",
                    data: $(this).serialize(),
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(res){
                        if(res.success){
                            window.location.href = res.redirect_url;
                        } else {
                            $('#error-email').text(res.message).removeClass('hidden');
                        }
                    },
                    error: function(xhr){
                        if(xhr.responseJSON && xhr.responseJSON.errors){
                            let errors = xhr.responseJSON.errors;
                            if(errors.email){
                                $('#error-email').text(errors.email[0]).removeClass('hidden');
                            }
                            if(errors.password){
                                $('#error-password').text(errors.password[0]).removeClass('hidden');
                            }
                        } else if(xhr.responseJSON && xhr.responseJSON.message){
                            $('#error-email').text(xhr.responseJSON.message).removeClass('hidden');
                        } else {
                            $('#error-email').text('Something went wrong. Please try again.').removeClass('hidden');
                        }
                    },
                    complete: function(){
                        $btn.prop('disabled', false);
                        $spinner.addClass('hidden');
                        $btnText.text('Login');
                    }
                });
            });
        });
    </script>
@endsection