@extends('template_pages.session')

@section('page_title', 'Resumo de Cobranças')
@section('page_icon', 'folder-closed')
@section('navbar', 'finance.navbar')

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

@section('filter')
<div class="card-header border-light flex-row-reverse">
    <div class="d-flex align-items-center gap-2">
        <span class="me-2 fw-semibold">Filtrar por:</span>

        <!-- Filtro Status -->
        <div class="app-search">
            <select data-table-filter="status" class="form-select form-control my-1 my-md-0">
                <option value="">Status</option>
                <option value="Ativo">Ativo</option>
                <option value="Desativado">Desativado</option>
            </select>
            <i data-lucide="box" class="app-search-icon text-muted"></i>
        </div>

        <!-- Botão Limpar Filtros -->
        <button id="clear-filters" class="btn btn-outline-primary">
            <i data-lucide="x" class="me-1"></i>
            Limpar
        </button>
    </div>
</div>
@endsection

@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">
            <i data-lucide="folder-closed" class="me-2"></i>
            Lista de Resumo de Cobranças
        </h4>
        <div class="d-flex gap-2">
            <a href="{{ route('finance.billing_summary.add') }}" class="btn btn-primary">
                <i data-lucide="plus" class="me-1"></i>
                Novo Resumo
            </a>
        </div>
    </div>

    <div class="card-body">
        <table id="billing-summary-ajax-table" class="table table-custom table-centered table-select table-hover w-100 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>Nome do Resumo</th>
                    <th data-table-sort data-column="status">Status</th>
                    <th class="text-center" style="width: 1%;">Ações</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

    <div class="card-footer border-0">
        <div class="d-flex justify-content-between align-items-center">
            <div data-table-pagination-info=""></div>
            <div data-table-pagination></div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- Datatables js -->
<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 () {
    // Initialize DataTable with AJAX
    var table = $('#billing-summary-ajax-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('finance.billing_summary.list.ajax') }}",
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            dataSrc: 'data'
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'status', name: 'status' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-center' }
        ],
        order: [[2, 'desc']],
        pageLength: 10,
        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();
            }
        }
    });

    // Helpers para filtros padrão
    function getColumnIndexByKey(key) {
        var idx = 0;
        $('#billing-summary-ajax-table thead th').each(function(i) {
            if ($(this).data('column') === key) {
                idx = i;
                return false;
            }
        });
        return idx;
    }

    var statusColIndex = getColumnIndexByKey('status');

    // Busca global
    $('[data-table-search]').on('input', function() {
        table.search(this.value).draw();
    });

    // Linhas por página
    $('[data-table-set-rows-per-page]').on('change', function() {
        var val = parseInt(this.value, 10);
        table.page.len(val).draw();
    });

    // Filtro de status
    $('[data-table-filter="status"]').on('change', function() {
        var val = this.value;
        table.column(statusColIndex).search(val || '').draw();
    });
});
// Filtro de status
$('#filter-status').on('change', function() {
    table.column(5).search(this.value).draw();
});

// Limpar todos os filtros
$('#clear-filters').on('click', function() {
    $('#filter-status').val('');
    table.search('').columns().search('').draw();
});
</script>
@endpush