@extends('externo.layout')
@section('contenido')
<style>
    .dtc-detail-hero {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        padding: 120px 0 100px;
        position: relative;
        overflow: hidden;
    }
    .dtc-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");
    }
    .dtc-detail-hero .breadcrumb-custom {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-bottom: 20px;
        position: relative;
    }
    .dtc-detail-hero .breadcrumb-custom a {
        color: #f39c12;
        text-decoration: none;
        transition: color 0.3s;
    }
    .dtc-detail-hero .breadcrumb-custom a:hover {
        color: #e74c3c;
    }
    .dtc-detail-hero .breadcrumb-custom span {
        color: #666;
    }
    .dtc-code-badge {
        display: inline-block;
        background: linear-gradient(135deg, #f39c12, #e74c3c);
        color: #fff;
        font-size: 1.5rem;
        font-weight: 800;
        padding: 15px 40px;
        border-radius: 50px;
        margin-bottom: 20px;
        letter-spacing: 3px;
        box-shadow: 0 10px 30px rgba(243, 156, 18, 0.3);
        position: relative;
    }
    .dtc-detail-hero h1 {
        font-size: 2rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 20px;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        line-height: 1.4;
        position: relative;
    }
    .dtc-category-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255,255,255,0.1);
        color: #fff;
        padding: 8px 20px;
        border-radius: 30px;
        font-size: 0.9rem;
        position: relative;
    }
    .dtc-category-badge i {
        color: #f39c12;
    }

    /* Content Section */
    .dtc-content-section {
        padding: 60px 0 80px;
        background: #f8f9fa;
    }
    .dtc-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;
    }
    .dtc-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;
    }
    .dtc-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;
    }
    .dtc-card-header .icon i {
        font-size: 28px;
        color: #fff;
    }
    .dtc-card-header h2 {
        font-size: 1.4rem;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
    }
    .dtc-card-header p {
        color: #666;
        margin: 5px 0 0;
        font-size: 0.95rem;
    }
    .dtc-card-body {
        padding: 40px;
    }
    .dtc-section {
        margin-bottom: 40px;
    }
    .dtc-section:last-child {
        margin-bottom: 0;
    }
    .dtc-section-title {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #f0f0f0;
    }
    .dtc-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;
    }
    .dtc-section-title .icon i {
        font-size: 22px;
        background: linear-gradient(135deg, #f39c12, #e74c3c);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .dtc-section-title h3 {
        font-size: 1.3rem;
        font-weight: 700;
        color: #1a1a2e;
        margin: 0;
    }
    .dtc-content {
        color: #555;
        font-size: 1rem;
        line-height: 1.8;
    }
    .dtc-content p {
        margin-bottom: 15px;
    }
    .dtc-content ul, .dtc-content ol {
        padding-left: 20px;
        margin-bottom: 15px;
    }
    .dtc-content li {
        margin-bottom: 10px;
        position: relative;
        padding-left: 10px;
    }
    .dtc-content strong {
        color: #1a1a2e;
    }

    /* 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;
    }
    .sidebar-card-body {
        padding: 20px;
    }
    .ad-banner {
        border-radius: 12px;
        overflow: hidden;
        transition: all 0.3s ease;
    }
    .ad-banner:hover {
        transform: scale(1.02);
    }
    .ad-banner img {
        width: 100%;
        display: block;
    }

    /* Quick Info Box */
    .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: 35px;
        height: 35px;
        background: #fff;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f39c12;
        font-size: 18px;
    }
    .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) {
        .dtc-main-card {
            margin-top: -60px;
        }
        .dtc-card-body {
            padding: 30px;
        }
    }
    @media (max-width: 768px) {
        .dtc-detail-hero {
            padding: 100px 0 80px;
        }
        .dtc-detail-hero h1 {
            font-size: 1.5rem;
        }
        .dtc-code-badge {
            font-size: 1.2rem;
            padding: 12px 30px;
        }
        .dtc-main-card {
            margin-top: -50px;
            border-radius: 20px;
        }
        .dtc-card-header {
            padding: 20px;
            flex-direction: column;
            text-align: center;
        }
        .dtc-card-body {
            padding: 25px 20px;
        }
        .dtc-section-title {
            flex-direction: column;
            text-align: center;
        }
    }
</style>

<!-- Hero Section -->
<section class="dtc-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.dtc') }}">Códigos DTC</a>
                <span>/</span>
                <span style="color: #fff;">{{ $datos->dtc_codi }}</span>
            </div>
            <div class="dtc-code-badge">{{ $datos->dtc_codi }}</div>
            <h1>{{ $datos->titulo_codi }}</h1>
            @php
                $firstChar = strtoupper(substr($datos->dtc_codi, 0, 1));
                $categories = [
                    'P' => ['nombre' => 'Tren Motriz (Powertrain)', 'icon' => 'bx-cog'],
                    'B' => ['nombre' => 'Carrocería (Body)', 'icon' => 'bx-car'],
                    'C' => ['nombre' => 'Chasis', 'icon' => 'bx-shape-circle'],
                    'U' => ['nombre' => 'Red de Comunicación', 'icon' => 'bx-wifi']
                ];
                $category = $categories[$firstChar] ?? ['nombre' => 'General', 'icon' => 'bx-error-circle'];
            @endphp
            <span class="dtc-category-badge">
                <i class='bx {{ $category['icon'] }}'></i>
                {{ $category['nombre'] }}
            </span>
        </div>
    </div>
</section>

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

                <div class="dtc-main-card">
                    <div class="dtc-card-header">
                        <div class="icon">
                            <i class='bx bx-error-circle'></i>
                        </div>
                        <div>
                            <h2>Información del Código {{ $datos->dtc_codi }}</h2>
                            <p>Diagnóstico de falla y procedimiento de reparación</p>
                        </div>
                    </div>
                    <div class="dtc-card-body">
                        <!-- Description Section -->
                        <div class="dtc-section">
                            <div class="dtc-section-title">
                                <div class="icon">
                                    <i class='bx bx-info-circle'></i>
                                </div>
                                <h3>Descripción del Problema</h3>
                            </div>
                            <div class="dtc-content">
                                {!! $datos->descripcion_codi !!}
                            </div>
                        </div>

                        <!-- Solution Section -->
                        <div class="dtc-section">
                            <div class="dtc-section-title">
                                <div class="icon">
                                    <i class='bx bx-wrench'></i>
                                </div>
                                <h3>Solución Recomendada</h3>
                            </div>
                            <div class="dtc-content">
                                {!! $datos->solucion_codi !!}
                            </div>
                        </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-hash'></i>
                        <div class="info">
                            <span class="label">Código</span>
                            <span class="value">{{ $datos->dtc_codi }}</span>
                        </div>
                    </div>
                    <div class="quick-info-item">
                        <i class='bx bx-category'></i>
                        <div class="info">
                            <span class="label">Categoría</span>
                            <span class="value">{{ $category['nombre'] }}</span>
                        </div>
                    </div>
                    <div class="quick-info-item">
                        <i class='bx bx-error-alt'></i>
                        <div class="info">
                            <span class="label">Tipo</span>
                            <span class="value">
                                @php
                                    $secondChar = substr($datos->dtc_codi, 1, 1);
                                    echo $secondChar == '0' ? 'Genérico (SAE)' : 'Específico del fabricante';
                                @endphp
                            </span>
                        </div>
                    </div>
                </div>

                <!-- CTA Box -->
                <div class="cta-box">
                    <h4 class="text-white">¿Necesitas ayuda profesional?</h4>
                    <p>Nuestra IA especializada puede guiarte paso a paso en el diagnóstico</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 d-block mb-3">
                            @else
                            <div class="ad-banner mb-3">
                            @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