<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'DIGIPUS') }}</title>

    {{-- Fonts & Icons (Tetap) --}}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    @vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>

<body class="auth-body">
    {{-- Container Utama --}}
    <div class="container-fluid p-0 position-relative" style="min-height: 100vh;">

        <div class="auth-left-panel position-fixed top-0 start-0 w-100 h-100"
            style="background-image: url('{{ asset('images/assets/bg-login.svg') }}'); background-size: contain; background-repeat: no-repeat; background-position: left; z-index: 1;">

            {{-- Branding Content --}}
            <div class="auth-branding px-4 px-lg-5 position-relative text-center text-lg-start"
                style="z-index: 2;">
                <div class="auth-logo d-flex flex-column align-items-center align-items-lg-start">
                    <div class="icon-circle bg-white bg-opacity-10 d-flex align-items-center justify-content-center"
                        style="width: 60px; height: 60px; border-radius: 20px;">
                        <i class="bi bi-book-half text-white" style="font-size: 2rem;"></i>
                    </div>
                    <h1 class="text-white fw-bold">DIGIPUS.GO</h1>
                </div>
                <p class="lead text-white d-none d-lg-block" style="opacity: 0.9;">
                    Gerbang Anda menuju dunia pengetahuan. Jelajahi ribuan koleksi buku digital, pinjam dengan mudah,
                    dan lacak progres membaca Anda.
                </p>
            </div>
        </div>

        {{-- FORM LOGIN  --}}
        <div class="d-none d-lg-block position-fixed top-50 translate-middle-y"
            style="right: 7%; z-index: 10; width: 400px; max-width: 90%;">
            <div class="auth-card">
                {{ $slot }}
            </div>
        </div>

        <div class="d-lg-none position-relative" style="z-index: 10; padding-top: 20vh;">
            <div class="container">
                <div class="auth-card mx-3">
                    {{ $slot }}
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const togglePassword = document.querySelector('#togglePassword');
            const password = document.querySelector('#password');

            if (togglePassword && password) {
                const initialIcon = togglePassword.querySelector('i');
                if (!initialIcon.classList.contains('bi-eye-fill') && !initialIcon.classList.contains('bi-eye-slash-fill')) {
                    initialIcon.classList.add('bi-eye-slash-fill');
                }
                
                togglePassword.addEventListener('click', function(e) {
                    const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
                    password.setAttribute('type', type);

                    const icon = this.querySelector('i');
                    if (type === 'password') {
                        icon.classList.remove('bi-eye-fill');
                        icon.classList.add('bi-eye-slash-fill');
                    } else {
                        icon.classList.remove('bi-eye-slash-fill');
                        icon.classList.add('bi-eye-fill');
                    }
                });
            }
        });
    </script>
</body>

</html>