@extends('layouts.guest')

@section('content')
<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/estadio.avif") }}');
        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
@extends('layouts.guest')

@section('title', 'Iniciar sesión · DeporGestion')

@section('content')
<div class="dg-auth">

    {{-- Lado imagen (desktop) --}}
    <div class="dg-auth__media d-none d-lg-block">
        <div class="dg-auth__media-overlay">
            <div class="dg-auth__brand">
                <div class="dg-auth__logo"></div>
                <div>
                    <div class="dg-auth__name">DeporGestion</div>
                    <div class="dg-auth__tagline">Gestión deportiva en un solo lugar</div>
                </div>
            </div>

            <div class="dg-auth__quote">
                <div class="dg-auth__quote-title">Orden. Datos. Decisiones.</div>
                <div class="dg-auth__quote-text">
                    Planificación, planteles, competencias y reportes listos para tu club.
                </div>
            </div>
        </div>
    </div>

    {{-- Form --}}
    <div class="dg-auth__form-wrap">
        <div class="dg-auth__card">
            <div class="dg-auth__card-head">
                <div class="dg-auth__chip">Acceso seguro</div>
                <h1 class="dg-auth__title">Iniciar sesión</h1>
                <p class="dg-auth__subtitle">Entra con tu correo y contraseña.</p>
            </div>

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

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

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

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

                <div class="d-flex align-items-center justify-content-between mb-3 mt-2">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="remember" id="remember">
                        <label class="form-check-label dg-check" for="remember">Recordarme</label>
                    </div>

                    @if (Route::has('password.request'))
                        <a class="dg-link" href="{{ route('password.request') }}">
                            ¿Olvidaste tu contraseña?
                        </a>
                    @endif
                </div>

                <button type="submit" class="btn dg-btn w-100 py-2">
                    Entrar →
                </button>

                <div class="dg-auth__divider"><span>o</span></div>

                <div class="text-center">
                    @if (Route::has('register'))
                        <a class="dg-link" href="{{ route('register') }}">
                            ¿No tienes cuenta? Regístrate
                        </a>
                    @endif
                </div>
            </form>

            <div class="dg-auth__foot">
                <span>© {{ date('Y') }} DeporGestion</span>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    :root{
        --bg: #ffffff;
        --text: #0f172a;
        --muted: #475569;
        --line: #e5e7eb;
        --accent: #22c55e;
        --accent2: #16a34a;
        --shadow: 0 18px 55px rgba(2, 6, 23, .10);
        --radius: 22px;
    }

    body{
        background: radial-gradient(1100px 500px at 20% 10%, rgba(34,197,94,.14), transparent 60%),
                    radial-gradient(900px 420px at 85% 20%, rgba(34,197,94,.10), transparent 60%),
                    var(--bg);
        color: var(--text);
    }

    .guest-page-wrapper{
        min-height: 100vh;
    }

    .dg-auth{
        min-height: 100vh;
        display: grid;
        grid-template-columns: 1.05fr .95fr;
    }
    @media (max-width: 991.98px){
        .dg-auth{ grid-template-columns: 1fr; }
    }

    /* MEDIA SIDE */
    .dg-auth__media{
        position: relative;
        background-image: url('{{ asset("img/pareja.jpg") }}');
        background-size: cover;
        background-position: center;
        border-right: 1px solid rgba(255,255,255,.10);
    }
    .dg-auth__media:after{
        content:"";
        position:absolute; inset:0;
        background:
            linear-gradient(120deg, rgba(2,6,23,.80), rgba(2,6,23,.35)),
            radial-gradient(520px 320px at 20% 20%, rgba(34,197,94,.35), transparent 60%);
    }
    .dg-auth__media-overlay{
        position: relative;
        z-index: 2;
        height: 100%;
        padding: 34px;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        color: rgba(255,255,255,.92);
    }
    .dg-auth__brand{
        display:flex; gap: 12px; align-items:center;
    }
    .dg-auth__logo{
        width:44px; height:44px; border-radius: 14px;
        background: radial-gradient(18px 18px at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
                    linear-gradient(135deg, var(--accent), var(--accent2));
        box-shadow: 0 18px 40px rgba(34,197,94,.22);
        border: 1px solid rgba(34,197,94,.45);
    }
    .dg-auth__name{ font-weight: 900; letter-spacing: -.4px; }
    .dg-auth__tagline{ font-weight: 700; font-size: 12px; opacity:.85; margin-top:2px; }

    .dg-auth__quote{
        max-width: 46ch;
        border: 1px solid rgba(255,255,255,.16);
        background: rgba(255,255,255,.06);
        border-radius: 18px;
        padding: 18px;
        backdrop-filter: blur(10px);
    }
    .dg-auth__quote-title{
        font-weight: 900;
        letter-spacing: .8px;
        text-transform: uppercase;
        font-size: 13px;
        margin-bottom: 6px;
    }
    .dg-auth__quote-text{
        opacity:.9;
        line-height: 1.6;
        font-weight: 600;
        font-size: 14px;
    }

    /* FORM SIDE */
    .dg-auth__form-wrap{
        display:flex;
        align-items:center;
        justify-content:center;
        padding: 28px;
    }
    .dg-auth__card{
        width: 100%;
        max-width: 430px;
        border: 1px solid var(--line);
        background: rgba(255,255,255,.85);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        padding: 22px;
        backdrop-filter: blur(10px);
    }
    .dg-auth__card-head{ margin-bottom: 14px; }
    .dg-auth__chip{
        display:inline-flex; align-items:center;
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid rgba(34,197,94,.25);
        background: rgba(34,197,94,.10);
        color: #14532d;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: .8px;
        font-size: 11px;
    }
    .dg-auth__title{
        margin: 10px 0 6px;
        font-weight: 950;
        letter-spacing: -1px;
        text-transform: uppercase;
        font-size: 26px;
    }
    .dg-auth__subtitle{
        margin:0;
        color: var(--muted);
        font-weight: 650;
        line-height: 1.5;
        font-size: 14px;
    }

    .dg-label{
        font-weight: 850;
        font-size: 12px;
        color: #0f172a;
        letter-spacing: .3px;
        text-transform: uppercase;
    }

    .dg-input{
        border-radius: 14px;
        padding: .7rem .85rem;
        border: 1px solid var(--line);
        background: #fff;
        font-weight: 650;
    }
    .dg-input:focus{
        border-color: rgba(34,197,94,.55);
        box-shadow: 0 0 0 .18rem rgba(34,197,94,.14);
    }

    .dg-check{ font-weight: 700; color: var(--muted); }
    .dg-link{
        color: #0f172a;
        font-weight: 900;
        text-decoration: none;
    }
    .dg-link:hover{
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }

    .dg-btn{
        border: none;
        border-radius: 999px;
        font-weight: 950;
        letter-spacing: .2px;
        background: linear-gradient(135deg, var(--accent), var(--accent2));
        color: #052012;
        box-shadow: 0 16px 34px rgba(34,197,94,.20);
    }
    .dg-btn:hover{ filter: brightness(1.03); transform: translateY(-1px); transition: .2s; }

    .dg-auth__divider{
        margin: 14px 0 10px;
        display:flex;
        align-items:center;
        gap: 10px;
        color: #94a3b8;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 11px;
    }
    .dg-auth__divider:before,
    .dg-auth__divider:after{
        content:"";
        height:1px;
        background: var(--line);
        flex:1;
    }
    .dg-auth__divider span{
        padding: 0 8px;
    }

    .dg-auth__foot{
        margin-top: 14px;
        text-align:center;
        color: #94a3b8;
        font-weight: 800;
        font-size: 12px;
    }

    /* Mobile: fondo con imagen suave */
    @media (max-width: 991.98px){
        .dg-auth{
            position: relative;
        }
        .dg-auth:before{
            content:"";
            position:absolute; inset:0;
            background-image: url('{{ asset("img/pareja.jpg") }}');
            background-size: cover;
            background-position: center;
            opacity: .14;
            filter: saturate(1.1);
            pointer-events:none;
        }
        .dg-auth__form-wrap{
            position: relative;
            z-index: 2;
            padding: 22px;
        }
        .dg-auth__card{
            background: rgba(255,255,255,.92);
        }
    }
</style>
@endpush