@extends('externo.layout')
@section('contenido')
<style>
    /* Hero Section */
    .manual-detail-hero {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        padding: 120px 0 100px;
        position: relative;
        overflow: hidden;
    }
    .manual-detail-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    .manual-detail-hero .breadcrumb-custom {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
        position: relative;
        flex-wrap: wrap;
    }
    .manual-detail-hero .breadcrumb-custom a {
        color: #f39c12;
        text-decoration: none;
        transition: color 0.3s;
    }
    .manual-detail-hero .breadcrumb-custom a:hover {
        color: #e74c3c;
    }
    .manual-detail-hero .breadcrumb-custom span {
        color: #666;
    }
    .vehicle-badge {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        background: linear-gradient(135deg, #f39c12, #e74c3c);
        color: #fff;
        font-size: 1.1rem;
        font-weight: 700;
        padding: 12px 30px;
        border-radius: 50px;
        margin-bottom: 20px;
        box-shadow: 0 10px 30px rgba(243, 156, 18, 0.3);
        position: relative;
    }
    .vehicle-badge i {
        font-size: 24px;
    }
    .manual-detail-hero h1 {
        font-size: 2rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 20px;
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.4;
        position: relative;
    }
    .manual-meta-badges {
        display: flex;
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap;
        position: relative;
    }
    .meta-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255,255,255,0.1);
        color: #fff;
        padding: 8px 18px;
        border-radius: 30px;
        font-size: 0.9rem;
    }
    .meta-badge i {
        color: #f39c12;
    }

    /* Content Section */
    .manual-content-section {
        padding: 60px 0 80px;
        background: #f8f9fa;
    }
    .manual-main-card {
        background: #fff;
        border-radius: 24px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        overflow: hidden;
        margin-top: -80px;
        position: relative;
    }
    .manual-card-header {
        background: linear-gradient(135deg, rgba(243, 156, 18, 0.05), rgba(231, 76, 60, 0.05));
        padding: 30px 40px;
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .manual-card-header .icon {
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #f39c12, #e74c3c);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .manual-card-header .icon i {
        font-size: 28px;
        color: #fff;
    }
    .manual-card-header h2 {
        font-size: 1.4rem;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
    }
    .manual-card-header p {
        color: #666;
        margin: 5px 0 0;
        font-size: 0.95rem;
    }
    .manual-card-body {
        padding: 40px;
    }

    /* Description Section */
    .description-section {
        margin-bottom: 40px;
    }
    .section-title {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #f0f0f0;
    }
    .section-title .icon {
        width: 45px;
        height: 45px;
        background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(231, 76, 60, 0.1));
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .section-title .icon i {
        font-size: 22px;
        background: linear-gradient(135deg, #f39c12, #e74c3c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .section-title h3 {
        font-size: 1.3rem;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
    }
    .description-content {
        color: #555;
        font-size: 1rem;
        line-height: 1.8;
    }

    /* Documents Grid */
    .documents-section {
        margin-top: 40px;
    }
    .documents-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 25px;
    }
    .document-card {
        background: #fff;
        border: 2px solid #f0f0f0;
        border-radius: 16px;
        padding: 25px 20px;
        text-align: center;
        transition: all 0.3s ease;
    }
    .document-card:hover {
        border-color: #f39c12;
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    }
    .document-card .pdf-icon {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg, #e74c3c, #c0392b);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        position: relative;
    }
    .document-card .pdf-icon i {
        font-size: 35px;
        color: #fff;
    }
    .document-card .pdf-icon::after {
        content: 'PDF';
        position: absolute;
        bottom: -8px;
        right: -8px;
        background: #1a1a2e;
        color: #fff;
        font-size: 0.65rem;
        font-weight: 700;
        padding: 3px 8px;
        border-radius: 6px;
    }
    .document-card h4 {
        font-size: 0.95rem;
        font-weight: 600;
        color: #1a1a2e;
        margin-bottom: 15px;
        line-height: 1.4;
        min-height: 45px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .btn-download {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px 15px;
        background: linear-gradient(135deg, #f39c12, #e74c3c);
        color: #fff;
        border: none;
        border-radius: 10px;
        font-size: 0.9rem;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    .btn-download:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 25px rgba(243, 156, 18, 0.4);
        color: #fff;
    }
    .btn-download i {
        font-size: 18px;
    }

    /* Empty Documents */
    .empty-documents {
        text-align: center;
        padding: 50px 20px;
        background: #f8f9fa;
        border-radius: 16px;
    }
    .empty-documents i {
        font-size: 60px;
        color: #ddd;
        margin-bottom: 15px;
    }
    .empty-documents p {
        color: #888;
        font-size: 1rem;
    }

    /* Sidebar */
    .sidebar-card {
        background: #fff;
        border-radius: 20px;
        box-shadow: 0 5px 25px rgba(0,0,0,0.08);
        overflow: hidden;
        margin-bottom: 25px;
    }
    .sidebar-card-header {
        background: linear-gradient(135deg, #1a1a2e, #16213e);
        color: #fff;
        padding: 20px;
        text-align: center;
    }
    .sidebar-card-header h4 {
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .sidebar-card-body {
        padding: 20px;
    }
    .ad-banner {
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.3s ease;
        display: block;
        margin-bottom: 15px;
    }
    .ad-banner:last-child {
        margin-bottom: 0;
    }
    .ad-banner:hover {
        transform: scale(1.02);
    }
    .ad-banner img {
        width: 100%;
        display: block;
    }

    /* Quick Info */
    .quick-info-box {
        background: linear-gradient(135deg, rgba(243, 156, 18, 0.1), rgba(231, 76, 60, 0.1));
        border-radius: 16px;
        padding: 25px;
        margin-bottom: 25px;
    }
    .quick-info-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }
    .quick-info-item:last-child {
        border-bottom: none;
    }
    .quick-info-item i {
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f39c12;
        font-size: 20px;
    }
    .quick-info-item .info {
        flex: 1;
    }
    .quick-info-item .label {
        font-size: 0.8rem;
        color: #888;
        display: block;
    }
    .quick-info-item .value {
        font-size: 0.95rem;
        font-weight: 600;
        color: #1a1a2e;
    }

    /* Back Button */
    .btn-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 12px 25px;
        background: #fff;
        color: #1a1a2e;
        border: 2px solid #e0e0e0;
        border-radius: 50px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        margin-bottom: 25px;
    }
    .btn-back:hover {
        background: linear-gradient(135deg, #f39c12, #e74c3c);
        color: #fff;
        border-color: transparent;
        transform: translateX(-5px);
    }
    .btn-back i {
        font-size: 20px;
    }

    /* CTA Box */
    .cta-box {
        background: linear-gradient(135deg, #1a1a2e, #16213e);
        border-radius: 20px;
        padding: 30px;
        text-align: center;
        color: #fff;
    }
    .cta-box h4 {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 10px;
    }
    .cta-box p {
        font-size: 0.9rem;
        opacity: 0.8;
        margin-bottom: 20px;
    }
    .btn-cta {
        display: inline-block;
        padding: 12px 30px;
        background: linear-gradient(135deg, #f39c12, #e74c3c);
        color: #fff;
        border-radius: 50px;
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
    }
    .btn-cta:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(243, 156, 18, 0.4);
        color: #fff;
    }

    /* Responsive */
    @media (max-width: 991px) {
        .manual-main-card {
            margin-top: -60px;
        }
        .manual-card-body {
            padding: 30px;
        }
    }
    @media (max-width: 768px) {
        .manual-detail-hero {
            padding: 100px 0 80px;
        }
        .manual-detail-hero h1 {
            font-size: 1.5rem;
        }
        .vehicle-badge {
            font-size: 0.95rem;
            padding: 10px 20px;
        }
        .manual-main-card {
            margin-top: -50px;
            border-radius: 20px;
        }
        .manual-card-header {
            padding: 20px;
            flex-direction: column;
            text-align: center;
        }
        .manual-card-body {
            padding: 25px 20px;
        }
        .documents-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        .document-card {
            padding: 20px 15px;
        }
        .document-card .pdf-icon {
            width: 60px;
            height: 60px;
        }
        .document-card .pdf-icon i {
            font-size: 28px;
        }
    }
    @media (max-width: 480px) {
        .documents-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<!-- Hero Section -->
<section class="manual-detail-hero">
    <div class="container">
        <div class="text-center">
            <div class="breadcrumb-custom">
                <a href="{{ route('index') }}">Inicio</a>
                <span>/</span>
                <a href="{{ route('directorio.manuales') }}">Manuales</a>
                <span>/</span>
                <span style="color: #fff;">{{ $datos->marca }} {{ $datos->modelo }}</span>
            </div>
            <div class="vehicle-badge">
                <i class='bx bx-car'></i>
                {{ $datos->marca }} {{ $datos->modelo }}
                @if(isset($datos->anio_mana))
                    - {{ $datos->anio_mana }}
                @endif
            </div>
            <h1>{{ $datos->titulo_mana }}</h1>
            <div class="manual-meta-badges">
                <span class="meta-badge">
                    <i class='bx bx-car'></i>
                    {{ $datos->marca }}
                </span>
                <span class="meta-badge">
                    <i class='bx bx-category'></i>
                    {{ $datos->modelo }}
                </span>
                @if(isset($datos->anio_mana))
                <span class="meta-badge">
                    <i class='bx bx-calendar'></i>
                    {{ $datos->anio_mana }}
                </span>
                @endif
                <span class="meta-badge">
                    <i class='bx bx-file'></i>
                    {{ count($documentos) }} documento(s)
                </span>
            </div>
        </div>
    </div>
</section>

<!-- Content Section -->
<section class="manual-content-section">
    <div class="container">
        <div class="row">
            <!-- Main Content -->
            <div class="col-lg-8">
                <a href="{{ route('directorio.manuales') }}" class="btn-back">
                    <i class='bx bx-arrow-back'></i>
                    Volver a manuales
                </a>

                <div class="manual-main-card">
                    <div class="manual-card-header">
                        <div class="icon">
                            <i class='bx bx-book-open'></i>
                        </div>
                        <div>
                            <h2>{{ $datos->titulo_mana }}</h2>
                            <p>Manual técnico para {{ $datos->marca }} {{ $datos->modelo }}</p>
                        </div>
                    </div>
                    <div class="manual-card-body">
                        <!-- Description -->
                        @if($datos->descripcion_mana)
                        <div class="description-section">
                            <div class="section-title">
                                <div class="icon">
                                    <i class='bx bx-info-circle'></i>
                                </div>
                                <h3>Descripción</h3>
                            </div>
                            <div class="description-content">
                                {!! $datos->descripcion_mana !!}
                            </div>
                        </div>
                        @endif

                        <!-- Documents -->
                        <div class="documents-section">
                            <div class="section-title">
                                <div class="icon">
                                    <i class='bx bx-download'></i>
                                </div>
                                <h3>Documentos Disponibles</h3>
                            </div>

                            @if(count($documentos) > 0)
                            <div class="documents-grid">
                                @foreach ($documentos as $documento)
                                <div class="document-card">
                                    <div class="pdf-icon">
                                        <i class='bx bxs-file-pdf'></i>
                                    </div>
                                    <h4>{{ $documento->titulo_mado }}</h4>
                                    <a href="{{ route('directorio.download.documento', $documento->codigo_mado) }}" class="btn-download">
                                        <i class='bx bx-download'></i>
                                        Descargar
                                    </a>
                                </div>
                                @endforeach
                            </div>
                            @else
                            <div class="empty-documents">
                                <i class='bx bx-folder-open'></i>
                                <p>No hay documentos disponibles para este manual</p>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Quick Info -->
                <div class="quick-info-box">
                    <div class="quick-info-item">
                        <i class='bx bx-car'></i>
                        <div class="info">
                            <span class="label">Marca</span>
                            <span class="value">{{ $datos->marca }}</span>
                        </div>
                    </div>
                    <div class="quick-info-item">
                        <i class='bx bx-category'></i>
                        <div class="info">
                            <span class="label">Modelo</span>
                            <span class="value">{{ $datos->modelo }}</span>
                        </div>
                    </div>
                    @if(isset($datos->anio_mana))
                    <div class="quick-info-item">
                        <i class='bx bx-calendar'></i>
                        <div class="info">
                            <span class="label">Año</span>
                            <span class="value">{{ $datos->anio_mana }}</span>
                        </div>
                    </div>
                    @endif
                    <div class="quick-info-item">
                        <i class='bx bx-file'></i>
                        <div class="info">
                            <span class="label">Documentos</span>
                            <span class="value">{{ count($documentos) }} archivo(s)</span>
                        </div>
                    </div>
                </div>

                <!-- CTA Box -->
                <div class="cta-box">
                    <h4 class="text-white">¿Necesitas ayuda con el diagnóstico?</h4>
                    <p>Nuestra IA puede ayudarte a interpretar los manuales y guiarte paso a paso</p>
                    <a href="{{ route('nuestraIa') }}" class="btn-cta">
                        <i class='bx bx-bot'></i> Probar La Llave del Saber
                    </a>
                </div>

                <!-- Ads Section -->
                @if(count($imgs) > 0)
                <div class="sidebar-card mt-4">
                    <div class="sidebar-card-header">
                        <h4 class="text-white"><i class='bx bx-star text-white'></i> Recomendado</h4>
                    </div>
                    <div class="sidebar-card-body">
                        @foreach ($imgs as $img)
                            @if ($img->url_publ)
                            <a href="{{ $img->url_publ }}" target="_blank" class="ad-banner">
                            @else
                            <div class="ad-banner">
                            @endif
                                @if (File::exists(public_path('assets/documentos/public/'. $img->banner_publ)))
                                    <img src="{{ asset('assets/documentos/public/'. $img->banner_publ) }}" alt="Banner de publicidad">
                                @endif
                            @if ($img->url_publ)
                            </a>
                            @else
                            </div>
                            @endif
                        @endforeach
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection