@extends('template_pages.session')

@section('page_title', 'Incorp - Cobranças')
@section('page_icon', 'building')
@section('navbar', 'finance.navbar')

@push('styles')
<!-- Daterangepicker Plugin CSS -->
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/daterangepicker/daterangepicker.css') }}" type="text/css">
<!-- Select Plugin CSS -->
<link rel="stylesheet" href="{{ asset('assets/inspinia/plugins/select2/select2.min.css') }}">
@endpush

@section('content_page')
<div class="card-body pb-0" style="flex: none;">
    <div class="d-flex align-items-center gap-1">
        <i data-lucide="funnel" class="fs-4"></i>
        <h4 class="mb-0">Filtros</h4>
    </div>
    <div class="row mt-3">
        <div class="col-md-4">
            <label class="form-label">Data de Emissão</label>
            <div class="input-group date_range_ptbr" data-toggle="date-range-picker">
                <span class="input-group-text"><i data-lucide="calendar"></i></span>
                <input type="text" class="form-control" name="issue_date" id="issue_date" placeholder="DD/MM/YYYY - DD/MM/YYYY" autocomplete="off">
            </div>
        </div>
        <div class="col-md-4">
            <label class="form-label">Data de Vencimento</label>
            <div class="input-group date_range_ptbr" data-toggle="date-range-picker">
                <span class="input-group-text"><i data-lucide="calendar"></i></span>
                <input type="text" class="form-control" name="due_date" id="due_date" placeholder="DD/MM/YYYY - DD/MM/YYYY" autocomplete="off">
            </div>
        </div>
        <div class="col-md-4">
            <label class="form-label">Projeto</label>
            <select class="select2 form-control select2-multiple" data-toggle="select2" multiple="multiple" data-placeholder="Selecionar Projeto" id="project" name="project">
                @foreach($projects as $project)
                    <option value="{{ $project->id }}" data-monday-id="{{ $project->monday_id }}">{{ $project->name }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="row mt-3">
        <div class="d-flex gap-2 col-12 col-lg-auto">
            <a href="javascript:void(0);" class="btn btn-light apply_filters">Aplicar Filtros</a>
            <a href="javascript:void(0);" class="btn btn-dark remove_filters">Limpar Filtros</a>
        </div>
    </div>
</div>

<div class="border-top border-dashed my-3"></div>

<div class="card-body pt-0" style="flex: none;">
    <div class="d-flex align-items-center gap-1">
        <i data-lucide="chart-column-big" class="fs-4"></i>
        <h4 class="mb-0">Resumo</h4>
    </div>
</div>
<div class="card-body pt-0 pb-0" style="flex: none;">
    <div class="row">
        <div class="col">
            <div class="card bg-light bg-opacity-10 mb-0">
                <div class="card-header d-flex border-dashed align-items-center">
                    <h5 class="card-title">Total</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-dark bg-opacity-90 rounded-circle fs-32">
                                <i data-lucide="coins"></i>
                            </span>
                        </div>
                        <div class="text-end">
                            <h3 class="mb-2 fw-normal" id="summary-total-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-total-count">0 cobranças</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card bg-success bg-opacity-10 mb-0">
                <div class="card-header d-flex border-dashed align-items-center">
                    <h5 class="card-title">Pago</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-success bg-opacity-90 rounded-circle fs-32">
                                <i data-lucide="badge-check"></i>
                            </span>
                        </div>
                        <div class="text-end">
                            <h3 class="mb-2 fw-normal" id="summary-paid-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-paid-count">0 cobranças pagas</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card bg-warning bg-opacity-10 mb-0">
                <div class="card-header d-flex border-dashed align-items-center">
                    <h5 class="card-title">Pendente</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-warning bg-opacity-90 rounded-circle fs-32">
                                <i data-lucide="badge-alert"></i>
                            </span>
                        </div>
                        <div class="text-end">
                            <h3 class="mb-2 fw-normal" id="summary-pending-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-pending-count">0 cobranças pendentes</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card bg-danger bg-opacity-10 mb-0">
                <div class="card-header d-flex border-dashed align-items-center">
                    <h5 class="card-title">Vencido</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title text-bg-danger bg-opacity-90 rounded-circle fs-32">
                                <i data-lucide="badge-minus"></i>
                            </span>
                        </div>
                        <div class="text-end">
                            <h3 class="mb-2 fw-normal" id="summary-overdue-value">R$ 0,00</h3>
                            <p class="mb-0 text-muted" id="summary-overdue-count">0 cobranças vencidas</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>        
    </div>
</div>

<div class="border-top border-dashed my-3"></div>
<div class="card-body pt-0" style="flex: none;">
    <div class="d-flex align-items-center gap-1">
        <i data-lucide="chart-no-axes-combined" class="fs-4"></i>
        <h4 class="mb-0">Resultados</h4>
    </div>
</div>
<div class="card-body">
    <table id="campaign-charges-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>Status</th>
                <th data-table-sort>Projeto</th>
                <th data-table-sort>Emissão</th>
                <th data-table-sort>Vencimento</th>
                <th data-table-sort>Valor</th>   
                <th data-table-sort>Descrição</th>         
                <th data-table-sort>Cliente Faturável</th>
                <th></th>
                <th></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>
@endsection

@push('scripts')
<!-- Daterangepicker Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/moment/moment.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/daterangepicker/daterangepicker.js') }}"></script>
<script src="{{ asset('assets/scripts/date_picker_pt_br.js') }}"></script>
<!-- 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>
<!-- Select2 Plugin Js -->
<script src="{{ asset('assets/inspinia/plugins/select2/select2.min.js') }}"></script>
<!--Select 2 Demo js-->
<script src="{{ asset('assets/inspinia/js/pages/form-select2.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const applyBtn = document.querySelector('.apply_filters');
    const clearBtn = document.querySelector('.remove_filters');
    const issueInput = document.getElementById('issue_date');
    const dueInput = document.getElementById('due_date');
    const projectSelect = document.getElementById('project');

    function getSelectedProjects() {
        return $('#project').val() || [];
    }

    function parseRange(value) {
        if (!value) return { start: null, end: null };
        const v = String(value).trim();
        if (!v) return { start: null, end: null };
        const parts = v.split(' - ').map(s => s.trim());
        if (parts.length === 2) {
            return { start: parts[0], end: parts[1] };
        } else {
            return { start: v, end: v };
        }
    }

    function renderSummary(s) {
        if (!s) return;
        document.getElementById('summary-total-value').textContent = s.total_value ?? 'R$ 0,00';
        document.getElementById('summary-total-count').textContent = `${s.total_count ?? 0} cobranças`;
        document.getElementById('summary-paid-value').textContent = s.paid_value ?? 'R$ 0,00';
        document.getElementById('summary-paid-count').textContent = `${s.paid_count ?? 0} cobranças pagas`;
        document.getElementById('summary-pending-value').textContent = s.pending_value ?? 'R$ 0,00';
        document.getElementById('summary-pending-count').textContent = `${s.pending_count ?? 0} cobranças pendentes`;
        document.getElementById('summary-overdue-value').textContent = s.overdue_value ?? 'R$ 0,00';
        document.getElementById('summary-overdue-count').textContent = `${s.overdue_count ?? 0} cobranças vencidas`;
    }

    var table = $('#campaign-charges-ajax-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('finance.incorp.payments.list.ajax') }}",
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            data: function (d) {
                const issueRange = parseRange(issueInput.value);
                const dueRange = parseRange(dueInput.value);
                d.issue_start = issueRange.start;
                d.issue_end = issueRange.end;
                d.due_start = dueRange.start;
                d.due_end = dueRange.end;
                d.projects = getSelectedProjects();
            },
            dataSrc: 'data'
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'status', name: 'status' },
            { data: 'project', name: 'project' },
            { data: 'issue_date', name: 'issue_date' },
            { data: 'due_date', name: 'due_date' },
            { data: 'value', name: 'value' },
            { data: 'description', name: 'description' },
            { data: 'client', name: 'client' },
            { data: 'timestamp_issue_day' },
            { data: 'timestamp_due_date' }
        ],
        order: [[0, '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: '',
        },
        columnDefs: [
            { targets: [8, 9], visible: false, searchable: false },
            { targets: 3, orderData: [8] },
            { targets: 4, orderData: [9] }
        ],
        drawCallback: function(settings) {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }
    });

    $('#campaign-charges-ajax-table').on('xhr.dt', function (e, settings, json) {
        renderSummary(json?.summary || {});
    });

    applyBtn.addEventListener('click', function () {
        table.ajax.reload();
    });

    clearBtn.addEventListener('click', function () {
        issueInput.value = '';
        dueInput.value = '';

        // Limpa campo de projeto
        $('#project option').prop('selected', false);
        $('#project').trigger('change');

        table.ajax.reload();
    });
});
</script>
@endpush