@extends('layouts.app')
@section('content')

<div class="tk-crear-wrapper">
    <!-- ════════════ SECCIN 1: INFORMACIN GENERAL ════════════ -->
    <div class="tk-section">
        <div class="tk-section-header">
            <div class="tk-section-icon"><i class="bi bi-clipboard2-data"></i></div>
            <div>
                <div class="tk-section-title">Informacion General</div>
                <div class="tk-section-sub">Datos basicos del ticket</div>
            </div>
            <div class="tk-section-step">1</div>
        </div>
        <div class="tk-section-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="tk-field-label">Fecha</label>
                    <input type="date" id="inp_fecha" class="tk-field" value="{{ date('Y-m-d') }}" />
                </div>
                <div class="col-md-3">
                    <label class="tk-field-label">
                        Intercompany
                        <i class="bi bi-question-circle tk-tooltip-icon" title="Empresa o sucursal asociada al ticket"></i>
                    </label>
                    <select id="inp_intercompany" class="tk-field">
                        <option value="">-- Seleccione --</option>
                        @foreach($intercompanies as $item)
                            <option value="{{ $item->value }}">{{ $item->text }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="tk-field-label">
                        Prioridad
                    </label>
                    <select id="inp_prioridad" class="tk-field tk-field-prioridad">
                        <option value="" data-color="">-- Seleccione --</option>
                        @foreach($prioridades as $p)
                            <option value="{{ $p->value }}" data-color="">{{ $p->text }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="tk-field-label">
                        Proyecto <span class="tk-optional">(opcional)</span>
                        <i class="bi bi-question-circle tk-tooltip-icon" title="Vincula este ticket a un proyecto existente para dar seguimiento conjunto"></i>
                    </label>
                    <select id="inp_proyecto" class="tk-field">
                        <option value="0">-- Sin proyecto --</option>
                        @foreach([] as $item)
                            <option value="{{ $item->value }}">{{ $item->text }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- ════════════ SECCIN 2: CLIENTE / CONTACTO ════════════ -->
    <div class="tk-section tk-section-highlight">
        <div class="tk-section-header">
            <div class="tk-section-icon"><i class="bi bi-person-badge"></i></div>
            <div>
                <div class="tk-section-title">Cliente / Contacto <span class="tk-required-badge">Obligatorio</span></div>
                <div class="tk-section-sub">Quien reporta el problema</div>
            </div>
            <div class="tk-section-step">2</div>
        </div>
        <div class="tk-section-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="tk-field-label tk-field-required">Cliente</label>
                    <div class="tk-client-search">
                        <input type="hidden" id="inp_idcliente" />
                        <div class="tk-client-display" id="clienteDisplay" onclick="abrirAyudaCliente()">
                            <i class="bi bi-search tk-client-search-icon"></i>
                            <span id="inp_nombrecliente_text" class="tk-client-placeholder">Buscar cliente por nombre o NIT...</span>
                        </div>
                        <input type="hidden" id="inp_nombrecliente" />
                        <button type="button" class="tk-client-btn tk-client-btn-new" onclick="abrirCrearRapido('cliente')" title="Nuevo cliente">
                            <i class="bi bi-person-plus-fill"></i>
                        </button>
                    </div>
                </div>
                <div class="col-md-3">
                    <label class="tk-field-label">Reporta</label>
                    <input type="text" id="inp_reporta" class="tk-field" placeholder="Nombre de contacto" />
                </div>
                <div class="col-md-3">
                    <label class="tk-field-label tk-field-required">Responsable</label>
                    <select id="inp_usuarior" class="tk-field">
                        <option value="">-- Seleccione --</option>
                        @foreach($usuariosResponsables as $item)
                            <option value="{{ $item->value }}">{{ $item->text }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- ════════════ SECCIN 3: CLASIFICACIN DEL PROBLEMA ════════════ -->
    <div class="tk-section tk-section-highlight">
        <div class="tk-section-header">
            <div class="tk-section-icon"><i class="bi bi-diagram-3"></i></div>
            <div>
                <div class="tk-section-title">Clasificacion del Problema <span class="tk-required-badge">Obligatorio</span></div>
                <div class="tk-section-sub">Seleccione categoria para cargar los tipos de problema</div>
            </div>
            <div class="tk-section-step">3</div>
        </div>
        <div class="tk-section-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="tk-field-label tk-field-required">
                        Categoria
                        <button type="button" class="tk-inline-add" onclick="abrirCrearRapido('categoria')"><i class="bi bi-plus-lg"></i> Nueva</button>
                    </label>
                    <select id="inp_categoria" class="tk-field" onchange="cargarProblemas()">
                        <option value="">-- Seleccione --</option>
                        @foreach($categorias as $item)
                            <option value="{{ $item->value }}">{{ $item->text }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="tk-field-label tk-field-required">
                        Tipo de Problema
                        <button type="button" class="tk-inline-add" onclick="abrirCrearRapido('problema')"><i class="bi bi-plus-lg"></i> Nuevo</button>
                    </label>
                    <select id="inp_tipoproblema" class="tk-field">
                        <option value="">-- Seleccione categoria --</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="tk-field-label tk-field-required">
                        Medio
                        <button type="button" class="tk-inline-add" onclick="abrirCrearRapido('medio')"><i class="bi bi-plus-lg"></i> Nuevo</button>
                    </label>
                    <select id="inp_medio" class="tk-field">
                        <option value="">-- Seleccione --</option>
                        @foreach($medios as $item)
                            <option value="{{ $item->value }}">{{ $item->text }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- ════════════ SECCIN 4: DETALLE DEL PROBLEMA ════════════ -->
    <div class="tk-section">
        <div class="tk-section-header">
            <div class="tk-section-icon"><i class="bi bi-card-text"></i></div>
            <div>
                <div class="tk-section-title">Detalle del Problema</div>
                <div class="tk-section-sub">Describe con claridad lo que sucede</div>
            </div>
            <div class="tk-section-step">4</div>
        </div>
        <div class="tk-section-body">
            <div class="row g-3">
                <div class="col-md-12">
                    <label class="tk-field-label">Error / Referencia</label>
                    <input type="text" id="inp_error" class="tk-field" placeholder="Ej: Error 500, Factura #12345, Pantalla de login..." />
                </div>
                <div class="col-md-12">
                    <label class="tk-field-label tk-field-required">Descripcion</label>
                    <div class="tk-textarea-wrap">
                        <textarea id="inp_descripcion" class="tk-field tk-textarea" rows="5"
                                  placeholder="Describe el problema: que sucede, cuando ocurre, que esperabas que pasara y cualquier paso para reproducirlo..."
                                  oninput="actualizarContador()"></textarea>
                        <div class="tk-textarea-footer">
                            <span class="tk-char-count" id="charCount">0 caracteres</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <label class="tk-field-label">Comentarios del Cliente</label>
                    <textarea id="inp_comentario_cliente" class="tk-field" rows="2"
                              placeholder="Observaciones adicionales del cliente sobre el problema..."></textarea>
                </div>
            </div>
        </div>
    </div>

    <!-- ════════════ SECCIN 5: ADJUNTOS ════════════ -->
    <div class="tk-section">
        <div class="tk-section-header">
            <div class="tk-section-icon"><i class="bi bi-paperclip"></i></div>
            <div>
                <div class="tk-section-title">Archivos Adjuntos</div>
                <div class="tk-section-sub">Se suben automaticamente al guardar</div>
            </div>
            <div class="tk-section-step">5</div>
        </div>
        <div class="tk-section-body">
            <div class="tk-dropzone" id="dropZone" onclick="document.getElementById('inp_archivos_crear').click()">
                <i class="bi bi-cloud-arrow-up tk-dropzone-icon"></i>
                <div class="tk-dropzone-text">Haz clic o arrastra archivos aqui</div>
                <div class="tk-dropzone-hint">JPG, PNG, PDF, DOC, XLS, TXT — Max 10MB por archivo</div>
                <input type="file" id="inp_archivos_crear" style="display:none" multiple
                       accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.xls,.xlsx,.txt"
                       onchange="mostrarArchivosSeleccionados()" />
            </div>
            <div id="listaArchivos" class="tk-file-list"></div>
        </div>
    </div>

    <!-- ════════════ BARRA DE ACCIN STICKY ════════════ -->
    <div class="tk-action-bar">
        <div class="tk-action-bar-inner">
            <button type="button" class="tk-action-btn-secondary" onclick="limpiarFormulario()">
                <i class="bi bi-eraser me-1"></i> Limpiar
            </button>
            <button type="button" class="tk-action-btn-primary" onclick="insertarTicket()">
                <i class="bi bi-send-fill me-1"></i> Crear Ticket
            </button>
        </div>
    </div>
</div>

<!-- Modal Ayuda Cliente -->
<div class="modal fade tk-modal" id="modalAyudaCliente" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title"><i class="bi bi-people me-1"></i> Buscar Cliente</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="text" id="filtroCliente" class="tk-field mb-2" placeholder="Filtrar por nombre o NIT..." oninput="filtrarClientes()" autofocus />
                <div class="tk-search">
                    <table class="tk-table" id="tablaClientes">
                        <thead><tr><th>ID</th><th>Cliente</th><th>NIT</th></tr></thead>
                        <tbody>
                            @foreach($clientesAyuda as $c)
                                <tr onclick="seleccionarCliente({{ $c->CODIGO }}, '{{ str_replace("'", "\\'", $c->CLIENTE) }}')">
                                    <td>{{ $c->CODIGO }}</td><td>{{ $c->CLIENTE }}</td><td>{{ $c->NIT }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Creacion Rapida -->
<div class="modal fade tk-modal" id="modalCrearRapido" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="modalCrearRapidoTitle"><i class="bi bi-plus-circle me-1"></i> Nuevo</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="inp_crear_tipo" />
                <div id="crearRapidoFields"></div>
                <button type="button" class="btn tk-btn tk-btn-primary w-100 mt-2" onclick="guardarCrearRapido()">
                    <i class="bi bi-save me-1"></i>Guardar
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
// Prioridad color indicator
$('#inp_prioridad').on('change', function () {
    var color = $(this).find(':selected').data('color') || '';
    $(this).css('border-left', color ? '4px solid ' + color : '');
});

// Character counter
function actualizarContador() {
    var len = ($('#inp_descripcion').val() || '').length;
    $('#charCount').text(len + ' caracteres');
}

// File dropzone & preview
function mostrarArchivosSeleccionados() {
    var files = document.getElementById('inp_archivos_crear').files;
    var html = '';
    for (var i = 0; i < files.length; i++) {
        var size = (files[i].size / 1024).toFixed(1);
        var icon = files[i].type.indexOf('image') >= 0 ? 'bi-image' : files[i].type.indexOf('pdf') >= 0 ? 'bi-file-pdf' : 'bi-file-earmark';
        html += '<div class="tk-file-item"><i class="bi ' + icon + '"></i> ' + files[i].name + ' <span class="tk-file-size">' + size + ' KB</span></div>';
    }
    $('#listaArchivos').html(html);
}

// Drag & drop
var dz = document.getElementById('dropZone');
if (dz) {
    dz.addEventListener('dragover', function (e) { e.preventDefault(); dz.classList.add('tk-dropzone-active'); });
    dz.addEventListener('dragleave', function () { dz.classList.remove('tk-dropzone-active'); });
    dz.addEventListener('drop', function (e) {
        e.preventDefault(); dz.classList.remove('tk-dropzone-active');
        document.getElementById('inp_archivos_crear').files = e.dataTransfer.files;
        mostrarArchivosSeleccionados();
    });
}

// Override seleccionarCliente to update the new display
var _origSeleccionar = window.seleccionarCliente;
window.seleccionarCliente = function (id, nombre) {
    $('#inp_idcliente').val(id);
    $('#inp_nombrecliente').val(nombre);
    $('#inp_nombrecliente_text').text(nombre).removeClass('tk-client-placeholder').addClass('tk-client-selected');
    $('#clienteDisplay').addClass('tk-client-filled');
    bootstrap.Modal.getInstance(document.getElementById('modalAyudaCliente')).hide();
};

// Override limpiarFormulario to also reset new UI elements
var _origLimpiar = window.limpiarFormulario;
window.limpiarFormulario = function () {
    _origLimpiar();
    $('#inp_nombrecliente_text').text('Buscar cliente por nombre o NIT...').addClass('tk-client-placeholder').removeClass('tk-client-selected');
    $('#clienteDisplay').removeClass('tk-client-filled');
    $('#inp_prioridad').css('border-left', '');
    $('#inp_comentario_cliente').val('');
    $('#charCount').text('0 caracteres');
    $('#listaArchivos').html('');
};
</script>
@endpush