@php
$title = 'Novo Pagamento';
@endphp

<div>
    <nav aria-label="breadcrumb" class="mb-2" style="margin-top: 10px;">
        <ol class="breadcrumb bg-transparent px-0 py-1 mb-1" style="font-size: 0.98rem;">
            <li class="breadcrumb-item"><a href="/" class="text-decoration-none text-secondary">Início</a></li>
            <li class="breadcrumb-item"><a href="#" onclick="carregarConteudo(`{{ route('pagamentos.list') }}`)" class="text-decoration-none text-secondary">Pagamentos</a></li>
            <li class="breadcrumb-item active text-dark" aria-current="page">Novo Pagamento</li>
        </ol>
    </nav>

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold mb-0" style="font-size:2.1rem; letter-spacing:1px;">
                <i class="bi bi-plus-circle me-2 text-primary"></i>Novo Pagamento
            </h1>
            <span class="text-muted small">Cadastre um novo pagamento</span>
        </div>
        <div>
            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="carregarConteudo(`{{ route('pagamentos.list') }}`)">
                <i class="bi bi-arrow-left me-2"></i>Voltar
            </button>
        </div>
    </div>

    <div class="card shadow border-0 mb-4">
        <div class="card-header bg-white border-0 pb-1">
            <span class="fw-bold">Dados do Pagamento</span>
        </div>
        <div class="card-body">
            <form id="formPagamento" method="POST" action="{{ route('pagamentos.store') }}">
                @csrf
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="cliente_id" class="form-label">Cliente <span class="text-danger">*</span></label>
                        <select class="form-select" id="cliente_id" name="cliente_id" required>
                            <option value="">Selecione um cliente</option>
                            @foreach($clientes ?? [] as $cliente)
                                <option value="{{ $cliente->id }}">{{ $cliente->nome }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="valor" class="form-label">Valor <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <span class="input-group-text">R$</span>
                            <input type="text" class="form-control" id="valor" name="valor" placeholder="0,00" required>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="forma_pagamento" class="form-label">Forma de Pagamento <span class="text-danger">*</span></label>
                        <select class="form-select" id="forma_pagamento" name="forma_pagamento" required>
                            <option value="">Selecione uma forma</option>
                            <option value="DINHEIRO">Dinheiro</option>
                            <option value="CARTAO_CREDITO">Cartão de Crédito</option>
                            <option value="CARTAO_DEBITO">Cartão de Débito</option>
                            <option value="PIX">PIX</option>
                            <option value="TRANSFERENCIA">Transferência Bancária</option>
                            <option value="BOLETO">Boleto Bancário</option>
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="PENDENTE">Pendente</option>
                            <option value="PAGO">Pago</option>
                            <option value="VENCIDO">Vencido</option>
                            <option value="CANCELADO">Cancelado</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="data_vencimento" class="form-label">Data de Vencimento <span class="text-danger">*</span></label>
                        <input type="date" class="form-control" id="data_vencimento" name="data_vencimento" required>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="data_pagamento" class="form-label">Data de Pagamento</label>
                        <input type="date" class="form-control" id="data_pagamento" name="data_pagamento">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="numero_documento" class="form-label">Número do Documento</label>
                        <input type="text" class="form-control" id="numero_documento" name="numero_documento" placeholder="Ex: 001234">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="juros" class="form-label">Juros (%)</label>
                        <input type="number" class="form-control" id="juros" name="juros" step="0.01" placeholder="0,00">
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="desconto" class="form-label">Desconto</label>
                        <div class="input-group">
                            <span class="input-group-text">R$</span>
                            <input type="text" class="form-control" id="desconto" name="desconto" placeholder="0,00">
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label for="multa" class="form-label">Multa</label>
                        <div class="input-group">
                            <span class="input-group-text">R$</span>
                            <input type="text" class="form-control" id="multa" name="multa" placeholder="0,00">
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label for="observacoes" class="form-label">Observações</label>
                    <textarea class="form-control" id="observacoes" name="observacoes" rows="3" placeholder="Observações sobre o pagamento..."></textarea>
                </div>

                <div class="d-flex justify-content-end gap-2">
                    <button type="button" class="btn btn-outline-secondary" onclick="carregarConteudo(`{{ route('pagamentos.list') }}`)">
                        <i class="bi bi-x-circle me-2"></i>Cancelar
                    </button>
                    <button type="button" class="btn btn-primary" onclick="salvar('{{ route('pagamentos.store') }}', 'formNovoPagamento')">
                        <i class="bi bi-check-circle me-2"></i>Salvar Pagamento
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>