@extends('layouts.app')

@section('content')

<div class="tk-card">
    <div class="tk-card-hdr"><i class="bi bi-gear me-1"></i> Catálogos de Tickets</div>
    <div class="tk-card-body">

        <!-- Tabs -->
        <ul class="nav nav-tabs mb-3" role="tablist">
            <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabClientes" type="button" onclick="cargarCatClientes()">
                    <i class="bi bi-people me-1"></i>Clientes
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabCategorias" type="button" onclick="cargarCatCategorias()">
                    <i class="bi bi-tags me-1"></i>Categorías
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabTipos" type="button" onclick="cargarCatTipos()">
                    <i class="bi bi-exclamation-triangle me-1"></i>Tipos de Problema
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabTecnicos" type="button" onclick="cargarCatTecnicos()">
                    <i class="bi bi-person-badge me-1"></i>T&eacute;cnicos
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabPrioridades" type="button" onclick="cargarCatPrioridades()">
                    <i class="bi bi-flag me-1"></i>Prioridades / SLA
                </button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabIntercompany" type="button" onclick="cargarCatIntercompany()">
                    <i class="bi bi-building me-1"></i>Intercompany
                </button>
            </li>
        </ul>

        <div class="tab-content">
            <!-- ═══ Tab Clientes ═══ -->
            <div class="tab-pane fade show active" id="tabClientes">
                <div class="row g-2 mb-3 align-items-end">
                    <div class="col-md-2">
                        <div class="tk-label">Cliente</div>
                        <input type="text" id="catCliente" class="tk-input" />
                    </div>
                    <div class="col-md-2">
                        <div class="tk-label">NIT</div>
                        <input type="text" id="catNit" class="tk-input" />
                    </div>
                    <div class="col-md-2">
                        <div class="tk-label">Teléfono</div>
                        <input type="text" id="catTelefono" class="tk-input" />
                    </div>
                    <div class="col-md-2">
                        <div class="tk-label">Email</div>
                        <input type="email" id="catEmail" class="tk-input" />
                    </div>
                    <div class="col-md-2">
                        <div class="tk-label">Intercompany</div>
                        <select id="catIntercompany" class="tk-input">
                            <option value="">-- Seleccione --</option>
                            @foreach($intercompanies as $item)
                                <option value="{{ $item->value }}">{{ $item->text }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn tk-btn tk-btn-primary" onclick="insertarCatCliente()">
                            <i class="bi bi-plus-lg me-1"></i>Agregar
                        </button>
                    </div>
                </div>
                <!-- Campos de edición (hidden por defecto) -->
                <div id="editClientePanel" style="display:none" class="row g-2 mb-3 align-items-end p-2" style="border:1px dashed var(--eq-border); border-radius:.35rem">
                    <div class="col-auto"><small class="text-warning">Editando ID: <strong id="editClienteId"></strong></small></div>
                    <div class="col-md-3">
                        <div class="tk-label">Cliente</div>
                        <input type="text" id="editClienteNombre" class="tk-input" />
                    </div>
                    <div class="col-md-2">
                        <div class="tk-label">NIT</div>
                        <input type="text" id="editClienteNit" class="tk-input" />
                    </div>
                    <div class="col-md-3">
                        <div class="tk-label">Intercompany</div>
                        <select id="editClienteInter" class="tk-input">
                            <option value="">-- Seleccione --</option>
                            @foreach($intercompanies as $item)
                                <option value="{{ $item->value }}">{{ $item->text }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn tk-btn tk-btn-primary" onclick="modificarCatCliente()">
                            <i class="bi bi-pencil me-1"></i>Guardar
                        </button>
                        <button type="button" class="btn tk-btn tk-btn-secondary ms-1" onclick="cancelarEditCliente()">Cancelar</button>
                    </div>
                </div>
                <div id="gridClientes"></div>
            </div>

            <!-- ═══ Tab Categorías ═══ -->
            <div class="tab-pane fade" id="tabCategorias">
                <div class="row g-2 mb-3 align-items-end">
                    <div class="col-md-4">
                        <div class="tk-label">Categoría</div>
                        <input type="text" id="catCategoria" class="tk-input" />
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn tk-btn tk-btn-primary" onclick="insertarCatCategoria()">
                            <i class="bi bi-plus-lg me-1"></i>Agregar
                        </button>
                    </div>
                </div>
                <div id="gridCategorias"></div>
            </div>

            <!-- ═══ Tab Tipos Problema ═══ -->
            <div class="tab-pane fade" id="tabTipos">
                <div class="row g-2 mb-3 align-items-end">
                    <div class="col-md-3">
                        <div class="tk-label">Categoría (filtro)</div>
                        <select id="catFiltroCategoria" class="tk-input">
                            <option value="">-- Todas --</option>
                            @foreach($categorias as $item)
                                <option value="{{ $item->value }}">{{ $item->text }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn tk-btn tk-btn-secondary" onclick="filtrarCatTipos()">
                            <i class="bi bi-funnel me-1"></i>Filtrar
                        </button>
                    </div>
                    <div class="col-md-1"></div>
                    <div class="col-md-3">
                        <div class="tk-label">Tipo Problema</div>
                        <input type="text" id="catTipoProblema" class="tk-input" />
                    </div>
                    <div class="col-md-3">
                        <div class="tk-label">Categoría</div>
                        <select id="catTipoCategoria" class="tk-input">
                            <option value="">-- Seleccione --</option>
                            @foreach($categorias as $item)
                                <option value="{{ $item->value }}">{{ $item->text }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn tk-btn tk-btn-primary" onclick="insertarCatTipo()">
                            <i class="bi bi-plus-lg me-1"></i>Agregar
                        </button>
                    </div>
                </div>
                <div id="gridTipos"></div>
            </div>

            <!-- ═══ Tab Técnicos ═══ -->
            <div class="tab-pane fade" id="tabTecnicos">
                <div class="row g-2 mb-3 align-items-end">
                    <div class="col-md-2">
                        <div class="tk-label">Nombre</div>
                        <input type="text" id="catTecNombre" class="tk-input" />
                    </div>
                    <div class="col-md-2">
                        <div class="tk-label">Email</div>
                        <input type="email" id="catTecEmail" class="tk-input" />
                    </div>
                    <div class="col-md-2">
                        <div class="tk-label">Tel&eacute;fono</div>
                        <input type="text" id="catTecTelefono" class="tk-input" />
                    </div>
                    <div class="col-md-2">
                        <div class="tk-label">Especialidad</div>
                        <input type="text" id="catTecEspecialidad" class="tk-input" placeholder="Ej: Redes, Software" />
                    </div>
                    <div class="col-md-2">
                        <div class="tk-label">Intercompany</div>
                        <select id="catTecIntercompany" class="tk-input">
                            <option value="">-- Seleccione --</option>
                            @foreach($intercompanies as $item)
                                <option value="{{ $item->value }}">{{ $item->text }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn tk-btn tk-btn-primary" onclick="insertarCatTecnico()">
                            <i class="bi bi-plus-lg me-1"></i>Agregar
                        </button>
                    </div>
                </div>
                <!-- Panel edición técnico -->
                <div id="editTecnicoPanel" style="display:none" class="row g-2 mb-3 align-items-end p-2" style="border:1px dashed var(--eq-border); border-radius:.35rem">
                    <div class="col-auto"><small class="text-warning">Editando ID: <strong id="editTecnicoId"></strong></small></div>
                    <div class="col-md-2">
                        <div class="tk-label">Nombre</div>
                        <input type="text" id="editTecnicoNombre" class="tk-input" />
                    </div>
                    <div class="col-md-2">
                        <div class="tk-label">Email</div>
                        <input type="email" id="editTecnicoEmail" class="tk-input" />
                    </div>
                    <div class="col-md-2">
                        <div class="tk-label">Tel&eacute;fono</div>
                        <input type="text" id="editTecnicoTelefono" class="tk-input" />
                    </div>
                    <div class="col-md-2">
                        <div class="tk-label">Especialidad</div>
                        <input type="text" id="editTecnicoEspecialidad" class="tk-input" />
                    </div>
                    <div class="col-md-2">
                        <div class="tk-label">Intercompany</div>
                        <select id="editTecnicoInter" class="tk-input">
                            <option value="">-- Seleccione --</option>
                            @foreach($intercompanies as $item)
                                <option value="{{ $item->value }}">{{ $item->text }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-1">
                        <div class="tk-label">Activo</div>
                        <select id="editTecnicoActivo" class="tk-input">
                            <option value="1">S&iacute;</option>
                            <option value="0">No</option>
                        </select>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn tk-btn tk-btn-primary" onclick="modificarCatTecnico()">
                            <i class="bi bi-pencil me-1"></i>Guardar
                        </button>
                        <button type="button" class="btn tk-btn tk-btn-secondary ms-1" onclick="cancelarEditTecnico()">Cancelar</button>
                    </div>
                </div>
                <div id="gridTecnicos"></div>
            </div>

            <!-- ═══ Tab Prioridades / SLA ═══ -->
            <div class="tab-pane fade" id="tabPrioridades">
                <div class="row g-2 mb-3 align-items-end">
                    <div class="col-md-2">
                        <div class="tk-label">Nombre</div>
                        <input type="text" id="catPrioNombre" class="tk-input" placeholder="Ej: Urgente" />
                    </div>
                    <div class="col-md-2">
                        <div class="tk-label">Color</div>
                        <input type="color" id="catPrioColor" class="tk-input" value="#ef4444" style="height:34px; padding:2px" />
                    </div>
                    <div class="col-md-2">
                        <div class="tk-label">SLA (horas)</div>
                        <input type="number" id="catPrioSla" class="tk-input" value="24" min="1" />
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn tk-btn tk-btn-primary" onclick="insertarCatPrioridad()">
                            <i class="bi bi-plus-lg me-1"></i>Agregar
                        </button>
                    </div>
                </div>
                <p style="font-size:.75rem; color:var(--eq-text-dim)">
                    <i class="bi bi-info-circle me-1"></i>
                    SLA = tiempo en horas para resolver. Al crear un ticket se calcula automáticamente la fecha límite.
                    El orden determina la prioridad visual (1 = más urgente).
                </p>
                <div id="gridPrioridades"></div>
            </div>

            <!-- ═══ Tab Intercompany ═══ -->
            <div class="tab-pane fade" id="tabIntercompany">
                <div class="row g-2 mb-3 align-items-end">
                    <div class="col-md-4">
                        <div class="tk-label">Nombre Intercompany</div>
                        <input type="text" id="catInterNombre" class="tk-input" placeholder="Ej: Empresa ABC" />
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn tk-btn tk-btn-primary" onclick="insertarCatIntercompany()">
                            <i class="bi bi-plus-lg me-1"></i>Agregar
                        </button>
                    </div>
                </div>
                <!-- Panel edición intercompany -->
                <div id="editInterPanel" style="display:none" class="row g-2 mb-3 align-items-end p-2">
                    <div class="col-auto"><small class="text-warning">Editando ID: <strong id="editInterId"></strong></small></div>
                    <div class="col-md-4">
                        <div class="tk-label">Nombre</div>
                        <input type="text" id="editInterNombre" class="tk-input" />
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn tk-btn tk-btn-primary" onclick="modificarCatIntercompany()">
                            <i class="bi bi-pencil me-1"></i>Guardar
                        </button>
                        <button type="button" class="btn tk-btn tk-btn-secondary ms-1" onclick="cancelarEditInter()">Cancelar</button>
                    </div>
                </div>
                <div id="gridIntercompany"></div>
            </div>
        </div>

    </div>
</div>

@endsection

@push('scripts')
<script src="{{ asset('js/Tickets/funciones_tickets_catalogos.js') }}"></script>
<script>$(function(){ cargarCatClientes(); });</script>
@endpush