@extends('layouts.portal')

@section('title', 'Servicios')

@section('styles')
<style>
    /* Estilos mejorados para la página de servicios */
    /* Hero Section */
    .hero-section {
        background: linear-gradient(135deg, #4a90e2, #2c3e50);
        color: white;
        padding: 80px 0;
        position: relative;
        min-height: 300px;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    
    .hero-section::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,96L80,122.7C160,149,320,203,480,202.7C640,203,800,149,960,138.7C1120,128,1280,160,1360,176L1440,192L1440,320L1360,320C1280,320,1120,320,960,320C800,320,640,320,480,320C320,320,160,320,80,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
        background-size: cover;
        background-repeat: no-repeat;
        transform: translateY(1px);
        z-index: 1;
    }
    
    .hero-content h1 {
        font-size: 2.8rem;
        font-weight: 700;
        text-shadow: 0 2px 10px rgba(0,0,0,0.2);
        margin-bottom: 0.8rem;
    }
    
    .hero-content p {
        font-size: 1.2rem;
        max-width: 700px;
        margin: 0 auto;
        opacity: 0.9;
    }
    
    /* Sección de servicios */
    .services-section {
        padding: 80px 0;
        position: relative;
    }
    
    .section-title {
        text-align: center;
        margin-bottom: 50px;
    }
    
    .section-title h2 {
        font-weight: 700;
        color: #2c3e50;
        position: relative;
        display: inline-block;
        margin-bottom: 15px;
        font-size: 2.5rem;
    }
    
    .section-title h2::after {
        content: '';
        position: absolute;
        width: 70px;
        height: 3px;
        background: #4a90e2;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 5px;
    }
    
    .section-title p {
        color: #6c757d;
        font-size: 1.1rem;
        max-width: 700px;
        margin: 0 auto;
    }
    
    /* Buscador de servicios */
    .search-container {
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        padding: 20px;
        margin-bottom: 40px;
    }
    
    .search-input {
        border-radius: 50px;
        padding: 12px 25px;
        border: 2px solid #e9ecef;
        font-size: 1rem;
        transition: all 0.3s;
        box-shadow: none;
    }
    
    .search-input:focus {
        border-color: #4a90e2;
        box-shadow: 0 0 0 0.25rem rgba(74, 144, 226, 0.25);
    }
    
    .search-input::placeholder {
        color: #adb5bd;
    }
    
    /* Tarjetas de servicios */
    .service-card {
        margin-bottom: 30px;
    }
    
    .service-card .card {
        border: none;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transition: all 0.3s;
        height: 100%;
    }
    
    .service-card .card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }
    
    .service-card .card-body {
        padding: 25px;
    }
    
    .service-icon {
        width: 70px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(74, 144, 226, 0.1);
        color: #4a90e2;
        border-radius: 15px;
        margin-bottom: 20px;
        transition: all 0.3s;
    }
    
    .service-card:hover .service-icon {
        background: #4a90e2;
        color: white;
        transform: rotate(10deg);
    }
    
    .service-card .card-title {
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 15px;
        font-size: 1.25rem;
    }
    
    .service-card .card-text {
        color: #6c757d;
        margin-bottom: 25px;
        line-height: 1.6;
    }
    
    .service-price {
        font-weight: 700;
        color: #4a90e2;
        font-size: 1.2rem;
    }
    
    .service-btn {
        padding: 8px 20px;
        border-radius: 50px;
        background: rgba(74, 144, 226, 0.1);
        color: #4a90e2;
        border: none;
        transition: all 0.3s;
        font-weight: 600;
        font-size: 0.9rem;
    }
    
    .service-btn:hover {
        background: #4a90e2;
        color: white;
    }
    
    /* Modales de servicio */
    .modal-content {
        border: none;
        border-radius: 15px;
        overflow: hidden;
    }
    
    .modal-header {
        background: #4a90e2;
        color: white;
        border-bottom: none;
        padding: 20px 25px;
    }
    
    .modal-title {
        font-weight: 700;
    }
    
    .modal-body {
        padding: 25px;
    }
    
    .modal-footer {
        border-top: none;
        padding: 20px 25px;
    }
    
    .btn-modal-close {
        background: #e9ecef;
        color: #2c3e50;
        border: none;
        border-radius: 50px;
        padding: 8px 20px;
        font-weight: 600;
        transition: all 0.3s;
    }
    
    .btn-modal-close:hover {
        background: #dee2e6;
    }
    
    .btn-modal-action {
        background: #4a90e2;
        color: white;
        border: none;
        border-radius: 50px;
        padding: 8px 20px;
        font-weight: 600;
        transition: all 0.3s;
    }
    
    .btn-modal-action:hover {
        background: #3a80d2;
        transform: translateY(-2px);
    }
    
    /* Sección de especialidades */
    .specialties-section {
        background-color: #f8fafc;
        padding: 80px 0;
        position: relative;
        border-radius: 20px;
        margin: 50px 20px;
    }
    
    .specialty-box {
        background: white;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        padding: 30px;
        text-align: center;
        transition: all 0.3s;
        height: 100%;
        position: relative;
        overflow: hidden;
    }
    
    .specialty-box::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 5px;
        background: #4a90e2;
        top: 0;
        left: 0;
        transform: scaleX(0);
        transition: all 0.3s;
        transform-origin: left;
    }
    
    .specialty-box:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }
    
    .specialty-box:hover::before {
        transform: scaleX(1);
    }
    
    .specialty-icon {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(74, 144, 226, 0.1);
        color: #4a90e2;
        font-size: 2rem;
        border-radius: 50%;
        margin: 0 auto 20px;
        transition: all 0.3s;
    }
    
    .specialty-box:hover .specialty-icon {
        background: #4a90e2;
        color: white;
    }
    
    .specialty-box h3 {
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 15px;
        font-size: 1.3rem;
    }
    
    .specialty-box p {
        color: #6c757d;
        margin-bottom: 0;
        line-height: 1.6;
    }
    
    /* Call to Action */
    .cta-section {
        background: linear-gradient(135deg, #4a90e2, #2c3e50);
        color: white;
        padding: 60px 0;
        border-radius: 20px;
        position: relative;
        overflow: hidden;
        margin: 0 20px 80px;
    }
    
    .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 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' 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: rgba(255, 255, 255, 0.9);
        color: #2c3e50;
        font-weight: 600;
        border: none;
        box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
        transition: all 0.3s;
        border-radius: 50px;
        padding: 12px 25px;
        margin: 0 10px;
    }
    
    .cta-btn:hover {
        background: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
    }
    
    .cta-btn-outline {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.3);
        font-weight: 600;
        box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
        transition: all 0.3s;
        border-radius: 50px;
        padding: 12px 25px;
        margin: 0 10px;
    }
    
    .cta-btn-outline:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
        box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
        color: white;
    }
    
    /* Animaciones */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .animated-element {
        animation: fadeIn 0.6s ease-out forwards;
    }
    
    .delay-1 {
        animation-delay: 0.2s;
    }
    
    .delay-2 {
        animation-delay: 0.4s;
    }
    
    .delay-3 {
        animation-delay: 0.6s;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .hero-content h1 {
            font-size: 2rem;
        }
        
        .section-title h2 {
            font-size: 2rem;
        }
        
        .cta-content h2 {
            font-size: 1.8rem;
        }
        
        .cta-btn, .cta-btn-outline {
            margin-bottom: 15px;
        }
    }
</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-stethoscope me-2"></i>Nuestros Servicios Médicos</h1>
                    <p>Ofrecemos una amplia gama de servicios médicos de alta calidad para cuidar su salud y bienestar</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="services-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="section-title animated-element">
                        <h2>Servicios Disponibles</h2>
                        <p>Conozca nuestra completa oferta de servicios médicos profesionales adaptados a sus necesidades</p>
                    </div>
                </div>
            </div>

            <!-- Filter -->
            <div class="row animated-element delay-1">
                <div class="col-lg-8 mx-auto">
                    <div class="search-container">
                        <div class="input-group">
                            <span class="input-group-text bg-transparent border-0">
                                <i class="fas fa-search text-primary"></i>
                            </span>
                            <input type="text" id="serviceSearch" class="form-control search-input" placeholder="Buscar servicios por nombre o descripción...">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Services Cards -->
            <div class="row" id="servicesContainer">
                @if(count($services) > 0)
                    @foreach($services as $service)
                        <div class="col-lg-4 col-md-6 service-card animated-element delay-{{ $loop->iteration % 3 + 1 }}" id="service-{{ $service->id }}">
                            <div class="card">
                                <div class="card-body">
                                    <div class="service-icon">
                                        <i class="fas fa-stethoscope fa-2x"></i>
                                    </div>
                                    <h5 class="card-title">{{ $service->name }}</h5>
                                    <p class="card-text">{{ \Illuminate\Support\Str::limit($service->description, 120) }}</p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="service-price">{{ number_format($service->cost, 2) }} {{ $service->currency->symbol ?? '' }}</span>
                                        <button class="btn service-btn" data-bs-toggle="modal" data-bs-target="#serviceModal{{ $service->id }}">
                                            <i class="fas fa-info-circle me-1"></i>Más detalles
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Modal -->
                        <div class="modal fade" id="serviceModal{{ $service->id }}" tabindex="-1" aria-labelledby="serviceModalLabel{{ $service->id }}" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="serviceModalLabel{{ $service->id }}">{{ $service->name }}</h5>
                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <p>{{ $service->description }}</p>
                                        <div class="d-flex align-items-center mb-3">
                                            <div class="me-3">
                                                <i class="fas fa-tag text-primary"></i>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Precio</h6>
                                                <p class="mb-0 service-price">{{ number_format($service->cost, 2) }} {{ $service->currency->symbol ?? '' }}</p>
                                            </div>
                                        </div>
                                        <hr>
                                        <div class="d-flex align-items-center">
                                            <div class="me-3">
                                                <i class="fas fa-info-circle text-primary"></i>
                                            </div>
                                            <div>
                                                <h6>¿Necesita este servicio?</h6>
                                                <p class="mb-0">Agende una cita con nuestros especialistas para recibir este servicio médico con la mejor atención profesional.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-modal-close" data-bs-dismiss="modal">Cerrar</button>
                                        <a href="{{ route('portal.appointments') }}" class="btn btn-modal-action">
                                            <i class="fas fa-calendar-check me-1"></i>Agendar Cita
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    <div class="col-12 text-center animated-element delay-1">
                        <div class="alert alert-info rounded-3 shadow-sm">
                            <i class="fas fa-info-circle me-2"></i>No hay servicios disponibles en este momento. Por favor, contáctenos para obtener más información.
                        </div>
                        <a href="{{ route('portal.contact') }}" class="btn btn-primary mt-3">
                            <i class="fas fa-envelope me-2"></i>Contactar
                        </a>
                    </div>
                @endif
            </div>
            
            <!-- Empty state message when no search results -->
            <div id="noResultsMessage" class="row mt-4 d-none">
                <div class="col-12 text-center">
                    <div class="alert alert-warning rounded-3 shadow-sm">
                        <i class="fas fa-exclamation-circle me-2"></i>No se encontraron servicios que coincidan con su búsqueda. Intente con otros términos o póngase en contacto con nosotros para consultas específicas.
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Specialties Section -->
    <section class="specialties-section animated-element delay-2">
        <div class="container">
            <div class="section-title">
                <h2>Nuestras Especialidades</h2>
                <p>Contamos con especialistas altamente calificados en diversas áreas médicas</p>
            </div>

            <div class="row">
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="specialty-box">
                        <div class="specialty-icon">
                            <i class="fas fa-heartbeat"></i>
                        </div>
                        <h3>Cardiología</h3>
                        <p>Diagnóstico y tratamiento de enfermedades cardiovasculares con tecnología avanzada y especialistas certificados.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="specialty-box">
                        <div class="specialty-icon">
                            <i class="fas fa-brain"></i>
                        </div>
                        <h3>Neurología</h3>
                        <p>Especialistas en trastornos del sistema nervioso y afecciones neurológicas con amplia experiencia clínica.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="specialty-box">
                        <div class="specialty-icon">
                            <i class="fas fa-bone"></i>
                        </div>
                        <h3>Traumatología</h3>
                        <p>Tratamiento de lesiones y trastornos del sistema músculo-esquelético con técnicas modernas de rehabilitación.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="specialty-box">
                        <div class="specialty-icon">
                            <i class="fas fa-baby"></i>
                        </div>
                        <h3>Pediatría</h3>
                        <p>Cuidado integral de la salud de bebés, niños y adolescentes con un enfoque preventivo y personalizado.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="specialty-box">
                        <div class="specialty-icon">
                            <i class="fas fa-tooth"></i>
                        </div>
                        <h3>Odontología</h3>
                        <p>Servicios dentales completos para toda la familia con equipos modernos y tecnología de vanguardia.</p>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 mb-4">
                    <div class="specialty-box">
                        <div class="specialty-icon">
                            <i class="fas fa-eye"></i>
                        </div>
                        <h3>Oftalmología</h3>
                        <p>Diagnóstico y tratamiento de enfermedades oculares y trastornos de la visión con especialistas experimentados.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Call To Action -->
    <section class="cta-section animated-element delay-3">
        <div class="container">
            <div class="cta-content">
                <h2>¿Interesado en nuestros servicios?</h2>
                <p class="mb-4">Agende una cita con nuestros especialistas y reciba la mejor atención médica personalizada.</p>
                <div class="d-flex justify-content-center flex-wrap">
                    <a href="{{ route('portal.appointments') }}" class="cta-btn">
                        <i class="fas fa-calendar-check me-2"></i>Agendar Cita
                    </a>
                    <a href="{{ route('portal.contact') }}" class="cta-btn-outline">
                        <i class="fas fa-envelope me-2"></i>Contactarnos
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Buscador de servicios mejorado
        const searchInput = document.getElementById('serviceSearch');
        const servicesContainer = document.getElementById('servicesContainer');
        const serviceCards = document.querySelectorAll('.service-card');
        const noResultsMessage = document.getElementById('noResultsMessage');
        
        searchInput.addEventListener('keyup', function() {
            const searchTerm = this.value.toLowerCase();
            let foundResults = false;
            
            serviceCards.forEach(card => {
                const title = card.querySelector('.card-title').textContent.toLowerCase();
                const description = card.querySelector('.card-text').textContent.toLowerCase();
                
                if (title.includes(searchTerm) || description.includes(searchTerm)) {
                    card.style.display = 'block';
                    foundResults = true;
                } else {
                    card.style.display = 'none';
                }
            });
            
            // Mostrar/ocultar mensaje cuando no hay resultados
            if (foundResults) {
                noResultsMessage.classList.add('d-none');
            } else {
                noResultsMessage.classList.remove('d-none');
            }
        });
        
        // Animaciones al 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('animated-element')) {
                        entry.target.classList.add('animated-element');
                    }
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);
        
        document.querySelectorAll('.specialties-section, .cta-section').forEach(element => {
            if (!element.classList.contains('animated-element')) {
                observer.observe(element);
            }
        });
        
        // Hacer que las tarjetas de servicios sean de la misma altura
        function equalizeCardHeights() {
            const cards = document.querySelectorAll('.service-card .card');
            let maxHeight = 0;
            
            // Resetear alturas
            cards.forEach(card => {
                card.style.height = 'auto';
                const height = card.offsetHeight;
                if (height > maxHeight) {
                    maxHeight = height;
                }
            });
            
            // Aplicar altura máxima a todas las tarjetas
            cards.forEach(card => {
                card.style.height = `${maxHeight}px`;
            });
        }
        
        // Ejecutar después de que el DOM esté completamente cargado
        setTimeout(equalizeCardHeights, 100);
        
        // Recalcular en cambio de tamaño de ventana
        window.addEventListener('resize', equalizeCardHeights);
    });
</script>
@endsection 