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

@section('page-title')
<span style="font-size: 0.875em; font-weight: bold;">PROCESO TRÁMITES</span>
@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 --}}
    <div class="mb-4 mt-4">
        <a href="{{ route('tramites.create') }}" class="btn btn-primary">
            CREAR NUEVO TRÁMITE
        </a>
    </div>

    {{-- 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($productos as $producto)
                                <option value="{{ $producto->id }}" {{ request('tipo_producto') == $producto->id ? 'selected' : '' }}>
                                    {{ $producto->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_entrega" class="form-label">FECHA DE ENTREGA</label>
                        <input type="date" name="fecha_entrega" id="fecha_entrega" class="form-control"
                               value="{{ request('fecha_entrega') }}">
                    </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-primary me-2">FILTRAR</button>
                        <a href="{{ route('tramites.export.excel', request()->all()) }}" class="btn btn-success me-2">EXCEL</a>
                        <a href="{{ route('tramites.index') }}" class="btn btn-warning">BORRAR FILTRO</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>
                        <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</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>{{ $tramite->producto->nombre ?? '-' }}</td>
                                <td>{{ $tramite->nombre_producto ?? '-' }}</td>
                                <td>{{ $tramite->tipoTramite->nombre ?? '-' }}</td>
                                <td>{{ $tramite->estadoTramite->nombre ?? '-' }}</td>
                                <td>
                                    @if($tramite->responsable)
                                        {{ strtoupper($tramite->responsable->name) }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>
                                    @if($tramite->fecha_planeada_de_entrega)
                                        {{ date('d/m/Y', strtotime($tramite->fecha_planeada_de_entrega)) }}
                                    @else
                                        -
                                    @endif
                                </td>
                                <td>{{ $tramite->expediente ?? '-' }}</td>
                                <td>{{ $tramite->num_registro ?? '-' }}</td>
                                <td>{{ $tramite->radicado ?? '-' }}</td>
                                <td>
                                    <div class="d-flex">
                                        <a href="{{ route('tramites.show', $tramite) }}" class="btn btn-info btn-sm me-2">VER</a>
                                        @if(!$isEjecutor || $tramite->usuario_responsable_id == Auth::id())
                                            <a href="{{ route('tramites.edit', $tramite) }}" class="btn btn-warning btn-sm">EDITAR</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, '');
            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;
    }

    @media (max-width: 768px) {
        .filter-col {
            min-width: 100%;
        }
    }
</style>
@endsection