@extends('layouts.portal')

@section('title', 'Registro de Pacientes')

@section('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<style>
    /* Estilos mejorados para la página de registro */
    .hero-section {
        background: linear-gradient(135deg, #6A11CB, #2575FC);
        color: white;
        padding: 100px 0 120px;
        position: relative;
        overflow: hidden;
        border-bottom-left-radius: 60px;
        border-bottom-right-radius: 60px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }
    
    .hero-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
        opacity: 0.4;
    }
    
    .hero-content h1 {
        font-size: 2.8rem;
        font-weight: 800;
        text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        margin-bottom: 1rem;
        position: relative;
        z-index: 2;
    }
    
    .hero-content p {
        font-size: 1.2rem;
        max-width: 700px;
        margin: 0 auto;
        opacity: 0.95;
        position: relative;
        z-index: 2;
    }
    
    .form-section {
        padding: 60px 0;
        position: relative;
        margin-top: -50px;
    }
    
    .registration-card {
        border-radius: 20px;
        box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
        transition: all 0.3s;
        border: none;
        overflow: hidden;
        background: white;
    }
    
    .registration-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(50, 50, 93, 0.15), 0 10px 20px rgba(0, 0, 0, 0.1);
    }
    
    .card-body {
        padding: 3rem !important;
    }
    
    .card-title {
        font-weight: 800;
        color: #2c3e50;
        position: relative;
        margin-bottom: 2rem;
        font-size: 1.75rem;
    }
    
    .card-title::after {
        content: '';
        position: absolute;
        width: 60px;
        height: 4px;
        background: #6A11CB;
        bottom: -12px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 5px;
    }
    
    .form-label {
        font-weight: 600;
        font-size: 0.95rem;
        color: #2c3e50;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
    }
    
    .form-label i {
        color: #6A11CB;
        margin-right: 0.5rem;
        font-size: 1rem;
    }
    
    .form-control, .form-select {
        padding: 0.8rem 1rem;
        border-radius: 10px;
        border: 2px solid #e9ecef;
        font-size: 1rem;
        transition: all 0.3s;
        background-color: #f8f9fa;
    }
    
    .form-control:focus, .form-select:focus {
        border-color: #6A11CB;
        box-shadow: 0 0 0 0.2rem rgba(106, 17, 203, 0.25);
        background-color: white;
    }
    
    .form-text {
        color: #6c757d;
        font-size: 0.85rem;
        margin-top: 0.5rem;
    }
    
    .btn-primary {
        background: linear-gradient(135deg, #6A11CB, #2575FC);
        border: none;
        padding: 1rem 2rem;
        font-weight: 600;
        letter-spacing: 0.5px;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
        transition: all 0.3s;
    }
    
    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
        background: linear-gradient(135deg, #7B1FDA, #3585FD);
    }
    
    .form-check-input:checked {
        background-color: #6A11CB;
        border-color: #6A11CB;
    }
    
    .form-section-title {
        color: #2c3e50;
        font-weight: 700;
        margin-bottom: 0.75rem;
        font-size: 1.2rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #e9ecef;
    }
    
    .benefits-section {
        background-color: #f8fafc;
        padding: 80px 0;
        margin-top: 60px;
        border-radius: 20px;
        position: relative;
    }
    
    .benefit-card {
        padding: 2rem;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transition: all 0.3s;
        border: none !important;
        height: 100%;
        background: white;
    }
    
    .benefit-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
    }
    
    .benefit-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #6A11CB, #2575FC);
        margin: 0 auto 1.5rem;
        color: white;
        box-shadow: 0 10px 20px rgba(106, 17, 203, 0.2);
    }
    
    .benefit-card h4 {
        font-weight: 700;
        margin-bottom: 1rem;
        color: #2c3e50;
    }
    
    .benefit-card p {
        color: #6c757d;
        line-height: 1.6;
    }
    
    .cta-section {
        background: linear-gradient(135deg, #FF9966, #FF5E62);
        color: white;
        padding: 80px 0;
        margin-top: 80px;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
    }
    
    .cta-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
        opacity: 0.5;
    }
    
    .cta-content {
        position: relative;
        z-index: 1;
        text-align: center;
    }
    
    .cta-content h2 {
        font-weight: 700;
        font-size: 2.2rem;
        margin-bottom: 1rem;
        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
    }
    
    .cta-btn {
        background-color: white;
        color: #FF5E62;
        font-weight: 600;
        padding: 1rem 2rem;
        border-radius: 10px;
        transition: all 0.3s;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    .cta-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 7px 14px rgba(0,0,0,0.1);
        background-color: #f8f9fa;
        color: #FF5E62;
    }
    
    .required-field::after {
        content: ' *';
        color: #FF5E62;
    }
    
    /* Animaciones */
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .fade-in-up {
        animation: fadeInUp 0.6s ease forwards;
    }
    
    .delay-1 {
        animation-delay: 0.2s;
    }
    
    .delay-2 {
        animation-delay: 0.4s;
    }
    
    .delay-3 {
        animation-delay: 0.6s;
    }
    
    /* Responsividad */
    @media (max-width: 768px) {
        .hero-section {
            padding: 60px 0 80px;
        }
        
        .hero-content h1 {
            font-size: 2.2rem;
        }
        
        .card-body {
            padding: 2rem !important;
        }
    }
</style>
@endsection

@section('content')
    <!-- Hero Section -->
    <section class="hero-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 hero-content text-center">
                    <h1><i class="fas fa-user-plus me-2"></i>Registro de Pacientes</h1>
                    <p>Complete el formulario para registrarse como paciente y acceder a todos nuestros servicios médicos de calidad</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Registration Form Section -->
    <section class="form-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-10 mx-auto fade-in-up">
                    <div class="card registration-card">
                        <div class="card-body">
                            @if (session('success'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif
                            
                            @if (session('error'))
                                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                    <i class="fas fa-exclamation-circle me-2"></i>{{ session('error') }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif

                            <h3 class="card-title text-center">Información del Paciente</h3>
                            
                            <form action="{{ route('portal.storePatient') }}" method="POST" id="patientForm" class="needs-validation" novalidate>
                                @csrf
                                
                                <div class="mb-4">
                                    <h5 class="form-section-title">
                                        <i class="fas fa-user-circle me-2"></i>Datos Personales
                                    </h5>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="firstname" class="form-label required-field">
                                            <i class="fas fa-user"></i>Nombre
                                        </label>
                                        <input type="text" class="form-control @error('firstname') is-invalid @enderror" id="firstname" name="firstname" value="{{ old('firstname') }}" placeholder="Ingrese su nombre" required>
                                        @error('firstname')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="lastname" class="form-label required-field">
                                            <i class="fas fa-user"></i>Apellido
                                        </label>
                                        <input type="text" class="form-control @error('lastname') is-invalid @enderror" id="lastname" name="lastname" value="{{ old('lastname') }}" placeholder="Ingrese su apellido" required>
                                        @error('lastname')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="identification" class="form-label required-field">
                                            <i class="fas fa-id-card"></i>Número de Identificación
                                        </label>
                                        <input type="text" class="form-control @error('identification') is-invalid @enderror" id="identification" name="identification" value="{{ old('identification') }}" placeholder="Ingrese su número de DNI" required>
                                        <small class="form-text">
                                            <i class="fas fa-info-circle me-1"></i>Este número es importante para acceder a sus citas y expediente médico
                                        </small>
                                        @error('identification')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="birthday" class="form-label required-field">
                                            <i class="fas fa-birthday-cake"></i>Fecha de Nacimiento
                                        </label>
                                        <input type="text" class="form-control @error('birthday') is-invalid @enderror" id="birthday" name="birthday" placeholder="dd/mm/yyyy" value="{{ old('birthday') }}" required>
                                        @error('birthday')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="age" class="form-label required-field">
                                            <i class="fas fa-sort-numeric-up"></i>Edad
                                        </label>
                                        <input type="number" class="form-control @error('age') is-invalid @enderror" id="age" name="age" value="{{ old('age') }}" placeholder="Su edad se calculará automáticamente" readonly required>
                                        @error('age')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="gender" class="form-label required-field">
                                            <i class="fas fa-venus-mars"></i>Género
                                        </label>
                                        <select class="form-select @error('gender') is-invalid @enderror" id="gender" name="gender" required>
                                            <option value="">Seleccione una opción</option>
                                            <option value="M" {{ old('gender') == 'M' ? 'selected' : '' }}>Masculino</option>
                                            <option value="F" {{ old('gender') == 'F' ? 'selected' : '' }}>Femenino</option>
                                        </select>
                                        @error('gender')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="mb-4 mt-4">
                                    <h5 class="form-section-title">
                                        <i class="fas fa-address-book me-2"></i>Información de Contacto
                                    </h5>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="phone" class="form-label required-field">
                                            <i class="fas fa-phone-alt"></i>Teléfono
                                        </label>
                                        <input type="tel" class="form-control @error('phone') is-invalid @enderror" id="phone" name="phone" value="{{ old('phone') }}" placeholder="Ingrese su número telefónico" required>
                                        @error('phone')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="email" class="form-label">
                                            <i class="fas fa-envelope"></i>Correo Electrónico
                                        </label>
                                        <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" value="{{ old('email') }}" placeholder="Ingrese su correo electrónico">
                                        <small class="form-text">
                                            <i class="fas fa-info-circle me-1"></i>Recibirá recordatorios de citas en este correo
                                        </small>
                                        @error('email')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="address" class="form-label">
                                            <i class="fas fa-map-marker-alt"></i>Dirección
                                        </label>
                                        <input type="text" class="form-control @error('address') is-invalid @enderror" id="address" name="address" value="{{ old('address') }}" placeholder="Ingrese su dirección completa">
                                        @error('address')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="blood_type" class="form-label">
                                            <i class="fas fa-tint"></i>Grupo Sanguíneo
                                        </label>
                                        <select class="form-select @error('blood_type') is-invalid @enderror" id="blood_type" name="blood_type">
                                            <option value="">Seleccione una opción</option>
                                            <option value="A+" {{ old('blood_type') == 'A+' ? 'selected' : '' }}>A+</option>
                                            <option value="A-" {{ old('blood_type') == 'A-' ? 'selected' : '' }}>A-</option>
                                            <option value="B+" {{ old('blood_type') == 'B+' ? 'selected' : '' }}>B+</option>
                                            <option value="B-" {{ old('blood_type') == 'B-' ? 'selected' : '' }}>B-</option>
                                            <option value="AB+" {{ old('blood_type') == 'AB+' ? 'selected' : '' }}>AB+</option>
                                            <option value="AB-" {{ old('blood_type') == 'AB-' ? 'selected' : '' }}>AB-</option>
                                            <option value="O+" {{ old('blood_type') == 'O+' ? 'selected' : '' }}>O+</option>
                                            <option value="O-" {{ old('blood_type') == 'O-' ? 'selected' : '' }}>O-</option>
                                        </select>
                                        @error('blood_type')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="mt-4 mb-4">
                                    <div class="form-check">
                                        <input class="form-check-input @error('terms') is-invalid @enderror" type="checkbox" id="terms" name="terms" required>
                                        <label class="form-check-label" for="terms">
                                            Acepto los <a href="#" class="text-decoration-none">términos y condiciones</a> y la <a href="#" class="text-decoration-none">política de privacidad</a> *
                                        </label>
                                        @error('terms')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                                
                                <div class="d-grid gap-2 mt-4">
                                    <button type="submit" class="btn btn-primary btn-lg">
                                        <i class="fas fa-user-plus me-2"></i>Completar Registro
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <div class="text-center mt-4 fade-in-up delay-1">
                        <p>¿Ya está registrado? <a href="{{ route('portal.appointments') }}" class="fw-bold text-decoration-none">Agende su cita ahora</a></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Benefits Section -->
    <section class="benefits-section fade-in-up delay-2">
        <div class="container">
            <div class="row text-center mb-5">
                <div class="col-12">
                    <h2 class="fw-bold">Beneficios de Registrarse</h2>
                    <p class="text-muted">Conozca todas las ventajas de ser parte de nuestro centro médico</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="benefit-card">
                        <div class="benefit-icon">
                            <i class="fas fa-user-check fa-2x"></i>
                        </div>
                        <h4 class="text-center">Registro Único</h4>
                        <p class="text-center">Regístrese una sola vez y acceda a todos nuestros servicios médicos sin necesidad de llenar formularios repetidamente.</p>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="benefit-card">
                        <div class="benefit-icon">
                            <i class="fas fa-calendar-alt fa-2x"></i>
                        </div>
                        <h4 class="text-center">Citas Simplificadas</h4>
                        <p class="text-center">Una vez registrado, podrá agendar citas con nuestros especialistas de manera rápida y sencilla desde cualquier dispositivo.</p>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="benefit-card">
                        <div class="benefit-icon">
                            <i class="fas fa-lock fa-2x"></i>
                        </div>
                        <h4 class="text-center">Privacidad Garantizada</h4>
                        <p class="text-center">Sus datos personales y médicos están protegidos con los más altos estándares de seguridad y confidencialidad.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Call To Action -->
    <section class="cta-section fade-in-up delay-3">
        <div class="container">
            <div class="cta-content">
                <h2>¿Necesita ayuda con el registro?</h2>
                <p class="mb-4">Nuestro equipo de atención al paciente está disponible para asistirle en el proceso de registro.</p>
                <a href="{{ route('portal.contact') }}" class="btn cta-btn">
                    <i class="fas fa-headset me-2"></i>Contáctenos
                </a>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/es.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Inicialización del selector de fecha
        flatpickr("#birthday", {
            dateFormat: "d/m/Y",
            maxDate: "today",
            locale: "es",
            disableMobile: "true"
        });
        
        // Cálculo automático de edad basado en la fecha de nacimiento
        const birthdayInput = document.getElementById('birthday');
        const ageInput = document.getElementById('age');
        
        if (birthdayInput && ageInput) {
            birthdayInput.addEventListener('change', function() {
                const birthDateParts = this.value.split('/');
                if (birthDateParts.length === 3) {
                    const birthDate = new Date(
                        parseInt(birthDateParts[2]), 
                        parseInt(birthDateParts[1]) - 1, 
                        parseInt(birthDateParts[0])
                    );
                    const today = new Date();
                    let age = today.getFullYear() - birthDate.getFullYear();
                    const monthDiff = today.getMonth() - birthDate.getMonth();
                    
                    if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
                        age--;
                    }
                    
                    if (!isNaN(age) && age >= 0) {
                        ageInput.value = age;
                    }
                }
            });
        }
        
        // Validación de formulario mejorada
        const form = document.getElementById('patientForm');
        if (form) {
            form.addEventListener('submit', function(e) {
                if (!this.checkValidity()) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    // Mostrar mensajes de error personalizados
                    const invalidInputs = this.querySelectorAll(':invalid');
                    if (invalidInputs.length > 0) {
                        // Desplazarse al primer campo con error
                        invalidInputs[0].focus();
                        
                        // Añadir un borde visual para resaltar los errores
                        invalidInputs.forEach(input => {
                            input.classList.add('is-invalid');
                            input.addEventListener('input', function() {
                                if (this.validity.valid) {
                                    this.classList.remove('is-invalid');
                                    this.classList.add('is-valid');
                                }
                            });
                        });
                    }
                }
                
                this.classList.add('was-validated');
            });
        }
        
        // Animación al hacer scroll
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };
        
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    if (!entry.target.classList.contains('fade-in-up')) {
                        entry.target.classList.add('fade-in-up');
                    }
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);
        
        document.querySelectorAll('.benefit-card, .registration-card').forEach(element => {
            if (!element.classList.contains('fade-in-up')) {
                observer.observe(element);
            }
        });
    });
</script>
@endsection 