@extends('layouts.app')

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

@push('styles-custom')
    <!-- Estilos personalizados, se necessário -->
    <link href="{{ asset('vendors/choices/choices.min.css') }}" rel="stylesheet" />
    <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</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</h2>
            </div>
        </div>

        <!-- Filtros -->
        <form method="GET" action="{{ route('contas-a-receber.index') }}" id="filterForm" class="mb-4">
            <div class="d-flex align-items-center flex-wrap mb-3">
                <!-- 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" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="10" {{ request('per_page', 10) == 10 ? 'selected' : '' }}>10</option>
                        <option value="25" {{ request('per_page', 25) == 25 ? 'selected' : '' }}>25</option>
                        <option value="50" {{ request('per_page', 50) == 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') === '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') === 'especifico' ? 'block' : 'none' }};">
                    <input type="date" name="data_especifica" class="form-control form-control-sm" placeholder="Data" value="{{ request('data_especifica') }}">
                </div>

                <!-- Botão Adicionar Conta (movido para o canto direito) -->
                <div class="ms-auto mb-2">
                    <button type="button" class="btn btn-primary btn-sm" onclick="window.location='{{ route('contas-a-receber.create') }}'">
                        <i class="fas fa-plus me-2"></i>Adicionar Conta
                    </button>
                </div>
            </div>

            <!-- Nova linha com os quatro filtros de pesquisa -->
            <div class="d-flex flex-wrap mb-3">
                <!-- Primeiro filtro -->
                <div class="me-2 mb-2">
                    <div class="search-box">
                        <input class="form-control search-input" type="search" name="q" placeholder="Buscar em todas as colunas" aria-label="Search" value="{{ request('q') }}">
                        <span class="fa fa-search search-box-icon"></span>
                    </div>
                </div>
                <div class="me-3 mb-2">
                    <select name="campo" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="all"       {{ request('campo', 'all') == 'all'       ? 'selected' : '' }}>Todas as Colunas</option>
                        <option value="descricao" {{ request('campo')       == 'descricao' ? 'selected' : '' }}>Descrição</option>
                        <option value="dataextra" {{ request('campo')       == 'dataextra' ? 'selected' : '' }}>Data</option>
                        <option value="empresa"   {{ request('campo')       == 'empresa'   ? 'selected' : '' }}>Empresa</option>
                        <option value="cliente"   {{ request('campo')       == 'cliente'   ? 'selected' : '' }}>Cliente</option>
                    </select>
                </div>

                <!-- Divisor "E" (1 coluna) -->
                <div class="col-md-1 d-flex align-items-center justify-content-center mb-2">
                    <span class="badge bg-secondary">E</span>
                </div>

                <!-- Segundo filtro (duplicado) -->
                <div class="me-2 mb-2">
                    <div class="search-box">
                        <input class="form-control search-input" type="search" name="q2" placeholder="Segundo filtro (opcional)" aria-label="Search" value="{{ request('q2') }}">
                        <span class="fa fa-search search-box-icon"></span>
                    </div>
                </div>
                <div class="me-3 mb-2">
                    <select name="campo2" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="all"       {{ request('campo2', 'all') == 'all'       ? 'selected' : '' }}>Todas as Colunas</option>
                        <option value="descricao" {{ request('campo2')       == 'descricao' ? 'selected' : '' }}>Descrição</option>
                        <option value="dataextra" {{ request('campo2')       == 'dataextra' ? 'selected' : '' }}>Data</option>
                        <option value="empresa"   {{ request('campo2')       == 'empresa'   ? 'selected' : '' }}>Empresa</option>
                        <option value="cliente"   {{ request('campo2')       == 'cliente'   ? 'selected' : '' }}>Cliente</option>
                    </select>
                </div>
            </div>
        </form>

        <!-- Tabela de Contas a Receber -->
            @php $clientPerPage = (int) request('per_page', 100); @endphp
                <div id="contas_a_receber"
                    data-list='{"valueNames":["id","descricao","dataextra","empresa","cliente","vencimento","valor","recebimento","saldo"],"page":{{ $clientPerPage }},"pagination":true}'>
                <div class="table-responsive">
                    <table class="table table-sm fs-9 mb-0">
                    <thead class="text-body">
                        <tr>
                        <th class="sort ps-3" data-sort="id" style="min-width:4.5rem;">
                            # <span class="fa-solid ms-1"></span>
                        </th>
                        <th class="sort" data-sort="descricao">
                            Descrição <span class="fa-solid ms-1"></span>
                        </th>
                        <th class="sort text-center" data-sort="dataextra" style="min-width:6rem;">
                            Evento Data <span class="fa-solid ms-1"></span>
                        </th>
                        <th class="sort" data-sort="empresa">
                            Empresa <span class="fa-solid ms-1"></span>
                        </th>
                        <th class="sort" data-sort="cliente">
                            Cliente <span class="fa-solid ms-1"></span>
                        </th>
                        <th class="sort text-center" data-sort="vencimento" style="min-width:8rem;">
                            Vencimento <span class="fa-solid ms-1"></span>
                        </th>
                        <th class="sort text-end" data-sort="valor">
                            Valor <span class="fa-solid ms-1"></span>
                        </th>
                        <th class="sort text-end" data-sort="recebimento">
                            Recebido <span class="fa-solid ms-1"></span>
                        </th>
                        <th class="sort text-end" data-sort="saldo">
                            Saldo <span class="fa-solid ms-1"></span>
                        </th>
                        <th class="no-sort text-end">Ações</th>
                        </tr>
                    </thead>
                    <tbody class="list">
                        <tr class="d-none template" data-list="template">
                            <td class="id ps-3 align-middle fw-semibold"></td>
                            <td class="descricao align-middle"></td>
                            <td class="dataextra text-center align-middle"></td>
                            <td class="empresa align-middle"></td>
                            <td class="cliente align-middle"></td>
                            <td class="vencimento text-center align-middle">
                                <span class="d-none js-sort-year"></span>
                                <span class="d-none js-sort-month"></span>
                                <span class="d-none js-sort-day"></span>
                                <span class="d-none js-sort-timestamp"></span>
                            </td>
                            <td class="valor text-end align-middle"></td>
                            <td class="recebimento text-end align-middle"></td>
                            <td class="saldo text-end align-middle"></td>
                            <td class="align-middle text-end acoes"></td>
                        </tr>
                        @forelse($contasAReceber as $conta)
                        <tr>
                        <td class="id ps-3 fw-semibold">{{ $conta->id }}</td>
                        <td class="descricao"> {{ $conta->descricao_sem_data ?? 'N/A' }} </td>
                        <td class="dataextra text-center">
                            {{ $conta->data_extra ?? 'N/A' }}
                        </td>
                        <td class="empresa">{{ $conta->contaBancaria->empresa->nome_fantasia ?? 'N/A' }}</td>
                        <td class="cliente">{{ $conta->cliente->razao_social ?? 'N/A' }}</td>
                        <td class="vencimento text-center align-middle">
                            @php
                                $rawDate = $conta->getRawOriginal('data_vencimento');
                                $parts = $rawDate ? explode('-', $rawDate) : [0, 0, 0];
                            @endphp
                            <span class="d-none js-sort-year">{{ $parts[0] ?? 0 }}</span>
                            <span class="d-none js-sort-month">{{ $parts[1] ?? 0 }}</span>
                            <span class="d-none js-sort-day">{{ $parts[2] ?? 0 }}</span>
                            <span class="d-none js-sort-timestamp">{{ strtotime($rawDate ?? '0') }}</span>
                            {{ $conta->data_vencimento ?? 'N/A' }}
                        </td>
                        <td class="valor text-end">
                            {{ $conta->valor ? 'R$ '.number_format($conta->valor,2,',','.') : 'N/A' }}
                        </td>
                        <td class="recebimento text-end">
                            R$ {{ number_format($conta->totalRecebido(),2,',','.') }}
                        </td>
                        <td class="saldo text-end">
                            R$ {{ number_format($conta->valor - $conta->totalRecebido(),2,',','.') }}
                        </td>
                        <td class="text-end">
                                <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">
                                        <a class="dropdown-item" href="{{ route('contas-a-receber.edit', $conta) }}">Editar</a>
                                        <button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#moda_view{{ $conta->id }}">
                                            Visualizar Recebimentos
                                        </button>
                                        <button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#moda_baixar{{ $conta->id }}">
                                            Registrar Recebimento
                                        </button>
                                        <button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#modal_anexar_notaS{{ $conta->id }}">
                                            Anexar Nota Fiscal
                                        </button>
                                        <button class="dropdown-item text-danger" type="button" data-bs-toggle="modal" data-bs-target="#deleteModal{{ $conta->id }}">
                                            Excluir
                                        </button>
                                    </div>
                                </div>
                            </td>
                        </td>
                        </tr>
                        @empty
                        <tr>
                        <td colspan="10" class="text-center">Nenhuma conta a receber encontrada.</td>
                        </tr>
                        @endforelse
                    </tbody>
                    </table>

                <!-- Inclusão dos Modais Fora da Tabela -->
                @foreach($contasAReceber as $conta)
                    @include('contas_a_receber.recebimentos.partials.modal_baixar', [
                        'conta'          => $conta,
                        'transferencias' => $transferencias   {{-- ← passe também aqui --}}
                    ])
                    {{-- agora, fora da modal_view, adicionamos os estornar-modals --}}
                    @foreach($conta->recebimentos as $recebimento)
                        @include('contas_a_receber.recebimentos.partials.modal_estornar', [
                            'conta'       => $conta,
                            'recebimento' => $recebimento
                        ])
                    @endforeach
                    @include('contas_a_receber.recebimentos.partials.modal_view', ['conta' => $conta])
                    @include('contas_a_receber.partials.delete_modal', ['conta' => $conta])
                    @include('notas_fiscais_anexas.partials.modal_anexar_nota', ['tipo' => 'S', 'conta' => $conta])
                @endforeach
            </div>

            <div class="d-flex justify-content-between align-items-center mb-3">
                <!-- Formulário para Seleção de Registros por Página (abaixo da tabela) -->
                <form method="GET" action="{{ route('contas-a-receber.index') }}" class="d-flex align-items-center">
                    <label for="perPage" class="form-label mb-0 me-2">Registros por página:</label>
                    <select name="per_page" id="perPage" class="form-select form-select-sm" style="width: auto;" onchange="this.form.submit()">
                        <option value="10" {{ request('per_page', 10) == 10 ? 'selected' : '' }}>10</option>
                        <option value="25" {{ request('per_page', 25) == 25 ? 'selected' : '' }}>25</option>
                        <option value="50" {{ request('per_page', 50) == 50 ? 'selected' : '' }}>50</option>
                        <option value="100" {{ request('per_page', 100) == 100 ? 'selected' : '' }}>100</option>
                    </select>
                </form>

                <!-- Paginação -->
                <div>
                    {{ $contasAReceber->appends([
                        'status'          => request('status', 'all'),
                        'per_page'        => request('per_page', 100),
                        'periodo'         => request('periodo', 'tudo'),
                        'data_inicio'     => request('data_inicio'),
                        'data_fim'        => request('data_fim'),
                        'data_especifica' => request('data_especifica'),
                        'q'               => request('q'),
                        'campo'           => request('campo', 'all'),
                        'q2'              => request('q2'),
                        'campo2'          => request('campo2', 'all'),
                    ])->links('vendor.pagination.bootstrap-5') }}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts-custom')
    <script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}"></script>
    <script src="{{ asset('vendors/choices/choices.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 quando a data é alterada
            $('#periodoEspecificoContainer input[name="data_especifica"]').on('change', function(){
                $('#filterForm').submit();
            });

            // Variáveis para rastrear se os campos foram alterados
            let searchFieldsChanged = {
                q: false,
                q2: false
            };

            // Monitorar mudanças nos campos de busca
            $('input[name="q"], input[name="q2"]').on('input', function(){
                const fieldName = $(this).attr('name');
                if ($(this).val().trim() !== '') {
                    searchFieldsChanged[fieldName] = true;
                } else {
                    searchFieldsChanged[fieldName] = false;
                }
            });

            // Submeter formulário quando tecla Enter é pressionada nos campos de busca
            // mantemos esta funcionalidade para facilitar o uso
            $('input[name="q"], input[name="q2"]').on('keypress', function(e){
                if (e.which === 13) {
                    e.preventDefault();
                    $('#filterForm').submit();
                }
            });

            // Monitorar mudanças nos campos de filtro
            $('select[name="campo"], select[name="campo2"], select[name="status"], select[name="per_page"]').on('change', function(){
                // Se o campo correspondente de busca tiver sido alterado, submete o formulário
                if ($(this).attr('name') === 'campo' && searchFieldsChanged.q) {
                    $('#filterForm').submit();
                } else if ($(this).attr('name') === 'campo2' && searchFieldsChanged.q2) {
                    $('#filterForm').submit();
                } else if ($(this).attr('name') !== 'campo' && $(this).attr('name') !== 'campo2') {
                    // Para outros filtros (status, per_page), sempre submete
                    $('#filterForm').submit();
                }
            });

            updatePeriodFields();
        });
    </script>
    @include('contas_a_receber.scripts.recebimentos')

    <script>
        document.addEventListener('click', function(e) {
            if (e.target.closest('.excluir-nota-fiscal')) {
                const button = e.target.closest('.excluir-nota-fiscal');
                const notaId = button.dataset.id;
                const url = button.dataset.url;

                if (confirm('Deseja realmente excluir esta nota fiscal?')) {
                    fetch(url, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'X-Requested-With': 'XMLHttpRequest',
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify({ _method: 'DELETE' })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.message) {
                            document.getElementById('nota-fiscal-' + notaId).remove();
                        } else {
                            alert(data.message || 'Erro ao excluir a nota fiscal.');
                        }
                    })
                    .catch(() => alert('Erro inesperado ao excluir a nota fiscal.'));
                }
            }
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Obter o elemento wrapper e inicializar o List.js
            const wrapper = document.getElementById('contas_a_receber');

            // Definir uma função de ordenação personalizada para datas
            const customListOptions = {
                valueNames: [
                    'id',
                    'descricao',
                    'dataextra',
                    'empresa',
                    'cliente',
                    {
                        name: 'vencimento',
                        sortFunction: function(a, b, options) {
                            // Método mais eficiente: usar timestamp para comparar datas
                            const aTimestamp = parseInt(a.elm.querySelector('.js-sort-timestamp')?.textContent.trim()) || 0;
                            const bTimestamp = parseInt(b.elm.querySelector('.js-sort-timestamp')?.textContent.trim()) || 0;

                            // Comparação direta usando timestamp
                            const result = aTimestamp - bTimestamp;

                            // Garantir que respeitamos a direção da ordenação definida em options.order
                            return options.order === 'desc' ? -result : result;
                        }
                    },
                    'valor',
                    'recebimento',
                    'saldo'
                ],
                page: {{ $clientPerPage }},
                pagination: true
            };

            // Inicializar List.js com as opções personalizadas
            const list = new List(wrapper, customListOptions);

            // Configurar comportamento de clique para os cabeçalhos de ordenação
            const headers = wrapper.querySelectorAll('.sort');
            let currentSortCol = null;
            let currentSortDir = 'asc';

            headers.forEach(header => {
                header.addEventListener('click', function() {
                    const sortName = this.getAttribute('data-sort');

                    // Determinar a direção da ordenação
                    if (currentSortCol === sortName) {
                        // Mesma coluna, alternar direção
                        currentSortDir = currentSortDir === 'asc' ? 'desc' : 'asc';
                    } else {
                        // Nova coluna, começar com ascendente
                        currentSortCol = sortName;
                        currentSortDir = 'asc';
                    }

                    // Limpar indicação de ordenação em todos os cabeçalhos
                    headers.forEach(h => {
                        h.removeAttribute('data-dir');
                        const icon = h.querySelector('.fa-solid');
                        if (icon) {
                            icon.className = 'fa-solid ms-1 fa-sort';
                        }
                    });

                    // Atualizar este cabeçalho
                    this.setAttribute('data-dir', currentSortDir);
                    const icon = this.querySelector('.fa-solid');
                    if (icon) {
                        icon.className = `fa-solid ms-1 fa-sort-${currentSortDir === 'asc' ? 'up' : 'down'}`;
                    }

                    // Realizar a ordenação
                    if (sortName === 'vencimento') {
                        // Para vencimento, usar a função de ordenação personalizada
                        const customSortFunction = customListOptions.valueNames.find(
                            v => typeof v === 'object' && v.name === 'vencimento'
                        ).sortFunction;

                        list.sort(sortName, {
                            order: currentSortDir,
                            sortFunction: customSortFunction
                        });

                        console.log(`Ordenando por ${sortName} na direção ${currentSortDir}`);
                    } else {
                        // Para outras colunas, usar ordenação padrão
                        list.sort(sortName, { order: currentSortDir });
                    }
                });
            });

            // Configuração inicial - ordenar por vencimento ascendente por padrão
            window.addEventListener('load', function() {
                const vencimentoHeader = wrapper.querySelector('.sort[data-sort="vencimento"]');
                if (vencimentoHeader) {
                    currentSortCol = 'vencimento';
                    currentSortDir = 'asc';

                    vencimentoHeader.setAttribute('data-dir', currentSortDir);
                    const icon = vencimentoHeader.querySelector('.fa-solid');
                    if (icon) {
                        icon.className = 'fa-solid ms-1 fa-sort-up';
                    }

                    const customSortFunction = customListOptions.valueNames.find(
                        v => typeof v === 'object' && v.name === 'vencimento'
                    ).sortFunction;

                    list.sort('vencimento', {
                        order: currentSortDir,
                        sortFunction: customSortFunction
                    });
                }
            });

            // Trigger inicial para mostrar o ícone de ordenação na coluna de vencimento
            const vencimentoHeader = wrapper.querySelector('.sort[data-sort="vencimento"]');
            if (vencimentoHeader) {
                const icon = vencimentoHeader.querySelector('.fa-solid');
                if (icon) {
                    icon.className = 'fa-solid ms-1 fa-sort';
                }
            }
        });
    </script>
@endpush