@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>
                    Asigne a cada empleado su <b>número de cuenta personal</b> y la <b>cuenta pagadora</b> (cuenta empresarial de Gilton desde la que se le paga). El banco del empleado se deduce automáticamente de la cuenta pagadora seleccionada.
                </div>

                <!-- 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:22%">Número de cuenta</th>
                                <th style="width:25%">Cuenta pagadora (Gilton)</th>
                                <th style="width:8%" class="text-center">Acción</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($employees as $e)
                                <tr data-emp-id="{{ $e->id }}"
                                    data-original-account="{{ $e->bank_account ?? '' }}"
                                    data-original-payer="{{ $e->paying_company_bank_account_id ?? '' }}">
                                    <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-account-input"
                                               value="{{ $e->bank_account }}" placeholder="Número de cuenta">
                                    </td>
                                    <td>
                                        <select class="form-select form-select-sm payer-select">
                                            <option value="">— Sin asignar —</option>
                                            @foreach ($companyBankAccounts as $cba)
                                                <option value="{{ $cba->id }}"
                                                    {{ $e->paying_company_bank_account_id == $cba->id ? 'selected' : '' }}>
                                                    {{ $cba->alias ?: ($cba->bank_name . ' — ' . $cba->account_number) }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </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 origA = tr.dataset.originalAccount || '';
            const origP = tr.dataset.originalPayer || '';
            const curA  = tr.querySelector('.bank-account-input').value.trim();
            const curP  = tr.querySelector('.payer-select').value;
            return (curA !== origA || curP !== origP);
        }

        function markRowSaved(tr, employee) {
            tr.dataset.originalAccount = employee.bank_account || '';
            tr.dataset.originalPayer   = employee.paying_company_bank_account_id || '';
            tr.querySelector('.bank-account-input').classList.remove('border-warning');
            tr.querySelector('.payer-select').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-account-input').classList.add('border-warning');
            tr.querySelector('.payer-select').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`;
        }

        const onDirty = (ev) => {
            const tr = ev.target.closest('tr');
            if (!tr) return;
            if (rowIsDirty(tr)) markRowDirty(tr);
            else markRowSaved(tr, {
                bank_account: tr.dataset.originalAccount,
                paying_company_bank_account_id: tr.dataset.originalPayer
            });
            updateCounter();
        };
        tbody.addEventListener('input', onDirty);
        tbody.addEventListener('change', onDirty);

        // 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 bankAccount = tr.querySelector('.bank-account-input').value.trim();
            const payerId = tr.querySelector('.payer-select').value || null;

            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_account: bankAccount || null,
                        paying_company_bank_account_id: payerId ? parseInt(payerId) : 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)) {
                    const payerVal = tr.querySelector('.payer-select').value;
                    dirtyRows.push({
                        id: parseInt(tr.dataset.empId),
                        bank_account: tr.querySelector('.bank-account-input').value.trim() || null,
                        paying_company_bank_account_id: payerVal ? parseInt(payerVal) : 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) {
                    dirtyRows.forEach(row => {
                        const tr = tbody.querySelector(`tr[data-emp-id="${row.id}"]`);
                        if (tr) markRowSaved(tr, {
                            bank_account: row.bank_account,
                            paying_company_bank_account_id: row.paying_company_bank_account_id
                        });
                    });
                    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';
            });
        });

        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