@extends('dashboard._theme_dashboard')

@section('title', 'Lista de Boletos')

@push('styles')
    <style>
        /* Estilos para inputs de data HTML5 */
        input[type="date"] {
            appearance: none;
            -webkit-appearance: none;
            background-color: #fff;
            padding: 0.75rem 0.75rem;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            font-family: inherit;
            font-size: 1rem;
            line-height: 1.5;
            width: 100%;
            transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        }

        input[type="date"]:focus {
            border-color: #1a73e8;
            box-shadow: 0 0 0 0.25rem rgba(26, 115, 232, 0.25);
            outline: 0;
        }

        /* Para compatibilidade com alguns navegadores que mostram datas em formato diferente */
        input[type="date"]::-webkit-calendar-picker-indicator {
            cursor: pointer;
            opacity: 0.8;
            padding: 5px;
            color: #1a73e8;
        }

        input[type="date"]::-webkit-calendar-picker-indicator:hover {
            opacity: 1;
        }

        .date-field-container .icon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #1a73e8;
            pointer-events: none;
            z-index: 4;
        }

        /* Ajustar o preenchimento para formulários flutuantes */
        .form-floating input[type="date"] {
            padding-top: 1.625rem;
            padding-bottom: 0.625rem;
        }

        .form-floating>.form-control:focus~label,
        .form-floating>.form-control:not(:placeholder-shown)~label {
            opacity: 0.65;
            transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
        }
    </style>
@endpush

@section('content')
    <div class="container-fluid">
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="card-title mb-0">Boletos Bancários</h3>
                    <a href="{{ route('financial.payments.receive') }}" class="btn btn-light btn-sm">
                        <i class="fas fa-arrow-left me-1"></i> Voltar
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="alert alert-warning border-0 shadow-sm" role="alert">
                    <div class="d-flex align-items-center">
                        <i class="ti ti-info-circle me-3 fs-4"></i>
                        <div>
                            <strong>Dados em tempo real:</strong> Esta página exibe informações diretamente da API do Banco
                            do Brasil, atualizadas a cada consulta.
                        </div>
                    </div>
                </div>

                <div class="mb-4">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0 fw-bold">Filtros</h5>
                        <button class="btn btn-outline-secondary btn-sm" type="button" id="btnToggleFiltrosAvancados">
                            <i class="fas fa-filter me-1"></i> Filtros Avançados
                        </button>
                    </div>

                    <form id="filterForm" class="mb-4">
                        <div class="row g-3">
                            <div class="col-md-3">
                                <div class="form-floating">
                                    <input type="date" name="dataInicio" id="dataInicio" class="form-control" value="@php
                                        try {
                                            echo \Carbon\Carbon::createFromFormat('d/m/Y', $filtros['dataInicio'])->format('Y-m-d');
                                        } catch (\Exception $e) {
                                            echo date('Y-m-d', strtotime('-30 days'));
                                        }
                                    @endphp">
                                    <label for="dataInicio">Data Inicial</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-floating">
                                    <input type="date" name="dataFim" id="dataFim" class="form-control" value="@php
                                        try {
                                            echo \Carbon\Carbon::createFromFormat('d/m/Y', $filtros['dataFim'])->format('Y-m-d');
                                        } catch (\Exception $e) {
                                            echo date('Y-m-d');
                                        }
                                    @endphp">
                                    <label for="dataFim">Data Final</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-floating">
                                    <select name="tipoData" id="tipoData" class="form-select">
                                        <option value="registro" {{ $filtros['tipoData'] == 'registro' ? 'selected' : '' }}>
                                            Data de Registro</option>
                                        <option value="movimento" {{ $filtros['tipoData'] == 'movimento' ? 'selected' : '' }}>
                                            Data de Movimento</option>
                                    </select>
                                    <label for="tipoData">Tipo de Data</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-floating">
                                    <select name="status" id="status" class="form-select">
                                        <option value="todos" {{ $filtros['status'] == 'todos' ? 'selected' : '' }}>Todos os
                                            Status</option>
                                        <option value="A" {{ $filtros['status'] == 'A' ? 'selected' : '' }}>Em Aberto (Em
                                            Ser)</option>
                                        <option value="B" {{ $filtros['status'] == 'B' ? 'selected' : '' }}>
                                            Baixados/Liquidados/Protestados</option>
                                    </select>
                                    <label for="status">Situação</label>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-floating">
                                    <select name="codigoEstado" id="codigoEstado" class="form-select">
                                        <option value="">Todos os Códigos</option>
                                        <optgroup label="Em Aberto - Status A">
                                            <option value="1" {{ $filtros['codigoEstado'] == '1' ? 'selected' : '' }}>1 -
                                                Normal</option>
                                            <option value="2" {{ $filtros['codigoEstado'] == '2' ? 'selected' : '' }}>2 -
                                                Movimento Cartório</option>
                                            <option value="3" {{ $filtros['codigoEstado'] == '3' ? 'selected' : '' }}>3 - Em
                                                Cartório</option>
                                            <option value="4" {{ $filtros['codigoEstado'] == '4' ? 'selected' : '' }}>4 -
                                                Ocorrência Cartório</option>
                                            <option value="5" {{ $filtros['codigoEstado'] == '5' ? 'selected' : '' }}>5 -
                                                Protestado Eletrônico</option>
                                            <option value="9" {{ $filtros['codigoEstado'] == '9' ? 'selected' : '' }}>9 -
                                                Protestado Manual</option>
                                            <option value="13" {{ $filtros['codigoEstado'] == '13' ? 'selected' : '' }}>13 -
                                                Protest. Aguard. Baixa</option>
                                        </optgroup>
                                        <optgroup label="Baixados/Liquidados - Status B">
                                            <option value="6" {{ $filtros['codigoEstado'] == '6' ? 'selected' : '' }}>6 -
                                                Liquidado</option>
                                            <option value="7" {{ $filtros['codigoEstado'] == '7' ? 'selected' : '' }}>7 -
                                                Baixado</option>
                                            <option value="10" {{ $filtros['codigoEstado'] == '10' ? 'selected' : '' }}>10 -
                                                Baixado/Pago Cartório</option>
                                            <option value="11" {{ $filtros['codigoEstado'] == '11' ? 'selected' : '' }}>11 -
                                                Liquidado/Protestado</option>
                                            <option value="12" {{ $filtros['codigoEstado'] == '12' ? 'selected' : '' }}>12 -
                                                Liquidado/Pago Cartório</option>
                                        </optgroup>
                                    </select>
                                    <label for="codigoEstado">Código de Estado</label>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="small text-muted mt-1">
                                    <i class="fas fa-info-circle me-1"></i> Status A (Em Aberto) corresponde aos códigos: 1,
                                    2, 3, 4, 5, 9, 13
                                    <br>
                                    <i class="fas fa-info-circle me-1"></i> Status B (Baixados/Liquidados) corresponde aos
                                    códigos: 6, 7, 10, 11, 12
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="form-check form-switch mb-3">
                                    <input class="form-check-input" type="checkbox" id="boletoVencido" name="boletoVencido"
                                        value="S" {{ $filtros['boletoVencido'] == 'S' ? 'checked' : '' }}>
                                    <label class="form-check-label" for="boletoVencido">Mostrar apenas boletos
                                        vencidos</label>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="d-flex gap-2">
                                    <button type="button" id="btnFiltrar" class="btn btn-primary">
                                        <i class="fas fa-search me-1"></i> Filtrar
                                    </button>
                                    <button type="button" id="btnLimpar" class="btn btn-outline-secondary">
                                        <i class="fas fa-eraser me-1"></i> Limpar
                                    </button>
                                </div>
                            </div>
                            <input type="hidden" id="pagina" name="pagina" value="{{ $filtros['pagina'] ?? 0 }}">
                        </div>

                        <div class="mt-3" id="filtrosAvancados" style="display: none;">
                            <div class="card card-body bg-light border-0 shadow-sm">
                                <h6 class="mb-3 fw-bold text-muted"><i class="fas fa-sliders-h me-2"></i>Filtros Avançados
                                </h6>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="number" name="numeroConvenio" id="numeroConvenio"
                                                class="form-control" value="{{ $filtros['numeroConvenio'] }}"
                                                placeholder="Número do Convênio">
                                            <label for="numeroConvenio">Número do Convênio</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="text" name="cnpjPagador" id="cnpjPagador"
                                                class="form-control cnpj-mask" value="{{ $filtros['cnpjPagador'] }}"
                                                placeholder="00.000.000/0000-00">
                                            <label for="cnpjPagador">CNPJ do Pagador</label>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-floating">
                                            <input type="text" name="cpfPagador" id="cpfPagador"
                                                class="form-control cpf-mask" value="{{ $filtros['cpfPagador'] }}"
                                                placeholder="000.000.000-00">
                                            <label for="cpfPagador">CPF do Pagador</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div id="loading" class="d-none flex-column align-items-center justify-content-center my-5 py-5">
                    <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
                        <span class="visually-hidden">Carregando...</span>
                    </div>
                    <p class="mt-3 text-muted">Consultando boletos, por favor aguarde...</p>
                </div>

                <div id="errorContainer" class="alert alert-danger border-0 shadow-sm" style="display: none;">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-exclamation-circle me-3 fs-4"></i>
                        <span id="errorMessage" class="fw-medium"></span>
                    </div>
                </div>

                <div id="resultadosContainer">
                    @if (!$status)
                        <div class="alert alert-danger border-0 shadow-sm">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-exclamation-circle me-3 fs-4"></i>
                                <span>{{ $mensagem ?? 'Erro ao carregar boletos. Por favor, tente novamente.' }}</span>
                            </div>
                        </div>
                    @elseif (isset($boletos) && count($boletos) == 0)
                        <div class="alert alert-info border-0 shadow-sm">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-info-circle me-3 fs-4"></i>
                                <span>Nenhum boleto encontrado para os filtros selecionados.</span>
                            </div>
                        </div>
                    @elseif (isset($boletos) && count($boletos) > 0)
                        <div class="card border-0 shadow-sm">
                            <div class="card-body p-0">
                                @include('dashboard.financial.boletos._boletos_table', ['boletos' => $boletos])
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de Cancelamento de Boleto -->
    <div class="modal fade" id="cancelarBoletoModal" tabindex="-1" aria-labelledby="cancelarBoletoModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="cancelarBoletoModalLabel">Cancelar Boleto</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Tem certeza que deseja cancelar este boleto?</p>
                    <p class="text-danger"><strong>Atenção:</strong> Esta ação não pode ser desfeita.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Fechar</button>
                    <button type="button" class="btn btn-danger" id="btnConfirmarCancelamento">Confirmar
                        Cancelamento</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de Baixa Manual -->
    <div class="modal fade" id="baixaManualModal" tabindex="-1" aria-labelledby="baixaManualModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="baixaManualModalLabel">Baixa Manual de Boleto</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-floating mb-3">
                        <input type="number" class="form-control" id="valorPago" step="0.01" min="0.01" placeholder="0,00">
                        <label for="valorPago">Valor Pago (R$)</label>
                    </div>
                    <div class="form-floating">
                        <input type="date" class="form-control" id="dataPagamento">
                        <label for="dataPagamento">Data do Pagamento</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-success" id="btnConfirmarBaixaManual">Confirmar Baixa</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('_js/dashboard/financial/boletos.js') }}?v={{ time() }}"
        onerror="this.onerror=null;this.src='{{ asset('js/dashboard/financial/boletos.js') }}?v={{ time() }}'"></script>
    <script>
        $(document).ready(function () {
            // Limpar qualquer status 'todos' ao iniciar
            if ($('#status').val() === 'todos') {
                $('#status').val('A');
            }

            // Verificar se a função initBoletos está disponível
            if (typeof initBoletos === 'undefined') {
                console.error('Função initBoletos não disponível. Tentando carregar o arquivo novamente...');
                $.getScript('{{ asset('js/dashboard/financial/boletos.js') }}?v={{ time() }}', function () {
                    if (typeof initBoletos !== 'undefined') {
                        initBoletosApp();
                    } else {
                        console.error('Não foi possível carregar o arquivo boletos.js. Por favor, recarregue a página.');
                        $('#errorContainer').show().find('#errorMessage').text('Erro ao carregar recursos necessários. Por favor, recarregue a página.');
                    }
                });
            } else {
                initBoletosApp();
            }

            function initBoletosApp() {
                initBoletos({
                    routes: {
                        listBoletos: '{{ route("financial.boletos.index") }}',
                        cancelarBoleto: '{{ route("financial.boleto.cancelar") }}',
                        detalhesBoleto: '{{ route("financial.boletos.show", ["nossoNumero" => "NUMERO"]) }}',
                        baixarManualBoleto: '{{ route("financial.boleto.baixa.manual") }}'
                    },
                    debug: true
                });
            }
        });
    </script>
@endpush