{{-- resources/views/tramites/index.blade.php --}}
@extends('backend.layouts.app')

{{-- Estilos críticos en el head para evitar FOUC --}}
@push('after-styles')
<style>
.page-title-icon {
    background: linear-gradient(135deg, #6f42c1, #9c27b0);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.3);
    opacity: 0;
    animation: fadeInScale 0.6s ease forwards;
}

.page-title-icon i {
    font-size: 24px;
}

.page-title-content {
    flex: 1;
    opacity: 0;
    animation: fadeInRight 0.6s ease 0.2s forwards;
}

.page-main-title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #6f42c1;
    background: linear-gradient(135deg, #6f42c1, #9c27b0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.page-subtitle {
    margin: 0;
    font-size: 14px;
    color: #666;
    font-weight: 400;
    margin-top: 2px;
}

.c-subheader {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border-bottom: 1px solid #dee2e6 !important;
    padding: 20px 15px !important;
    min-height: auto !important;
}

.page-title-icon:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 768px) {
    .page-main-title {
        font-size: 24px;
    }
    
    .page-title-icon {
        width: 50px;
        height: 50px;
        margin-right: 12px;
    }
    
    .page-title-icon i {
        font-size: 20px;
    }
    
    .page-subtitle {
        font-size: 12px;
    }
}
</style>
@endpush

@section('page-title')
    <div class="d-flex align-items-center">
        <div class="page-title-icon">
            <i class="fas fa-clipboard-list"></i>
        </div>
        <div class="page-title-content">
            <h1 class="page-main-title">Gestión de Trámites</h1>
            <p class="page-subtitle">Administra y supervisa todos los trámites del sistema</p>
        </div>
    </div>
@endsection

@section('content')
<style>
    /* Solo ajuste de márgenes laterales */
    .container-fluid {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
</style>

<div class="container-fluid">
    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger">
            {{ session('error') }}
        </div>
    @endif

    {{-- BOTÓN CREAR NUEVO TRÁMITE - Solo visible para JEFE DE EQUIPO --}}
    @php
        $stateHandler = app(\App\Services\TramiteStateHandler::class);
        $userRole = $stateHandler->getUserRole();
    @endphp
    
    @if($userRole === 'jefe_equipo')
        <div class="mb-4 mt-4">
            <a href="{{ route('tramites.create') }}" class="btn btn-primary">
                CREAR NUEVO TRÁMITE
            </a>
        </div>
    @endif

    {{-- FILTROS DE BÚSQUEDA --}}
    <div class="card mb-3">
        <div class="card-header">
            <strong>FILTROS DE BÚSQUEDA</strong>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('tramites.index') }}">
                {{-- PRIMERA FILA DE FILTROS --}}
                <div class="filter-row mb-4">
                    <div class="filter-col">
                        <label for="id_tramite" class="form-label">ID TRÁMITE</label>
                        <input type="text" name="id_tramite" id="id_tramite" class="form-control"
                               placeholder="EJ: 123" value="{{ request('id_tramite') }}">
                    </div>
                    <div class="filter-col">
                        <label for="estado_tramite" class="form-label">ESTADO DEL TRÁMITE</label>
                        <select name="estado_tramite" id="estado_tramite" class="form-control">
                            <option value="">-- TODOS --</option>
                            @foreach($estadosTramite as $et)
                                <option value="{{ $et->id }}" {{ request('estado_tramite') == $et->id ? 'selected' : '' }}>
                                    {{ $et->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="filter-col">
                        <label for="tipo_producto" class="form-label">TIPO DE PRODUCTO</label>
                        <select name="tipo_producto" id="tipo_producto" class="form-control">
                            <option value="">-- TODOS --</option>
                            @foreach($tiposProductos as $tipoProducto)
                                <option value="{{ $tipoProducto->id }}" {{ request('tipo_producto') == $tipoProducto->id ? 'selected' : '' }}>
                                    {{ $tipoProducto->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="filter-col">
                        <label for="tipo_tramite" class="form-label">TIPO DE TRÁMITE</label>
                        <select name="tipo_tramite" id="tipo_tramite" class="form-control">
                            <option value="">-- TODOS --</option>
                            @foreach($tiposTramite as $tt)
                                <option value="{{ $tt->id }}" {{ request('tipo_tramite') == $tt->id ? 'selected' : '' }}>
                                    {{ $tt->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="filter-col">
                        <label for="fecha_planeada_de_entrega_del_dossier" class="form-label">FECHA PLANEADA DE ENTREGA DEL DOSSIER</label>
<input type="date" name="fecha_planeada_de_entrega_del_dossier" id="fecha_planeada_de_entrega_del_dossier" class="form-control"
value="{{ request('fecha_planeada_de_entrega_del_dossier') }}">
                    </div>
                </div>

                {{-- SEGUNDA FILA DE FILTROS --}}
                <div class="filter-row mb-4">
                    <div class="filter-col">
                        <label for="nombre_producto" class="form-label">PRODUCTO</label>
                        <input type="text" name="nombre_producto" id="nombre_producto" class="form-control"
                               value="{{ request('nombre_producto') }}">
                    </div>
                    <div class="filter-col">
                        <label for="radicado" class="form-label">RADICADO</label>
                        <input type="text" name="radicado" id="radicado" class="form-control"
                               value="{{ request('radicado') }}">
                    </div>
                    <div class="filter-col">
                        <label for="num_registro" class="form-label">NÚMERO DE REGISTRO</label>
                        <input type="text" name="num_registro" id="num_registro" class="form-control"
                               value="{{ request('num_registro') }}">
                    </div>
                    <div class="filter-col">
                        <label for="expediente" class="form-label">EXPEDIENTE</label>
                        <input type="text" name="expediente" id="expediente" class="form-control"
                               value="{{ request('expediente') }}">
                    </div>
                    <div class="filter-col">
                        <label for="responsable" class="form-label">RESPONSABLE</label>
                        <select name="responsable" id="responsable" class="form-control">
                            <option value="">-- TODOS --</option>
                            @foreach($responsables as $responsable)
                                <option value="{{ $responsable->id }}" {{ request('responsable') == $responsable->id ? 'selected' : '' }}>
                                    {{ strtoupper($responsable->name) }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- BOTONES DE ACCIÓN --}}
                <div class="row mt-4">
                    <div class="col-md-12 d-flex justify-content-end">
                        <button type="submit" class="btn btn-ghost-primary me-2 btn-lg"><i class="fas fa-filter"></i></button>
                        <a href="{{ route('tramites.export.excel', request()->all()) }}" class="btn btn-ghost-success me-2 btn-lg"><i class="fas fa-file-excel"></i></a>
                        <a href="{{ route('tramites.index') }}" class="btn btn-ghost-warning btn-lg"><i class="fas fa-eraser"></i></a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- BOTONES PARA TRÁMITES CON MENOS DE 60, 30 Y 15 DÍAS --}}
    <div class="row g-3 mb-3">
        <div class="col-md-4 d-flex justify-content-center">
            <a href="{{ route('tramites.index', ['vencimiento' => '60']) }}" class="btn" style="background-color: #28a745; color: #fff; font-weight: bold; width: 60%;">
                MENOS DE 60 DÍAS ({{ $countMenos60 ?? 0 }})
            </a>
        </div>
        <div class="col-md-4 d-flex justify-content-center">
            <a href="{{ route('tramites.index', ['vencimiento' => '30']) }}" class="btn" style="background-color: #ffc107; color: #fff; font-weight: bold; width: 60%;">
                MENOS DE 30 DÍAS ({{ $countMenos30 ?? 0 }})
            </a>
        </div>
        <div class="col-md-4 d-flex justify-content-center">
            <a href="{{ route('tramites.index', ['vencimiento' => '15']) }}" class="btn" style="background-color: #dc3545; color: #fff; font-weight: bold; width: 60%;">
                MENOS DE 15 DÍAS ({{ $countMenos15 ?? 0 }})
            </a>
        </div>
    </div>

    {{-- TABLA DE RESULTADOS --}}
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered mb-0">
                    <thead class="thead-dark">
                        <tr>
                            <th>ID</th>
                            <th>TIPO DE PRODUCTO</th>
                            <th>PRODUCTO</th>
                            <th>TIPO DE TRÁMITE</th>
                            <th>ESTADO DEL TRÁMITE</th>
                            <th>RESPONSABLE</th>
                                                            <th>FECHA PLANEADA DE ENTREGA DEL DOSSIER</th>
                            <th>EXPEDIENTE</th>
                            <th>NÚMERO DE REGISTRO</th>
                            <th>RADICADO</th>
                            <th>ACCIONES</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($tramites as $tramite)
                            <tr>
                                <td>{{ $tramite->id }}</td>
                                <td>
                                    @if($tramite->productoEspecifico && $tramite->productoEspecifico->tipoProducto)
                                        {{ $tramite->productoEspecifico->tipoProducto->nombre }}
                                    @else
                                        {{ $tramite->tipoTramite->tiposProducto->pluck('nombre')->join(', ') ?? '-' }}
                                    @endif
                                </td>
                                <td>{{ $tramite->productoEspecifico->nombre ?? '-' }}</td>
                                <td>{{ $tramite->tipoTramite->nombre ?? '-' }}</td>
                                <td>{{ $tramite->estadoTramite->nombre ?? '-' }}</td>
                                <td>
                                    @if($tramite->responsable)
                                        {{ strtoupper($tramite->responsable->name) }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>
                                    @php
                                        $fechaPlaneada = $tramite->fecha_planeada_de_entrega_del_dossier;
                                        $fechaEntrega = $tramite->fecha_de_entrega_del_dossier;
                                    @endphp
                                    @if($fechaPlaneada)
                                        {{ date('d/m/Y', strtotime($fechaPlaneada)) }}
                                        @if($fechaEntrega)
                                            @if(strtotime($fechaEntrega) <= strtotime($fechaPlaneada))
                                                <i class="fas fa-check-circle text-success ms-2" title="Entregado a tiempo"></i>
                                            @else
                                                <i class="fas fa-times-circle text-danger ms-2" title="Entregado fuera de plazo"></i>
                                            @endif
                                        @endif
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>{{ $tramite->productoEspecifico->expediente ?? '-' }}</td>
                                <td>{{ $tramite->productoEspecifico->num_registro ?? '-' }}</td>
                                <td>{{ $tramite->radicado ?? '-' }}</td>
                                <td>
                                    <div class="d-flex">
                                        <a href="{{ route('tramites.show', $tramite) }}" class="btn btn-ghost-info btn-sm me-2" title="Ver trámite">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        @if(!$isAnalista || $tramite->usuario_responsable_id == Auth::id())
                                            <a href="{{ route('tramites.edit', $tramite) }}" class="btn btn-ghost-warning btn-sm" title="Editar trámite">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="11" class="text-center">NO HAY TRÁMITES REGISTRADOS.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Paginación --}}
    <div class="mt-3">
        {{ $tramites->links() }}
    </div>
</div>

{{-- SCRIPT PARA FORZAR MAYÚSCULAS Y RESTRINGIR CARACTERES NO PERMITIDOS --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('input[type="text"], textarea').forEach(function(input) {
        input.addEventListener('input', function() {
            let val = this.value.toUpperCase();
            val = val.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
            
            // Permitir más caracteres especiales incluyendo guiones, puntos, comas, paréntesis, barras
            // Esto es especialmente importante para campos como num_registro que pueden contener "INVIMA2025 123456-RE"
            val = val.replace(/[^A-Z0-9\s\.,\-\(\)\/]/g, '');
            this.value = val;
        });
    });
});
</script>

{{-- SCRIPT PARA CARGAR TIPOS DE TRÁMITE DINÁMICAMENTE --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tipoProductoSelect = document.getElementById('tipo_producto');
    const tipoTramiteSelect = document.getElementById('tipo_tramite');
    
    tipoProductoSelect.addEventListener('change', function() {
        const productoId = this.value;
        tipoTramiteSelect.innerHTML = '<option value="">-- TODOS --</option>';
        
        if (productoId) {
            fetch(`/api/tipos-tramite/${productoId}`)
                .then(response => response.json())
                .then(data => {
                    data.forEach(tipo => {
                        const option = document.createElement('option');
                        option.value = tipo.id;
                        option.textContent = tipo.nombre;
                        tipoTramiteSelect.appendChild(option);
                    });
                })
                .catch(error => console.error('Error:', error));
        }
    });
});
</script>

{{-- ESTILOS ADICIONALES --}}
<style>
    .form-label {
        font-weight: 500;
        margin-bottom: 0.5rem;
    }
    
    .form-control {
        height: 38px;
    }
    
    .card {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    }
    
    .btn-primary {
        padding: 0.5rem 1.5rem;
    }

    .filter-row {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        flex-wrap: wrap;
    }

    .filter-col {
        flex: 1;
        min-width: 180px;
    }

    /* Estilos para botones de acción con iconos */
    .btn-sm i {
        font-size: 0.875rem;
    }
    
    .btn-sm {
        padding: 0.375rem 0.5rem;
        min-width: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    @media (max-width: 768px) {
        .filter-col {
            min-width: 100%;
        }
        
        .btn-sm {
            min-width: 28px;
            padding: 0.25rem 0.375rem;
        }
    }
</style>
@endsection