@extends('layouts.guest')

@section('content')

@if(session('error'))
<div class="alert alert-warning">
    {{ session('error') }}
</div>
@endif

<div class="dm-login-full d-flex">

    {{-- 🔹 IZQUIERDA: Imagen fullscreen --}}
    <div class="dm-login-image d-none d-md-block flex-fill"></div>

    {{-- 🔹 DERECHA: Formulario --}}
    <div class="dm-login-form-wrapper flex-fill d-flex align-items-center justify-content-center px-4 px-md-5">
        
        <div class="dm-login-card w-100" style="max-width: 420px;">
            <h2 class="text-center mb-4 fw-bold">Iniciar sesión</h2>

            @if(session('status'))
                <div class="alert alert-success">{{ session('status') }}</div>
            @endif

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

                <div class="mb-3">
                    <label for="email" class="form-label">Correo electrónico</label>
                    <input id="email" type="email"
                           class="form-control @error('email') is-invalid @enderror"
                           name="email" value="{{ old('email') }}"
                           required autofocus>
                    @error('email')
                        <span class="invalid-feedback d-block">{{ $message }}</span>
                    @enderror
                </div>

                <div class="mb-3">
                    <label for="password" class="form-label">Contraseña</label>
                    <input id="password" type="password"
                           class="form-control @error('password') is-invalid @enderror"
                           name="password" required>
                    @error('password')
                        <span class="invalid-feedback d-block">{{ $message }}</span>
                    @enderror
                </div>

                <div class="mb-3 form-check">
                    <input class="form-check-input" type="checkbox" name="remember" id="remember">
                    <label class="form-check-label" for="remember">Recordarme</label>
                </div>

                <button type="submit" class="btn btn-primary w-100 py-2 mb-3">Entrar</button>

                <div class="text-center">
                    <a href="{{ route('register') }}">¿No tienes cuenta? Regístrate</a>
                </div>
            </form>
        </div>

    </div>
</div>
@endsection

@push('styles')
<style>
    /* 🔹 OVERRIDE del layout guest SOLO en esta vista */
    .guest-page-wrapper {
        min-height: 100vh;
        display: block;           /* deja de centrar con flex */
        padding: 0;               /* sacamos padding extra */
    }

    /* 🔹 Contenedor full-screen del login */
    .dm-login-full {
        min-height: 100vh;
        width: 100%;
        display: flex;
        position: relative;
        overflow: hidden;
    }

    /* 🔹 Imagen izquierda en escritorio */
    .dm-login-image {
        background-image: url('{{ asset("img/pareja.jpg") }}');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    /* 🔹 Formulario (desktop) */
    .dm-login-form-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .dm-login-card .form-control {
        border-radius: 0.7rem;
        padding: 0.55rem 0.8rem;
    }

    .dm-login-card .form-control:focus {
        box-shadow: 0 0 0 0.12rem rgba(13,110,253,0.18);
    }

    .dm-login-card .btn {
        border-radius: 999px;
        font-size: 0.95rem;
    }

    /* 📱 MÓVIL: imagen de fondo + formulario más arriba */
    @media (max-width: 767.98px) {

        .dm-login-full {
            flex-direction: column;
            min-height: 100vh;
        }

        /* la imagen pasa a ser FONDO detrás del formulario */
        .dm-login-image {
            display: block !important;
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0.35;
            z-index: 1;
        }

        .dm-login-form-wrapper {
            position: relative;
            z-index: 2;
            align-items: flex-start;        /* FORMULARIO ARRIBA */
            justify-content: flex-start;
            padding: 2.5rem 1.5rem 2rem;    /* margen superior */
        }

        .dm-login-card {
            margin: 0 auto;
        }
    }
</style>
@endpush