{{-- New-Unity ERP | Modules/Sales/Resources/Views/customers/create.blade.php | v4.9 | 12/08/2026 --}}
{{-- v4.9 — FIX1: "Sin crédito" como primera opción en status. Campo límite visible solo si Aceptado. --}}
{{-- v4.8 — Security: dispatchEvent({ bubbles: true }) para activar uppercase-input.js desde XML import. --}}
{{-- v4.7 — JS: validación de contactos antes de submit (mínimo 1 con nombre+email); showFormNotification(); fix tipo TI en select. --}}
{{-- v4.6 — novalidate en <form>: formularios multi-tab no deben usar validación HTML5 nativa. --}}
{{-- v4.5 — Fix: campos de dirección renombrados a addresses[0][...] para cumplir validación store(). country → hidden int 142. --}}
{{-- v4.4 — → clase uppercase-input (JS global convierte el valor real). --}}
{{-- v4.3 — Restauración limpia desde Part 6 v4.2.                                               --}}
{{-- v4.2 — Tabs: General Info | Contacts | Banking & Credit. Addresses card separado.           --}}

@extends('layouts.vertical', ['pageTitle' => __('customers.newcustomer')])

@section('content')
<div class="container-fluid">

    <div class="d-flex justify-content-between align-items-start mb-2">
        <div>
            <h1 class="h3 mb-0"><i class="fad fa-user-plus me-2"></i>{{ __('customers.newcustomer') }}</h1>
            <p class="text-muted mb-0">{{ __('customers.subtitle') }}</p>
        </div>
        <div class="d-flex gap-2">
            @can('customers.create')
            <button type="button" class="btn btn-sm btn-outline-info" data-bs-toggle="modal" data-bs-target="#modalXmlImport">
                <i class="fal fa-file-code me-1"></i>{{ __('customers.import-from-xml') }}
            </button>
            @endcan
            <a href="{{ route('sales.customers.index') }}" class="btn btn-sm btn-secondary">
                <i class="fas fa-arrow-left me-1"></i>{{ __('customers.back') }}
            </a>
        </div>
    </div>

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-3">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Unity ERP</a></li>
            <li class="breadcrumb-item"><a href="{{ route('sales.customers.index') }}">{{ __('customers.customers') }}</a></li>
            <li class="breadcrumb-item active">{{ __('customers.newcustomer') }}</li>
        </ol>
    </nav>

    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show">
            <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <form method="POST" action="{{ route('sales.customers.store') }}" id="formCustomer" autocomplete="off" novalidate>
    @csrf

    {{-- ── Main Card ── --}}
    <div class="card mb-3">
        <div class="card-header bg-primary text-white">
            <h5 class="card-title mb-0"><i class="fad fa-user me-2"></i>{{ __('customers.customer_information') }}</h5>
        </div>
        <div class="card-body">

            {{-- Tabs --}}
            <ul class="nav nav-tabs mb-3" id="customerTabs">
                <li class="nav-item">
                    <a class="nav-link active" data-bs-toggle="tab" href="#tab-general">
                        <i class="fad fa-info-circle me-1"></i>{{ __('customers.tab_general') }}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab-contacts">
                        <i class="fad fa-address-book me-1"></i>{{ __('customers.tab_contacts') }}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-bs-toggle="tab" href="#tab-banking">
                        <i class="fad fa-credit-card me-1"></i>{{ __('customers.tab_banking') }}
                    </a>
                </li>
            </ul>

            <div class="tab-content">

                {{-- ── Tab: General Info ── --}}
                <div class="tab-pane fade show active" id="tab-general">

                    <h6 class="text-primary border-bottom pb-1 mb-3">
                        <i class="fad fa-building me-1"></i>{{ __('customers.generalinfo') }}
                        <small class="text-muted fw-normal ms-2">{{ __('customers.auto_generated') }}</small>
                    </h6>
                    <div class="row g-2 mb-3">
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">{{ __('customers.type') }} *</label>
                            <select name="type" class="form-select form-select-sm @error('type') is-invalid @enderror" required>
                                <option value="">{{ __('customers.select') }}</option>
                                <option value="Moral"  @selected(old('type')=='Moral')>{{ __('customers.persona_moral') }}</option>
                                <option value="Física" @selected(old('type')=='Física')>{{ __('customers.persona_fisica') }}</option>
                            </select>
                            @error('type')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">{{ __('customers.rfc') }} *</label>
                            <input type="text" name="rfc" value="{{ old('rfc') }}"
                                   class="form-control form-control-sm uppercase-input @error('rfc') is-invalid @enderror"
                                   maxlength="45" required>
                            @error('rfc')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold">{{ __('customers.business_name') }} *</label>
                            <input type="text" name="name" value="{{ old('name') }}"
                                   class="form-control form-control-sm uppercase-input @error('name') is-invalid @enderror"
                                   maxlength="150" required>
                            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold">{{ __('customers.commercial_name') }} *</label>
                            <input type="text" name="commercial_name" value="{{ old('commercial_name') }}"
                                   class="form-control form-control-sm uppercase-input @error('commercial_name') is-invalid @enderror"
                                   maxlength="150" required>
                            @error('commercial_name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                    </div>

                    <h6 class="text-primary border-bottom pb-1 mb-3"><i class="fad fa-file-invoice me-1"></i>{{ __('customers.fiscal_information') }}</h6>
                    <div class="row g-2 mb-3">
                        <div class="col-md-4">
                            <label class="form-label small fw-bold">{{ __('customers.cfdi_use') }} *</label>
                            <select name="cfdi_id" class="form-select form-select-sm @error('cfdi_id') is-invalid @enderror" required>
                                <option value="">{{ __('customers.select') }}</option>
                                @foreach($cfdiUses as $cfdi)
                                    <option value="{{ $cfdi->id }}" @selected(old('cfdi_id') == $cfdi->id)>
                                        {{ $cfdi->code }} - {{ $cfdi->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('cfdi_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold">{{ __('customers.fiscal_regime_label') }} *</label>
                            <select name="fiscal_regime_id" class="form-select form-select-sm @error('fiscal_regime_id') is-invalid @enderror" required>
                                <option value="">{{ __('customers.select') }}</option>
                                @foreach($fiscalRegimes as $regime)
                                    <option value="{{ $regime->id }}" @selected(old('fiscal_regime_id') == $regime->id)>
                                        {{ $regime->code }} - {{ $regime->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('fiscal_regime_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">{{ __('customers.payment_way') }} *</label>
                            <select name="payment_way_id" class="form-select form-select-sm @error('payment_way_id') is-invalid @enderror" required>
                                <option value="">{{ __('customers.select') }}</option>
                                @foreach($paymentWays as $pw)
                                    <option value="{{ $pw->id }}" @selected(old('payment_way_id') == $pw->id)>
                                        {{ $pw->code }} - {{ $pw->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('payment_way_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">{{ __('customers.payment_method') }}</label>
                            <select name="payment_method_id" class="form-select form-select-sm">
                                <option value="">{{ __('customers.select') }}</option>
                                @foreach($paymentMethods as $pm)
                                    <option value="{{ $pm->id }}" @selected(old('payment_method_id') == $pm->id)>
                                        {{ $pm->code }} - {{ $pm->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <h6 class="text-primary border-bottom pb-1 mb-3"><i class="fad fa-map-marker-alt me-1"></i>{{ __('customers.addresses') }}</h6>
                    <div class="row g-2 mb-2">
                        <div class="col-md-3">
                            <label class="form-label small fw-bold">{{ __('customers.branch_office') }} *</label>
                            <input type="text" name="addresses[0][office_branch]" value="{{ old('addresses.0.office_branch', 'MATRIZ') }}"
                                   class="form-control form-control-sm uppercase-input" maxlength="50" required>
                        </div>
                        <div class="col-md-5">
                            <label class="form-label small fw-bold">{{ __('customers.address_label') }} *</label>
                            <input type="text" name="addresses[0][address]" value="{{ old('addresses.0.address') }}"
                                   class="form-control form-control-sm uppercase-input" maxlength="200" required>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">{{ __('customers.postal_code') }} *</label>
                            <input type="text" name="addresses[0][postal_code]" value="{{ old('addresses.0.postal_code') }}"
                                   class="form-control form-control-sm" maxlength="10" required>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">{{ __('customers.country') }} *</label>
                            <input type="hidden" name="addresses[0][country]" value="{{ old('addresses.0.country', 142) }}">
                            <input type="text" class="form-control form-control-sm" value="México" readonly>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold">{{ __('customers.state') }} *</label>
                            <input type="text" name="addresses[0][state]" value="{{ old('addresses.0.state') }}"
                                   class="form-control form-control-sm uppercase-input" maxlength="100" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold">{{ __('customers.city') }} *</label>
                            <input type="text" name="addresses[0][city]" value="{{ old('addresses.0.city') }}"
                                   class="form-control form-control-sm uppercase-input" maxlength="150" required>
                        </div>
                        <div class="col-md-1">
                            <label class="form-label small fw-bold">{{ __('customers.lada') }} *</label>
                            <input type="text" name="addresses[0][lada]" value="{{ old('addresses.0.lada') }}"
                                   class="form-control form-control-sm" maxlength="10" required>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small fw-bold">{{ __('customers.phone') }} *</label>
                            <input type="text" name="addresses[0][phonenumber]" value="{{ old('addresses.0.phonenumber') }}"
                                   class="form-control form-control-sm" maxlength="20" required>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">{{ __('customers.ext') }}</label>
                            <input type="text" name="addresses[0][extention]" value="{{ old('addresses.0.extention', '0') }}"
                                   class="form-control form-control-sm" maxlength="10">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold">{{ __('customers.email') }} *</label>
                            <input type="email" name="addresses[0][email]" value="{{ old('addresses.0.email') }}"
                                   class="form-control form-control-sm" maxlength="100" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold">{{ __('customers.website') }}</label>
                            <input type="text" name="addresses[0][webpage]" value="{{ old('addresses.0.webpage') }}"
                                   class="form-control form-control-sm" maxlength="100">
                        </div>
                    </div>

                </div>

                {{-- ── Tab: Contacts ── --}}
                <div class="tab-pane fade" id="tab-contacts">
                    <div id="js-contact-error" class="alert alert-danger alert-dismissible fade show d-none mb-2">
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        <div id="js-contact-error-body"></div>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="text-primary mb-0"><i class="fad fa-address-book me-1"></i>{{ __('customers.tab_contacts') }}</h6>
                        <button type="button" class="btn btn-sm btn-success" onclick="addContactRow()">
                            <i class="fas fa-plus me-1"></i>{{ __('customers.add_contact') }}
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm align-middle" id="contacts-table">
                            <thead>
                                <tr>
                                    <th>{{ __('customers.type') }}</th>
                                    <th>{{ __('customers.name') }}</th>
                                    <th>{{ __('customers.email') }}</th>
                                    <th>{{ __('customers.ext') }}</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="contacts-tbody">
                                <tr id="no-contacts-row">
                                    <td colspan="5" class="text-center text-muted py-3">{{ __('customers.no_contacts') }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                {{-- ── Tab: Banking & Credit ── --}}
                <div class="tab-pane fade" id="tab-banking">
                    <h6 class="text-primary border-bottom pb-1 mb-3"><i class="fad fa-university me-1"></i>{{ __('customers.banking_information') }}</h6>
                    <div class="row g-2 mb-3">
                        <div class="col-md-4">
                            <label class="form-label small fw-bold">{{ __('customers.account_number_label') }}</label>
                            <input type="text" name="account_number" value="{{ old('account_number') }}"
                                   class="form-control form-control-sm" maxlength="50">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold">{{ __('customers.bank') }}</label>
                            <input type="text" name="bank" value="{{ old('bank') }}"
                                   class="form-control form-control-sm" maxlength="50">
                        </div>
                    </div>

                    <h6 class="text-warning border-bottom pb-1 mb-3"><i class="fad fa-credit-card me-1"></i>{{ __('customers.credit_conditions') }}</h6>
                    @php $creditStatusCreate = old('credit.status', 'Sin crédito'); @endphp
                    <div class="row g-2 mb-2">
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">{{ __('customers.status') }}</label>
                            <select name="credit[status]" id="creditStatusSelectCreate" class="form-select form-select-sm">
                                <option value="Sin crédito" @selected($creditStatusCreate == 'Sin crédito')>Sin crédito</option>
                                <option value="Aceptado"    @selected($creditStatusCreate == 'Aceptado')>Aceptado</option>
                                <option value="Pendiente"   @selected($creditStatusCreate == 'Pendiente')>Pendiente</option>
                                <option value="Negado"      @selected($creditStatusCreate == 'Negado')>Negado</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small fw-bold">{{ __('customers.payment_term') }}</label>
                            <select name="credit[days]" class="form-select form-select-sm">
                                @foreach([0, 15, 30, 45, 60, 90] as $d)
                                    <option value="{{ $d }}" @selected(old('credit.days', 0) == $d)>{{ $d }} {{ __('customers.days_suffix') }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3 {{ $creditStatusCreate !== 'Aceptado' ? 'd-none' : '' }}" id="limitColCreate">
                            <label class="form-label small fw-bold">{{ __('customers.credit_limit_label') }} <span class="text-muted fw-normal">(MXN)</span></label>
                            <div class="input-group input-group-sm">
                                <span class="input-group-text">$</span>
                                <input type="number" name="credit[limit]" id="credit_limit" step="1" min="1"
                                       class="form-control form-control-sm text-end"
                                       value="{{ old('credit.limit', '') }}" placeholder="0"
                                       oninput="updateCreditLimitWords(this.value)"
                                       onchange="this.value=parseInt(this.value||0);updateCreditLimitWords(this.value)">
                                <span class="input-group-text text-muted small">MXN</span>
                            </div>
                            <small id="credit_limit_words" class="text-muted fst-italic" style="font-size:0.7rem;"></small>
                            <div id="sinLimiteWrapperCreate" class="form-check mt-1">
                                <input class="form-check-input" type="checkbox"
                                       name="credit[sin_limite]" id="chk_sin_limite_create" value="1"
                                       onchange="toggleCreditLimitCreate(this.checked)">
                                <label class="form-check-label small text-muted" for="chk_sin_limite_create">
                                    Sin límite de crédito
                                </label>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label small fw-bold">{{ __('customers.grantor') }}</label>
                            <input type="text" name="credit[grantor]" class="form-control form-control-sm"
                                   value="{{ old('credit.grantor') }}" placeholder="{{ __('customers.ph_grantor') }}" maxlength="100">
                        </div>
                    </div>
                    <div class="row g-2">
                        <div class="col-md-10">
                            <label class="form-label small fw-bold">{{ __('customers.credit_use') }}</label>
                            <textarea name="credit[legal_representation]" class="form-control form-control-sm"
                                      rows="2" maxlength="500"
                                      placeholder="{{ __('customers.ph_credit_use') }}">{{ old('credit.legal_representation') }}</textarea>
                        </div>
                    </div>
                </div>

            </div>{{-- end tab-content --}}
        </div>
        <div class="card-footer d-flex justify-content-end gap-2 py-2">
            <a href="{{ route('sales.customers.index') }}" class="btn btn-secondary btn-sm">
                <i class="fas fa-times me-1"></i>{{ __('customers.cancel') }}
            </a>
            <button type="submit" class="btn btn-primary btn-sm">
                <i class="fas fa-save me-1"></i>{{ __('customers.save_customer') }}
            </button>
        </div>
    </div>

    </form>
</div>

{{-- Modal: Importar desde CFDI XML --}}
<div class="modal fade" id="modalXmlImport" tabindex="-1" aria-labelledby="xmlImportTitle" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="xmlImportTitle">
                    <i class="fal fa-file-code me-2"></i>{{ __('customers.import-from-xml') }}
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted small mb-3">{{ __('customers.xml-modal-hint') }}</p>
                <div id="xmlImportAlert" class="d-none"></div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">{{ __('customers.xml-file-label') }}</label>
                    <input type="file" class="form-control form-control-sm" id="xmlFileInput" accept=".xml">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
                    {{ __('customers.cancel') }}
                </button>
                <button type="button" class="btn btn-info btn-sm" id="btnImportXml">
                    <i class="fal fa-download me-1"></i>{{ __('customers.xml-import-btn') }}
                </button>
            </div>
        </div>
    </div>
</div>

<script>
function numeroALetrasMXN(num) {
    num = parseFloat(num) || 0;
    var el = document.getElementById('credit_limit_words');
    if (!el) return;
    if (num <= 0) { el.textContent = ''; return; }
    var u = ['','UN','DOS','TRES','CUATRO','CINCO','SEIS','SIETE','OCHO','NUEVE',
             'DIEZ','ONCE','DOCE','TRECE','CATORCE','QUINCE','DIECISEIS','DIECISIETE','DIECIOCHO','DIECINUEVE'];
    var d = ['','DIEZ','VEINTE','TREINTA','CUARENTA','CINCUENTA','SESENTA','SETENTA','OCHENTA','NOVENTA'];
    var c = ['','CIENTO','DOSCIENTOS','TRESCIENTOS','CUATROCIENTOS','QUINIENTOS','SEISCIENTOS','SETECIENTOS','OCHOCIENTOS','NOVECIENTOS'];
    function g(n) {
        var s = '';
        if (n >= 100) { if (n === 100) return 'CIEN'; s = c[Math.floor(n/100)] + ' '; n = n % 100; }
        if (n >= 20)  { s += d[Math.floor(n/10)]; if (n%10) s += ' Y ' + u[n%10]; }
        else if (n > 0) s += u[n];
        return s.trim();
    }
    var ent = Math.floor(num);
    var cts = Math.round((num - ent) * 100);
    var r = '';
    if (ent >= 1000000) { r += g(Math.floor(ent/1000000)) + (Math.floor(ent/1000000)===1?' MILLON':' MILLONES') + ' '; ent %= 1000000; }
    if (ent >= 1000)    { var m = Math.floor(ent/1000); r += (m===1?'MIL':g(m)+' MIL') + ' '; ent %= 1000; }
    if (ent > 0)        { r += g(ent); }
    el.textContent = r.trim() + ' PESOS ' + String(cts).padStart(2,'0') + '/100 M.N.';
}
function updateCreditLimitWords(val) { numeroALetrasMXN(val); }

function toggleCreditLimitCreate(sinLimite) {
    var input = document.getElementById('credit_limit');
    var words = document.getElementById('credit_limit_words');
    if (sinLimite) {
        input.value = '';
        input.disabled = true;
        if (words) words.textContent = 'Sin límite definido';
    } else {
        input.disabled = false;
        if (words) words.textContent = '';
    }
}

document.addEventListener('DOMContentLoaded', function () {
    var statusEl  = document.getElementById('creditStatusSelectCreate');
    var limitCol  = document.getElementById('limitColCreate');
    var chk       = document.getElementById('chk_sin_limite_create');
    var limitEl   = document.getElementById('credit_limit');

    if (statusEl) {
        statusEl.addEventListener('change', function () {
            if (this.value === 'Aceptado') {
                if (limitCol) limitCol.classList.remove('d-none');
            } else {
                if (limitCol) limitCol.classList.add('d-none');
                if (chk) { chk.checked = false; }
                if (limitEl) { limitEl.disabled = false; limitEl.value = ''; }
                var words = document.getElementById('credit_limit_words');
                if (words) words.textContent = '';
            }
        });
    }
});

var contactIdx = 0;
function addContactRow() {
    var tbody = document.getElementById('contacts-tbody');
    var noRow = document.getElementById('no-contacts-row');
    if (noRow) noRow.remove();
    var tr = document.createElement('tr');
    tr.innerHTML = '<td><select name="new_contacts['+contactIdx+'][type]" class="form-select form-select-sm">'
        + '<option value="Compras">Compras</option>'
        + '<option value="Pagos">Pagos</option>'
        + '<option value="General">General</option>'
        + '<option value="Técnico">Técnico</option>'
        + '<option value="TI">TI</option>'
        + '</select></td>'
        + '<td><input type="text" name="new_contacts['+contactIdx+'][name]" class="form-control form-control-sm uppercase-input" placeholder="Nombre *"></td>'
        + '<td><input type="email" name="new_contacts['+contactIdx+'][email]" class="form-control form-control-sm" placeholder="Email *"></td>'
        + '<td><input type="text" name="new_contacts['+contactIdx+'][branch_extention]" class="form-control form-control-sm" style="width:70px" placeholder="Ext."></td>'
        + '<td><button type="button" class="btn btn-outline-danger btn-sm" onclick="this.closest(&quot;tr&quot;).remove()"><i class="fas fa-trash-alt"></i></button></td>';
    tbody.appendChild(tr);
    contactIdx++;
}

function showFormNotification(htmlMsg) {
    var box  = document.getElementById('js-contact-error');
    var body = document.getElementById('js-contact-error-body');
    body.innerHTML = htmlMsg;
    box.classList.remove('d-none');
    box.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

document.getElementById('formCustomer').addEventListener('submit', function (e) {
    // Clear previous contact errors and is-invalid states
    var box = document.getElementById('js-contact-error');
    box.classList.add('d-none');
    document.querySelectorAll('#contacts-tbody .is-invalid').forEach(function (el) {
        el.classList.remove('is-invalid');
    });

    var rows = Array.from(document.querySelectorAll('#contacts-tbody tr')).filter(function (r) {
        return r.id !== 'no-contacts-row';
    });

    var errors = [];
    var validCount = 0;

    rows.forEach(function (row, idx) {
        var nameInput  = row.querySelector('input[name*="[name]"]');
        var emailInput = row.querySelector('input[name*="[email]"]');
        var nameVal    = nameInput  ? nameInput.value.trim()  : '';
        var emailVal   = emailInput ? emailInput.value.trim() : '';

        // Completely empty row → user added then left blank, treat as ignored
        if (nameVal === '' && emailVal === '') return;

        var rowNum = idx + 1;
        if (nameVal === '') {
            errors.push('Contacto ' + rowNum + ': el campo <strong>Nombre</strong> es obligatorio.');
            if (nameInput) nameInput.classList.add('is-invalid');
        }
        if (emailVal === '') {
            errors.push('Contacto ' + rowNum + ': el campo <strong>Email</strong> es obligatorio.');
            if (emailInput) emailInput.classList.add('is-invalid');
        }
        if (nameVal !== '' && emailVal !== '') {
            validCount++;
        }
    });

    if (validCount === 0) {
        errors.unshift('Se requiere al menos un contacto con <strong>Nombre</strong> y <strong>Email</strong>.');
    }

    if (errors.length > 0) {
        e.preventDefault();
        // Switch to contacts tab so the error is visible
        var tabEl = document.querySelector('[href="#tab-contacts"]');
        if (tabEl) { bootstrap.Tab.getOrCreateInstance(tabEl).show(); }
        showFormNotification('<ul class="mb-0">' + errors.map(function (m) { return '<li>' + m + '</li>'; }).join('') + '</ul>');
    }
});

// Remove is-invalid highlight as soon as the user types
document.getElementById('contacts-tbody').addEventListener('input', function (e) {
    e.target.classList.remove('is-invalid');
});

// ── Importar desde CFDI XML ────────────────────────────────────────────────
(function () {
    var btn      = document.getElementById('btnImportXml');
    var fileInp  = document.getElementById('xmlFileInput');
    var alertBox = document.getElementById('xmlImportAlert');
    var parseUrl = '{{ route('sales.customers.parse-xml') }}';
    var csrfTk   = document.querySelector('meta[name=csrf-token]')?.content ?? '';

    if (!btn) return;

    btn.addEventListener('click', function () {
        if (!fileInp.files.length) {
            showXmlAlert('warning', '{{ __('customers.xml-file-label') }}');
            return;
        }
        var fd = new FormData();
        fd.append('xml_file', fileInp.files[0]);

        btn.disabled = true;
        btn.innerHTML = '<i class="fal fa-spinner fa-spin me-1"></i>';

        fetch(parseUrl, {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrfTk, 'Accept': 'application/json' },
            body: fd,
        })
        .then(function (r) { return r.json(); })
        .then(function (data) {
            btn.disabled = false;
            btn.innerHTML = '<i class="fal fa-download me-1"></i>{{ __('customers.xml-import-btn') }}';

            if (data.error) {
                showXmlAlert('danger', data.error);
                return;
            }

            // Prefill form fields
            var rfc    = document.querySelector('[name="rfc"]');
            var name   = document.querySelector('[name="name"]');
            var cname  = document.querySelector('[name="commercial_name"]');

            if (rfc)   { rfc.value   = data.rfc;  rfc.dispatchEvent(new Event('input', { bubbles: true })); }
            if (name)  { name.value  = data.name; name.dispatchEvent(new Event('input', { bubbles: true })); }
            if (cname) { cname.value = data.name; cname.dispatchEvent(new Event('input', { bubbles: true })); }

            // Warn if RFC already exists
            if (data.exists) {
                showXmlAlert('warning',
                    '{{ __('customers.xml-rfc-exists-warn') }}: ' + (data.exists_name ?? data.rfc));
            } else {
                showXmlAlert('success', '{{ __('customers.xml-prefilling') }}');
                setTimeout(function () {
                    var modal = bootstrap.Modal.getInstance(document.getElementById('modalXmlImport'));
                    if (modal) modal.hide();
                }, 1400);
            }
        })
        .catch(function () {
            btn.disabled = false;
            btn.innerHTML = '<i class="fal fa-download me-1"></i>{{ __('customers.xml-import-btn') }}';
            showXmlAlert('danger', '{{ __('customers.xml-invalid') }}');
        });
    });

    function showXmlAlert(type, msg) {
        alertBox.className = 'alert alert-' + type + ' py-2 small';
        alertBox.textContent = msg;
    }
})();
</script>
@endsection