@extends('backend.layouts.app')
@section('title', @$data['title'])
@section('content')
    {!! breadcrumb([
        'title' => @$data['title'],
        route('admin.dashboard') => _trans('common.Dashboard'),
        '' => _trans('common.Payroll'),
        '#' => @$data['title'],
    ]) !!}

    <div class="table-content table-basic">
        <div class="card">
            <div class="card-body">

                <!-- Toolbar -->
                <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center pb-3">
                    <div class="d-flex align-items-center gap-3">
                        <h5 class="mb-0">Cuentas Bancarias de Empleados</h5>
                        <span class="badge bg-primary" id="counter">
                            {{ $configuredCount }} de {{ $employees->count() }} configurados
                        </span>
                    </div>

                    <div class="d-flex gap-2">
                        <div class="search-box d-flex">
                            <input class="form-control" id="searchEmp" placeholder="Buscar empleado..." autocomplete="off" />
                            <span class="icon"><i class="fa-solid fa-magnifying-glass"></i></span>
                        </div>
                        <button type="button" class="btn btn-success" id="btnSaveAll">
                            <i class="fa-solid fa-floppy-disk"></i> Guardar todos los cambios
                        </button>
                    </div>
                </div>

                <!-- Tip -->
                <div class="alert alert-info mb-3" style="font-size:.875rem">
                    <strong><i class="fa-solid fa-circle-info"></i> Tip:</strong>
                    Puede editar las celdas directamente. Use el botón <b>Guardar</b> de cada fila para guardar uno por uno,
                    o el botón verde <b>Guardar todos los cambios</b> para enviar todos los cambios pendientes a la vez.
                    El nombre del banco debe ser consistente entre empleados (ej. siempre <code>BAC</code>, no a veces <code>Bac</code>).
                </div>

                <!-- Bancos sugeridos (datalist) -->
                <datalist id="banksDatalist">
                    @foreach ($existingBanks as $b)
                        <option value="{{ $b }}"></option>
                    @endforeach
                </datalist>

                <!-- Tabla -->
                <div class="table-responsive">
                    <table class="table table-striped table-hover align-middle" id="empBankTable">
                        <thead class="table-light">
                            <tr>
                                <th style="width:10%">Código</th>
                                <th style="width:35%">Nombre</th>
                                <th style="width:25%">Banco</th>
                                <th style="width:20%">Número de cuenta</th>
                                <th style="width:10%" class="text-center">Acción</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($employees as $e)
                                <tr data-emp-id="{{ $e->id }}"
                                    data-original-bank="{{ $e->bank_name ?? '' }}"
                                    data-original-account="{{ $e->bank_account ?? '' }}">
                                    <td class="emp-code">{{ $e->employee_id ?: ('EMP-' . $e->id) }}</td>
                                    <td class="emp-name">{{ $e->name }}</td>
                                    <td>
                                        <input type="text" class="form-control form-control-sm bank-name-input"
                                               list="banksDatalist"
                                               value="{{ $e->bank_name }}" placeholder="Ej. BAC, Agrícola...">
                                    </td>
                                    <td>
                                        <input type="text" class="form-control form-control-sm bank-account-input"
                                               value="{{ $e->bank_account }}" placeholder="Número de cuenta">
                                    </td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-sm btn-primary btn-save-row">
                                            <i class="fa-solid fa-floppy-disk"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <p class="text-muted mt-2" style="font-size:.85rem">
                    Total: <strong>{{ $employees->count() }}</strong> empleados activos.
                </p>
            </div>
        </div>
    </div>

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script>
    (function () {
        const csrf = document.querySelector('meta[name="csrf-token"]').content;
        const updateUrl = (id) => `{{ url('hrm/payroll/employee-bank/update') }}/${id}`;
        const bulkUrl   = `{{ route('hrm.payroll.employee_bank.bulk_update') }}`;
        const counterEl = document.getElementById('counter');
        const tbody     = document.querySelector('#empBankTable tbody');

        function rowIsDirty(tr) {
            const origB = tr.dataset.originalBank || '';
            const origA = tr.dataset.originalAccount || '';
            const curB = tr.querySelector('.bank-name-input').value.trim();
            const curA = tr.querySelector('.bank-account-input').value.trim();
            return (curB !== origB || curA !== origA);
        }

        function markRowSaved(tr, employee) {
            tr.dataset.originalBank    = employee.bank_name || '';
            tr.dataset.originalAccount = employee.bank_account || '';
            tr.querySelector('.bank-name-input').classList.remove('border-warning');
            tr.querySelector('.bank-account-input').classList.remove('border-warning');
            tr.querySelector('.btn-save-row').classList.remove('btn-warning');
            tr.querySelector('.btn-save-row').classList.add('btn-primary');
        }

        function markRowDirty(tr) {
            tr.querySelector('.bank-name-input').classList.add('border-warning');
            tr.querySelector('.bank-account-input').classList.add('border-warning');
            tr.querySelector('.btn-save-row').classList.remove('btn-primary');
            tr.querySelector('.btn-save-row').classList.add('btn-warning');
        }

        function updateCounter() {
            let configured = 0;
            tbody.querySelectorAll('tr').forEach(tr => {
                if (tr.querySelector('.bank-account-input').value.trim() !== '') configured++;
            });
            const total = tbody.querySelectorAll('tr').length;
            counterEl.textContent = `${configured} de ${total} configurados`;
        }

        // Dirty tracking
        tbody.addEventListener('input', (ev) => {
            const tr = ev.target.closest('tr');
            if (!tr) return;
            if (rowIsDirty(tr)) markRowDirty(tr);
            else markRowSaved(tr, {
                bank_name: tr.dataset.originalBank,
                bank_account: tr.dataset.originalAccount
            });
            updateCounter();
        });

        // Guardar fila individual
        tbody.addEventListener('click', async (ev) => {
            const btn = ev.target.closest('.btn-save-row');
            if (!btn) return;
            const tr = btn.closest('tr');
            const empId = tr.dataset.empId;
            const bankName = tr.querySelector('.bank-name-input').value.trim();
            const bankAccount = tr.querySelector('.bank-account-input').value.trim();

            btn.disabled = true;
            try {
                const resp = await fetch(updateUrl(empId), {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                        'Accept': 'application/json',
                        'X-HTTP-Method-Override': 'PUT'
                    },
                    body: JSON.stringify({
                        _method: 'PUT',
                        bank_name: bankName || null,
                        bank_account: bankAccount || null
                    })
                });
                const json = await resp.json();
                if (json.status) {
                    markRowSaved(tr, json.employee);
                    updateCounter();
                    flashAlert('success', `Guardado: ${json.employee.name}`);
                } else {
                    flashAlert('danger', json.message || 'Error al guardar');
                }
            } catch (e) {
                flashAlert('danger', 'Error de red: ' + e.message);
            } finally {
                btn.disabled = false;
            }
        });

        // Guardar todos los cambios pendientes
        document.getElementById('btnSaveAll').addEventListener('click', async () => {
            const dirtyRows = [];
            tbody.querySelectorAll('tr').forEach(tr => {
                if (rowIsDirty(tr)) {
                    dirtyRows.push({
                        id: parseInt(tr.dataset.empId),
                        bank_name: tr.querySelector('.bank-name-input').value.trim() || null,
                        bank_account: tr.querySelector('.bank-account-input').value.trim() || null
                    });
                }
            });

            if (dirtyRows.length === 0) {
                flashAlert('info', 'No hay cambios pendientes para guardar.');
                return;
            }

            if (!confirm(`Guardar ${dirtyRows.length} cambios pendientes?`)) return;

            const btnAll = document.getElementById('btnSaveAll');
            btnAll.disabled = true;
            try {
                const resp = await fetch(bulkUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrf,
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({ employees: dirtyRows })
                });
                const json = await resp.json();
                if (json.status) {
                    // Marcar todas como guardadas
                    dirtyRows.forEach(row => {
                        const tr = tbody.querySelector(`tr[data-emp-id="${row.id}"]`);
                        if (tr) markRowSaved(tr, { bank_name: row.bank_name, bank_account: row.bank_account });
                    });
                    updateCounter();
                    flashAlert('success', json.message);
                    if (json.errors && json.errors.length) {
                        flashAlert('warning', 'Errores: ' + json.errors.join(', '));
                    }
                } else {
                    flashAlert('danger', json.message || 'Error al guardar');
                }
            } catch (e) {
                flashAlert('danger', 'Error de red: ' + e.message);
            } finally {
                btnAll.disabled = false;
            }
        });

        // Filtro de búsqueda
        document.getElementById('searchEmp').addEventListener('input', (ev) => {
            const q = ev.target.value.toLowerCase().trim();
            tbody.querySelectorAll('tr').forEach(tr => {
                const code = tr.querySelector('.emp-code').textContent.toLowerCase();
                const name = tr.querySelector('.emp-name').textContent.toLowerCase();
                tr.style.display = (q === '' || code.includes(q) || name.includes(q)) ? '' : 'none';
            });
        });

        // Alert flotante simple
        function flashAlert(type, message) {
            const div = document.createElement('div');
            div.className = `alert alert-${type} position-fixed top-0 end-0 m-3 shadow`;
            div.style.zIndex = 9999;
            div.style.minWidth = '300px';
            div.textContent = message;
            document.body.appendChild(div);
            setTimeout(() => div.remove(), 3500);
        }
    })();
    </script>
@endsection