@extends('template_pages.session')

@section('page_title', 'Finance')
@section('page_icon', 'circle-dollar-sign')
@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-body pb-0">
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-0">
                <a href="{{ route('finance.reports.charges', ['filter' => 'aguardando']) }}" class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-1">{{ $chargesPending }}</h3>
                            <p class="mb-0 text-muted">Aguardando pagamento</p>
                        </div>
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title bg-dark-subtle text-dark rounded-circle fs-32">
                                <i data-lucide="calendar"></i>
                            </span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-0">
                <a href="{{ route('finance.reports.charges', ['filter' => 'inadimplentes']) }}" class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-1">{{ $chargesOverdue }}</h3>
                            <p class="mb-0 text-muted">Inadimplentes</p>
                        </div>
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title bg-danger-subtle text-danger rounded-circle fs-32">
                                <i data-lucide="badge-alert"></i>
                            </span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card mb-0">
                <a href="{{ route('finance.recurrence.index', ['filter' => 'active']) }}" class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h3 class="mb-1">{{ $activeRecurrences }}</h3>
                            <p class="mb-0 text-muted">Recorrências Ativas</p>
                        </div>
                        <div class="avatar fs-60 avatar-img-size flex-shrink-0">
                            <span class="avatar-title bg-success-subtle text-success rounded-circle fs-32">
                                <i data-lucide="dollar-sign"></i>
                            </span>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

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

<div class="card-body">
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-0">
                <div class="card-header d-flex border-dashed justify-content-between align-items-center">
                    <div class="d-flex align-items-center gap-1">
                        <i data-lucide="file-badge-2" class="fs-4"></i>
                        <h4 class="mb-0">Vencimento Certificado NFs</h4>
                    </div>
                </div>
                <div class="card-body">
                    @if ($daysUntilExpiry > 60)
                        <div class="alert alert-success fade show mb-0" role="alert">
                            <strong>Certificado Válido!</strong>
                        </div>
                    @elseif  ($daysUntilExpiry <= 60 && $daysUntilExpiry > 40)
                        <div class="alert alert-warning fade show mb-0" role="alert">
                            <strong>Vencimento próximo!</strong> <p>Faltam {{ $daysUntilExpiry }} dias para o vencimento ({{ $certificateDate->format('d/m/Y') }})</p>
                        </div>
                    @elseif ($daysUntilExpiry <= 40 && $daysUntilExpiry >= 0)
                        <div class="alert alert-danger fade show mb-0" role="alert">
                            <strong>Vencimento iminente!</strong>  <p>Faltam {{ $daysUntilExpiry }} dias para o vencimento ({{ $certificateDate->format('d/m/Y') }})</p>
                        </div>
                    @elseif ($daysUntilExpiry < 0)
                        <div class="alert alert-danger fade show mb-0" role="alert">
                            <strong>Certificado Vencido!</strong>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<div class="border-top border-dashed my-3"></div>
<div class="card-body pt-0 pb-0" style="flex: none;">
    <div class="d-flex align-items-center gap-1">
        <i data-lucide="triangle-alert" class="fs-4"></i>
        <h4 class="mb-0">Alertas</h4>
    </div>
</div>

<div class="card-body">
    <table id="alerts-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>Tipo</th>
                <th data-table-sort>Título</th>
                <th data-table-sort>Data</th>
                <th data-table-sort>Conteúdo</th>
                <th data-table-sort>Ações</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <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')
<script src="{{ asset('assets/inspinia/plugins/datatables/dataTables.min.js') }}"></script>
<script src="{{ asset('assets/inspinia/plugins/datatables/dataTables.bootstrap5.min.js') }}"></script>
<!-- Custom table -->
<script src="{{ asset('assets/inspinia/js/pages/custom-table.js') }}"></script>
<script>
$(document).ready(function () {
    var table = $('#alerts-ajax-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('finance.alerts.list.ajax') }}",
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            dataSrc: 'data'
        },
        columns: [
            { data: 'type', name: 'type' },
            { data: 'title', name: 'title' },
            { data: 'date', name: 'date' },
            { data: 'content', name: 'content' },
            { 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() {
            if (typeof lucide !== 'undefined') {
                lucide.createIcons();
            }
        }
    });

    // Pesquisa 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) || 10;
        table.page.len(val).draw();
    });

    // Marcar alerta como resolvido
    $('#alerts-ajax-table tbody').on('click', '.solve-alert', function (e) {
        e.preventDefault();
        var alertId = $(this).data('id');
        var url = "{{ route('finance.alerts.solve.ajax', ['id' => ':id']) }}".replace(':id', alertId);

        $.ajax({
            url: url,
            type: 'POST',
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            success: function (resp) {
                var ok = (resp && (resp.success === true || resp.status === 'success'));
                Swal.fire({
                    icon: ok ? 'success' : 'error',
                    title: ok ? 'Sucesso' : 'Falha',
                    text: ok ? (resp.message || 'Alerta marcado como resolvido.') : (resp.message || 'Não foi possível marcar como resolvido.'),
                    buttonsStyling: false,
                    confirmButtonText: 'Ok',
                    customClass: { confirmButton: ok ? 'btn btn-primary' : 'btn btn-danger' }
                }).then(function() {
                    if (ok) {
                        $('#alerts-ajax-table').DataTable().ajax.reload(null, false);
                    }
                });
            },
            error: function () {
                Swal.fire({
                    icon: 'error',
                    title: 'Erro',
                    text: 'Erro ao marcar como resolvido.',
                    buttonsStyling: false,
                    confirmButtonText: 'Ok',
                    customClass: { confirmButton: 'btn btn-danger' }
                });
            }
        });
    });
});
</script>
@endpush