@extends('adminlte::page')

@section('title', 'Documentación')

@section('content_header')
<div class="container-fluid">
    @include('components.alerts')
    <div class="row align-items-center justify-content-between">
        <div class="col-auto">
            <h1 class="m-0 text-dark"><i class="fas fa-folder-open mr-2 text-warning"></i>Biblioteca de Documentos</h1>
        </div>
        @can('create', App\Models\Documento::class)
        <div class="col-auto">
            <a href="{{ route('documentos.create') }}" class="btn btn-success shadow-sm">
                <i class="fas fa-plus-circle mr-1"></i> Subir Documento
            </a>
        </div>
        @endcan
    </div>
</div>
@stop

@section('content')
<div class="container-fluid">
    
    {{-- BARRA DE HERRAMIENTAS: FILTROS Y ORDENACIÓN --}}
    <div class="card mb-4 shadow-sm border-0">
        <div class="card-body p-3">
            <form action="{{ route('documentos.index') }}" method="GET" id="filterForm" class="row align-items-center">
                <div class="col-md-3 mb-2 mb-md-0">
                    <label class="small font-weight-bold d-block text-muted text-uppercase">Ordenar por</label>
                    <select name="sort" class="form-control form-control-sm select-filter" onchange="this.form.submit()">
                        <option value="updated_at" {{ request('sort') == 'updated_at' ? 'selected' : '' }}>Última actualización</option>
                        <option value="nombre" {{ request('sort') == 'nombre' ? 'selected' : '' }}>Nombre (A-Z)</option>
                    </select>
                </div>
                
                <div class="col-md-3 mb-2 mb-md-0">
                    <label class="small font-weight-bold d-block text-muted text-uppercase">Tipo de archivo</label>
                    <select name="tipo" class="form-control form-control-sm select-filter" onchange="this.form.submit()">
                        <option value="">Todos los archivos</option>
                        <option value="pdf" {{ request('tipo') == 'pdf' ? 'selected' : '' }}>Documentos PDF</option>
                        <option value="imagen" {{ request('tipo') == 'imagen' ? 'selected' : '' }}>Imágenes (PNG, JPG...)</option>
                        <option value="docx" {{ request('tipo') == 'docx' ? 'selected' : '' }}>Word (DOCX)</option>
                        <option value="xlsx" {{ request('tipo') == 'xlsx' ? 'selected' : '' }}>Excel (XLSX)</option>
                    </select>
                </div>

                <div class="col-md-2 mt-md-4">
                    <a href="{{ route('documentos.index') }}" class="btn btn-sm btn-block btn-outline-secondary">
                        <i class="fas fa-eraser mr-1"></i> Limpiar
                    </a>
                </div>
            </form>
        </div>
    </div>

    {{-- PANEL DE PESTAÑAS --}}
    <div class="card card-outline card-primary card-tabs">
        <div class="card-header p-0 border-bottom-0">
            <ul class="nav nav-tabs" id="docTabs" role="tablist">
                @php
                    $categorias = [
                        'alojamiento' => ['label' => 'Alojamientos', 'icon' => 'fa-bed'],
                        'empresa' => ['label' => 'Empresas', 'icon' => 'fa-building'],
                        'productor' => ['label' => 'Productores', 'icon' => 'fa-seedling'],
                        'restaurante' => ['label' => 'Restaurantes', 'icon' => 'fa-utensils'],
                        'oficina-de-turismo' => ['label' => 'Oficinas de Turismo', 'icon' => 'fa-map-marked-alt']
                    ];
                    $isFirst = true;
                @endphp

                @foreach($categorias as $key => $cat)
                @if($user->isAdmin() || in_array($key, $user->mis_tipos_de_entidad))
                    <li class="nav-item">
                        <a class="nav-link {{ $isFirst ? 'active' : '' }}" 
                           id="tab-{{ $key }}" 
                           data-toggle="pill" 
                           href="#content-{{ $key }}" 
                           role="tab">
                            <i class="fas {{ $cat['icon'] }} mr-1"></i> {{ $cat['label'] }}
                        </a>
                    </li>
                @endif
                    @php $isFirst = false; @endphp
                @endforeach
            </ul>
        </div>

        <div class="card-body bg-light p-4">
            <div class="tab-content" id="docTabsContent">
                @php $isFirst = true; @endphp
                @foreach($categorias as $key => $cat)
                    <div class="tab-pane fade {{ $isFirst ? 'show active' : '' }}" id="content-{{ $key }}" role="tabpanel">
                        <div class="row">
                            @php
                                // Filtrado local para la pestaña actual basándose en el string separado por comas
                                $docsPestana = $documentos->filter(fn($doc) => in_array($key, explode(',', $doc->categorias)));
                            @endphp

                            @forelse($docsPestana as $doc)
                                <div class="col-xl-3 col-lg-4 col-sm-6 mb-4">
                                    <div class="card h-100 shadow-sm border-0 card-documento">
                                        <div class="card-body text-center p-3 d-flex flex-column">
                                            
                                            {{-- Área de Previsualización / Icono --}}
                                            <a href="{{ route('documentos.download', $doc->id) }}" class="text-decoration-none mb-3">
                                                <div class="doc-preview-wrapper {{ in_array(strtolower($doc->extension), ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg']) ? 'bg-img-preview' : '' }}">
                                                    @if(in_array(strtolower($doc->extension), ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg']))
                                                        <img src="{{ asset('storage/'.$doc->path) }}" class="img-doc-preview" alt="Thumbnail">
                                                    @else
                                                        <i class="{{ $doc->icono }} fa-4x text-muted"></i>
                                                    @endif
                                                </div>
                                                
                                                <h6 class="text-dark font-weight-bold text-truncate mb-1" title="{{ $doc->nombre }}">
                                                    {{ $doc->nombre }}
                                                </h6>
                                                
                                                <div class="text-muted small">
                                                    <span class="badge badge-secondary p-2 mb-2 text-uppercase">{{ $doc->extension }}</span>
                                                    <br>
                                                    @if($doc->size < 1048576)
                                                        {{ number_format($doc->size / 1024, 0) }} KB
                                                    @else
                                                        {{ number_format($doc->size / 1048576, 2) }} MB
                                                    @endif
                                                    <div class="mt-1">
                                                        <i class="fas fa-history mr-1"></i> {{ $doc->updated_at->diffForHumans() }}
                                                    </div>
                                                </div>
                                            </a>

                                            {{-- Acciones Admin --}}
                                            @if(auth()->user()->isAdmin())
                                                <div class="mt-auto pt-3 border-top d-flex justify-content-center">
                                                    <a href="{{ route('documentos.edit', $doc->id) }}" class="btn btn-xs btn-outline-info mr-2">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    <form action="{{ route('documentos.destroy', $doc->id) }}" method="POST" onsubmit="return confirm('¿Eliminar archivo?')">
                                                        @csrf @method('DELETE')
                                                        <button type="submit" class="btn btn-xs btn-outline-danger">
                                                            <i class="fas fa-trash-alt"></i>
                                                        </button>
                                                    </form>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col-12 text-center py-5">
                                    <i class="fas fa-folder-open fa-3x text-muted mb-3"></i>
                                    <p class="text-muted">No se encontraron documentos en esta categoría.</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                    @php $isFirst = false; @endphp
                @endforeach
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<style>
    .card-documento {
        transition: all 0.3s cubic-bezier(.25,.8,.25,1);
        border-radius: 12px;
    }
    .card-documento:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.12) !important;
    }
    .doc-preview-wrapper {
        height: 140px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        background-color: #f8f9fa;
        margin-bottom: 10px;
        overflow: hidden;
        border: 1px solid #eee;
    }
    /* Efecto tablero para PNGs transparentes */
    .bg-img-preview {
        background-color: #343a40;
        background-image: linear-gradient(45deg, #2b3035 25%, transparent 25%), 
                          linear-gradient(-45deg, #2b3035 25%, transparent 25%), 
                          linear-gradient(45deg, transparent 75%, #2b3035 75%), 
                          linear-gradient(-45deg, transparent 75%, #2b3035 75%);
        background-size: 20px 20px;
        background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    }
    .img-doc-preview {
        max-height: 90%;
        max-width: 90%;
        object-fit: contain;
        transition: transform 0.3s ease;
    }
    .card-documento:hover .img-doc-preview {
        transform: scale(1.05);
    }
    .nav-tabs .nav-link.active {
        border-top: 3px solid #28a745 !important;
        font-weight: bold;
    }
</style>
@stop

@section('js')
<script>
$(document).ready(function() {
    // 1. Persistencia de Pestañas (Local Storage)
    var activeTab = localStorage.getItem('activeDocTab');
    if (activeTab) {
        $('#docTabs a[href="' + activeTab + '"]').tab('show');
    }

    $('a[data-toggle="pill"]').on('shown.bs.tab', function (e) {
        localStorage.setItem('activeDocTab', $(e.target).attr('href'));
    });

    // 2. Auto-submit al cambiar filtros (opcional, ya está en inline onchange)
    $('.select-filter').on('change', function() {
        $('#filterForm').submit();
    });
});
</script>
@stop