@extends('backend.layouts.app')

@section('page-title')
    <div class="d-flex align-items-center">
        <div class="page-title-content">
            <h1 class="page-main-title">Configuración</h1>
        </div>
    </div>
@endsection

@section('title', $title)

@section('breadcrumb-links')
    @include('backend.csv-import.includes.breadcrumb-links')
@endsection

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="mb-0">
                        <i class="fas fa-book-open text-primary me-2"></i>
                        {{ $title }}
                    </h3>
                    <div>
                        <a href="{{ route('admin.configuracion.csv-import.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-1"></i>
                            Volver al Sistema
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- Contenido de la documentación -->
                    <div class="documentation-content">
                        {!! $content !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Estilos específicos para la documentación renderizada */
.documentation-content {
    line-height: 1.6;
    color: #333;
}

.documentation-content h1 {
    color: #2c3e50;
    border-bottom: 3px solid #3498db;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 2.5rem;
}

.documentation-content h2 {
    color: #34495e;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.3rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.documentation-content h3 {
    color: #2c3e50;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.documentation-content h4 {
    color: #34495e;
    margin-top: 1.2rem;
    margin-bottom: 0.6rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.documentation-content p {
    margin-bottom: 1rem;
    text-align: justify;
}

.documentation-content ul, 
.documentation-content ol {
    margin-bottom: 1rem;
    padding-left: 2rem;
}

.documentation-content li {
    margin-bottom: 0.3rem;
}

.documentation-content code {
    background-color: #f8f9fa;
    color: #e83e8c;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 0.875rem;
}

.documentation-content pre {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    overflow-x: auto;
}

.documentation-content pre code {
    background-color: transparent;
    color: #212529;
    padding: 0;
    font-size: 0.875rem;
}

.documentation-content blockquote {
    background-color: #e3f2fd;
    border-left: 4px solid #2196f3;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 0 0.375rem 0.375rem 0;
}

.documentation-content table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.documentation-content table th,
.documentation-content table td {
    padding: 0.75rem;
    border: 1px solid #dee2e6;
    text-align: left;
}

.documentation-content table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

.documentation-content table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.documentation-content h3:before {
    content: "📄 ";
    margin-right: 0.3rem;
}

/* Alertas especiales */
.documentation-content p:has(> strong:first-child) {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 1px solid #ffc107;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin: 1rem 0;
}

/* Responsive */
@media (max-width: 768px) {
    .documentation-content {
        font-size: 0.9rem;
    }
    
    .documentation-content h1 {
        font-size: 2rem;
    }
    
    .documentation-content h2 {
        font-size: 1.5rem;
    }
    
    .documentation-content pre {
        font-size: 0.8rem;
        overflow-x: scroll;
    }
}
</style>
@endsection

@push('after-scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Agregar funcionalidad de scroll suave para enlaces internos
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });

    // Resaltar código CSV automáticamente
    document.querySelectorAll('pre code').forEach(block => {
        if (block.textContent.includes(',') && 
            block.textContent.includes('\n') && 
            !block.textContent.includes('{')) {
            block.style.backgroundColor = '#e8f5e8';
            block.style.border = '1px solid #28a745';
        }
    });
});
</script>
@endpush