@extends('layouts.app')

@section('content')
<div class="tk-card">
    <div class="tk-card-hdr"><i class="bi bi-person-lines-fill me-1"></i> Usuarios Responsables</div>
    <div class="tk-card-body">
        <p style="font-size:.78rem; color:var(--eq-text-dim); margin-bottom:12px">
            <i class="bi bi-info-circle me-1"></i>
            Estos son los usuarios que se asignan a los tickets. Puede agregar, editar o eliminar.
            Para recibir notificaciones por WhatsApp, configura el teléfono del responsable en formato internacional (solo dígitos).
        </p>

        <div class="row g-2 mb-3 align-items-end">
            <div class="col-md-2">
                <div class="tk-label">Usuario</div>
                <input type="text" id="respUsuario" class="tk-input" placeholder="Ej: jperez" />
            </div>
            <div class="col-md-2">
                <div class="tk-label">Nombre</div>
                <input type="text" id="respNombre" class="tk-input" placeholder="Nombre completo" />
            </div>
            <div class="col-md-2">
                <div class="tk-label">Contrase&ntilde;a</div>
                <input type="text" id="respPassword" class="tk-input" />
            </div>
            <div class="col-md-2">
                <div class="tk-label">Email</div>
                <input type="email" id="respEmail" class="tk-input" />
            </div>
            <div class="col-md-1">
                <div class="tk-label">Tipo</div>
                <select id="respTipo" class="tk-input">
                    <option value="1">Admin</option>
                    <option value="2" selected>T&eacute;cnico</option>
                    <option value="3">Intercompany</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="button" class="btn tk-btn tk-btn-primary" onclick="insertarResponsable()">
                    <i class="bi bi-plus-lg me-1"></i>Agregar
                </button>
            </div>
        </div>

        <div id="editRespPanel" style="display:none" class="row g-2 mb-3 align-items-end p-2 tk-edit-panel">
            <input type="hidden" id="editRespId" />
            <div class="col-12"><small class="text-warning"><i class="bi bi-pencil me-1"></i>Editando: <strong id="editRespUsuarioLabel"></strong></small></div>
            <div class="col-md-2">
                <div class="tk-label">Usuario</div>
                <input type="text" id="editRespUsuario" class="tk-input" />
            </div>
            <div class="col-md-2">
                <div class="tk-label">Nombre</div>
                <input type="text" id="editRespNombre" class="tk-input" />
            </div>
            <div class="col-md-2">
                <div class="tk-label">Email</div>
                <input type="email" id="editRespEmail" class="tk-input" />
            </div>
            <div class="col-md-2">
                <div class="tk-label">Tel&eacute;fono WhatsApp</div>
                <input type="text" id="editRespTelefono" class="tk-input" placeholder="50249945548" />
            </div>
            <div class="col-md-2">
                <div class="tk-label">WhatsApp API Key</div>
                <input type="text" id="editRespApikey" class="tk-input" placeholder="Opcional" />
            </div>
            <div class="col-md-1">
                <div class="tk-label">Tipo</div>
                <select id="editRespTipo" class="tk-input">
                    <option value="1">Admin</option>
                    <option value="2">T&eacute;cnico</option>
                    <option value="3">Intercompany</option>
                </select>
            </div>
            <div class="col-md-1">
                <div class="tk-label">Estado</div>
                <select id="editRespEstado" class="tk-input">
                    <option value="1">Activo</option>
                    <option value="0">Inactivo</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="button" class="btn tk-btn tk-btn-primary" onclick="modificarResponsable()">
                    <i class="bi bi-pencil me-1"></i>Guardar
                </button>
                <button type="button" class="btn tk-btn tk-btn-secondary ms-1" onclick="cancelarEditResp()">Cancelar</button>
            </div>
        </div>

        <div id="notifRespPanel" style="display:none;background:var(--eq-card-alt);border:1px solid var(--eq-border);border-radius:8px" class="row g-2 mb-3 align-items-end p-2">
            <input type="hidden" id="notifRespId" />
            <div class="col-12">
                <small style="color:#14b8a6"><i class="bi bi-bell me-1"></i>Configurar notificaciones: <strong id="notifRespNombreLabel"></strong></small>
            </div>
            <div class="col-md-2">
                <div class="tk-label"><i class="bi bi-telephone me-1"></i>Tel&eacute;fono</div>
                <input type="text" id="notifRespTelefono" class="tk-input" placeholder="50312345678" />
            </div>
            <div class="col-md-3">
                <div class="tk-label"><i class="bi bi-whatsapp me-1"></i>WhatsApp API Key (CallMeBot)</div>
                <input type="text" id="notifRespApikey" class="tk-input" placeholder="Ej: 123456" />
            </div>
            <div class="col-auto">
                <button type="button" class="btn tk-btn tk-btn-primary" onclick="guardarNotifResp()">
                    <i class="bi bi-check-lg me-1"></i>Guardar
                </button>
                <button type="button" class="btn tk-btn tk-btn-secondary ms-1" onclick="cancelarNotifResp()">Cancelar</button>
            </div>
        </div>

        <div id="gridResponsables"></div>
    </div>
</div>
@endsection

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