@extends('adminlte::master')

@section('adminlte_css')
    <link rel="stylesheet" href="{{ asset('css/premium-ui.css') }}">
    <style>
        :root {
            --login-gold: #FFCC21;
            --login-gold-light: #FFE566;
            --login-gold-mid: #F5C000;
            --login-gold-dark: #E6A800;
            --login-gold-darker: #C89400;
            --login-text-on-gold: #1e293b;
        }
        body {
            background-color: #f4f6f9;
            min-height: 100vh;
            min-height: 100dvh;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0;
            overflow-x: hidden;
            overflow-y: auto;
            padding: clamp(10px, 2vw, 24px);
            font-family: 'Nunito', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
        .login-wrapper {
            display: flex;
            flex-direction: row;
            width: min(1000px, 96vw);
            max-width: 96vw;
            min-height: clamp(480px, 88dvh, 720px);
            height: auto;
            background: #fff;
            border-radius: clamp(12px, 2vw, 20px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        .login-sidebar {
            flex: 1 1 42%;
            min-width: 0;
            min-height: 260px;
            padding: 0;
            position: relative;
            overflow: hidden;
            background: linear-gradient(
                145deg,
                var(--login-gold-light) 0%,
                var(--login-gold) 38%,
                var(--login-gold-mid) 62%,
                var(--login-gold-dark) 100%
            );
        }
        .login-sidebar::before {
            content: '';
            position: absolute;
            top: -40%;
            left: -40%;
            width: 180%;
            height: 180%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, transparent 55%);
            transform: rotate(25deg);
            pointer-events: none;
        }
        .login-sidebar::after {
            content: '';
            position: absolute;
            bottom: -30px;
            right: -30px;
            width: clamp(100px, 18vw, 160px);
            height: clamp(100px, 18vw, 160px);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            pointer-events: none;
        }
        .login-sidebar-content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            height: 100%;
            min-height: inherit;
            padding: clamp(24px, 4vw, 40px) clamp(18px, 3vw, 30px);
            color: var(--login-text-on-gold);
            text-align: center;
        }
        .login-sidebar-main {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 1;
            width: 100%;
        }
        .login-sidebar-logo {
            width: clamp(110px, 20vw, 170px);
            height: auto;
            margin-bottom: clamp(16px, 3vw, 24px);
            filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.18));
        }
        .login-form-area {
            flex: 1 1 58%;
            min-width: 0;
            padding: clamp(28px, 5vw, 60px) clamp(22px, 4vw, 50px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            background-color: #ffffff;
        }
        .login-brand {
            font-size: clamp(1.25rem, 2.2vw + 0.4rem, 2rem);
            font-weight: 800;
            margin-bottom: clamp(8px, 1.5vw, 12px);
            line-height: 1.2;
            color: var(--login-text-on-gold);
            text-shadow: 0 1px 2px rgba(255, 255, 255, 0.35);
        }
        .login-subtitle {
            font-size: clamp(0.8rem, 1vw + 0.35rem, 1rem);
            font-weight: 500;
            color: rgba(30, 41, 59, 0.88);
            margin-bottom: 0;
            line-height: 1.45;
            max-width: min(95%, 20rem);
        }
        .login-sidebar-footer {
            color: rgba(30, 41, 59, 0.78);
            font-weight: 600;
            font-size: clamp(0.65rem, 0.8vw + 0.3rem, 0.8rem);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            width: 100%;
        }
        .form-control-custom {
            border-radius: 12px;
            padding: clamp(12px, 2vw, 14px) clamp(16px, 2vw, 20px);
            border: 1px solid #e2e8f0;
            background: #f8fafc;
            height: auto;
            transition: all 0.3s;
            font-size: clamp(0.9375rem, 1vw + 0.25rem, 1rem);
        }
        .form-control-custom:focus {
            background: #fff;
            border-color: var(--login-gold);
            box-shadow: 0 0 0 0.25rem rgba(255, 204, 33, 0.2);
            outline: none;
        }
        .input-icon {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 18px;
            color: #94a3b8;
            font-size: 1.1rem;
            transition: color 0.3s;
            z-index: 5;
        }
        .input-toggle {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: #94a3b8;
            cursor: pointer;
            z-index: 5;
            padding: 4px 8px;
            line-height: 1;
        }
        .input-toggle:hover {
            color: var(--login-gold-darker);
        }
        .has-icon .form-control-custom {
            padding-left: 50px;
        }
        .has-toggle .form-control-custom {
            padding-right: 48px;
        }
        .has-icon .form-control-custom:focus + .input-icon,
        .has-icon:focus-within .input-icon {
            color: var(--login-gold-darker);
        }
        .has-toggle:focus-within .input-toggle {
            color: var(--login-gold-darker);
        }
        .btn-login {
            padding: clamp(12px, 2vw, 14px);
            border-radius: 12px;
            font-weight: 700;
            font-size: clamp(1rem, 1.2vw + 0.25rem, 1.1rem);
            letter-spacing: 0.5px;
            background: linear-gradient(to right, var(--login-gold), var(--login-gold-dark));
            border: none;
            color: var(--login-text-on-gold);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .btn-login:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(255, 204, 33, 0.35);
            color: var(--login-text-on-gold);
        }
        .btn-login:active {
            transform: translateY(0);
        }
        .login-title {
            font-size: clamp(1.35rem, 2vw + 0.5rem, 1.75rem);
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 0.5rem;
        }
        .login-desc {
            color: #64748b;
            font-size: clamp(0.875rem, 1vw + 0.25rem, 1rem);
            margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
        }

        @media (max-width: 767px) {
            body {
                align-items: flex-start;
                padding: clamp(8px, 2vw, 16px);
            }
            .login-wrapper {
                flex-direction: column;
                width: 100%;
                max-width: 100%;
                min-height: auto;
            }
            .login-sidebar {
                flex: none;
                width: 100%;
                min-height: clamp(220px, 32dvh, 300px);
            }
            .login-sidebar-logo {
                width: clamp(90px, 24vw, 130px);
                margin-bottom: 12px;
            }
            .login-form-area {
                flex: 1 1 auto;
                width: 100%;
            }
        }

        @media (max-width: 380px) {
            .login-sidebar {
                min-height: clamp(200px, 30dvh, 260px);
            }
            .login-subtitle {
                max-width: 100%;
            }
        }

        @media (max-height: 520px) and (orientation: landscape) {
            body {
                align-items: center;
                padding: 8px;
            }
            .login-wrapper {
                flex-direction: row;
                min-height: min(96dvh, 480px);
                max-height: 96dvh;
            }
            .login-sidebar {
                flex: 1 1 38%;
                min-height: 100%;
            }
            .login-sidebar-logo {
                width: clamp(80px, 14vw, 110px);
                margin-bottom: 10px;
            }
            .login-form-area {
                flex: 1 1 62%;
                padding: 20px 24px;
                overflow-y: auto;
            }
            .login-desc {
                margin-bottom: 1rem;
            }
        }

        @media (min-width: 1400px) {
            .login-wrapper {
                width: min(1100px, 88vw);
                min-height: clamp(560px, 82dvh, 780px);
            }
        }

        @media (min-width: 1920px) {
            .login-wrapper {
                width: min(1200px, 75vw);
            }
        }

        .custom-control-input:checked ~ .custom-control-label::before {
            background-color: var(--login-gold);
            border-color: var(--login-gold-dark);
        }
        .custom-control-input:focus ~ .custom-control-label::before {
            box-shadow: 0 0 0 0.2rem rgba(255, 204, 33, 0.25);
        }
        .custom-control-input:checked ~ .custom-control-label {
            color: var(--login-text-on-gold);
            font-weight: 500;
        }
    </style>
@stop

@section('classes_body', 'login-page-custom')

@section('body')
<div class="login-wrapper">
    <div class="login-sidebar">
        <div class="login-sidebar-content">
            <div class="login-sidebar-main">
                <img src="{{ asset(config('adminlte.preloader.img.path')) }}" alt="TAMCA — Tornillos Adriansa Mayor C.A." class="login-sidebar-logo">
                <h1 class="login-brand mb-0">Dashboard Interactivo</h1>
                <h3 class="login-subtitle">Ventas, inventario y finanzas de tu negocio en tiempo real</h3>
            </div>
            <p class="small login-sidebar-footer mb-0">
                Acceso Seguro & Encriptado
            </p>
        </div>
    </div>

    <div class="login-form-area">
        <h2 class="login-title">Iniciar Sesión</h2>
        <p class="login-desc">Por favor, identifícate para continuar al panel.</p>

        <form action="{{ route('login') }}" method="post">
            @csrf

            <div class="form-group position-relative has-icon mb-4">
                <input type="email" name="email" id="email" class="form-control form-control-custom @error('email') is-invalid @enderror"
                       value="{{ old('email') }}" placeholder="{{ __('adminlte::adminlte.email') }}" autofocus required autocomplete="email">
                <i class="fas fa-envelope input-icon"></i>
                @error('email')
                    <span class="invalid-feedback d-block mt-2 font-weight-bold" role="alert">
                        <i class="fas fa-exclamation-circle mr-1"></i> {{ $message }}
                    </span>
                @enderror
            </div>

            <div class="form-group position-relative has-icon has-toggle mb-4">
                <input type="password" name="password" id="password" class="form-control form-control-custom @error('password') is-invalid @enderror"
                       placeholder="{{ __('adminlte::adminlte.password') }}" required autocomplete="current-password">
                <i class="fas fa-lock input-icon"></i>
                <button type="button" class="input-toggle" id="toggle-password" title="Ver contraseña" aria-label="Ver contraseña">
                    <i class="fas fa-eye"></i>
                </button>
                @error('password')
                    <span class="invalid-feedback d-block mt-2 font-weight-bold" role="alert">
                        <i class="fas fa-exclamation-circle mr-1"></i> {{ $message }}
                    </span>
                @enderror
            </div>

            <div class="d-flex justify-content-between align-items-center mb-5">
                <div class="custom-control custom-switch">
                    <input type="checkbox" class="custom-control-input" id="remember" name="remember" {{ old('remember') ? 'checked' : '' }}>
                    <label class="custom-control-label text-muted font-weight-normal" style="cursor: pointer" for="remember" title="Recordar credenciales en este equipo">Recordarme</label>
                </div>
            </div>

            <button type="submit" class="btn btn-block btn-login" title="Iniciar sesión en el panel">
                <span>{{ __('adminlte::adminlte.sign_in') }}</span> <i class="fas fa-arrow-right ml-2"></i>
            </button>
        </form>
    </div>
</div>
@stop

@section('adminlte_js')
<script>
    document.getElementById('toggle-password')?.addEventListener('click', function () {
        const input = document.getElementById('password');
        const icon = this.querySelector('i');
        const show = input.type === 'password';
        input.type = show ? 'text' : 'password';
        icon.classList.toggle('fa-eye', !show);
        icon.classList.toggle('fa-eye-slash', show);
        this.title = show ? 'Ocultar contraseña' : 'Ver contraseña';
        this.setAttribute('aria-label', this.title);
    });
</script>
@stop