@extends('layouts.app')

@section('title', 'Nova Cobrança')

@section('sidebar')
    <div class="nav-section">Principal</div>
    <a href="{{ route('company.dashboard') }}" class="nav-link"><i class="bi bi-speedometer2"></i> Dashboard</a>
    <div class="nav-section">Financeiro</div>
    <a href="{{ route('company.cobrancas.index') }}" class="nav-link"><i class="bi bi-receipt"></i> Cobranças</a>
    <a href="{{ route('company.cobrancas.create') }}" class="nav-link active"><i class="bi bi-plus-circle"></i> Nova Cobrança</a>
    <div class="nav-section">Cadastros</div>
    <a href="{{ route('company.clientes.index') }}" class="nav-link"><i class="bi bi-people"></i> Clientes</a>
@endsection

@section('content')
<div class="d-flex align-items-center gap-2 mb-4">
    <a href="{{ route('company.cobrancas.index') }}" class="btn btn-sm btn-outline-secondary">
        <i class="bi bi-arrow-left"></i>
    </a>
    <div>
        <h4 class="fw-bold mb-0">Nova Cobrança</h4>
        <p class="text-muted small mb-0">Crie uma nova cobrança para um cliente</p>
    </div>
</div>

<form action="{{ route('company.cobrancas.store') }}" method="POST" id="cobrancaForm">
    @csrf
    <div class="row g-3">
        {{-- Main --}}
        <div class="col-xl-8">
            <div class="card mb-3">
                <div class="card-header bg-transparent border-0 pt-3 pb-0">
                    <h6 class="fw-semibold mb-0">Dados da Cobrança</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label fw-semibold small">Cliente *</label>
                            <select name="cliente_id" class="form-select" required>
                                <option value="">Selecione o cliente...</option>
                                @foreach($clientes as $c)
                                <option value="{{ $c->id }}" {{ $clienteId == $c->id ? 'selected' : '' }}>
                                    {{ $c->nome }} {{ $c->cpf_cnpj ? '— ' . $c->cpf_cnpj_formatado : '' }}
                                </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold small">Descrição *</label>
                            <input type="text" name="descricao" class="form-control" placeholder="Ex: Mensalidade Janeiro/2025"
                                value="{{ old('descricao') }}" required maxlength="255">
                        </div>
                        <div class="col-sm-6">
                            <label class="form-label fw-semibold small">Valor (R$) *</label>
                            <div class="input-group">
                                <span class="input-group-text">R$</span>
                                <input type="text" id="valorDisplay" class="form-control" placeholder="0,00" required>
                                <input type="hidden" name="valor" id="valorCentavos">
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <label class="form-label fw-semibold small">Data de Vencimento *</label>
                            <input type="date" name="data_vencimento" class="form-control"
                                value="{{ old('data_vencimento', now()->addDays(5)->format('Y-m-d')) }}" required>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Payment Method --}}
            <div class="card mb-3">
                <div class="card-header bg-transparent border-0 pt-3 pb-0">
                    <h6 class="fw-semibold mb-0">Método de Pagamento</h6>
                </div>
                <div class="card-body">
                    <div class="row g-2" id="methodCards">
                        @foreach([
                            ['pix', 'bi-qr-code', 'PIX', 'bg-success'],
                            ['boleto', 'bi-upc-scan', 'Boleto', 'bg-warning'],
                            ['cartao_credito', 'bi-credit-card', 'Cartão Crédito', 'bg-primary'],
                            ['link', 'bi-link-45deg', 'Link', 'bg-info'],
                        ] as [$val, $icon, $label, $bg])
                        <div class="col-6 col-sm-3">
                            <div class="border rounded-3 p-3 text-center cursor-pointer method-card {{ old('metodo_pagamento') === $val ? 'border-primary bg-primary bg-opacity-10' : '' }}"
                                data-value="{{ $val }}" role="button">
                                <div class="badge {{ $bg }} mb-2 px-3 py-2">
                                    <i class="bi {{ $icon }} fs-5"></i>
                                </div>
                                <div class="fw-semibold small">{{ $label }}</div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <input type="hidden" name="metodo_pagamento" id="metodoPagamento" value="{{ old('metodo_pagamento') }}" required>

                    {{-- Parcelas (só para cartão) --}}
                    <div id="parcelasBlock" class="mt-3" style="display:none">
                        <label class="form-label fw-semibold small">Número de Parcelas</label>
                        <select name="numero_parcelas" class="form-select form-select-sm" style="max-width:200px">
                            @for($i = 1; $i <= 12; $i++)
                            <option value="{{ $i }}" {{ old('numero_parcelas', 1) == $i ? 'selected' : '' }}>{{ $i }}x</option>
                            @endfor
                        </select>
                    </div>
                </div>
            </div>

            {{-- Fees & Discounts --}}
            <div class="card">
                <div class="card-header bg-transparent border-0 pt-3 pb-0">
                    <h6 class="fw-semibold mb-0">Juros, Multas e Descontos</h6>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-sm-4">
                            <label class="form-label fw-semibold small">Juros (% a.m.)</label>
                            <input type="number" name="juros_percentual" class="form-control" value="{{ old('juros_percentual', 0) }}" min="0" max="100" step="0.01">
                        </div>
                        <div class="col-sm-4">
                            <label class="form-label fw-semibold small">Multa (%)</label>
                            <input type="number" name="multa_percentual" class="form-control" value="{{ old('multa_percentual', 0) }}" min="0" max="100" step="0.01">
                        </div>
                        <div class="col-sm-4">
                            <label class="form-label fw-semibold small">Desconto (%)</label>
                            <input type="number" name="desconto_percentual" class="form-control" value="{{ old('desconto_percentual', 0) }}" min="0" max="100" step="0.01">
                        </div>
                    </div>
                    <div class="mt-3">
                        <label class="form-label fw-semibold small">Instruções / Observações</label>
                        <textarea name="instrucoes" class="form-control" rows="2" placeholder="Instruções para o boleto ou observações gerais">{{ old('instrucoes') }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        {{-- Summary --}}
        <div class="col-xl-4">
            <div class="card sticky-top" style="top:80px">
                <div class="card-header bg-transparent border-0 pt-3 pb-0">
                    <h6 class="fw-semibold mb-0">Resumo</h6>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between small mb-2">
                        <span class="text-muted">Valor</span>
                        <span id="resumoValor">R$ 0,00</span>
                    </div>
                    <div class="d-flex justify-content-between small mb-2">
                        <span class="text-muted">Desconto</span>
                        <span id="resumoDesconto" class="text-success">- R$ 0,00</span>
                    </div>
                    <hr>
                    <div class="d-flex justify-content-between fw-bold">
                        <span>Total</span>
                        <span id="resumoTotal" class="text-primary fs-5">R$ 0,00</span>
                    </div>
                    <div class="mt-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="recorrente" id="recorrente" value="1">
                            <label class="form-check-label small fw-semibold" for="recorrente">Cobrança Recorrente</label>
                        </div>
                        <div id="recorrenciaBlock" style="display:none" class="mt-2">
                            <select name="frequencia_recorrencia" class="form-select form-select-sm">
                                <option value="mensal">Mensal</option>
                                <option value="semanal">Semanal</option>
                                <option value="trimestral">Trimestral</option>
                                <option value="anual">Anual</option>
                            </select>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary w-100 mt-3" id="btnSubmit">
                        <i class="bi bi-check-lg me-1"></i> Criar Cobrança
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@push('scripts')
<script>
// Currency mask
document.getElementById('valorDisplay').addEventListener('input', function() {
    let v = this.value.replace(/\D/g, '');
    let c = parseInt(v || '0');
    this.value = (c / 100).toLocaleString('pt-BR', {minimumFractionDigits:2, maximumFractionDigits:2});
    document.getElementById('valorCentavos').value = c;
    updateSummary();
});

// Method selection
document.querySelectorAll('.method-card').forEach(card => {
    card.addEventListener('click', function() {
        document.querySelectorAll('.method-card').forEach(c => {
            c.classList.remove('border-primary', 'bg-primary', 'bg-opacity-10');
        });
        this.classList.add('border-primary', 'bg-primary', 'bg-opacity-10');
        const v = this.dataset.value;
        document.getElementById('metodoPagamento').value = v;
        document.getElementById('parcelasBlock').style.display = v === 'cartao_credito' ? 'block' : 'none';
    });
});

// Recorrente toggle
document.getElementById('recorrente').addEventListener('change', function() {
    document.getElementById('recorrenciaBlock').style.display = this.checked ? 'block' : 'none';
});

function updateSummary() {
    const valor = parseInt(document.getElementById('valorCentavos').value || 0);
    const descP = parseFloat(document.querySelector('[name=desconto_percentual]').value || 0);
    const desc = Math.round(valor * descP / 100);
    const total = valor - desc;

    document.getElementById('resumoValor').textContent = formatBRL(valor);
    document.getElementById('resumoDesconto').textContent = '- ' + formatBRL(desc);
    document.getElementById('resumoTotal').textContent = formatBRL(total);
}

function formatBRL(c) {
    return 'R$ ' + (c/100).toLocaleString('pt-BR', {minimumFractionDigits:2});
}

document.querySelectorAll('[name=desconto_percentual]').forEach(i => i.addEventListener('input', updateSummary));
</script>
@endpush