@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">Crear cuenta</h2>

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

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

                <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>
                    @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">
                    <label for="password_confirmation" class="form-label">Confirmar contraseña</label>
                    <input id="password_confirmation" type="password"
                           class="form-control"
                           name="password_confirmation" required>
                </div>

                <div class="mb-3">
                    <label for="role" class="form-label">Tipo de cuenta</label>
                    <select name="role" id="role" class="form-select" required>
                        <option value="novios" {{ old('role') == 'novios' ? 'selected' : '' }}>Novios</option>
                        <option value="comercio" {{ old('role') == 'comercio' ? 'selected' : '' }}>Comercio</option>
                        <option value="planner" {{ old('role') == 'planner' ? 'selected' : '' }}>Weddin Planner</option>
                    </select>
                    @error('role')
                        <span class="invalid-feedback d-block">{{ $message }}</span>
                    @enderror
                </div>

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

                <div class="text-center">
                    <a href="{{ route('login') }}">¿Ya tienes cuenta? Inicia sesión</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;
        padding: 0;
    }

    /* 🔹 Contenedor full-screen */
    .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;
        }

        .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;
            justify-content: flex-start;
            padding: 2.5rem 1.5rem 2rem;
        }

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