@extends('template_pages.session')

@section('page_title', 'Recorrências')
@section('page_icon', 'calendar-check')
@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 id="filter-status" class="form-select form-control my-1 my-md-0">
                <option value="">Todos os 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="calendar-check" class="me-2"></i>
            Lista de Recorrências
        </h4>
        <div class="d-flex gap-2">
            <a href="{{ route('finance.recurrence.add') }}" class="btn btn-primary">
                <i data-lucide="plus" class="me-1"></i>
                Nova Recorrência
            </a>
        </div>
    </div>
    
    <div class="card-body">
        <table id="recurrence-ajax-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 class="text-center" style="width: 1%;"></th>
                    <th data-table-sort>ID</th>
                    <th data-table-sort>Projeto</th>
                    <th data-table-sort>Tipo</th>
                    <th data-table-sort>Dia de Cobrança</th>
                    <th data-table-sort>Dia de Vencimento</th>
                    <th data-table-sort data-column="status">Status</th>
                    <th class="text-center" style="width: 1%;">Ações</th>
                </tr>
            </thead>
            <tbody>
                <!-- Data will be loaded 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')
<!-- 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 = $('#recurrence-ajax-table').DataTable({
        processing: true,
        serverSide: false,
        ajax: {
            url: "{{ route('finance.recurrence.list.ajax') }}",
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            dataSrc: 'data'
        },
        columns: [
            { data: 'expand', name: 'expand', orderable: false, searchable: false, className: 'details-control align-middle text-center' },
            { data: 'id', name: 'id' },
            { data: 'project_name', name: 'project_name' },
            { data: 'client_type', name: 'client_type' },
            { data: 'issue_day', name: 'issue_day' },
            { data: 'due_date', name: 'due_date' },
            { data: 'status', name: 'status' },
            { data: 'actions', name: 'actions', orderable: false, searchable: false, className: 'text-center' }
        ],
        order: [[1, '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();
            }
        }
    });

    // Filtro de status
    $('#filter-status').on('change', function() {
        table.column(6).search(this.value).draw();
    });

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

    // Funcionalidade de expandir/recolher linhas
    $('#recurrence-ajax-table tbody').on('click', '.toggle-row', function (e) {
        e.preventDefault();

        var $btn = $(this);
        var tr = $btn.closest('tr');
        var row = table.row(tr);

        if (row.child.isShown()) {
            // Fechar a linha expandida
            row.child.hide();
            tr.removeClass('shown');
            $btn.find('i').attr('data-lucide', 'plus');
        } else {
            // Fechar todas as outras linhas expandidas
            table.rows().every(function() {
                if (this.child.isShown()) {
                    this.child.hide();
                    $(this.node()).removeClass('shown');
                }
            });
            $('.toggle-row i').attr('data-lucide', 'plus');

            // Abrir a linha atual
            var data = row.data();
            var recurrenceId = $btn.data('id');
            
            // Buscar dados detalhados da recorrência via AJAX
            $.ajax({
                url: "{{ route('finance.recurrence.details.ajax') }}",
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: {
                    recurrence_id: recurrenceId
                },
                success: function(response) {
                    // Criar estrutura de informações detalhadas da recorrência
                    var expandedContent = createRecurrenceDetailedInfoBox({
                        recurrenceId: recurrenceId,
                        projectName: data.project_name || 'Não informado',
                        clientType: data.client_type || 'Não informado',
                        value: response.value || 'R$ 0,00',
                        cycle: response.cycle || 'Indefinido',
                        pastCycle: response.past_cycle || '0',
                        stage: response.stage || 'Não informado',
                        issueDay: data.issue_day || 'N/A',
                        dueDate: data.due_date || 'N/A',
                        status: response.active ? 'Ativo' : 'Inativo',
                        editUrl: "{{ route('finance.recurrence.edit', ['id' => '__ID__']) }}".replace('__ID__', recurrenceId),
                        detailsUrl: "{{ route('finance.recurrence.details', ['id' => '__ID__']) }}".replace('__ID__', recurrenceId)
                    });
                    
                    row.child('<div class="accordion-row" style="padding: 0; width: 100%;">' + expandedContent + '</div>').show();
                    tr.addClass('shown');
                    $btn.find('i').attr('data-lucide', 'minus');
                    
                    // Re-render dos ícones do Lucide
                    lucide.createIcons();
                },
                error: function(xhr, status, error) {
                    var errorContent = createRecurrenceErrorBox();
                    row.child('<div class="accordion-row" style="padding: 0; width: 100%;">' + errorContent + '</div>').show();
                    tr.addClass('shown');
                    $btn.find('i').attr('data-lucide', 'minus');
                    lucide.createIcons();
                }
            });
        }

        // Re-render dos ícones do Lucide
        lucide.createIcons();
    });

    // Função para criar caixa de informações detalhadas da recorrência
    function createRecurrenceDetailedInfoBox(options) {
        var defaults = {
            recurrenceId: '',
            projectName: 'Não informado',
            clientType: 'Não informado',
            value: 'R$ 0,00',
            cycle: 'Indefinido',
            pastCycle: '0',
            stage: 'Não informado',
            issueDay: 'N/A',
            dueDate: 'N/A',
            status: 'Inativo',
            editUrl: '#',
            detailsUrl: '#'
        };
        
        var settings = Object.assign({}, defaults, options);
        
        // Calcular progresso dos ciclos
        var progressPercentage = 0;
        var remainingCycles = 'Indefinido';
        if (settings.cycle !== 'Indefinido' && parseInt(settings.cycle) > 0) {
            progressPercentage = Math.round((parseInt(settings.pastCycle) / parseInt(settings.cycle)) * 100);
            remainingCycles = parseInt(settings.cycle) - parseInt(settings.pastCycle);
        }
        
        // Gerar informações da recorrência
        var recurrenceInfoHtml = `
            <div class="recurrence-item p-3 border rounded bg-light">
                <div class="row">
                    <div class="col-12 mb-2">
                        <strong><i class="fa fa-folder text-primary"></i> Projeto:</strong>
                        <span>${settings.projectName}</span>
                    </div>
                    <div class="col-12 mb-2">
                        <strong><i class="fa fa-user text-info"></i> Tipo de Cliente:</strong>
                        <span>${settings.clientType}</span>
                    </div>
                    <div class="col-12 mb-2">
                        <strong><i class="fa fa-calendar text-warning"></i> Dia de Cobrança:</strong>
                        <span>Dia ${settings.issueDay}</span>
                    </div>
                    <div class="col-12">
                        <strong><i class="fa fa-calendar-check text-success"></i> Dia de Vencimento:</strong>
                        <span>Dia ${settings.dueDate}</span>
                    </div>
                </div>
            </div>
        `;
        
        // Gerar informações financeiras
        var financialInfoHtml = `
            <div class="financial-item p-3 border rounded bg-light">
                <div class="row">
                    <div class="col-12 mb-2">
                        <strong><i class="fa fa-dollar text-success"></i> Valor:</strong>
                        <span class="fw-semibold">${settings.value}</span>
                    </div>
                    <div class="col-12 mb-2">
                        <strong><i class="fa fa-refresh text-primary"></i> Ciclos Totais:</strong>
                        <span>${settings.cycle}</span>
                    </div>
                    <div class="col-12 mb-2">
                        <strong><i class="fa fa-check-circle text-info"></i> Ciclos Executados:</strong>
                        <span>${settings.pastCycle}</span>
                    </div>
                    <div class="col-12">
                        <strong><i class="fa fa-clock-o text-warning"></i> Estágio:</strong>
                        <span>${settings.stage}</span>
                    </div>
                </div>
            </div>
        `;
        
        // Gerar barra de progresso se houver ciclos definidos
        var progressHtml = '';
        if (settings.cycle !== 'Indefinido') {
            progressHtml = `
                <div class="col-md-12 mb-3">
                    <h6 class="fw-semibold mb-3 text-primary">
                        <i data-lucide="trending-up" class="me-2"></i>Progresso dos Ciclos
                    </h6>
                    <div class="progress-container p-3 border rounded bg-light">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <div class="progress mb-2" style="height: 20px;">
                                    <div class="progress-bar bg-primary" role="progressbar" 
                                         style="width: ${progressPercentage}%" 
                                         aria-valuenow="${progressPercentage}" 
                                         aria-valuemin="0" 
                                         aria-valuemax="100">
                                        ${progressPercentage}%
                                    </div>
                                </div>
                                <small class="text-muted">
                                    ${settings.pastCycle} de ${settings.cycle} ciclos executados
                                </small>
                            </div>
                            <div class="col-md-4 text-end">
                                <div class="fw-semibold text-primary">
                                    ${remainingCycles} ciclos restantes
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `;
        }
        
        return `
            <div class="recurrence-detailed-info-box">
                <div class="card border-0 mb-0">
                    <div class="card-header bg-light-subtle border-bottom">
                        <div class="d-flex w-100 justify-content-between align-items-center">
                            <h6 class="card-title mb-0 fw-semibold">
                                <i data-lucide="repeat" class="me-2"></i>
                                Detalhes da Recorrência
                            </h6>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="d-block d-md-none gap-2 mb-3">
                            <a href="${settings.detailsUrl}" class="btn btn-sm btn-outline-secondary">
                                <i data-lucide="eye" class="me-1"></i>
                                Visualizar
                            </a>
                            <a href="${settings.editUrl}" class="btn btn-sm btn-outline-primary">
                                <i class="ti ti-edit fs-lg me-1"></i>
                                Editar
                            </a>
                        </div>
                        <div class="row d-flex">
                            <!-- Informações da Recorrência -->
                            <div class="col-md-6 d-flex mb-3">
                                <div class="w-100">
                                    <h6 class="fw-semibold mb-3 text-primary">
                                        <i data-lucide="info" class="me-2"></i>Informações da Recorrência
                                    </h6>
                                    <div class="recurrence-container h-100">
                                        ${recurrenceInfoHtml}
                                    </div>
                                </div>
                            </div>

                            <!-- Informações Financeiras -->
                            <div class="col-md-6 d-flex mb-3">
                                <div class="w-100">
                                    <h6 class="fw-semibold mb-3 text-primary">
                                        <i data-lucide="circle-dollar-sign" class="me-2"></i>Informações Financeiras
                                    </h6>
                                    <div class="financial-container h-100">
                                        ${financialInfoHtml}
                                    </div>
                                </div>
                            </div>

                            <!-- Progresso dos Ciclos -->
                            ${progressHtml}
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    // Função para criar caixa de erro
    function createRecurrenceErrorBox() {
        return `
            <div class="recurrence-detailed-info-box">
                <div class="card border-0 mb-0">
                    <div class="card-header bg-light-subtle border-bottom">
                        <div class="d-flex w-100 justify-content-between align-items-center">
                            <h6 class="card-title mb-0 fw-semibold">
                                <i data-lucide="alert-triangle" class="me-2"></i>
                                Erro
                            </h6>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="text-center text-danger">
                            <i data-lucide="x-circle" class="me-2"></i>
                            Erro ao carregar detalhes da recorrência. Tente novamente.
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
});
</script>
@endpush