@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">
                <div class="d-flex flex-wrap gap-2 justify-content-between align-items-center pb-3">
                    <h5 class="mb-0">Cuentas Bancarias Empresariales</h5>
                    <button type="button" class="btn btn-primary btn-sm" id="btn-open-create-modal">
                        <i class="fa-solid fa-plus"></i> Agregar Cuenta
                    </button>
                </div>

                <div class="table-responsive">
                    <table class="table table-bordered table-striped align-middle" id="company-bank-accounts-table">
                        <thead class="table-light">
                            <tr>
                                <th>Banco</th>
                                <th>Número de Cuenta</th>
                                <th>Titular</th>
                                <th>Moneda</th>
                                <th>Alias</th>
                                <th class="text-end">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($accounts as $a)
                                <tr data-row-id="{{ $a->id }}">
                                    <td>{{ $a->bank_name }}</td>
                                    <td>{{ $a->account_number }}</td>
                                    <td>{{ $a->account_holder ?? '—' }}</td>
                                    <td>{{ $a->currency ?? 'USD' }}</td>
                                    <td>{{ $a->alias ?? '—' }}</td>
                                    <td class="text-end">
                                        <button type="button" class="btn btn-sm btn-outline-primary btn-edit-account"
                                            data-id="{{ $a->id }}"
                                            data-bank_name="{{ $a->bank_name }}"
                                            data-account_number="{{ $a->account_number }}"
                                            data-account_holder="{{ $a->account_holder }}"
                                            data-currency="{{ $a->currency ?? 'USD' }}"
                                            data-alias="{{ $a->alias }}"
                                            data-notes="{{ $a->notes }}"
                                            title="Editar">
                                            <i class="fa-solid fa-pen-to-square"></i>
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger btn-delete-account"
                                            data-id="{{ $a->id }}" title="Eliminar">
                                            <i class="fa-solid fa-trash-can"></i>
                                        </button>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center text-muted py-3">
                                        No hay cuentas bancarias registradas. Hacé click en "Agregar Cuenta" para crear la primera.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Create/Edit --}}
    <div class="modal fade" id="companyBankAccountModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form id="company-bank-account-form" autocomplete="off">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title" id="cba-modal-title">Nueva Cuenta Bancaria</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="id" id="cba-id" value="">

                        <div class="mb-3">
                            <label class="form-label">Banco <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="bank_name" id="cba-bank_name" required maxlength="255">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Número de Cuenta <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="account_number" id="cba-account_number" required maxlength="255">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Titular de la Cuenta</label>
                            <input type="text" class="form-control" name="account_holder" id="cba-account_holder" maxlength="255">
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Moneda</label>
                                <select class="form-select" name="currency" id="cba-currency">
                                    <option value="USD">USD — Dólares</option>
                                    <option value="SVC">SVC — Colones</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Alias</label>
                                <input type="text" class="form-control" name="alias" id="cba-alias" maxlength="255"
                                    placeholder="Ej: Planilla USD">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Notas</label>
                            <textarea class="form-control" name="notes" id="cba-notes" rows="2" maxlength="1000"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary" id="cba-submit-btn">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script>
    (function () {
        const ROUTES = {
            store:   "{{ route('hrm.company_bank_accounts.store') }}",
            // FIX: usar rutas nombradas con placeholder __ID__ que el JS reemplaza después.
            update:  "{{ route('hrm.company_bank_accounts.update', ['id' => '__ID__']) }}",
            destroy: "{{ route('hrm.company_bank_accounts.destroy', ['id' => '__ID__']) }}",
            index:   "{{ route('hrm.company_bank_accounts.index') }}",
        };
        const CSRF_TOKEN = document.querySelector('meta[name="csrf-token"]')?.content
                        || "{{ csrf_token() }}";

        const modalEl = document.getElementById('companyBankAccountModal');
        const bsModal = new bootstrap.Modal(modalEl);
        const form = document.getElementById('company-bank-account-form');
        const titleEl = document.getElementById('cba-modal-title');
        const idEl = document.getElementById('cba-id');

        function resetForm() {
            form.reset();
            idEl.value = '';
            titleEl.textContent = 'Nueva Cuenta Bancaria';
        }

        document.getElementById('btn-open-create-modal').addEventListener('click', function () {
            resetForm();
            bsModal.show();
        });

        document.querySelectorAll('.btn-edit-account').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const ds = btn.dataset;
                idEl.value = ds.id;
                document.getElementById('cba-bank_name').value = ds.bank_name || '';
                document.getElementById('cba-account_number').value = ds.account_number || '';
                document.getElementById('cba-account_holder').value = ds.account_holder || '';
                document.getElementById('cba-currency').value = ds.currency || 'USD';
                document.getElementById('cba-alias').value = ds.alias || '';
                document.getElementById('cba-notes').value = ds.notes || '';
                titleEl.textContent = 'Editar Cuenta Bancaria';
                bsModal.show();
            });
        });

        form.addEventListener('submit', function (e) {
            e.preventDefault();
            const id = idEl.value;
            const isUpdate = !!id;
            const url = isUpdate ? ROUTES.update.replace('__ID__', id) : ROUTES.store;
            const method = isUpdate ? 'PUT' : 'POST';

            const payload = new FormData(form);
            // Para Laravel: usar POST con _method=PUT cuando es update (FormData no soporta PUT directo bien)
            if (isUpdate) {
                payload.append('_method', 'PUT');
            }

            fetch(url, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': CSRF_TOKEN,
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                },
                body: payload,
            })
            .then(r => r.json().then(j => ({ status: r.status, body: j })))
            .then(({ status, body }) => {
                if (status >= 200 && status < 300 && body.status) {
                    bsModal.hide();
                    window.location.href = ROUTES.index;
                } else {
                    const msg = body.message || 'Error al guardar la cuenta bancaria.';
                    alert(msg);
                }
            })
            .catch(err => {
                console.error(err);
                alert('Error de red al guardar la cuenta bancaria.');
            });
        });

        document.querySelectorAll('.btn-delete-account').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const id = btn.dataset.id;
                if (!confirm('¿Eliminar esta cuenta bancaria empresarial?')) return;

                fetch(ROUTES.destroy.replace('__ID__', id), {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': CSRF_TOKEN,
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    },
                    body: (function () {
                        const fd = new FormData();
                        fd.append('_method', 'DELETE');
                        return fd;
                    })(),
                })
                .then(r => r.json().then(j => ({ status: r.status, body: j })))
                .then(({ status, body }) => {
                    if (status >= 200 && status < 300 && body.status) {
                        const row = document.querySelector(`tr[data-row-id="${id}"]`);
                        if (row) row.remove();
                    } else {
                        alert(body.message || 'Error al eliminar la cuenta bancaria.');
                    }
                })
                .catch(err => {
                    console.error(err);
                    alert('Error de red al eliminar la cuenta bancaria.');
                });
            });
        });
    })();
</script>
@endsection