{% extends "base.html" %}
{% block breadcrumb %}Gestión de Clientes{% endblock %}

{% block content %}
<div class="page page-customers" data-main-domain="{{ main_domain }}">
    <div class="page-header">
        <h2 class="page-title">Gestión de Clientes</h2>
        <button class="btn btn-primary" id="btnNewCustomer">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Nuevo Cliente
        </button>
    </div>

    <div class="table-container">
        <table class="data-table" id="customersTable">
            <thead>
                <tr>
                    <th>Nombre</th>
                    <th>Subdominio</th>
                    <th>Dominio Personalizado</th>
                    <th>URL de Acceso</th>
                    <th>BD Tenant</th>
                    <th>Estado</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="6" class="text-center">Cargando...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<div class="modal-overlay" id="modalOverlay" style="display:none">
    <div class="modal" id="customerModal">
        <div class="modal-header">
            <h3 id="modalTitle">Nuevo Cliente</h3>
            <button class="modal-close" id="btnModalClose">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        <div class="modal-body">
            <form id="customerForm">
                <input type="hidden" id="customerId" value="">
                <div class="form-group">
                    <label for="customerName">Nombre del Cliente *</label>
                    <input type="text" id="customerName" class="form-input" required placeholder="Ej: Empresa S.A.S.">
                </div>
                <div class="form-group">
                    <label for="customerSubdomain">Subdominio *</label>
                    <input type="text" id="customerSubdomain" class="form-input" required placeholder="Ej: empresa">
                    <small class="form-hint" id="subdomainHint">Se accedera como: empresa.{{ main_domain }}</small>
                </div>
                <div class="form-group">
                    <label for="customerCustomDomain">Dominio Personalizado (opcional)</label>
                    <input type="text" id="customerCustomDomain" class="form-input" placeholder="Ej: docs.empresa.com">
                </div>
                <div class="form-group" id="dbNameGroup" style="display:none">
                    <label for="customerDbName">Base de Datos Tenant</label>
                    <input type="text" id="customerDbName" class="form-input" readonly disabled>
                    <small class="form-hint">El nombre se genera automaticamente como metafoliador_tenant_{subdominio}</small>
                </div>
                <div class="form-group">
                    <label for="customerActive">Estado</label>
                    <select id="customerActive" class="form-input">
                        <option value="true">Activo</option>
                        <option value="false">Inactivo</option>
                    </select>
                </div>
                <div class="form-group" id="bgImageGroup">
                    <label>Imagen de Fondo (Login del Tenant)</label>
                    <div id="bgPreview" style="display:none; margin-bottom: 8px;">
                        <img id="bgPreviewImg" src="" style="max-width: 200px; max-height: 120px; border-radius: 8px; border: 1px solid var(--border);">
                    </div>
                    <input type="file" id="backgroundImage" class="form-input" accept=".jpg,.jpeg,.png,.gif,.webp">
                    <small class="form-hint">Se mostrara como fondo en el login del tenant</small>
                </div>
                <div id="modalError" class="error-message" style="display:none"></div>
                <div class="modal-actions">
                    <button type="button" class="btn btn-secondary" id="btnCancelModal">Cancelar</button>
                    <button type="submit" class="btn btn-primary" id="btnSaveCustomer">
                        <span class="btn-text">Guardar</span>
                        <span class="btn-spinner" style="display:none">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10" stroke-dasharray="31.415" stroke-dashoffset="10"/></svg>
                        </span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="/static/js/main/customers.js"></script>
{% endblock %}