@extends('layouts.app')

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

@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" />
    <link href="{{ asset('vendors/select2/css/select2.css') }}" rel="stylesheet" />
    <style>
        .select2-container--default .select2-selection--single {
            height: 31px;
            padding: 0.1rem 0.5rem;
            font-size: 0.8125rem;
            border-radius: 0.25rem;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 24px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 30px;
        }
        .modal-lg .select2-container {
            width: 100% !important;
        }
    </style>
@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 Pagar</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 Pagar</h2>
            </div>
        </div>

        <!-- Filtros: Status, Registros por Página, Período e Busca -->
        <form method="GET" action="{{ route('contas-a-pagar.index') }}" id="filterForm">
            <!-- Primeira linha - Filtros principais e botão -->
            <div class="row mb-2">
                <div class="col-md-10 d-flex flex-wrap align-items-center">
                    <!-- Status -->
                    <div class="me-2 mb-2">
                        <select name="status" class="form-select form-select-sm" onchange="document.getElementById('filterForm').submit()">
                            <option value="all" {{ ($status ?? 'all') == 'all' ? 'selected' : '' }}>Todos</option>
                            <option value="pago" {{ ($status ?? '') == 'pago' ? 'selected' : '' }}>Pago</option>
                            <option value="em_aberto" {{ ($status ?? '') == 'em_aberto' ? 'selected' : '' }}>Em Aberto</option>
                            <option value="parcial" {{ ($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', 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>

                    <!-- Filtro de Período -->
                    <div class="me-2 mb-2">
                        <div class="dropdown">
                            @php
                                $periodoAtual = request('periodo', 'tudo');
                                $labelPeriodo = match ($periodoAtual) {
                                    'hoje'        => 'Hoje',
                                    'amanha'      => 'Amanhã',
                                    'proximo_7'   => 'Próximo 7 dias',
                                    'proximo_15'  => 'Próximo 15 dias',
                                    'proximo_mes' => 'Próximo mês',
                                    'intervalo'   => 'Intervalo',
                                    'especifico'  => 'Específico',
                                    default       => 'Tudo',
                                };
                            @endphp
                            <button class="btn btn-secondary btn-sm dropdown-toggle"
                                    type="button"
                                    id="periodoDropdown"
                                    data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                Período: {{ $labelPeriodo }}
                            </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>

                    <!-- Containers para datas do período -->
                    <!-- Para Intervalo: dois inputs e um botão -->
                    <div class="me-2 mb-2" id="periodoIntervaloContainer" style="display: {{ request('periodo') === 'intervalo' ? 'flex' : '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 Específico: um input que submete automaticamente ao alterar -->
                    <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>
                </div>

                <!-- Botão Adicionar (sempre à direita) -->
                <div class="col-md-2 d-flex justify-content-md-end mb-2">
                    <button type="button" class="btn btn-primary btn-sm" onclick="window.location='{{ route('contas-a-pagar.create') }}'">
                        <i class="fas fa-plus me-2"></i>Adicionar Conta
                    </button>
                </div>
            </div>

            <!-- Segunda linha - Buscas -->
            <div class="row mb-2">
                <!-- Conjunto de busca primária -->
                <div class="col-md-5 mb-2">
                    <div class="row">
                        <!-- Input de busca (3 colunas) -->
                        <div class="col-8">
                            <div class="search-box w-100">
                                <input
                                    id="searchInput"
                                    class="form-control search-input form-control-sm w-100"
                                    type="search"
                                    name="q"
                                    placeholder="{{ request('search_field') ? 'Buscar por ' . ucfirst(str_replace('_',' ',request('search_field'))) : 'Buscar em todas as colunas' }}"
                                    aria-label="Search"
                                    value="{{ request('q') }}"
                                >
                                <span class="fa fa-search search-box-icon"></span>
                            </div>
                        </div>
                        <!-- Select de coluna (2 colunas) -->
                        <div class="col-4">
                            <select name="search_field" class="form-select form-select-sm w-100" onchange="updatePlaceholder()">
                                <option value="" {{ request('search_field') == '' ? 'selected' : '' }}>Todas as Colunas</option>
                                <option value="descricao" {{ request('search_field') == 'descricao' ? 'selected' : '' }}>Descrição</option>
                                <option value="plano_conta" {{ request('search_field') == 'plano_conta' ? 'selected' : '' }}>Plano de Conta</option>
                                <option value="empresa" {{ request('search_field') == 'empresa' ? 'selected' : '' }}>Empresa</option>
                                <option value="fornecedor" {{ request('search_field') == 'fornecedor' ? 'selected' : '' }}>Fornecedor</option>
                                <option value="conta_bancaria" {{ request('search_field') == 'conta_bancaria' ? 'selected' : '' }}>Conta Bancária</option>
                            </select>
                        </div>
                    </div>
                </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>

                <!-- Conjunto de busca secundária -->
                <div class="col-md-6 mb-2">
                    <div class="row">
                        <!-- Input de busca secundária -->
                        <div class="col-8">
                            <div class="search-box w-100">
                                <input
                                    id="searchInput2"
                                    class="form-control search-input form-control-sm w-100"
                                    type="search"
                                    name="q2"
                                    placeholder="{{ request('search_field2') ? 'Buscar por ' . ucfirst(str_replace('_',' ',request('search_field2'))) : 'Segundo filtro (opcional)' }}"
                                    aria-label="Search"
                                    value="{{ request('q2') }}"
                                >
                                <span class="fa fa-search search-box-icon"></span>
                            </div>
                        </div>
                        <!-- Select de coluna secundária -->
                        <div class="col-4">
                            <select name="search_field2" class="form-select form-select-sm w-100" onchange="updatePlaceholder2()">
                                <option value="" {{ request('search_field2') == '' ? 'selected' : '' }}>Selecione uma coluna</option>
                                <option value="descricao" {{ request('search_field2') == 'descricao' ? 'selected' : '' }}>Descrição</option>
                                <option value="plano_conta" {{ request('search_field2') == 'plano_conta' ? 'selected' : '' }}>Plano de Conta</option>
                                <option value="empresa" {{ request('search_field2') == 'empresa' ? 'selected' : '' }}>Empresa</option>
                                <option value="fornecedor" {{ request('search_field2') == 'fornecedor' ? 'selected' : '' }}>Fornecedor</option>
                                <option value="conta_bancaria" {{ request('search_field2') == 'conta_bancaria' ? 'selected' : '' }}>Conta Bancária</option>
                                <option value="valor" {{ request('search_field2') == 'valor' ? 'selected' : '' }}>Valor</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <!-- Tabela de Contas a Pagar -->
        @php $clientPerPage = (int) request('per_page', 100); @endphp
        <div id="contas_a_pagar"
             data-list='{"valueNames":["descricao","empresa","fornecedor","conta_bancaria","vencimento","valor","pagamento","plano_conta"],
                         "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;">#</th>
                          <th class="sort"                data-sort="descricao">Descrição</th>
                          <th class="sort text-center"    data-sort="plano_conta">Plano de Conta</th>
                          <th class="sort"                data-sort="empresa">Empresa</th>
                          <th class="sort"                data-sort="fornecedor">Fornecedor</th>
                          <th class="sort"                data-sort="conta_bancaria">Conta Bancária</th>
                          <th class="sort text-center"    data-sort="vencimento"  style="min-width:8rem;">Vencimento</th>
                          <th class="sort text-end"       data-sort="valor">Valor</th>
                          <th class="sort text-end"       data-sort="pagamento">Pago</th>
                          <th class="sort text-end"       data-sort="saldo">Saldo</th>
                          <th class="no-sort text-end">Ações</th>
                        </tr>
                      </thead>
                    <tbody class="list">
                        {{-- linha usada pelo List.js; fica oculta --}}
                        <tr class="d-none template-row" data-list="template">
                            <td class="id   ps-3 align-middle fw-semibold"></td>
                            <td class="descricao align-middle"></td>
                            <td class="plano_conta text-center align-middle"></td>
                            <td class="empresa align-middle"></td>
                            <td class="fornecedor align-middle"></td>
                            <td class="conta_bancaria align-middle"></td>
                            <td class="vencimento text-center align-middle">
                                <span class="d-none js-sort-timestamp"></span>
                            </td>
                            <td class="valor text-end align-middle"></td>
                            <td class="pagamento text-end align-middle"></td>
                            <td class="saldo text-end align-middle"></td>
                            <td class="align-middle text-end acoes"></td>
                        </tr>
                        @forelse($contasAPagar as $index => $conta)
                        <tr>
                            <th scope="row">{{ $conta->id }}</th>
                            <td class="descricao">{{ $conta->descricao ?? 'N/A' }}</td>
                            <td class="plano_conta">{{ $conta->planoDeConta->descricao ?? 'N/A' }}</td>
                            <td class="empresa">{{ $conta->empresa->razao_social ?? 'N/A' }}</td>
                            <td class="fornecedor">{{ $conta->fornecedor->razao_social ?? 'N/A' }}</td>
                            <td class="conta_bancaria">
                                @if($conta->contaBancaria)
                                    {{ $conta->contaBancaria->banco }} - {{ $conta->contaBancaria->agencia }} - {{ $conta->contaBancaria->conta_corrente }}
                                @else
                                    N/A
                                @endif
                            </td>
                            <td class="vencimento text-center" data-order="{{ $conta->getRawOriginal('data_vencimento') ?? '' }}">
                                {{ $conta->getRawOriginal('data_vencimento')
                                    ? \Carbon\Carbon::parse($conta->getRawOriginal('data_vencimento'))->format('d/m/Y')
                                    : 'N/A' }}
                            </td>
                            <td class="valor text-end">
                                {{ $conta->valor ? 'R$ ' . number_format($conta->valor, 2, ',', '.') : 'N/A' }}
                            </td>
                            <td class="pagamento text-end">
                                R$ {{ number_format($conta->totalPago(), 2, ',', '.') }}
                            </td>
                            <td class="saldo text-end">
                                R$ {{ number_format($conta->valor - $conta->totalPago(), 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-pagar.edit', ['contaAPagar' => $conta->id]) }}">
                                            Editar
                                        </a>
                                        <button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#modal_view{{ $conta->id }}">
                                            Visualizar Pagamentos
                                        </button>
                                        <button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#modal_baixar{{ $conta->id }}">
                                            Registrar Pagamento
                                        </button>
                                        <button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#modal_anexar_notaE{{ $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>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="11" class="text-center">Nenhuma conta a pagar encontrada.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>

                @foreach($contasAPagar as $conta)
                    @include('contas_a_pagar.pagamentos.partials.modal_baixar', [
                        'conta'          => $conta,
                        'transferencias' => $transferencias  {{-- ← adiciona aqui --}}
                    ])
                    @include('contas_a_pagar.pagamentos.partials.modal_view', ['conta' => $conta])
                    @include('notas_fiscais_anexas.partials.modal_anexar_nota', ['tipo' => 'E', 'conta' => $conta])
                    @include('contas_a_pagar.partials.modal_delete', ['conta' => $conta])
                    {{-- Modal de exclusão, se necessário --}}
                @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-pagar.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', 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>
                </form>

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

@push('scripts-custom')
    @include('contas_a_pagar.pagamentos.scripts.mascara-valor')
    <script src="{{ asset('vendors/choices/choices.min.js') }}"></script>

    {{--  controla os campos de período  --}}
    <script>
      $(function (){
        function updatePeriodFields(){
          const periodo = $('#periodoInput').val();
          $('#periodoIntervaloContainer').toggle(periodo === 'intervalo');
          $('#periodoEspecificoContainer').toggle(periodo === 'especifico');
        }
        updatePeriodFields();

        $(document).on('click','.dropdown-menu a[data-value]',function (e){
          e.preventDefault();
          const value = $(this).data('value');
          $('#periodoInput').val(value);
          $('#periodoDropdown').text('Período: ' + $(this).text().trim());
          updatePeriodFields();
          if (!['intervalo','especifico'].includes(value)) $('#filterForm').submit();
        });

        $('#periodoEspecificoContainer input[name="data_especifica"]').on('change',()=>$('#filterForm').submit());
      });
    </script>

    <script>
       document.addEventListener('DOMContentLoaded', () => {

        /* ----------------------------------------------------
            1.  Instância (ou reaproveita) o List.js com ordenador de data personalizado
        ---------------------------------------------------- */
        const wrapper     = document.getElementById('contas_a_pagar');
        const list = wrapper.list ?? new window.List(wrapper, {
            valueNames : [
                'id',
                'descricao',
                'plano_conta',
                'empresa',
                'fornecedor',
                { name: 'vencimento', attr: 'data-order' },
                'valor',
                'pagamento',
                'saldo'
            ],
            page       : {{ $clientPerPage }},
            pagination : true
        });


        // ... resto do código ...

        /* ----------------------------------------------------
            2.  Ordenação ASC ⇄ DESC  com 1 único ícone
        ---------------------------------------------------- */
        const heads = wrapper.querySelectorAll('th.sort');

        heads.forEach(th => {
            // ícone já vem do HTML (<span class="fa-solid fa-sort">)
            const icon = th.querySelector('span.fa-sort,span.fa-sort-up,span.fa-sort-down');

            /* -- clique: alterna asc ⇄ desc -- */
            th.addEventListener('click', () => {
                const current = th.dataset.dir || '';          // "", "asc" ou "desc"
                const next    = current === 'asc' ? 'desc' : 'asc';

                // limpa TODOS os outros cabeçalhos (menos o que foi clicado)
                heads.forEach(h => {
                    if (h === th) return;                        // ← ignora o atual
                    h.dataset.dir = '';
                    const ic = h.querySelector('span.fa-sort,span.fa-sort-up,span.fa-sort-down');
                    if (ic){
                    ic.classList.remove('fa-sort-up','fa-sort-down');
                    ic.classList.add('fa-sort');
                    }
                });

                // aplica no cabeçalho clicado
                th.dataset.dir = next;
                const ic = th.querySelector('span.fa-sort,span.fa-sort-up,span.fa-sort-down');
                if (ic){
                    ic.classList.remove('fa-sort','fa-sort-up','fa-sort-down');
                    ic.classList.add(next === 'asc' ? 'fa-sort-up' : 'fa-sort-down');
                }

                // executa a ordenação com opções adicionais
                list.sort(th.dataset.sort, {
                    order: next,
                    sortFunction: th.dataset.sort === 'vencimento' ?
                        list.valueNames.find(v => v.name === 'vencimento').sortFunction : undefined
                });
            });
        });

        });
    </script>

    <script>
        // Apenas ajusta o placeholder — não submete o form automaticamente
        function updatePlaceholder() {
            const field = document.querySelector('select[name="search_field"]').value;
            const input = document.getElementById('searchInput');
            if (!field) {
                input.placeholder = 'Buscar em todas as colunas';
            } else {
                const label = field.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
                input.placeholder = 'Buscar por ' + label;
            }
        }

        // Função para o segundo campo de busca
        function updatePlaceholder2() {
            const field = document.querySelector('select[name="search_field2"]').value;
            const input = document.getElementById('searchInput2');
            if (!field) {
                input.placeholder = 'Segundo filtro (opcional)';
            } else {
                const label = field.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
                input.placeholder = 'Buscar por ' + label;
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            // Define os placeholders ao carregar a página
            updatePlaceholder();
            updatePlaceholder2();

            // Quando o usuário muda a coluna de busca primária
            document.querySelector('select[name="search_field"]')
                .addEventListener('change', () => {
                    updatePlaceholder();
                    document.getElementById('filterForm').submit();
                });

            // Quando o usuário muda a coluna de busca secundária
            document.querySelector('select[name="search_field2"]')
                .addEventListener('change', () => {
                    updatePlaceholder2();
                    document.getElementById('filterForm').submit();
                });

            // Implementa busca ao pressionar Enter nos campos de busca
            document.getElementById('searchInput').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    document.getElementById('filterForm').submit();
                }
            });

            document.getElementById('searchInput2').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    document.getElementById('filterForm').submit();
                }
            });
        });
    </script>

    <!-- Inicialização do Select2 e manipulação de mudança de conta bancária -->
    <script>
        $(document).ready(function() {
            // Inicializa tooltips
            $('[data-bs-toggle="tooltip"]').tooltip();

            // Inicializa Select2 para contas bancárias nos modais
            $('.select2-conta-bancaria').select2({
                dropdownParent: $('#modal_view{{ $conta->id ?? '' }}'),
                placeholder: 'Selecione uma conta bancária',
                allowClear: true,
                width: '100%'
            });

            // Evento para atualizar a conta bancária quando alterada
            $('.select2-conta-bancaria').on('change', function() {
                const pagamentoId = $(this).data('pagamento-id');
                const formId = `#formContaBancaria${pagamentoId}`;

                // Exibe confirmação antes de atualizar
                if (confirm('Deseja realmente alterar a conta bancária deste pagamento?')) {
                    // Envia o formulário via AJAX
                    $.ajax({
                        url: $(formId).attr('action'),
                        type: 'POST',
                        data: $(formId).serialize(),
                        success: function(response) {
                            // Feedback visual ao usuário
                            alert('Conta bancária atualizada com sucesso!');
                        },
                        error: function(xhr) {
                            // Tratamento de erro
                            alert('Erro ao atualizar conta bancária. Por favor, tente novamente.');
                            console.error(xhr.responseText);
                        }
                    });
                } else {
                    // Reverte a seleção para o valor original se o usuário cancelar
                    $(this).val($(this).find('option[selected]').val()).trigger('change.select2');
                }
            });
        });
    </script>
@endpush