@extends('layouts.client')

@section('title', 'Piter! Restaurante - Registro')

@section('client_content')

    {{-- Contenedor principal --}}
    <div class="login-body">
        
        <div class="main-wrapper">
            
            {{-- SECCIÓN IZQUIERDA (HERO) --}}
            <section class="hero-section">
                <div class="hero-overlay"></div> 
                <div class="top-brand">PITER<span>!</span></div>

                <div class="hero-content">
                    <div class="hero-text">
                        <h1>Únete a <br> <span>Nosotros</span></h1>
                        <p>Crea tu cuenta para realizar pedidos, reservas y disfrutar de beneficios exclusivos.</p>
                    </div>
                </div>
            </section>

            {{-- SECCIÓN DERECHA (FORMULARIO) --}}
            <section class="form-section">
                
                <div class="form-card">
                    
                    <div class="logo-container">
                        <img src="{{ asset('logopiter.png') }}" alt="P" onerror="this.style.display='none'">
                    </div>

                    <div class="brand-header">
                        <h2>Crear Cuenta</h2>
                        <p>Regístrate como Cliente</p>
                    </div>

                    {{-- MENSAJES DE ERROR/ÉXITO --}}
                    @if(session('error'))
                        <div style="padding: 10px; margin-bottom: 15px; border-radius: 6px; font-size: 13px; text-align: center; background-color: #fee2e2; color: #991b1b; border: 1px solid #f87171;">
                            {{ session('error') }}
                        </div>
                    @endif

                    @if($errors->any())
                        <div style="padding: 10px; margin-bottom: 15px; border-radius: 6px; font-size: 13px; text-align: left; background-color: #fee2e2; color: #991b1b; border: 1px solid #f87171;">
                            <ul style="margin: 0; padding-left: 15px;">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="form-wrapper active">
                        <form action="{{ route('register.submit') }}" method="POST">
                            @csrf 
                            
                            <div style="display: flex; gap: 10px;">
                                <div class="input-block" style="flex: 1;">
                                    <label>Nombre</label>
                                    <input type="text" name="nombre" class="input-field" placeholder="Juan" value="{{ old('nombre') }}" required>
                                </div>
                                <div class="input-block" style="flex: 1;">
                                    <label>Apellido</label>
                                    <input type="text" name="apellido" class="input-field" placeholder="Pérez" value="{{ old('apellido') }}" required>
                                </div>
                            </div>

                            <div class="input-block">
                                <label>Correo Electrónico</label>
                                <input type="email" name="email" class="input-field" placeholder="cliente@piter.com" value="{{ old('email') }}" required>
                            </div>

                            <div style="display: flex; gap: 10px;">
                                <div class="input-block" style="flex: 1;">
                                    <label>Teléfono</label>
                                    <input type="text" name="telefono" class="input-field" placeholder="999888777" value="{{ old('telefono') }}">
                                </div>
                                <div class="input-block" style="flex: 1;">
                                    <label>Sexo</label>
                                    <select name="sexo" class="input-field">
                                        <option value="" disabled selected>Seleccione</option>
                                        <option value="M" {{ old('sexo') == 'M' ? 'selected' : '' }}>Masculino</option>
                                        <option value="F" {{ old('sexo') == 'F' ? 'selected' : '' }}>Femenino</option>
                                        <option value="O" {{ old('sexo') == 'O' ? 'selected' : '' }}>Otro</option>
                                    </select>
                                </div>
                            </div>

                            <div style="display: flex; gap: 10px;">
                                <div class="input-block" style="flex: 1;">
                                    <label>Tipo Doc.</label>
                                    <select name="tipo_documento" class="input-field">
                                        <option value="DNI" {{ old('tipo_documento') == 'DNI' ? 'selected' : '' }}>DNI</option>
                                        <option value="RUC" {{ old('tipo_documento') == 'RUC' ? 'selected' : '' }}>RUC</option>
                                        <option value="CE" {{ old('tipo_documento') == 'CE' ? 'selected' : '' }}>CE</option>
                                        <option value="PASAPORTE" {{ old('tipo_documento') == 'PASAPORTE' ? 'selected' : '' }}>Pasaporte</option>
                                    </select>
                                </div>
                                <div class="input-block" style="flex: 2;">
                                    <label>Nro. Documento</label>
                                    <input type="text" name="numero_documento" class="input-field" placeholder="12345678" value="{{ old('numero_documento') }}">
                                </div>
                            </div>

                            <div class="input-block">
                                <label>Contraseña</label>
                                <input type="password" name="password" id="reg-pass" class="input-field" placeholder="••••••••" required>
                            </div>

                            <div class="input-block">
                                <label>Confirmar Contraseña</label>
                                <input type="password" name="password_confirmation" id="reg-pass-conf" class="input-field" placeholder="••••••••" required>
                            </div>

                            <div style="margin-top: 5px; margin-bottom: 20px;">
                                <label style="font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 5px; cursor: pointer;">
                                    <input type="checkbox" onclick="toggleRegisterPasswords()"> Mostrar contraseñas
                                </label>
                            </div>
                            
                            <button type="submit" class="submit-btn" style="margin-bottom: 15px;">Registrarse</button>

                            <div style="text-align: center; font-size: 14px; color: #64748b;">
                                ¿Ya tienes cuenta? <a href="{{ route('login') }}" style="color: var(--brand-color); font-weight: 600; text-decoration: none;">Inicia Sesión</a>
                            </div>

                        </form>
                    </div>

                    <div style="text-align: center; margin-top: 30px; color: #cbd5e1; font-size: 11px;">
                        © 2026 PITER! RESTAURANT SYSTEMS
                    </div>

                </div>
            </section>
        </div>
    </div>

    <script>
        function toggleRegisterPasswords() {
            const pass = document.getElementById('reg-pass');
            const conf = document.getElementById('reg-pass-conf');
            const type = pass.type === 'password' ? 'text' : 'password';
            pass.type = type;
            conf.type = type;
        }
    </script>
@endsection