@extends('template_pages.session')

@section('page_title', 'Projetos')
@section('page_icon', 'folder-kanban')

@php
    $module = request()->segment(1);
@endphp

@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>

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

        <!-- Filtro Notify -->
        <div class="app-search">
            <select id="filter-notify" class="form-select form-control my-1 my-md-0">
                <option value="">Notificação</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-kanban" class="me-2"></i>
            Lista de Projetos
        </h4>
        <div class="d-flex gap-2">
            <a href="{{ route('projects.addview', ['module' => $module]) }}" class="btn btn-primary">
                <i data-lucide="plus" class="me-1"></i>
                Novo Projeto
            </a>
        </div>
    </div>
    
    <div class="card-body">
        <table id="projects-ajax-table" class="table table-striped table-hover align-middle mb-0">
            <thead class="bg-light align-middle bg-opacity-25 thead-sm">
                <tr class="text-uppercase fs-xxs">
                    <th style="width: 1%;"></th>
                    <th style="width: 5%;">ID</th>
                    <th style="width: 25%;">Projeto</th>
                    <th style="width: 25%;">Cliente Faturável</th>
                    <th style="width: 12%;">Status</th>
                    <th style="width: 12%;">Sinc Monday</th>
                    <th style="width: 12%;">Notificação Email</th>
                    <th style="width: 8%;">Ações</th>
                </tr>
            </thead>
            <tbody>
                <!-- Os dados serão carregados 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 src="{{ asset('assets/scripts/ui-components.js') }}"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Inicializar a DataTable com AJAX
    const table = new DataTable('#projects-ajax-table', {
        ajax: {
            url: '{{ route('projects.list.ajax', ['module' => $module]) }}',
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            dataSrc: 'data'
        },
        processing: true,
        serverSide: false,
        responsive: true,
        pageLength: 10,
        lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
        order: [[1, 'desc']],
        columns: [
            { 
                data: 'expand',
                className: 'details-control align-middle text-center',
                orderable: false,
                searchable: false
            },
            { data: 'id' },
            { data: 'name' },
            { data: 'finance_client_name' },
            { data: 'status' },
            { data: 'monday_sync' },
            { data: 'email_notification' },
            { 
                data: 'actions',
                orderable: false,
                searchable: false
            }
        ],
        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(4).search(this.value).draw();
    });

    // Filtro Monday
    $('#filter-monday').on('change', function() {
        table.column(5).search(this.value).draw();
    });

    // Filtro Notificação
    $('#filter-notify').on('change', function() {
        table.column(6).search(this.value).draw();
    });

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

    // Funcionalidade de expandir/recolher linhas
    $('#projects-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();
            
            // Buscar dados detalhados do projeto via AJAX
            $.ajax({
                url: '{{ route('projects.details.ajax', ['module' => $module, 'id' => '__ID__']) }}'.replace('__ID__', data.id),
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        var projectData = response.data;
                        
                        // Criar estrutura de informações detalhadas do projeto
                        var expandedContent = createProjectDetailedInfoBox({
                            projectId: projectData.id,
                            projectType: projectData.project_type || 'Não informado',
                            billingModel: projectData.billing_model || 'Não informado',
                            value: projectData.value || 'R$ 0,00',
                            invoiceDescription: projectData.invoice_description || 'Não informado',
                            charges: projectData.charges || [],
                            contracts: projectData.contracts || [],
                            observation: projectData.observation || 'Nenhuma observação disponível',
                            viewUrl: '{{ route('projects.detailsview', ['module' => $module, 'id' => '__ID__']) }}'.replace('__ID__', projectData.id),
                            editUrl: '{{ route('projects.editview', ['module' => $module, 'id' => '__ID__']) }}'.replace('__ID__', projectData.id)
                        });
                        
                        row.child('<div class="accordion-row" style="padding: 0; width: 100%;">' + expandedContent + '</div>').show();
                        tr.addClass('shown');
                        $btn.find('i').attr('data-lucide', 'minus');
                        
                        // Inicializar DataTable na tabela de cobranças (10 últimas primeiro)
                        var chargesTableSelector = '#charges-table-' + projectData.id;
                        if ($.fn.dataTable && $.fn.dataTable.isDataTable(chargesTableSelector)) {
                            $(chargesTableSelector).DataTable().destroy();
                        }
                        $(chargesTableSelector).DataTable({
                            order: [[0, 'desc']], // Vencimento desc
                            columnDefs: [
                                { targets: [4], visible: false },
                                { targets: [0], orderData: [4] }
                            ],
                            pageLength: 10,
                            lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
                            responsive: true,
                            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: ''
                            }
                        });
                        
                        // Re-render dos ícones do Lucide
                        lucide.createIcons();
                    } else {
                        alert('Erro ao carregar dados do projeto: ' + response.message);
                    }
                },
                error: function(xhr, status, error) {
                    alert('Erro ao carregar dados do projeto. Tente novamente.');
                }
            });
        }

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

    // Função para criar caixa de informações detalhadas do projeto
    function createProjectDetailedInfoBox(options) {
        var defaults = {
            projectId: '',
            projectType: 'Não informado',
            billingModel: 'Não informado',
            value: 'R$ 0,00',
            invoiceDescription: 'Não informado',
            charges: [],
            contracts: [],
            observation: 'Nenhuma observação disponível',
            viewUrl: '#',
            editUrl: '#'
        };
        
        var settings = Object.assign({}, defaults, options);
        
        // Gerar lista de contratos
        var projectInfoHtml = '';
        var projectObsHtml = '';
        if (settings.contracts && settings.contracts.length > 0) {
            settings.contracts.forEach(function(contract, index) {
                projectInfoHtml += `
                    <div class="contract-item p-3 border rounded bg-light">
                        <div class="row"> 
                            <!-- CORE MODULE -->
                            <div class="col-12">
                                <strong><i class="fa fa-money text-success"></i> Tipo de projeto:</strong>
                                <span>${settings.projectType}</span>
                            </div>
                            <div class="col-12">
                                <strong><i class="fa fa-clock-o text-primary"></i> SLA:</strong> ${contract.sla || 'N/A'}
                            </div>
                            <div class="col-12">
                                <strong><i class="fa fa-calendar text-primary"></i> Posts/mês:</strong> ${contract.post_per_month || 'N/A'}
                            </div>
                        </div>
                    </div>
                `;
                
                // Verificar se há observações no contrato
                if (contract.notes) {
                    projectObsHtml += `
                        <!-- Observações -->
                        <div class="col-md-12 mb-3">
                            <h6 class="fw-semibold mb-2 text-primary">
                                <i data-lucide="message-square" class="me-2"></i>Observações
                            </h6>
                            <div class="bg-light p-3 rounded" style="width: 100%;">
                                ${contract.notes}
                            </div>
                        </div>
                    `;
                }
                        
            });
        } else {
            projectInfoHtml = '<div class="text-muted text-center py-3">Nenhum contrato encontrado</div>';
        }
        // Gerar lista de cobranças
        var projectFinanceHtml = '';
        if (settings.contracts && settings.contracts.length > 0) {
            settings.contracts.forEach(function(contract, index) {
                projectFinanceHtml += `
                    <div class="contract-item p-3 border rounded bg-light">
                        <div class="row">
                            <!-- FINANCE MODULE -->
                            <div class="col-12">
                                <strong><i class="fa fa-credit-card text-success"></i> Modelo de faturamento:</strong>
                                <span>${settings.billingModel}</span>
                            </div>
                            <div class="col-12">
                                <strong><i class="fa fa-dollar text-success"></i> Valor:</strong>
                                <span>${settings.value}</span>
                            </div>
                            <div class="col-12">
                                <strong><i class="fa fa-file-text text-success"></i> Descrição da NF:</strong>
                                <span>${settings.invoiceDescription}</span>
                            </div>
                        </div>
                    </div>
                `;
            });
        } else {
            projectFinanceHtml = '<div class="text-muted text-center py-3">Nenhuma informação encontrada</div>';
        }
        
        // Gerar lista de cobranças
        var chargesHtml = '';
        if (settings.charges && settings.charges.length > 0) {
            chargesHtml += `
            <div class="card-body">
                <table id="charges-table-${settings.projectId}" class="table table-striped table-hover 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>Vencimento</th>
                            <th data-table-sort>Descrição</th>
                            <th data-table-sort>Status</th>
                            <th data-table-sort>Valor</th>
                            <th class="d-none"></th>
                        </tr>
                    </thead>
                    <tbody>`;
        settings.charges.forEach(function(charge) {
            chargesHtml += `
                        <tr>
                            <td data-order="${charge.timestamp_due_date || ''}">${charge.due_date || 'N/A'}</td>
                            <td>${charge.description_html || (charge.view_url ? `<a href="${charge.view_url}">${charge.description || '-'}</a>` : (charge.description || '-'))}</td>
                            <td>${charge.status_html || '-'}</td>
                            <td>${charge.amount || 'R$ 0,00'}</td>
                            <td>${charge.timestamp_due_date || ''}</td>
                        </tr>`;
        });
        chargesHtml += `
                    </tbody>
                </table>
            </div>`;
        } else {
            chargesHtml = '<div class="text-muted text-center py-3">Nenhuma cobrança encontrada</div>';
        }
        
        return `
            <div class="project-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="folder-kanban" class="me-2"></i>
                                Detalhes do Projeto
                            </h6>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="d-block d-md-none gap-2 mb-3">
                            <a href="${settings.viewUrl}" 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 do Projeto -->
                            <div class="col-md-6 d-flex mb-3">
                                <div class="w-100">
                                    <h6 class="fw-semibold mb-3 text-primary">
                                        <i data-lucide="aperture" class="me-2"></i>Informações do Projeto
                                    </h6>
                                    <div class="contracts-container h-100">
                                        ${projectInfoHtml}
                                    </div>
                                </div>
                            </div>

                            <!-- Informações do Financeiro -->
                            <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 do Financeiro
                                    </h6>
                                    <div class="contracts-container h-100">
                                        ${projectFinanceHtml}
                                    </div>
                                </div>
                            </div>

                            <!-- Observação -->
                            ${projectObsHtml}

                            <!-- Contratos e Cobranças -->
                            <div class="col-md-12">                                
                                <!-- Cobranças Geradas -->
                                <div class="mb-3">
                                    <h6 class="fw-semibold mb-3 text-primary">
                                        <i data-lucide="receipt" class="me-2"></i>Cobrança(s) Gerada(s)
                                    </h6>
                                    <div class="charges-container">
                                        ${chargesHtml}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
});
</script>
@endpush