@extends('layouts.app')

@section('title', 'Dados do Pagamento')

@push('styles-custom')
<link href="{{ asset('vendors/choices/choices.min.css') }}" rel="stylesheet" />
<link href="{{ asset('vendors/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
<style>
/* CSS limpo para uma única scrollbar funcional */
.choices__list--dropdown {
    max-height: 200px !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
}

.choices__list--dropdown::-webkit-scrollbar {
    width: 12px !important;
}

.choices__list--dropdown::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 6px !important;
}

.choices__list--dropdown::-webkit-scrollbar-thumb {
    background: #888 !important;
    border-radius: 6px !important;
}

.choices__list--dropdown::-webkit-scrollbar-thumb:hover {
    background: #555 !important;
}
</style>
@endpush

@section('content')
<div class="content pt-3">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-3">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('contas-a-pagar.index') }}">Contas a Pagar</a></li>
            <li class="breadcrumb-item active" aria-current="page">Dados do Pagamento</li>
        </ol>
    </nav>

    <div class="mb-4">
        <h2>Dados do Pagamento</h2>
        <p class="text-muted">Preencha os dados do pagamento.</p>
    </div>

    <div class="progress mb-4">
        <div class="progress-bar" role="progressbar" style="width: {{ ($step / 5) * 100 }}%;" aria-valuenow="{{ $step }}" aria-valuemin="1" aria-valuemax="5">
            Passo {{ $step }} de 5
        </div>
    </div>

    <form id="form-dados-pagamento" action="{{ route('contas-a-pagar.processar-dados-pagamento') }}" method="POST" novalidate>
        @csrf

        <div class="row">
            <!-- Evento -->
            <div class="col-12 mb-3">
                <label for="evento_id" class="form-label">Evento(s)</label>
                <select class="form-select" id="evento_id" name="evento_id[]" multiple required>
                    @foreach($eventos as $evento)
                        <option value="{{ $evento->id }}"
                            @if(session('conta_a_pagar.evento_ids') && in_array($evento->id, session('conta_a_pagar.evento_ids'))) selected @endif>
                            {{ $evento->display_text }}
                        </option>
                    @endforeach
                </select>
                <div class="invalid-feedback">Por favor, selecione pelo menos um evento.</div>
                <button type="button" class="btn btn-success mt-2" id="btn-adicionar-evento" data-bs-toggle="modal" data-bs-target="#modalAdicionarEvento">
                    <span class="fas fa-calendar-alt"></span> Novo Evento
                </button>
            </div>

            <!-- Conta Bancária -->
            <div class="col-12 mb-3">
                <label for="contas_bancarias_id" class="form-label">Conta Bancária</label>
                <select class="form-select @error('contas_bancarias_id') is-invalid @enderror" id="contas_bancarias_id" name="contas_bancarias_id" data-choices="data-choices" data-options='{"removeItemButton":false,"placeholder":true}' required>
                    <option value="" disabled {{ !session('conta_a_pagar.contas_bancarias_id') ? 'selected' : '' }}>Selecione uma conta bancária...</option>
                    @foreach($contasBancarias as $conta)
                        <option value="{{ $conta->id }}" {{ session('conta_a_pagar.contas_bancarias_id') == $conta->id ? 'selected' : '' }}>
                            Empresa: {{ $conta->empresa->nome_fantasia ?? 'Empresa Desconhecida' }} -
                            Banco: {{ $conta->banco }} -
                            Agência: {{ $conta->agencia }} -
                            Conta: {{ $conta->conta_corrente }}
                        </option>
                    @endforeach
                </select>
                @error('contas_bancarias_id')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @else
                    <div class="invalid-feedback">Por favor, selecione uma conta bancária.</div>
                @enderror
            </div>

            <!-- Plano de Contas -->
            <div class="col-12 mb-3">
                <label for="plano_de_conta_id" class="form-label">
                    Plano de Contas
                    <i class="fas fa-magic text-primary ms-1" title="Auto-preenchimento baseado no fornecedor"></i>
                </label>
                
                <!-- Campo hidden para submissão quando há plano vinculado -->
                <input type="hidden" id="plano_de_conta_hidden" name="plano_de_conta_id_hidden" value="">
                
                <!-- Container para plano vinculado (será preenchido via JavaScript) -->
                <div id="plano-vinculado-container" class="mb-2" style="display: none;">
                    <div class="card border-success">
                        <div class="card-body py-2 px-3">
                            <div class="d-flex align-items-center justify-content-between">
                                <div>
                                    <i class="fas fa-link text-success me-2"></i>
                                    <strong class="text-success">Plano Vinculado ao Fornecedor:</strong>
                                    <span id="plano-vinculado-texto" class="ms-2"></span>
                                </div>
                                <div>
                                    <button type="button" id="btn-usar-vinculado" class="btn btn-success btn-sm me-2">
                                        <i class="fas fa-check me-1"></i>Usar Este
                                    </button>
                                    <button type="button" id="btn-escolher-outro" class="btn btn-outline-secondary btn-sm">
                                        <i class="fas fa-edit me-1"></i>Escolher Outro
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Select de planos de contas -->
                <div id="select-planos-container">
                    <select class="form-select" id="plano_de_conta_id" name="plano_de_conta_id" required>
                        <option value="" disabled {{ !session('conta_a_pagar.plano_de_conta_id') ? 'selected' : '' }}>Selecione um plano de contas...</option>
                        @foreach($planosDeContas as $plano)
                            <option value="{{ $plano->id }}" {{ session('conta_a_pagar.plano_de_conta_id') == $plano->id ? 'selected' : '' }}>
                                {{ $plano->codigo }} - {{ $plano->descricao }}
                            </option>
                        @endforeach
                    </select>
                    @error('plano_de_conta_id')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @else
                        <div class="invalid-feedback">Por favor, selecione um plano de contas.</div>
                    @enderror
                </div>
                
                <!-- Container para notificações de auto-preenchimento -->
                <div id="auto-preenchimento-container" class="mt-2"></div>
            </div>

        <div class="row">
            <div class="col-md-4 mb-3">
                <label for="valor" class="form-label">Valor</label>
                <div class="input-group">
                    <span class="input-group-text">R$</span>
                    <input type="text" class="form-control" id="valor" name="valor" required value="{{ old('valor', session('conta_a_pagar.valor') ? number_format(session('conta_a_pagar.valor'), 2, ',', '.') : '') }}">
                </div>
                @error('valor')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @else
                    <div class="invalid-feedback">Por favor, informe o valor.</div>
                @enderror
            </div>

            <div class="col-md-4 mb-3">
                <label for="quantidade_contas" class="form-label">Quantidade de Contas</label>
                <input type="number" class="form-control @error('quantidade_contas') is-invalid @enderror" id="quantidade_contas" name="quantidade_contas" min="1" max="100" step="1" required value="{{ old('quantidade_contas', session('conta_a_pagar.quantidade_contas', 1)) }}" placeholder="1">
                @error('quantidade_contas')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @else
                    <div class="invalid-feedback">Por favor, informe a quantidade de contas.</div>
                @enderror
                <small class="form-text text-muted">
                    Quantas contas idênticas criar (1-100)
                </small>
            </div>

            <div class="col-md-4 mb-3">
                <label for="numero_nota" class="form-label">Número da Nota</label>
                <input type="text" class="form-control @error('numero_nota') is-invalid @enderror" id="numero_nota" name="numero_nota" placeholder="Informe o número da nota" value="{{ old('numero_nota', session('conta_a_pagar.numero_nota') ?? '') }}">
                @error('numero_nota')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <div class="row">
            <div class="col-12 mb-3">
                <label for="descricao" class="form-label">Descrição</label>
                <textarea class="form-control" id="descricao" name="descricao" rows="3" placeholder="Descrição opcional (será aplicada a todas as contas criadas)">{{ old('descricao', session('conta_a_pagar.descricao') ?? '') }}</textarea>
            </div>
        </div>

        <div class="d-flex justify-content-between">
            <a href="{{ route('contas-a-pagar.escolher-fornecedor') }}" class="btn btn-secondary">
                <span class="fas fa-arrow-left"></span> Voltar
            </a>
            <button type="submit" class="btn btn-primary">
                <span class="fas fa-arrow-right"></span> Avançar para parcelas
            </button>
        </div>
    </form>
</div>

@include('contas_a_pagar.partials.modal-adicionar-evento')
@endsection

@push('scripts-custom')
<script src="{{ asset('vendors/choices/choices.min.js') }}"></script>
<script src="{{ asset('vendors/flatpickr/flatpickr.min.js') }}"></script>
@include('contas_a_pagar.scripts.dados-pagamento')
@include('contas_a_pagar.scripts.auto-preenchimento')
@endpush