<?php
/**
 * @var \App\View\AppView $this
 * @var \App\Model\Entity\ClienteFacturacion $clienteFacturacion
 * @var \Cake\Collection\CollectionInterface|string[] $companies
 */
?>

<div class="container mt-4 mb-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <?php if (!$this->Permisos->tiene('ClientesFacturacion', 'add')): ?>
                <div class="alert alert-danger" role="alert">
                    <i class="fas fa-lock"></i> No tienes permisos para registrar clientes.
                </div>
            <?php else: ?>
                <?= $this->Form->create($clienteFacturacion, ['class' => 'row g-3']) ?>
                <?= $this->Form->hidden('company_id', ['value' => 1]) ?>

                <!-- Título -->
                <div class="col-12 mb-4">
                    <h3 class="text-info"><i class="fas fa-user-plus"></i> Registrar Nuevo Cliente</h3>
                </div>

                <!-- Tipo de Documento -->
                <div class="col-md-4 mb-3">
                    <?= $this->Form->control('tipo_doc', [
                        'label' => 'Tipo de Documento',
                        'type' => 'select',
                        'options' => ['1' => 'DNI', '6' => 'RUC'],
                        'class' => 'form-control',
                        'empty' => '-- Seleccionar --',
                        'id' => 'tipo_doc',
                    ]) ?>
                </div>

                <!-- N° Documento -->
                <div class="col-md-8 mb-3">
                    <label class="form-label" for="numero_doc">N° Documento</label>
                    <div class="input-group">
                        <?= $this->Form->control('numero_doc', [
                            'label' => false,
                            'class' => 'form-control',
                            'placeholder' => 'Ej: 12345678',
                            'required' => true,
                            'id' => 'numero_doc',
                        ]) ?>
                        <button type="button" class="btn btn-outline-primary" id="btn-buscar-doc">
                            <i class="fas fa-search"></i> Buscar
                        </button>
                    </div>
                    <div id="doc-help" class="form-text mt-1"></div>
                </div>

                <!-- Nombre / Razón Social -->
                <div class="col-md-12 mb-3">
                    <?= $this->Form->control('nombre_razon_social', [
                        'label' => 'Nombre / Razón Social',
                        'class' => 'form-control',
                        'placeholder' => 'Ej: Juan Pérez / Comercial ABC S.A.C.',
                        'required' => true,
                        'id' => 'nombre_razon_social',
                    ]) ?>
                </div>

                <!-- Dirección -->
                <div class="col-md-12 mb-3">
                    <?= $this->Form->control('direccion', [
                        'label' => 'Dirección',
                        'class' => 'form-control',
                        'placeholder' => 'Dirección del cliente',
                        'id' => 'direccion',
                    ]) ?>
                </div>

                <!-- Email -->
                <div class="col-md-6 mb-3">
                    <?= $this->Form->control('email', [
                        'label' => 'Email',
                        'class' => 'form-control',
                        'placeholder' => 'correo@ejemplo.com'
                    ]) ?>
                </div>

                <!-- Teléfono -->
                <div class="col-md-6 mb-3">
                    <?= $this->Form->control('telefono', [
                        'label' => 'Teléfono',
                        'class' => 'form-control',
                        'placeholder' => 'Ej: 987654321'
                    ]) ?>
                </div>

                <!-- Fecha de Nacimiento -->
                <div class="col-md-6 mb-3">
                    <?= $this->Form->control('fecha_nacimiento', [
                        'label' => 'Fecha de Nacimiento (si aplica)',
                        'class' => 'form-control',
                        'type' => 'date',
                        'empty' => true,
                        'max' => date('Y-m-d')
                    ]) ?>
                </div>

                <!-- ¿Cómo se enteró? -->
                <div class="col-md-6 mb-3">
                    <?= $this->Form->control('como_entero', [
                        'label' => '¿Cómo se enteró?',
                        'class' => 'form-control',
                        'placeholder' => 'Ej: Redes sociales, referido'
                    ]) ?>
                </div>

                <!-- Recomendado por -->
                <div class="col-md-12 mb-3">
                    <?= $this->Form->control('recomendado', [
                        'label' => 'Recomendado por',
                        'class' => 'form-control',
                        'placeholder' => 'Nombre de quien lo recomendó'
                    ]) ?>
                </div>

                <!-- Notas Administrativas -->
                <div class="col-md-12 mb-3">
                    <?= $this->Form->control('notas_administrativas', [
                        'label' => 'Notas Administrativas',
                        'type' => 'text',
                        'class' => 'form-control',
                        'placeholder' => 'Observaciones adicionales'
                    ]) ?>
                </div>

                <!-- Botones -->
                <div class="col-12 text-center">
                    <?= $this->Form->button(__('Guardar Cliente'), ['class' => 'btn btn-info', 'id' => 'btnGuardar']) ?>
                    <?= $this->Html->link(__('Cancelar'), ['action' => 'index'], ['class' => 'btn btn-secondary ms-2']) ?>
                </div>

                <?= $this->Form->end() ?>
            <?php endif; ?>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const form = document.querySelector("form");
        const btnGuardar = document.getElementById("btnGuardar");

        if (form && btnGuardar) {
            form.addEventListener("submit", function (event) {
                if (!form.checkValidity()) {
                    event.preventDefault();
                    return;
                }
                btnGuardar.disabled = true;
                btnGuardar.innerText = "Guardando...";
            });
        }

        // Buscar datos del cliente en API Perú según tipo de documento (DNI/RUC)
        const urlConsultarDni = '<?= $this->Url->build('/invoices/consultar-dni-api') ?>';
        const urlConsultarRuc = '<?= $this->Url->build('/invoices/consultar-ruc-api') ?>';

        const tipoDocField = document.getElementById('tipo_doc');
        const numeroDocField = document.getElementById('numero_doc');
        const nombreField = document.getElementById('nombre_razon_social');
        const direccionField = document.getElementById('direccion');
        const btnBuscarDoc = document.getElementById('btn-buscar-doc');
        const docHelp = document.getElementById('doc-help');

        if (btnBuscarDoc) {
            btnBuscarDoc.addEventListener('click', async function (e) {
                e.preventDefault();

                const tipo = tipoDocField ? tipoDocField.value : '';
                const numero = (numeroDocField.value || '').trim();

                if (tipo === '1') {
                    if (!/^\d{8}$/.test(numero)) {
                        docHelp.innerHTML = '<span class="text-danger">DNI debe tener exactamente 8 dígitos.</span>';
                        return;
                    }

                    docHelp.innerHTML = '<span class="text-muted">Consultando DNI...</span>';
                    try {
                        const res = await fetch(urlConsultarDni + '?dni=' + encodeURIComponent(numero), {
                            headers: { 'Accept': 'application/json' }
                        });
                        const data = await res.json();
                        if (!data.ok) {
                            docHelp.innerHTML = `<span class="text-danger">${data.error || data.message || 'No se pudo consultar el DNI.'}</span>`;
                            return;
                        }
                        if (nombreField) nombreField.value = data.nombre || '';
                        docHelp.innerHTML = '<span class="text-success">DNI encontrado correctamente.</span>';
                    } catch {
                        docHelp.innerHTML = '<span class="text-danger">Error al consultar DNI.</span>';
                    }
                } else if (tipo === '6') {
                    if (!/^\d{11}$/.test(numero)) {
                        docHelp.innerHTML = '<span class="text-danger">Ingrese un RUC válido de 11 dígitos.</span>';
                        return;
                    }

                    docHelp.innerHTML = '<span class="text-muted">Consultando RUC...</span>';
                    try {
                        const res = await fetch(urlConsultarRuc + '?ruc=' + encodeURIComponent(numero), {
                            headers: { 'Accept': 'application/json' }
                        });
                        const data = await res.json();
                        if (!data.ok) {
                            docHelp.innerHTML = `<span class="text-danger">${data.error || data.message || 'No se pudo consultar el RUC.'}</span>`;
                            return;
                        }
                        if (nombreField) nombreField.value = data.razon_social || '';
                        if (direccionField) direccionField.value = data.direccion || '';

                        let extra = 'RUC encontrado correctamente.';
                        if (data.estado || data.condicion) {
                            extra += ` Estado: ${data.estado || '-'} | Condición: ${data.condicion || '-'}`;
                        }
                        docHelp.innerHTML = `<span class="text-success">${extra}</span>`;
                    } catch {
                        docHelp.innerHTML = '<span class="text-danger">Error al consultar RUC.</span>';
                    }
                } else {
                    docHelp.innerHTML = '<span class="text-danger">Seleccione primero el tipo de documento (DNI o RUC).</span>';
                }
            });
        }
    });
</script>
