@extends('layouts.app')

@section('title', 'Bandeja de Tickets - ERP LOGÍSTICO')
@section('header_title', 'Bandeja de Control de Incidencias')

@section('content')
<div class="row">
    <div class="col-12">
        
        <!-- Filters Card -->
        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <form action="{{ route('tickets.index') }}" method="GET" class="row g-3 align-items-end">
                    
                    <!-- Sucursal Filter -->
                    <div class="col-md-4">
                        <label for="sucursal_filter" class="form-label small fw-semibold text-muted">Filtrar por Sucursal</label>
                        <select class="form-select border-grey" id="sucursal_filter" name="sucursal_id">
                            <option value="">-- Todas las Sucursales --</option>
                            @foreach($sucursales as $s)
                                <option value="{{ $s->id }}" {{ request('sucursal_id') == $s->id ? 'selected' : '' }}>
                                    {{ $s->nombre }} @if(!$s->activo) (Inactiva) @endif
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Status Filter -->
                    <div class="col-md-4">
                        <label for="estado_filter" class="form-label small fw-semibold text-muted">Filtrar por Estado</label>
                        <select class="form-select border-grey" id="estado_filter" name="estado">
                            <option value="">-- Todos los Estados --</option>
                            <option value="ingresado" {{ request('estado') === 'ingresado' ? 'selected' : '' }}>Ingresado</option>
                            <option value="en_proceso" {{ request('estado') === 'en_proceso' ? 'selected' : '' }}>En Proceso</option>
                            <option value="resuelto" {{ request('estado') === 'resuelto' ? 'selected' : '' }}>Resuelto</option>
                            <option value="no_resuelto" {{ request('estado') === 'no_resuelto' ? 'selected' : '' }}>No Resuelto</option>
                            <option value="cerrado" {{ request('estado') === 'cerrado' ? 'selected' : '' }}>Cerrado</option>
                            @if(in_array(Auth::user()->role, ['admin', 'aprobador']))
                                <option value="eliminado" {{ request('estado') === 'eliminado' ? 'selected' : '' }}>Eliminado (Papelera)</option>
                            @endif
                        </select>
                    </div>

                    <!-- Filter Actions -->
                    <div class="col-md-4 d-flex gap-2">
                        <button type="submit" class="btn btn-primary px-4 flex-grow-1"><i class="bi bi-funnel-fill me-2"></i>Filtrar</button>
                        @if(request('kpi') == '1')
                            <a href="{{ route('tickets.index', ['kpi' => 1]) }}" class="btn btn-light border px-3"><i class="bi bi-arrow-counterclockwise"></i> Limpiar</a>
                        @else
                            <a href="{{ route('tickets.index') }}" class="btn btn-light border px-3"><i class="bi bi-arrow-counterclockwise"></i> Limpiar</a>
                        @endif
                    </div>
                </form>
            </div>
        </div>

        @if(request('kpi') == '1')
            <div class="alert alert-info border-0 shadow-sm rounded-3 mb-4 p-3 d-flex align-items-center" style="background-color: #e1f0ff; border-left: 4px solid #0095ff !important;">
                <i class="bi bi-info-circle-fill fs-3 me-3 text-primary"></i>
                <div>
                    <h6 class="fw-bold mb-1 text-primary">Modo Informe (Lectura)</h6>
                    <div class="text-dark small">Está visualizando un listado de soporte derivado de indicadores KPI. Las acciones de modificación están deshabilitadas (sólo ver y exportar).</div>
                </div>
            </div>
        @endif

        <!-- Tickets List Card -->
        <div class="card shadow-sm">
            <div class="card-header bg-white d-flex justify-content-between align-items-center flex-wrap gap-2">
                <h5 class="mb-0 text-dark fw-bold"><i class="bi bi-list-task text-danger me-2"></i>Listado de Tickets</h5>
                <div class="d-flex gap-2">
                    @if(request('kpi') == '1')
                        <a href="{{ route('tickets.dashboard') }}" class="btn btn-outline-secondary btn-sm px-3 fw-semibold">
                            <i class="bi bi-arrow-left"></i> Volver al Dashboard
                        </a>
                    @endif
                    <a href="{{ route('tickets.export', request()->query()) }}" class="btn btn-success btn-sm px-3 fw-semibold">
                        <i class="bi bi-file-earmark-excel-fill me-1"></i> Exportar a Excel
                    </a>
                    @if(request('kpi') !== '1')
                        <a href="{{ route('tickets.create') }}" class="btn btn-danger btn-sm px-3 fw-semibold">
                            <i class="bi bi-plus-circle me-1"></i> Ingresar Incidencia
                        </a>
                    @endif
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" style="min-width: 900px;">
                        <thead class="table-light">
                            <tr>
                                <th class="ps-4" style="width: 120px;">Código</th>
                                <th style="width: 180px;">Sucursal / Área</th>
                                <th>Incidencia / Problema</th>
                                <th style="width: 120px; text-align: center;">Gravedad</th>
                                <th style="width: 140px; text-align: center;">Estado</th>
                                <th style="width: 150px; text-align: center;">SLA (Días)</th>
                                <th style="width: 180px;">Responsable</th>
                                <th class="pe-4" style="width: 130px; text-align: right;">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($tickets as $t)
                                <tr>
                                    <!-- Code -->
                                    <td class="ps-4">
                                        <span class="fw-bold text-dark">{{ $t->codigo }}</span>
                                        <div class="text-muted small" style="font-size: 0.72rem;">{{ $t->created_at->format('d/m H:i') }}</div>
                                    </td>
                                    
                                    <!-- Branch / Area -->
                                    <td>
                                        <div class="fw-semibold text-dark">{{ $t->sucursal->nombre }}</div>
                                        <div class="text-muted small" style="font-size: 0.8rem;">{{ $t->departamento->nombre }}</div>
                                    </td>
                                    
                                    <!-- Issue -->
                                    <td>
                                        <div class="fw-bold text-dark">{{ $t->titulo }}</div>
                                        <div class="text-muted text-truncate small" style="max-width: 250px;">{{ $t->descripcion }}</div>
                                    </td>

                                    <!-- Severity -->
                                    <td class="text-center">
                                        @if($t->problematica->gravedad === 'alta')
                                            <span class="badge bg-danger bg-opacity-10 text-danger px-3 py-1">Alta</span>
                                        @elseif($t->problematica->gravedad === 'media')
                                            <span class="badge bg-warning bg-opacity-10 text-warning px-3 py-1">Media</span>
                                        @else
                                            <span class="badge bg-success bg-opacity-10 text-success px-3 py-1">Baja</span>
                                        @endif
                                    </td>

                                    <!-- Status -->
                                    <td class="text-center">
                                        @if($t->trashed())
                                            <span class="badge badge-premium badge-no_resuelto">Eliminado</span>
                                        @else
                                            <span class="badge badge-premium badge-{{ $t->estado }}">
                                                {{ str_replace('_', ' ', ucfirst($t->estado)) }}
                                            </span>
                                        @endif
                                    </td>

                                    <!-- SLA Counter -->
                                    <td class="text-center">
                                        @if($t->fecha_asignacion)
                                            @php
                                                $dias = $t->dias_transcurridos;
                                            @endphp
                                            
                                            @if($t->estado === 'cerrado' || $t->estado === 'resuelto' || $t->estado === 'no_resuelto')
                                                <div class="text-success fw-bold">
                                                    <i class="bi bi-clock-history me-1"></i> {{ $dias }} d <span class="small text-muted fw-normal">(Fin)</span>
                                                </div>
                                            @else
                                                @if($dias > 3.0)
                                                    <div class="text-danger fw-bold">
                                                        <i class="bi bi-exclamation-triangle-fill me-1"></i> {{ $dias }} d
                                                    </div>
                                                @else
                                                    <div class="text-warning fw-bold">
                                                        <i class="bi bi-clock-fill me-1"></i> {{ $dias }} d
                                                    </div>
                                                @endif
                                            @endif
                                        @else
                                            <span class="text-muted small">Sin asignar</span>
                                        @endif
                                    </td>

                                    <!-- Responsible -->
                                    <td>
                                        @if($t->responsable_tipo === 'interno' && $t->responsableUsuario)
                                            <div class="fw-semibold text-dark"><i class="bi bi-person-fill me-1 text-primary"></i>{{ $t->responsableUsuario->name_with_role }}</div>
                                            <div class="text-muted small" style="font-size: 0.72rem;">Interno</div>
                                        @elseif($t->responsable_tipo === 'externo')
                                            <div class="fw-semibold text-dark"><i class="bi bi-building me-1 text-info"></i>{{ $t->responsable_nombre_externo }}</div>
                                            <div class="text-muted small" style="font-size: 0.72rem;">Proveedor Externo</div>
                                        @else
                                            <span class="text-muted small italic">Pendiente de Asignar</span>
                                        @endif
                                    </td>

                                    <!-- Actions -->
                                    <td class="pe-4 text-end">
                                        <div class="d-flex justify-content-end gap-2">
                                            <a href="{{ route('tickets.show', array_merge(['ticket' => $t->id], request()->query())) }}" class="btn btn-light btn-sm border" title="Ver detalles e historial">
                                                <i class="bi bi-eye-fill"></i>
                                            </a>
                                            
                                            @if(in_array(Auth::user()->role, ['admin', 'aprobador']) && !$t->trashed() && request('kpi') !== '1')
                                                <form action="{{ route('tickets.destroy', array_merge(['ticket' => $t->id], request()->query())) }}" method="POST" onsubmit="return confirmDelete(this)" class="d-inline">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn btn-light btn-sm text-danger border" title="Eliminar ticket">
                                                        <i class="bi bi-trash-fill"></i>
                                                    </button>
                                                </form>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center py-5 text-muted">
                                        <i class="bi bi-ticket-slash-fill display-4 d-block mb-3 text-secondary"></i>
                                        No se encontraron tickets con los filtros actuales.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script>
    function confirmDelete(form) {
        let motivo = prompt('Por favor ingrese el motivo de la eliminación del ticket (mínimo 5 caracteres):');
        if (motivo === null) {
            return false; // User cancelled
        }
        motivo = motivo.trim();
        if (motivo.length < 5) {
            alert('Error: El motivo de la eliminación debe tener al menos 5 caracteres.');
            return false;
        }
        
        // Add hidden input
        let input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'motivo_eliminacion';
        input.value = motivo;
        form.appendChild(input);
        return true;
    }
</script>
@endsection