@extends('dashboard._theme_dashboard')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 d-flex align-items-stretch">
                <div class="card w-100">
                    <div class="card-body p-4">
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <h5 class="card-title fw-semibold">Importação de Boletos a Pagar</h5>
                            <div>
                                <a href="{{ route('financial.payments.pay') }}" class="btn btn-primary">
                                    Voltar para Contas a Pagar
                                </a>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="alert alert-info" id="info-message">
                                    <h6><i class="ti ti-info-circle"></i> Informações</h6>
                                    <p>Esta tela permite importar boletos em formato PDF. O sistema irá tentar extrair
                                        automaticamente as informações do boleto como valor e data de vencimento.</p>
                                    <p>Você pode carregar múltiplos boletos de uma só vez.</p>
                                </div>

                                <div class="alert alert-success d-none" id="success-alert">
                                    <h6><i class="ti ti-check"></i> Sucesso!</h6>
                                    <p id="success-message"></p>
                                </div>

                                <div class="alert alert-danger d-none" id="error-alert">
                                    <h6><i class="ti ti-alert-triangle"></i> Erro!</h6>
                                    <p id="error-message"></p>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 mb-4">
                                <div class="card">
                                    <div class="card-body">
                                        <h6 class="card-title mb-3">Dados da Importação</h6>
                                        <form id="import-form" method="POST"
                                            action="{{ route('financial.process.payment.slips.import') }}"
                                            enctype="multipart/form-data">
                                            @csrf
                                            <div class="row">
                                                <div class="col-md-6 mb-3">
                                                    <label for="provider_id" class="form-label">Fornecedor</label>
                                                    <select class="form-select" id="provider_id" name="provider_id">
                                                        <option value="">Selecione um fornecedor (opcional)</option>
                                                        @foreach($providers as $provider)
                                                            <option value="{{ $provider->provider_id }}">
                                                                {{ $provider->provider_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <small class="text-muted">Opcional. Se não selecionado, os dados do
                                                        beneficiário serão extraídos do boleto.</small>
                                                </div>
                                                <div class="col-md-6 mb-3">
                                                    <label for="plan_id" class="form-label">Plano de Contas</label>
                                                    <select class="form-select" id="plan_id" name="plan_id" required>
                                                        <option value="">Selecione um plano</option>
                                                        @foreach($plans as $plan)
                                                            <option value="{{ $plan->plan_id }}">{{ $plan->plan_name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-6 mb-3">
                                                    <label for="shipment_account_id" class="form-label">Conta para
                                                        Remessa</label>
                                                    <select class="form-select" id="shipment_account_id"
                                                        name="shipment_account_id">
                                                        <option value="">Selecione uma conta (opcional)</option>
                                                        @foreach($shipment_accounts as $account)
                                                            <option value="{{ $account->shipment_account_id }}">
                                                                {{ $account->shipment_account_bank }} -
                                                                {{ $account->shipment_account_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <small class="text-muted">Necessário para pagamentos
                                                        automáticos.</small>
                                                </div>
                                            </div>

                                            <div class="row mb-3">
                                                <div class="col-md-12">
                                                    <label for="pdf_files" class="form-label">Arquivos de Boleto
                                                        (PDF)</label>
                                                    <input class="form-control" type="file" id="pdf_files"
                                                        name="pdf_files[]" accept=".pdf" multiple required>
                                                    <small class="text-muted">Você pode selecionar múltiplos arquivos
                                                        PDF.</small>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-12 text-end">
                                                    <button type="submit" class="btn btn-primary" id="submit-btn">
                                                        <i class="ti ti-upload me-1"></i> Importar Boletos
                                                    </button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-info mt-3">
                            <h6><i class="ti ti-info-circle me-1"></i>Dicas para pagamentos automáticos</h6>
                            <p>Os boletos importados aqui poderão ser processados automaticamente através da tela de
                                "Pagamentos Automáticos" se você:</p>
                            <ol>
                                <li>Selecionar uma conta de remessa acima</li>
                                <li>Na tela de Pagamentos Automáticos, selecionar a data correspondente à <strong>data de
                                        vencimento</strong> do boleto</li>
                            </ol>
                            <p><small>O sistema busca boletos com base na data de vencimento quando a data de pagamento não
                                    está definida.</small></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function () {
            @if (session('error'))
                $('#error-message').text("{{ session('error') }}");
                $('#error-alert').removeClass('d-none');
            @endif

            $('#import-form').on('submit', function () {
                const submitBtn = $('#submit-btn');
                submitBtn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processando...');
                submitBtn.attr('disabled', true);

                if (document.getElementById('pdf_files').files.length === 0) {
                    $('#error-message').text('Por favor, selecione pelo menos um arquivo PDF.');
                    $('#error-alert').removeClass('d-none');
                    submitBtn.html('<i class="ti ti-upload me-1"></i> Importar Boletos');
                    submitBtn.attr('disabled', false);
                    return false;
                }

                return true;
            });
        });
    </script>
@endsection