@extends('layouts.app')

@section('title', 'Contas a Receber por Evento')

@push('styles-custom')
    <!-- Estilos personalizados, se necessário -->
    <link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<div class="content pt-3">
    <nav class="mb-3" aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item active" aria-current="page">Contas a Receber por Evento</li>
        </ol>
    </nav>

    <div class="mb-9">
        <!-- Título -->
        <div class="row g-2 mb-4">
            <div class="col-auto">
                <h2 class="mb-0">Contas a Receber por Evento</h2>
            </div>
        </div>

        <!-- Filtros -->
        <form method="GET" action="{{ route('contas-a-receber.por-evento') }}" id="filterForm" class="d-flex align-items-center flex-wrap mb-4">
            <!-- Status -->
            <div class="me-2 mb-2">
                <select name="status" class="form-select form-select-sm" onchange="document.getElementById('filterForm').submit()">
                    <option value="all" {{ request('status', 'all') == 'all' ? 'selected' : '' }}>Todos</option>
                    <option value="recebido" {{ request('status') == 'recebido' ? 'selected' : '' }}>Recebido</option>
                    <option value="pendente" {{ request('status') == 'pendente' ? 'selected' : '' }}>Pendente</option>
                    <option value="parcial" {{ request('status') == 'parcial' ? 'selected' : '' }}>Parcial</option>
                </select>
            </div>

            <!-- Registros por Página -->
            <div class="me-2 mb-2">
                <select name="per_page" id="perPageTop" class="form-select form-select-sm" onchange="syncPerPage(this)">
                    <option value="10" {{ request('per_page', 100) == 10 ? 'selected' : '' }}>10</option>
                    <option value="25" {{ request('per_page', 100) == 25 ? 'selected' : '' }}>25</option>
                    <option value="50" {{ request('per_page', 100) == 50 ? 'selected' : '' }}>50</option>
                    <option value="100" {{ request('per_page', 100) == 100 ? 'selected' : '' }}>100</option>
                </select>
            </div>

            <!-- Dropdown de Período -->
            <div class="me-2 mb-2">
                <div class="dropdown">
                    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="periodoDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                        Período:
                        @switch(request('periodo', 'tudo'))
                            @case('hoje')
                                Hoje
                                @break
                            @case('amanha')
                                Amanhã
                                @break
                            @case('proximo_7')
                                Próximo 7 dias
                                @break
                            @case('proximo_15')
                                Próximo 15 dias
                                @break
                            @case('proximo_mes')
                                Próximo mês
                                @break
                            @case('tudo')
                                Tudo
                                @break
                            @case('intervalo')
                                Intervalo
                                @break
                            @case('especifico')
                                Específico
                                @break
                            @default
                                Tudo
                        @endswitch
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="periodoDropdown">
                        <li><a class="dropdown-item" href="#" data-value="hoje">Hoje</a></li>
                        <li><a class="dropdown-item" href="#" data-value="amanha">Amanhã</a></li>
                        <li><a class="dropdown-item" href="#" data-value="proximo_7">Próximo 7 dias</a></li>
                        <li><a class="dropdown-item" href="#" data-value="proximo_15">Próximo 15 dias</a></li>
                        <li><a class="dropdown-item" href="#" data-value="proximo_mes">Próximo mês</a></li>
                        <li><a class="dropdown-item" href="#" data-value="tudo">Tudo</a></li>
                        <li><a class="dropdown-item" href="#" data-value="intervalo">Intervalo</a></li>
                        <li><a class="dropdown-item" href="#" data-value="especifico">Específico</a></li>
                    </ul>
                    <input type="hidden" name="periodo" id="periodoInput" value="{{ request('periodo', 'tudo') }}">
                </div>
            </div>

            <!-- Para Período Intervalo -->
            <div class="me-2 mb-2" id="periodoIntervaloContainer" style="display: {{ request('periodo', 'tudo') === 'intervalo' ? 'block' : 'none' }};">
                <div class="d-flex">
                    <input type="date" name="data_inicio" class="form-control form-control-sm me-1" placeholder="Data Início" value="{{ request('data_inicio') }}">
                    <input type="date" name="data_fim" class="form-control form-control-sm me-1" placeholder="Data Fim" value="{{ request('data_fim') }}">
                    <button type="submit" class="btn btn-primary btn-sm">Aplicar</button>
                </div>
            </div>
            <!-- Para Período Específico -->
            <div class="me-2 mb-2" id="periodoEspecificoContainer" style="display: {{ request('periodo', 'tudo') === 'especifico' ? 'block' : 'none' }};">
                <input type="date" name="data_especifica" class="form-control form-control-sm" placeholder="Data" value="{{ request('data_especifica') }}">
            </div>

            <!-- Campo de Busca (por nome, cidade ou UF) -->
            <div class="me-2 mb-2">
                <div class="search-box">
                    <input class="form-control search-input search" type="search" name="q" placeholder="Buscar evento (nome, cidade ou UF)" aria-label="Search" value="{{ request('q') }}">
                    <span class="fa fa-search search-box-icon"></span>
                </div>
            </div>

            <div class="mb-2">
                <button type="submit" class="btn btn-primary btn-sm">Filtrar</button>
            </div>
        </form>

        <!-- Tabela de Eventos -->
        <div class="table-list" id="eventosAjaxTable">
            <div class="table-responsive scrollbar mb-3">
                <table class="table table-sm fs-9 mb-0">
                    <thead class="text-body">
                        <tr>
                            <th class="sort ps-3 pe-1 align-middle">Evento</th>
                            <th class="sort ps-3 pe-1 align-middle text-end">Total do Show</th>
                            <th class="sort ps-3 pe-1 align-middle text-end pe-7">Total Recebido</th>
                            <th class="sort ps-3 pe-1 align-middle text-end">Saldo a Receber</th>
                            <th class="sort ps-3 pe-1 align-middle text-end">Atrasado</th>
                            <th class="no-sort text-end">Ações</th>
                        </tr>
                    </thead>
                    <tbody class="list">
                        @forelse($eventos as $evento)
                            <tr>
                                <td class="align-middle ps-3 pe-1">
                                    {{ $evento->evento_cidade }}/{{ $evento->evento_uf }} -
                                    {{ \Carbon\Carbon::parse($evento->evento_data)->format('d/m/Y') }} -
                                    {{ $evento->evento_nome }}
                                </td>
                                <td class="align-middle ps-3 pe-1 text-end">
                                    R$ {{ number_format($evento->total_valor, 2, ',', '.') }}
                                </td>
                                <td class="align-middle ps-3 pe-1 text-end">
                                    R$ {{ number_format($evento->total_pago ?? 0, 2, ',', '.') }}
                                </td>
                                <td class="align-middle ps-3 pe-1 text-end">
                                    R$ {{ number_format($evento->saldo, 2, ',', '.') }}
                                </td>
                                <td class="align-middle ps-3 pe-1 text-end">
                                    R$ {{ number_format($evento->total_atrasado, 2, ',', '.') }}
                                </td>
                                <td class="align-middle text-end ps-3 pe-1">
                                    <div class="btn-reveal-trigger position-static">
                                        <button class="btn btn-sm dropdown-toggle dropdown-caret-none transition-none btn-reveal fs-10" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fas fa-ellipsis-h"></i>
                                        </button>
                                        <div class="dropdown-menu dropdown-menu-end py-2">
                                            <button class="dropdown-item" type="button" onclick="verDetalhes({{ $evento->evento_id }})">
                                                Ver Detalhes
                                            </button>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center">Nenhum evento encontrado.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="d-flex justify-content-between align-items-center mb-3">
            <!-- Seletor de "Registros por página" -->
            <form method="GET" action="{{ route('contas-a-receber.por-evento') }}" class="d-flex align-items-center" id="perPageForm">
                <label for="perPageBottom" class="form-label mb-0 me-2">Registros por página:</label>
                <select name="per_page"
                        id="perPageBottom"
                        class="form-select form-select-sm"
                        style="width: auto;"
                        onchange="syncPerPage(this)">
                    <option value="10"  {{ request('per_page', 100) == 10   ? 'selected' : '' }}>10</option>
                    <option value="25"  {{ request('per_page', 100) == 25   ? 'selected' : '' }}>25</option>
                    <option value="50"  {{ request('per_page', 100) == 50   ? 'selected' : '' }}>50</option>
                    <option value="100" {{ request('per_page', 100) == 100  ? 'selected' : '' }}>100</option>
                </select>
                
                <!-- Campos hidden para manter os filtros -->
                <input type="hidden" name="status" value="{{ request('status', 'all') }}">
                <input type="hidden" name="periodo" value="{{ request('periodo', 'tudo') }}">
                <input type="hidden" name="data_inicio" value="{{ request('data_inicio') }}">
                <input type="hidden" name="data_fim" value="{{ request('data_fim') }}">
                <input type="hidden" name="data_especifica" value="{{ request('data_especifica') }}">
                <input type="hidden" name="q" value="{{ request('q') }}">
            </form>

            <!-- Links de Paginação -->
            <div>
                {{ $eventos->appends([
                    'status'          => request('status', 'all'),
                    'per_page'        => request('per_page', 10),
                    'periodo'         => request('periodo', 'tudo'),
                    'data_inicio'     => request('data_inicio'),
                    'data_fim'        => request('data_fim'),
                    'data_especifica' => request('data_especifica'),
                    'q'               => request('q'),
                ])->links('vendor.pagination.bootstrap-5') }}
            </div>
        </div>
    </div>
</div>

@include('contas_a_receber.partials.modal_detalhes')

@endsection

@push('scripts-custom')
    <script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}"></script>
    <script>
        $(document).ready(function(){
            function updatePeriodFields(){
                var periodo = $('#periodoInput').val();
                if(periodo === 'intervalo'){
                    $('#periodoIntervaloContainer').show();
                    $('#periodoEspecificoContainer').hide();
                    $('input[name="data_especifica"]').val('');
                } else if(periodo === 'especifico'){
                    $('#periodoEspecificoContainer').show();
                    $('#periodoIntervaloContainer').hide();
                    $('input[name="data_inicio"]').val('');
                    $('input[name="data_fim"]').val('');
                } else {
                    $('#periodoIntervaloContainer, #periodoEspecificoContainer').hide();
                }
            }

            // Atualiza o dropdown de período ao clicar
            $('#periodoDropdown + .dropdown-menu a').click(function(e){
                e.preventDefault();
                var value = $(this).data('value');
                var text = $(this).text();
                $('#periodoDropdown').text('Período: ' + text);
                $('#periodoInput').val(value);
                updatePeriodFields();
                if(value !== 'intervalo' && value !== 'especifico'){
                    $('#filterForm').submit();
                }
            });

            // Para a opção 'específico', submete o formulário ao alterar a data
            $('#periodoEspecificoContainer input[name="data_especifica"]').on('change', function(){
                $('#filterForm').submit();
            });

            updatePeriodFields();
        });

        // Função para ver detalhes do evento
        function verDetalhes(eventoId) {
            // Limpa o conteúdo anterior
            $('#detalhesConteudo').html('<div class="text-center"><i class="fas fa-spinner fa-spin"></i> Carregando...</div>');
            
            // Abre o modal
            $('#detalhesModal').modal('show');
            
            // Faz a requisição AJAX
            $.ajax({
                url: `{{ route('contas-a-receber.detalhes-evento', '') }}/${eventoId}`,
                type: 'GET',
                dataType: 'json',
                success: function(data) {
                    if (data.length > 0) {
                        let html = '<div class="table-responsive">';
                        html += '<table class="table table-sm table-striped">';
                        html += '<thead>';
                        html += '<tr>';
                        html += '<th>Empresa</th>';
                        html += '<th>Data Vencimento</th>';
                        html += '<th>Valor</th>';
                        html += '<th>Recebido</th>';
                        html += '<th>Saldo</th>';
                        html += '</tr>';
                        html += '</thead>';
                        html += '<tbody>';
                        
                        let totalValor = 0;
                        let totalRecebido = 0;
                        let totalSaldo = 0;
                        
                        data.forEach(function(item) {
                            totalValor += parseFloat(item.valor);
                            totalRecebido += parseFloat(item.recebido);
                            totalSaldo += parseFloat(item.saldo);
                            
                            html += '<tr>';
                            html += `<td>${item.empresa_nome_fantasia || 'N/A'}</td>`;
                            html += `<td>${formatDate(item.data_vencimento)}</td>`;
                            html += `<td>R$ ${formatMoney(item.valor)}</td>`;
                            html += `<td>R$ ${formatMoney(item.recebido)}</td>`;
                            html += `<td>R$ ${formatMoney(item.saldo)}</td>`;
                            html += '</tr>';
                        });
                        
                        // Linha de totais
                        html += '<tr class="table-info fw-bold">';
                        html += '<td>TOTAL</td>';
                        html += '<td>-</td>';
                        html += `<td>R$ ${formatMoney(totalValor)}</td>`;
                        html += `<td>R$ ${formatMoney(totalRecebido)}</td>`;
                        html += `<td>R$ ${formatMoney(totalSaldo)}</td>`;
                        html += '</tr>';
                        
                        html += '</tbody>';
                        html += '</table>';
                        html += '</div>';
                        
                        // Informações do evento
                        if (data[0]) {
                            let evento = data[0];
                            html = `<div class="mb-3">
                                        <h6 class="fw-bold">${evento.evento_nome}</h6>
                                        <p class="mb-1"><strong>Local:</strong> ${evento.evento_cidade}/${evento.evento_uf}</p>
                                        <p class="mb-3"><strong>Data:</strong> ${formatDate(evento.evento_data)}</p>
                                    </div>` + html;
                        }
                        
                        $('#detalhesConteudo').html(html);
                    } else {
                        $('#detalhesConteudo').html('<div class="alert alert-info">Nenhuma parcela encontrada para este evento.</div>');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Erro ao carregar detalhes:', error);
                    $('#detalhesConteudo').html('<div class="alert alert-danger">Erro ao carregar os detalhes. Tente novamente.</div>');
                }
            });
        }

        // Função auxiliar para formatar data
        function formatDate(dateString) {
            if (!dateString) return 'N/A';
            const date = new Date(dateString);
            return date.toLocaleDateString('pt-BR');
        }

        // Função auxiliar para formatar valores monetários
        function formatMoney(value) {
            if (!value) return '0,00';
            return parseFloat(value).toLocaleString('pt-BR', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
        }

        // Função para sincronizar os seletores de per_page
        function syncPerPage(changedElement) {
            const selectedValue = changedElement.value;
            
            // Sincroniza os dois seletores
            document.getElementById('perPageTop').value = selectedValue;
            document.getElementById('perPageBottom').value = selectedValue;
            
            // Se foi alterado no seletor de cima (dentro do filterForm), submete o formulário principal
            if (changedElement.id === 'perPageTop') {
                // Adiciona o per_page ao formulário principal e submete
                const filterForm = document.getElementById('filterForm');
                let perPageInput = filterForm.querySelector('input[name="per_page"]');
                
                if (!perPageInput) {
                    perPageInput = document.createElement('input');
                    perPageInput.type = 'hidden';
                    perPageInput.name = 'per_page';
                    filterForm.appendChild(perPageInput);
                }
                
                perPageInput.value = selectedValue;
                filterForm.submit();
            }
            // Se foi alterado no seletor de baixo, submete o formulário de baixo
            else if (changedElement.id === 'perPageBottom') {
                document.getElementById('perPageForm').submit();
            }
        }
    </script>
    @include('contas_a_receber.scripts.recebimentos')
@endpush

@push('styles-custom')
    <style>
        /* Correção apenas para a barra de rolagem horizontal */
        #eventosAjaxTable .table-responsive {
            overflow-x: visible !important;
        }
        
        /* Garante que a tabela não cause overflow */
        #eventosAjaxTable .table {
            width: 100%;
            table-layout: auto;
        }
        
        /* Para telas pequenas, permite rolagem horizontal se necessário */
        @media (max-width: 992px) {
            #eventosAjaxTable .table-responsive {
                overflow-x: auto !important;
            }
        }
    </style>
@endpush