@extends('layouts.admin')

@section('title', 'Inicio')

@section('content')
@php
    $pendingBillingHome = \App\Models\ElectronicInvoice::pendingSri()->count();
@endphp
@if($pendingBillingHome > 0 && auth()->user()->hasPermission('billing.view'))
    <div class="alert alert-warning d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4">
        <div>
            Hay <strong>{{ $pendingBillingHome }}</strong> factura(s) pendientes de envío/autorización al SRI.
            No se puede cerrar sesión ni caja hasta resolverlas (emisión en tiempo real).
        </div>
        <a class="btn btn-sm btn-warning" href="{{ route('billing.invoices') }}">Resolver ahora</a>
    </div>
@endif

<div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4 no-print">
    <div>
        <h1 class="h3 mb-1">¡Bienvenido!</h1>
        <p class="text-secondary mb-0">Panel de gestión de tu distribuidora</p>
    </div>
    <div class="d-flex flex-wrap gap-2">
        @if(auth()->user()->hasPermission('cash.view'))
            @if($openCash)
                <a class="btn btn-outline-danger" href="{{ route('cash.index') }}">
                    <i class="bi bi-safe2"></i> Cerrar caja
                </a>
            @else
                <button class="btn btn-outline-success" type="button" data-bs-toggle="modal" data-bs-target="#modalOpenCash">
                    <i class="bi bi-safe"></i> Abrir caja
                </button>
            @endif
        @endif

        @if(auth()->user()->hasPermission('inventory.view') || auth()->user()->hasPermission('products.view'))
            <button class="btn btn-outline-secondary" type="button" data-bs-toggle="modal" data-bs-target="#modalSelectStockProduct">
                <i class="bi bi-layers"></i> Ver stock
            </button>
        @endif

        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                <i class="bi bi-plus-lg"></i> Nuevo
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                @if(auth()->user()->hasPermission('orders.create'))
                    <li><button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#modalNewOrder"><i class="bi bi-cart3 me-2"></i>Pedido</button></li>
                @endif
                @if(auth()->user()->hasPermission('purchases.create') || auth()->user()->hasPermission('purchases.view'))
                    <li><button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#modalNewPurchase"><i class="bi bi-truck me-2"></i>Compra</button></li>
                @endif
                @if(auth()->user()->hasPermission('purchases.create') || auth()->user()->hasPermission('inventory.view'))
                    <li><button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#modalNewStock"><i class="bi bi-box-arrow-in-down me-2"></i>Stock</button></li>
                @endif
                @if(auth()->user()->hasPermission('billing.emit'))
                    <li><button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#modalNuevoComprobante"><i class="bi bi-receipt me-2"></i>Comprobante</button></li>
                @elseif(auth()->user()->hasPermission('billing.view'))
                    <li><a class="dropdown-item" href="{{ route('billing.dashboard') }}"><i class="bi bi-receipt me-2"></i>Facturación</a></li>
                @endif
                @if(auth()->user()->hasPermission('products.create') || auth()->user()->hasPermission('products.view'))
                    <li><button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#modalNewProduct"><i class="bi bi-cup-straw me-2"></i>Producto</button></li>
                @endif
                @if(auth()->user()->hasPermission('cash.movements.create') || auth()->user()->hasPermission('cash.view'))
                    <li><button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#modalExpense"><i class="bi bi-dash-circle me-2"></i>Egreso</button></li>
                @endif
                @if(auth()->user()->hasPermission('clients.create') || auth()->user()->hasPermission('clients.view'))
                    <li><button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#modalNewClient"><i class="bi bi-people me-2"></i>Cliente</button></li>
                @endif
            </ul>
        </div>
    </div>
</div>

{{-- Operación del día --}}
<div class="section-panel ops mb-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h2 class="h5 mb-0">Caja diaria</h2>
            <small class="text-secondary">Datos del día seleccionado</small>
        </div>
        <div class="d-flex align-items-center gap-2">
            <label class="form-label mb-0 small text-secondary" for="dayPicker">Día</label>
            <input type="date" id="dayPicker" class="form-control form-control-sm" value="{{ $day }}" style="width:auto">
        </div>
    </div>
    <div class="row g-3" id="dayMetricsCards">
            <div class="col-md-6 col-xl-3"><div class="card metric h-100"><div class="card-body"><span class="text-secondary">Ventas</span><div class="fs-3 fw-bold mt-2 text-primary" data-metric="sales">${{ number_format($day_metrics['sales'], 2) }}</div></div></div></div>
        <div class="col-md-6 col-xl-3"><div class="card metric h-100"><div class="card-body"><span class="text-secondary">Egreso</span><div class="fs-3 fw-bold mt-2" style="color:#FFA540" data-metric="expenses">${{ number_format($day_metrics['expenses'], 2) }}</div></div></div></div>
        <div class="col-md-6 col-xl-3"><div class="card metric h-100"><div class="card-body"><span class="text-secondary">Pedidos</span><div class="fs-3 fw-bold mt-2" data-metric="orders">{{ $day_metrics['orders'] }}</div></div></div></div>
        <div class="col-md-6 col-xl-3"><div class="card metric h-100"><div class="card-body"><span class="text-secondary">Entregas</span><div class="fs-3 fw-bold mt-2" data-metric="deliveries">{{ $day_metrics['deliveries_pending'] }}/{{ $day_metrics['deliveries_total'] }} <span class="fs-6 fw-normal text-secondary">pendientes</span></div></div></div></div>
    </div>
    <div class="row g-3 d-none" id="dayMetricsSkeleton">
        @for($i=0;$i<4;$i++)<div class="col-md-6 col-xl-3"><div class="skeleton"></div></div>@endfor
    </div>
</div>

{{-- Financiero --}}
<div class="section-panel finance mb-4">
    <div class="mb-3">
        <h2 class="h5 mb-0">Financiero</h2>
        <small class="text-secondary">Resumen de cartera e inventario</small>
    </div>
    <div class="row g-3" id="financeCards">
        <div class="col-md-6 col-xl-3"><div class="card metric h-100"><div class="card-body"><span class="text-secondary">Por cobrar</span><div class="fs-3 fw-bold mt-2 text-primary" data-finance="receivables">${{ number_format($finance['receivables'], 2) }}</div></div></div></div>
        <div class="col-md-6 col-xl-3"><div class="card metric h-100"><div class="card-body"><span class="text-secondary">Cartera vencida</span><div class="fs-3 fw-bold mt-2 text-danger" data-finance="overdue">${{ number_format($finance['overdue'], 2) }}</div></div></div></div>
        <div class="col-md-6 col-xl-3"><div class="card metric h-100"><div class="card-body"><span class="text-secondary">Inventario valorizado</span><div class="fs-3 fw-bold mt-2" style="color:#56C288" data-finance="inventory_value">${{ number_format($finance['inventory_value'], 2) }}</div></div></div></div>
        <div class="col-md-6 col-xl-3"><div class="card metric h-100"><div class="card-body"><span class="text-secondary">Utilidad</span><div class="fs-3 fw-bold mt-2" style="color:#38C976" data-finance="profit">${{ number_format($finance['profit'], 2) }}</div></div></div></div>
    </div>
    <div class="row g-3 d-none" id="financeSkeleton">
        @for($i=0;$i<4;$i++)<div class="col-md-6 col-xl-3"><div class="skeleton"></div></div>@endfor
    </div>
</div>

{{-- Resúmenes --}}
<div class="row g-4">
    <div class="col-xl-7">
        <div class="card metric">
            <div class="card-header fw-bold d-flex justify-content-between align-items-center">
                <span>Stock</span>
                <small class="text-secondary fw-normal">Ordenado de menor a mayor</small>
            </div>
            <div class="table-responsive stock-table-wrap">
                <table class="table align-middle mb-0 stock-table">
                    <thead class="sticky-top">
                        <tr>
                            <th style="width:44px"></th>
                            <th>Categoría</th>
                            <th>Marca</th>
                            <th>Producto</th>
                            <th>Presentación</th>
                            <th class="text-end">Stock</th>
                            <th style="width:52px"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($stock_products as $p)
                            @php
                                $avail = (float) $p['available'];
                                $min = (float) $p['minimum_stock'];
                                $rowClass = 'stock-row';
                                $rowStyle = '';
                                if ($avail <= 0) {
                                    $rowClass .= ' stock-row--zero';
                                } elseif ($min > 0 && $avail < $min) {
                                    // 0 cerca del mínimo → amarillo; 1 cerca de cero → rojo
                                    $t = max(0, min(1, 1 - ($avail / $min)));
                                    $rowClass .= ' stock-row--below';
                                    $g = (int) round(165 - ($t * 97)); // 165 → 68
                                    $b = (int) round(64 + ($t * 4));   // 64 → 68
                                    $a = number_format(0.14 + ($t * 0.22), 3, '.', '');
                                    $rowStyle = "--stock-t: {$t}; --stock-g: {$g}; --stock-b: {$b}; --stock-a: {$a};";
                                } elseif ($min > 0 && $avail <= $min * 1.25) {
                                    $rowClass .= ' stock-row--near';
                                }
                            @endphp
                            <tr class="{{ $rowClass }}" @if($rowStyle !== '') style="{{ $rowStyle }}" @endif>
                                <td>
                                    <button class="btn btn-sm btn-light" type="button" data-bs-toggle="collapse" data-bs-target="#stock{{ $p['id'] }}" aria-label="Ver lotes">
                                        <i class="bi bi-chevron-down"></i>
                                    </button>
                                </td>
                                <td>{{ $p['category'] }}</td>
                                <td>{{ $p['brand'] }}</td>
                                <td>
                                    <div class="fw-semibold">{{ $p['name'] }}</div>
                                    <div class="small text-secondary">Mín. {{ number_format($min, 2) }}</div>
                                </td>
                                <td>{{ $p['presentation'] }}</td>
                                <td class="text-end">
                                    <div class="fw-semibold">{{ number_format($avail, 2) }} {{ $p['unit_label'] ?? 'und' }}</div>
                                    @if(!empty($p['pack_equiv']))
                                        <div class="small text-secondary">{{ $p['pack_equiv'] }}</div>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <div class="dropdown">
                                        <button
                                            class="btn btn-sm btn-light stock-actions-btn"
                                            type="button"
                                            data-bs-toggle="dropdown"
                                            data-bs-popper-config='{"strategy":"fixed"}'
                                            aria-expanded="false"
                                            aria-label="Acciones"
                                        >
                                            <i class="bi bi-three-dots-vertical"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end stock-actions-menu shadow">
                                            <li>
                                                <button class="dropdown-item btn-add-stock" type="button"
                                                    data-product-id="{{ $p['id'] }}"
                                                    data-product-name="{{ $p['name'] }}"
                                                    data-units-per-pack="{{ $p['units_per_pack'] ?? 1 }}"
                                                    data-pack-name="{{ $p['pack_name'] ?? 'empaque' }}"
                                                    data-unit-label="{{ $p['unit_label'] ?? 'und' }}"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#modalAddStock">
                                                    <i class="bi bi-box-arrow-in-down me-2"></i>Agregar stock
                                                </button>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="{{ route('products.inventory', $p['id']) }}">
                                                    <i class="bi bi-pencil-square me-2"></i>Editar / inventario
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr class="collapse stock-row-details" id="stock{{ $p['id'] }}">
                                <td colspan="7">
                                    @if(count($p['batches']))
                                        <table class="table table-sm mb-0">
                                            <thead><tr><th>Lote</th><th>Recibido</th><th>Físico</th><th>Reservado</th><th>Disponible</th><th>Costo</th></tr></thead>
                                            <tbody>
                                                @foreach($p['batches'] as $b)
                                                    <tr>
                                                        <td>{{ $b['code'] }}</td>
                                                        <td>{{ $b['received_date'] }}</td>
                                                        <td>{{ number_format($b['physical'], 2) }}</td>
                                                        <td>{{ number_format($b['reserved'], 2) }}</td>
                                                        <td>{{ number_format($b['available'], 2) }}</td>
                                                        <td>${{ number_format($b['unit_cost'], 2) }}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    @else
                                        <div class="text-secondary small p-2">Sin lotes activos</div>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="7" class="text-secondary p-3">Sin productos</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-xl-5">
        <div class="card metric h-100">
            <div class="card-header fw-bold d-flex flex-wrap justify-content-between align-items-center gap-2">
                <span>Resumen de ventas</span>
                <select id="salesPeriod" class="form-select form-select-sm" style="width:auto">
                    <option value="this_month" selected>Este mes</option>
                    <option value="last_month">Mes anterior</option>
                    <option value="year">Todo el año</option>
                    <option value="custom">Personalizado</option>
                </select>
            </div>
            <div class="card-body">
                <div id="customRange" class="d-none d-flex gap-2 mb-3">
                    <input type="date" id="salesFrom" class="form-control form-control-sm">
                    <input type="date" id="salesTo" class="form-control form-control-sm">
                    <button class="btn btn-sm btn-primary" type="button" id="applyCustomRange">Ver</button>
                </div>
                <canvas id="salesChart" height="180"></canvas>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card metric">
            <div class="card-header fw-bold">Pedidos pendientes</div>
            <div class="table-responsive">
                <table class="table mb-0">
                    <tbody>
                        @forelse($pending_orders as $o)
                            <tr>
                                <td>{{ $o->number }}</td>
                                <td>{{ $o->client->business_name }}</td>
                                <td>{{ $o->status->value }}</td>
                                <td>${{ $o->total }}</td>
                            </tr>
                        @empty
                            <tr><td class="text-secondary p-3">Sin pedidos pendientes</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card metric">
            <div class="card-header fw-bold">Clientes con crédito</div>
            <div class="table-responsive">
                <table class="table align-middle mb-0">
                    <thead>
                        <tr>
                            <th>Cliente</th>
                            <th>Límite</th>
                            <th>Debe</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($credit_clients as $c)
                            <tr>
                                <td>{{ $c['business_name'] }}<div class="small text-secondary">{{ $c['code'] }}</div></td>
                                <td>${{ number_format($c['credit_limit'], 2) }}</td>
                                <td class="fw-semibold">${{ number_format($c['balance'], 2) }}</td>
                                <td>
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">Acciones</button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li>
                                                <button class="dropdown-item btn-view-credit" type="button"
                                                    data-client-id="{{ $c['id'] }}"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#modalViewCredit">Ver</button>
                                            </li>
                                            <li>
                                                <button class="dropdown-item btn-pay-credit" type="button"
                                                    data-client-id="{{ $c['id'] }}"
                                                    data-client-name="{{ $c['business_name'] }}"
                                                    data-bs-toggle="modal"
                                                    data-bs-target="#modalRegisterPayment">Registrar pago</button>
                                            </li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="text-secondary p-3">Sin clientes con crédito</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection

@push('modals')
    @include('dashboard.partials.modals')
    @if(auth()->user()->hasPermission('purchases.create') || auth()->user()->hasPermission('purchases.view'))
        @include('purchases.partials.modal-nueva-compra')
    @endif
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.0/dist/chart.umd.min.js"></script>
<script>
(() => {
    const money = (n) => '$' + Number(n || 0).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    const csrf = document.querySelector('meta[name="csrf-token"]').content;

    let salesChart = new Chart(document.getElementById('salesChart'), {
        type: 'line',
        data: {
            labels: @json($sales_chart['labels']),
            datasets: [{
                label: 'Ventas',
                data: @json($sales_chart['totals']),
                borderColor: '#1292EE',
                backgroundColor: '#1292EE22',
                fill: true,
                tension: .35
            }]
        },
        options: { responsive: true, plugins: { legend: { display: false } } }
    });

    async function loadDay(date) {
        document.getElementById('dayMetricsCards').classList.add('d-none');
        document.getElementById('financeCards').classList.add('d-none');
        document.getElementById('dayMetricsSkeleton').classList.remove('d-none');
        document.getElementById('financeSkeleton').classList.remove('d-none');

        const res = await fetch(`{{ route('dashboard.day-metrics') }}?date=${encodeURIComponent(date)}`, {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        });
        const data = await res.json();

        document.querySelector('[data-metric="sales"]').textContent = money(data.day_metrics.sales);
        document.querySelector('[data-metric="expenses"]').textContent = money(data.day_metrics.expenses);
        document.querySelector('[data-metric="orders"]').textContent = data.day_metrics.orders;
        document.querySelector('[data-metric="deliveries"]').innerHTML =
            `${data.day_metrics.deliveries_pending}/${data.day_metrics.deliveries_total} <span class="fs-6 fw-normal text-secondary">pendientes</span>`;

        document.querySelector('[data-finance="receivables"]').textContent = money(data.finance.receivables);
        document.querySelector('[data-finance="overdue"]').textContent = money(data.finance.overdue);
        document.querySelector('[data-finance="inventory_value"]').textContent = money(data.finance.inventory_value);
        document.querySelector('[data-finance="profit"]').textContent = money(data.finance.profit);

        document.getElementById('dayMetricsSkeleton').classList.add('d-none');
        document.getElementById('financeSkeleton').classList.add('d-none');
        document.getElementById('dayMetricsCards').classList.remove('d-none');
        document.getElementById('financeCards').classList.remove('d-none');
    }

    document.getElementById('dayPicker').addEventListener('change', (e) => loadDay(e.target.value));

    async function loadSales(period, from = '', to = '') {
        let url = `{{ route('dashboard.sales-chart') }}?period=${period}`;
        if (period === 'custom') url += `&from=${encodeURIComponent(from)}&to=${encodeURIComponent(to)}`;
        const res = await fetch(url, { headers: { 'Accept': 'application/json' } });
        const data = await res.json();
        salesChart.data.labels = data.labels;
        salesChart.data.datasets[0].data = data.totals;
        salesChart.update();
    }

    document.getElementById('salesPeriod').addEventListener('change', (e) => {
        const custom = e.target.value === 'custom';
        document.getElementById('customRange').classList.toggle('d-none', !custom);
        if (!custom) loadSales(e.target.value);
    });
    document.getElementById('applyCustomRange').addEventListener('click', () => {
        loadSales('custom', document.getElementById('salesFrom').value, document.getElementById('salesTo').value);
    });

    let dashPack = { perPack: 1, packName: 'empaque', unitLabel: 'und' };

    function dashPackName() {
        const n = (document.getElementById('dash_pack_name')?.value || '').trim();
        if (n) return n;
        const per = Math.max(1, parseInt(document.getElementById('dash_units_per_pack')?.value || '1', 10));
        if (per === 6) return 'Six-pack';
        if (per === 12) return '12-pack';
        if (per === 24) return 'Caja';
        return 'empaque';
    }

    function dashPerPack() {
        return Math.max(1, parseInt(document.getElementById('dash_units_per_pack')?.value || '1', 10) || 1);
    }

    function refreshDashStockPreview() {
        const perPack = dashPerPack();
        const name = dashPackName();
        const packs = document.getElementById('dash_mode_packs')?.checked;
        const q = parseFloat(document.getElementById('dash_quantity')?.value) || 0;
        const c = parseFloat(document.getElementById('dash_unit_cost')?.value) || 0;
        const p = parseFloat(document.getElementById('dash_sale_price')?.value) || 0;
        const costModeEl = document.getElementById('dash_cost_mode');
        if (costModeEl) costModeEl.value = packs ? 'pack' : 'base';
        const base = packs ? q * perPack : q;
        const unitCost = packs && perPack > 1 ? (c / perPack) : c;
        const unitPvp = packs && perPack > 1 ? (p / perPack) : p;
        document.getElementById('dash_mode_packs_label').textContent = `Empaques (${name})`;
        document.getElementById('dash_mode_base_label').textContent = `Unidades (${dashPack.unitLabel})`;
        document.getElementById('dash_qty_label').textContent = packs
            ? `Cantidad de ${name}`
            : `Cantidad de ${dashPack.unitLabel}`;
        document.getElementById('dash_qty_hint').textContent = packs
            ? `1 ${name} = ${perPack} ${dashPack.unitLabel}`
            : 'Se registra tal cual en inventario';
        const costLabel = document.getElementById('dash_cost_label');
        const pvpLabel = document.getElementById('dash_pvp_label');
        if (costLabel) costLabel.textContent = packs ? `Costo del ${name}` : `Costo por ${dashPack.unitLabel}`;
        if (pvpLabel) pvpLabel.textContent = packs ? `P.V.P. del ${name}` : `P.V.P. por ${dashPack.unitLabel}`;
        document.getElementById('dash_stock_preview').innerHTML =
            `Ingresará <strong>${base.toFixed(2)} ${dashPack.unitLabel}</strong>`
            + (packs ? ` (${q || 0} × ${perPack})` : '')
            + ` · costo/${dashPack.unitLabel} <strong>$${unitCost.toFixed(4)}</strong>`
            + (p > 0 ? ` · P.V.P./${dashPack.unitLabel} <strong>$${unitPvp.toFixed(4)}</strong>` : '');
    }

    document.querySelectorAll('.btn-add-stock').forEach((btn) => {
        btn.addEventListener('click', () => {
            document.getElementById('addStockProductName').textContent = btn.dataset.productName;
            document.getElementById('addStockForm').action = `{{ url('/dashboard/products') }}/${btn.dataset.productId}/add-stock`;
            dashPack = {
                perPack: Math.max(1, parseInt(btn.dataset.unitsPerPack || '1', 10)),
                packName: btn.dataset.packName || '',
                unitLabel: btn.dataset.unitLabel || 'und',
            };
            document.getElementById('dash_units_per_pack').value = dashPack.perPack;
            document.getElementById('dash_pack_name').value = dashPack.packName === 'unidad' || dashPack.packName === 'empaque'
                ? ''
                : dashPack.packName;
            document.getElementById('addStockPackInfo').textContent =
                `Inventario en ${dashPack.unitLabel}` + (dashPack.perPack > 1
                    ? ` · empaque configurado: × ${dashPack.perPack}`
                    : ' · configure Unidades/Empaque si compra por cajas');
            document.getElementById('dash_mode_packs').checked = dashPack.perPack > 1;
            document.getElementById('dash_mode_base').checked = dashPack.perPack <= 1;
            document.getElementById('dash_cost_mode').value = dashPack.perPack > 1 ? 'pack' : 'base';
            refreshDashStockPreview();
        });
    });

    ['dash_quantity', 'dash_unit_cost', 'dash_sale_price', 'dash_mode_packs', 'dash_mode_base', 'dash_units_per_pack', 'dash_pack_name'].forEach((id) => {
        document.getElementById(id)?.addEventListener('input', refreshDashStockPreview);
        document.getElementById(id)?.addEventListener('change', refreshDashStockPreview);
    });

    document.querySelectorAll('.btn-view-credit').forEach((btn) => {
        btn.addEventListener('click', async () => {
            const box = document.getElementById('creditDetails');
            box.innerHTML = '<div class="text-secondary">Cargando…</div>';
            const res = await fetch(`{{ url('/dashboard/clients') }}/${btn.dataset.clientId}/credit`);
            const data = await res.json();
            if (!data.receivables.length) {
                box.innerHTML = '<div class="text-secondary">Sin saldos pendientes</div>';
                return;
            }
            box.innerHTML = `<table class="table table-sm mb-0"><thead><tr><th>Obligación</th><th>Pedido</th><th>Vence</th><th>Saldo</th></tr></thead><tbody>${
                data.receivables.map(r => `<tr><td>${r.number}</td><td>${r.order_number || '—'}</td><td>${r.due_at || '—'}</td><td>$${Number(r.balance).toFixed(2)}</td></tr>`).join('')
            }</tbody></table>`;
        });
    });

    document.querySelectorAll('.btn-pay-credit').forEach((btn) => {
        btn.addEventListener('click', () => {
            document.getElementById('payClientName').textContent = btn.dataset.clientName;
            const search = document.getElementById('payOrderSearch');
            if (!search) return;
            const all = JSON.parse(search.getAttribute('data-options-all') || search.getAttribute('data-options') || '[]');
            if (!search.getAttribute('data-options-all')) {
                search.setAttribute('data-options-all', JSON.stringify(all));
            }
            const filtered = all.filter((o) => String(o.client_id) === String(btn.dataset.clientId));
            search.setAttribute('data-options', JSON.stringify(filtered.length ? filtered : all));
            search.dataset.ready = '0';
            search.innerHTML = '';
            window.SearchableSelect.init(document.getElementById('modalRegisterPayment'));
        });
    });

    @if($errors->hasAny(['cash', 'amount', 'category', 'description', 'attachment']) || session('open_expense_modal'))
        const expenseModal = document.getElementById('modalExpense');
        if (expenseModal) new bootstrap.Modal(expenseModal).show();
    @endif
})();
</script>
@endpush