@extends('layouts.auth')
@section('title', __('Iniciar Sesión'))

@section('content')

<div class="auth-card" style="position:relative;overflow:visible">

    {{-- ── Selector de idioma: dentro de la tarjeta, esquina superior derecha ── --}}
    <div style="position:absolute;top:16px;right:16px;z-index:9999">

        <button id="langBtn" type="button"
                style="display:flex;align-items:center;gap:6px;
                       background:#f1f5f9;border:1.5px solid #e2e8f0;
                       border-radius:8px;padding:5px 10px;cursor:pointer;
                       font-size:.78rem;font-weight:600;color:#1a3a5c;
                       line-height:1;transition:background .15s">
            <img id="langFlagImg"
                 src="{{ asset('images/flags/' . session('locale', 'es') . '.png') }}"
                 width="22" height="15" style="border-radius:2px;display:block">
            <span>{{ strtoupper(session('locale', 'es')) }}</span>
            <svg id="langChevron" xmlns="http://www.w3.org/2000/svg"
                 width="10" height="10" viewBox="0 0 24 24"
                 fill="none" stroke="#64748b" stroke-width="2.5"
                 stroke-linecap="round" stroke-linejoin="round"
                 style="transition:transform .2s">
                <polyline points="6 9 12 15 18 9"/>
            </svg>
        </button>

        <div id="langMenu"
             style="display:none;position:absolute;top:calc(100% + 6px);right:0;
                    background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;
                    box-shadow:0 8px 28px rgba(0,0,0,0.15);overflow:hidden;
                    min-width:130px;z-index:9999">
            <a href="{{ route('lang.switch', 'es') }}"
               style="display:flex;align-items:center;gap:9px;padding:10px 14px;
                      text-decoration:none;color:#374151;font-size:.85rem;font-weight:500;
                      background:{{ session('locale','es')==='es' ? '#e8f0fe' : '#fff' }};
                      transition:background .12s">
                <img src="{{ asset('images/flags/es.png') }}" width="22" height="15" style="border-radius:2px">
                <span>Español</span>
            </a>
            <a href="{{ route('lang.switch', 'en') }}"
               style="display:flex;align-items:center;gap:9px;padding:10px 14px;
                      text-decoration:none;color:#374151;font-size:.85rem;font-weight:500;
                      background:{{ session('locale','es')==='en' ? '#e8f0fe' : '#fff' }};
                      transition:background .12s">
                <img src="{{ asset('images/flags/en.png') }}" width="22" height="15" style="border-radius:2px">
                <span>English</span>
            </a>
        </div>
    </div>

    <h2>{{ __('Bienvenido de nuevo') }}</h2>
    <p class="subtitle">{{ __('Introduce tus credenciales para acceder') }}</p>

    @if(session('status'))
        <div class="alert alert-success mb-3">
            <i class="bi bi-check-circle me-2"></i>{{ session('status') }}
        </div>
    @endif

    @if($errors->any())
        <div class="alert alert-danger mb-3">
            <i class="bi bi-exclamation-circle me-2"></i>{{ $errors->first() }}
        </div>
    @endif

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

        <div class="mb-3">
            <label class="form-label">{{ __('Correo electrónico') }}</label>
            <input type="email" name="email"
                   class="form-control @error('email') is-invalid @enderror"
                   value="{{ old('email') }}"
                   placeholder="{{ __('usuario@empresa.com') }}" required autofocus>
            @error('email')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="mb-3">
            <label class="form-label">{{ __('Contraseña') }}</label>
            <div class="input-group">
                <input type="password" name="password" id="pwdField"
                       class="form-control @error('password') is-invalid @enderror"
                       placeholder="{{ __('••••••••') }}" required>
                <button class="btn btn-outline-secondary" type="button" onclick="togglePwd()">
                    <i class="bi bi-eye" id="pwdIcon"></i>
                </button>
            </div>
            @error('password')
                <div class="invalid-feedback d-block">{{ $message }}</div>
            @enderror
        </div>

        <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="remember" id="remember">
                <label class="form-check-label" for="remember" style="font-size:.83rem">
                    {{ __('Recuérdame') }}
                </label>
            </div>
            @if(Route::has('password.request'))
                <a href="{{ route('password.request') }}"
                   style="font-size:.83rem;color:#2563a8;text-decoration:none;font-weight:500;">
                    {{ __('¿Olvidaste tu contraseña?') }}
                </a>
            @endif
        </div>

        <button type="submit" class="btn btn-primary-auth">
            <i class="bi bi-box-arrow-in-right me-2"></i>{{ __('Iniciar Sesión') }}
        </button>
    </form>
</div>

@endsection

@push('scripts')
<script>
(function () {
    var btn     = document.getElementById('langBtn');
    var menu    = document.getElementById('langMenu');
    var chevron = document.getElementById('langChevron');

    btn.addEventListener('click', function (e) {
        e.stopPropagation();
        var opening = menu.style.display === 'none';
        menu.style.display    = opening ? 'block' : 'none';
        chevron.style.transform = opening ? 'rotate(180deg)' : 'rotate(0deg)';
    });

    document.addEventListener('click', function () {
        menu.style.display      = 'none';
        chevron.style.transform = 'rotate(0deg)';
    });

    menu.addEventListener('click', function (e) {
        e.stopPropagation();
    });
})();

function togglePwd() {
    var f = document.getElementById('pwdField');
    var i = document.getElementById('pwdIcon');
    if (f.type === 'password') {
        f.type = 'text';
        i.className = 'bi bi-eye-slash';
    } else {
        f.type = 'password';
        i.className = 'bi bi-eye';
    }
}
</script>
@endpush