@extends('template_pages.session')

@section('page_title', 'Clientes Faturáveis')
@section('page_icon', 'hand-coins')
@section('navbar', 'finance.navbar')

@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="hand-coins" class="me-2"></i>
            Lista de Clientes Faturáveis
        </h4>
        <div class="d-flex gap-2">
            <a href="{{ route('finance.billing.client.addview') }}" class="btn btn-primary">
                <i data-lucide="plus" class="me-1"></i>
                Novo Cliente Faturável
            </a>
        </div>
    </div>
    
    <div class="card-body">
        <table id="billable-clients-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%;">Cliente Faturável</th>
                    <th style="width: 15%;">CPF/CNPJ</th>
                    <th style="width: 25%;">Cliente Institucional</th>
                    <th style="width: 12%;">Status</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('#billable-clients-ajax-table', {
        ajax: {
            url: '{{ route('finance.billing.client.list.ajax') }}',
            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: 'legal_name' },
            { data: 'document_number' },
            { data: 'core_client_name' },
            { data: 'status' },
            { 
                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(5).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
    $('#billable-clients-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();
            
            // Obter o número total de colunas da tabela
            var totalColumns = $('#billable-clients-ajax-table thead tr th').length;
            
            // Criar estrutura de informações detalhadas do cliente
            var expandedContent = createClientDetailedInfoBox({
                clientId: data.id,
                legalName: data.legal_name || 'Não informado',
                documentNumber: data.document_number || 'Não informado',
                coreClientName: data.core_client_name || 'Não informado',
                email: data.email || 'Não informado',
                phone: data.phone || 'Não informado',
                address: data.address || 'Não informado',
                charges: data.charges || [],
                observation: data.observation || 'Nenhuma observação disponível',
                viewUrl: '{{ route('finance.billing.client.detailsview', ['id' => '__ID__']) }}'.replace('__ID__', data.id),
                editUrl: '{{ route('finance.billing.client.editview', ['id' => '__ID__']) }}'.replace('__ID__', data.id)
            });
            
            row.child('<div class="accordion-row" style="padding: 0; width: 100%;">' + expandedContent + '</div>').show();
            tr.addClass('shown');
        }

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

    // Função para criar caixa de informações detalhadas do cliente
    function createClientDetailedInfoBox(options) {
        var defaults = {
            clientId: '',
            legalName: 'Não informado',
            documentNumber: 'Não informado',
            coreClientName: 'Não informado',
            email: 'Não informado',
            phone: 'Não informado',
            address: 'Não informado',
            charges: [],
            observation: 'Nenhuma observação disponível',
            viewUrl: '#',
            editUrl: '#'
        };
        
        var settings = Object.assign({}, defaults, options);
        
        return `
            <div class="client-detailed-info-box" style="width: 100%; margin: 0; padding: 0;">
                <div class="card border-0 mb-0" style="width: 100%;">
                    <div class="card-header bg-light-subtle border-bottom">
                        <div class="d-flex justify-content-between align-items-center" style="width: 100%;">
                            <h6 class="card-title mb-0 fw-semibold">
                                Detalhes do Cliente Faturável
                            </h6>
                        </div>
                    </div>
                    <div class="card-body" style="width: 100%;">
                        <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>
                        <!-- Observações -->
                        <div class="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%;">
                                ${settings.observation}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }
});
</script>
@endpush