@extends('template_pages.session')

@section('page_title', 'Configurações - Agência e Conta Bancária / Pix')
@section('page_icon', 'landmark')
@section('navbar', 'finance.navbar')

@push('styles')
<link href="{{ asset('assets/inspinia/plugins/datatables/responsive.bootstrap5.min.css') }}" rel="stylesheet" type="text/css">
@endpush

@section('content_page')
<div class="card border-0">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h4 class="card-title mb-0">
            Contas Bancárias Registradas
        </h4>
        <div class="d-flex gap-2">
            <a href="{{ route('finance.settings.bank_account.create') }}" class="btn btn-primary">
                <i data-lucide="plus" class="me-1"></i>
                Nova Agência / Conta / Pix
            </a>
        </div>
    </div>

    <div class="card-body">
        <table id="bank-accounts-table" class="table table-striped table-hover dt-responsive align-middle mb-0">
            <thead class="bg-light align-middle bg-opacity-25 thead-sm">
                <tr class="text-uppercase fs-xxs">
                    <th data-table-sort>ID</th>
                    <th data-table-sort>Apelido da Conta</th>
                    <th data-table-sort style="width: 10%">Tipo</th>
                    <th data-table-sort>Beneficiário</th>
                    <th data-table-sort style="width: 10%">CPF/CNPJ</th>
                    <th data-table-sort>Conta Bancária</th>
                    <th data-table-sort>PIX</th>
                    <th data-table-sort>Tipo Pagamento</th>
                    <th data-table-sort>Categoria</th>
                    <th data-table-sort>Valor</th>
                    <th data-table-sort>Preferência</th>
                    <th class="text-center checkbox-select-datatable" style="width: 1%;">Ações</th>
                </tr>
            </thead>
            <tbody>
                <!-- Carregado via AJAX -->
            </tbody>
        </table>
    </div>

    <div class="card-footer border-0">
        <div class="d-flex justify-content-between align-items-center">
            <div id="table-info" class="text-muted"></div>
            <div id="table-pagination"></div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="{{ asset('assets/inspinia/plugins/datatables/dataTables.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/datatables/dataTables.bootstrap5.min.js') }}"></script>
<script>
$(document).ready(function () {
    var selectedAccountId = null;

    var table = $('#bank-accounts-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('finance.settings.bank_account.list.ajax') }}",
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            dataSrc: 'data'
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'account_name', name: 'account_name' },
            { data: 'register_type', name: 'register_type' },
            { data: 'name', name: 'name' },
            { data: 'cpf_cnpj', name: 'cpf_cnpj' },
            { data: 'accounts_html', name: 'accounts_html' },
            { data: 'pix_html', name: 'pix_html' },
            { data: 'payment_type', name: 'payment_type' },
            { data: 'category', name: 'category' },
            { data: 'value', name: 'value' },
            { data: 'preference', name: 'preference' },
            {
                data: 'id',
                name: 'actions',
                orderable: false,
                searchable: false,
                render: function (data, type, row) {
                    return `
                        <div class="action-buttons d-flex gap-1 justify-content-center">
                            <button type="button" class="btn btn-sm btn-light btn-icon rounded-circle btn-edit" data-id="${row.id}">
                                <i class="ti ti-edit"></i>
                            </button>
                            <button type="button" class="btn btn-sm btn-danger btn-icon rounded-circle btn-delete-account" data-id="${row.id}">
                                <i class="ti ti-trash"></i>
                            </button>
                        </div>
                    `;
                }
            }
        ],
        order: [[0, 'desc']],
        pageLength: 50,
        lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
        language: {
            url: '{{ asset('assets/inspinia/plugins/datatables/pt_br.json') }}',
            paginate: {
                first: '<i class="ti ti-chevrons-left"></i>',
                previous: '<i class="ti ti-chevron-left"></i>',
                next: '<i class="ti ti-chevron-right"></i>',
                last: '<i class="ti ti-chevrons-right"></i>'
            },
            processing: '',
        },
        drawCallback: function(settings) {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }
    });

    $('#bank-accounts-table').on('click', '.btn-edit', function () {
        var id = $(this).data('id');
        window.location.href = "{{ route('finance.settings.bank_account.edit', ['id' => '__ID__']) }}".replace('__ID__', id);
    });

    $('#bank-accounts-table').on('click', '.btn-delete-account', function () {
        selectedAccountId = $(this).data('id');
        Swal.fire({
            title: 'Remover Beneficiário',
            text: 'Tem certeza que deseja excluir este beneficiário e suas contas?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Excluir',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('finance.settings.bank_account.delete', ['id' => '__ID__']) }}".replace('__ID__', selectedAccountId),
                    type: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: { id: selectedAccountId },
                    success: function (response) {
                        Swal.fire({
                            title: 'Excluído!',
                            text: 'Beneficiário removido com sucesso.',
                            icon: 'success',
                            timer: 1500,
                            showConfirmButton: false
                        });
                        selectedAccountId = null;
                        table.ajax.reload(null, false);
                    },
                    error: function (xhr) {
                        var errorMessage = 'Erro ao excluir a conta bancária.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            title: 'Erro!',
                            text: errorMessage,
                            icon: 'error',
                            confirmButtonText: 'OK'
                        });
                        selectedAccountId = null;
                    }
                });
            }
        });
    });

});
</script>
@endpush