@extends('layouts.app')

@section('content')

<input type="hidden" id="hdnClienteId" value="{{ $clienteId }}" />

<div class="row g-3">
    <!-- ══════════════════════════════════════════════════
         COLUMNA IZQUIERDA — Datos + KPIs + Notas
    ══════════════════════════════════════════════════ -->
    <div class="col-lg-4">

        <!-- Card datos del cliente -->
        <div class="tk-card mb-3">
            <div class="tk-card-hdr d-flex justify-content-between align-items-center">
                <span><i class="bi bi-person-badge me-1"></i> <span id="fichaClienteNombre">{{ $cliente->CLIENTE }}</span></span>
                <button type="button" class="btn btn-sm" style="color:#fff;opacity:.8" onclick="abrirEditarCliente()" title="Editar"><i class="bi bi-pencil-square"></i></button>
            </div>
            <div class="tk-card-body">
                <div class="mb-2">
                    <div class="tk-label">NIT</div>
                    <div id="fichaClienteNit" style="font-size:.85rem">{{ $cliente->NIT }}</div>
                </div>
                <div class="mb-2">
                    <div class="tk-label">Telefono</div>
                    <div id="fichaClienteTel" style="font-size:.85rem">{{ empty($cliente->TELEFONO) ? "--" : $cliente->TELEFONO }}</div>
                </div>
                <div class="mb-2">
                    <div class="tk-label">Email</div>
                    <div id="fichaClienteEmail" style="font-size:.85rem">{{ empty($cliente->EMAIL) ? "--" : $cliente->EMAIL }}</div>
                </div>
                <div class="mb-2">
                    <div class="tk-label">Direccion</div>
                    <div id="fichaClienteDir" style="font-size:.85rem">{{ empty($cliente->DIRECCION) ? "--" : $cliente->DIRECCION }}</div>
                </div>
                <div class="mb-2">
                    <div class="tk-label">Sitio Web</div>
                    <div id="fichaClienteWeb" style="font-size:.85rem">
                        @if (!empty($cliente->SITIO_WEB))
                            <a href="{{ $cliente->SITIO_WEB }}" target="_blank" style="color:#14b8a6">{{ $cliente->SITIO_WEB }}</a>
                        @else
                            <span>--</span>
                        @endif
                    </div>
                </div>
                <div class="mb-2">
                    <div class="tk-label">Tipo de Contrato</div>
                    <div id="fichaClienteContrato" style="font-size:.85rem">
                        {{ $cliente->TIPO_CONTRATO == "mensual" ? "Mensual" : ($cliente->TIPO_CONTRATO == "anual" ? "Anual" : "Por incidente") }}
                    </div>
                </div>
                <div class="mb-2">
                    <div class="tk-label">Intercompany</div>
                    <div id="fichaClienteInter" style="font-size:.85rem">{{ empty($cliente->INTERCOMPANY) ? "--" : $cliente->INTERCOMPANY }}</div>
                </div>
                <div class="mb-2">
                    <div class="tk-label">Fecha Alta</div>
                    <div id="fichaClienteFechaAlta" style="font-size:.85rem">{{ empty($cliente->FECHA_ALTA) ? "--" : $cliente->FECHA_ALTA }}</div>
                </div>
            </div>
        </div>

        <!-- KPIs -->
        <div class="tk-dash-row mb-3">
            <div class="tk-dash-card">
                <div class="tk-dash-num" style="color:#14b8a6" id="kpiTotalTickets">{{ $cliente->TOTAL_TICKETS }}</div>
                <div class="tk-dash-label">Tickets Totales</div>
            </div>
            <div class="tk-dash-card">
                <div class="tk-dash-num" style="color:#3b82f6" id="kpiPromDias">{{ number_format($cliente->PROMEDIO_DIAS, 1) }}</div>
                <div class="tk-dash-label">Prom. Dias Resolucion</div>
            </div>
        </div>

        <!-- Notas Internas -->
        <div class="tk-card">
            <div class="tk-card-hdr"><i class="bi bi-journal-text me-1"></i> Notas Internas</div>
            <div class="tk-card-body">
                <div id="listaNotas" style="max-height:300px; overflow-y:auto; margin-bottom:.6rem">
                    <p style="color:var(--eq-text-dim); font-size:.8rem">Cargando...</p>
                </div>
                <div class="d-flex gap-2">
                    <input type="text" id="inp_nota" class="tk-input" placeholder="Agregar nota..." style="flex:1" />
                    <button type="button" class="btn tk-btn tk-btn-primary" onclick="agregarNota()"><i class="bi bi-plus-lg"></i></button>
                </div>
            </div>
        </div>

    </div>

    <!-- ══════════════════════════════════════════════════
         COLUMNA DERECHA — Tabs Contactos + Historial
    ══════════════════════════════════════════════════ -->
    <div class="col-lg-8">
        <div class="tk-card">
            <div class="tk-card-body">

                <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="#tabContactos" type="button">
                            <i class="bi bi-people me-1"></i>Contactos
                        </button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabHistorial" type="button" onclick="cargarHistorialTickets()">
                            <i class="bi bi-clock-history me-1"></i>Historial de Tickets
                        </button>
                    </li>
                </ul>

                <div class="tab-content">
                    <!-- ═══ Tab Contactos ═══ -->
                    <div class="tab-pane fade show active" id="tabContactos">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <input type="text" id="searchContactos" class="tk-grid-search" placeholder="Buscar contacto..."
                                   oninput="tkGridSearch('searchContactos','gridContactos',['NOMBRE','CARGO','DEPARTAMENTO','EMAIL'])" />
                            <button type="button" class="btn tk-btn tk-btn-primary" onclick="abrirCrearContacto()">
                                <i class="bi bi-person-plus me-1"></i>Agregar Contacto
                            </button>
                        </div>
                        <div id="gridContactos"></div>
                    </div>

                    <!-- ═══ Tab Historial ═══ -->
                    <div class="tab-pane fade" id="tabHistorial">
                        <div class="mb-2">
                            <input type="text" id="searchHistorial" class="tk-grid-search" placeholder="Buscar ticket..."
                                   oninput="tkGridSearch('searchHistorial','gridHistorial',['CATEGORIA','PROBLEMA','ESTADO','ASIGNADO'])" />
                        </div>
                        <div id="gridHistorial"></div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- ══════════════════════════════════════════════════════════
     MODAL — Editar Cliente
══════════════════════════════════════════════════════════ -->
<div class="modal fade tk-modal" id="modalEditarCliente" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"><i class="bi bi-pencil-square me-1" style="color:#14b8a6"></i> Editar Cliente</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row g-2">
                    <div class="col-md-6">
                        <div class="tk-label">Nombre *</div>
                        <input type="text" id="edtCliente" class="tk-input" />
                    </div>
                    <div class="col-md-3">
                        <div class="tk-label">NIT</div>
                        <input type="text" id="edtNit" class="tk-input" />
                    </div>
                    <div class="col-md-3">
                        <div class="tk-label">Intercompany</div>
                        <select id="edtIntercompany" 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-4">
                        <div class="tk-label">Telefono</div>
                        <input type="text" id="edtTelefono" class="tk-input" />
                    </div>
                    <div class="col-md-4">
                        <div class="tk-label">Email</div>
                        <input type="email" id="edtEmail" class="tk-input" />
                    </div>
                    <div class="col-md-4">
                        <div class="tk-label">Sitio Web</div>
                        <input type="url" id="edtSitioWeb" class="tk-input" placeholder="https://" />
                    </div>
                    <div class="col-md-8">
                        <div class="tk-label">Direccion</div>
                        <input type="text" id="edtDireccion" class="tk-input" />
                    </div>
                    <div class="col-md-4">
                        <div class="tk-label">Tipo de Contrato</div>
                        <select id="edtTipoContrato" class="tk-input">
                            <option value="por_incidente">Por incidente</option>
                            <option value="mensual">Mensual</option>
                            <option value="anual">Anual</option>
                        </select>
                    </div>
                    <div class="col-12">
                        <div class="tk-label">Notas Internas</div>
                        <textarea id="edtNotasInternas" class="tk-input" rows="2"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn tk-btn tk-btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn tk-btn tk-btn-primary" onclick="guardarCliente()">
                    <i class="bi bi-check-lg me-1"></i>Guardar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- ══════════════════════════════════════════════════════════
     MODAL — Crear/Editar Contacto
══════════════════════════════════════════════════════════ -->
<div class="modal fade tk-modal" id="modalContacto" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modalContactoTitle"><i class="bi bi-person-plus me-1" style="color:#14b8a6"></i> Nuevo Contacto</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="ctcId" value="0" />
                <div class="row g-2">
                    <div class="col-md-6">
                        <div class="tk-label">Nombre *</div>
                        <input type="text" id="ctcNombre" class="tk-input" />
                    </div>
                    <div class="col-md-6">
                        <div class="tk-label">Cargo</div>
                        <input type="text" id="ctcCargo" class="tk-input" />
                    </div>
                    <div class="col-md-6">
                        <div class="tk-label">Departamento</div>
                        <input type="text" id="ctcDepartamento" class="tk-input" />
                    </div>
                    <div class="col-md-6">
                        <div class="tk-label">Telefono</div>
                        <input type="text" id="ctcTelefono" class="tk-input" />
                    </div>
                    <div class="col-md-6">
                        <div class="tk-label">Email</div>
                        <input type="email" id="ctcEmail" class="tk-input" />
                    </div>
                    <div class="col-md-6">
                        <div class="tk-label">WhatsApp</div>
                        <input type="text" id="ctcWhatsapp" class="tk-input" />
                    </div>
                    <div class="col-12">
                        <div class="form-check mt-1">
                            <input type="checkbox" class="form-check-input" id="ctcPrincipal" />
                            <label class="form-check-label" for="ctcPrincipal" style="font-size:.82rem">Contacto principal</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn tk-btn tk-btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn tk-btn tk-btn-primary" onclick="guardarContacto()">
                    <i class="bi bi-check-lg me-1"></i>Guardar
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="{{ asset('js/Clientes/funciones_clientes.js') }}"></script>
<script>
$(function () {
    cargarContactos();
    cargarNotas();
});
</script>
@endpush