@php
    $platformFee = \App\Models\WabaPlatformSetting::billing('self_service_platform_fee', 50);
    $platformFeePercent = \App\Models\WabaPlatformSetting::billing('self_service_platform_fee_percent', 0);
    $lowBalanceThreshold = \App\Models\WabaPlatformSetting::billing('low_balance_threshold', 10000);
    $defaultMessagePrice = \App\Models\WabaPlatformSetting::billing('default_message_price', 366);
@endphp

<!-- Header Card -->
<div class="card shadow-sm border-0 mb-4" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
    <div class="card-body text-white py-4">
        <div class="row align-items-center">
            <div class="col-auto">
                <div class="bg-white bg-opacity-25 rounded-circle p-3">
                    <i class="ti ti-currency-dollar fs-1"></i>
                </div>
            </div>
            <div class="col">
                <h4 class="mb-1">Pengaturan Billing</h4>
                <p class="mb-0 opacity-75">Konfigurasi biaya platform dan harga pesan</p>
            </div>
        </div>
    </div>
</div>

<!-- Quick Summary -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card bg-primary text-white">
            <div class="card-body text-center py-3">
                <h3 class="mb-0">Rp {{ number_format($platformFee, 0, ',', '.') }}</h3>
                <small class="opacity-75">Platform Fee / Pesan</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-info text-white">
            <div class="card-body text-center py-3">
                <h3 class="mb-0">{{ $platformFeePercent }}%</h3>
                <small class="opacity-75">Fee Persentase</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-warning text-dark">
            <div class="card-body text-center py-3">
                <h3 class="mb-0">Rp {{ number_format($lowBalanceThreshold, 0, ',', '.') }}</h3>
                <small>Batas Saldo Rendah</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card bg-success text-white">
            <div class="card-body text-center py-3">
                <h3 class="mb-0">Rp {{ number_format($defaultMessagePrice, 0, ',', '.') }}</h3>
                <small class="opacity-75">Harga Default / Pesan</small>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Self Service Platform Fee -->
    <div class="col-md-6">
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white">
                <h6 class="mb-0"><i class="ti ti-receipt me-2"></i>Biaya Platform Self Service</h6>
            </div>
            <div class="card-body">
                <p class="text-muted small mb-4">
                    <i class="ti ti-info-circle me-1"></i>
                    Biaya yang dibebankan ke client Self Service per pesan. Bisa berupa fixed fee, persentase, atau kombinasi keduanya.
                </p>
                
                @foreach($settings[$groupKey] ?? [] as $setting)
                    @if($setting['key'] === 'self_service_platform_fee')
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                <i class="ti ti-cash text-success me-1"></i> Platform Fee (Fixed)
                            </label>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text">Rp</span>
                                <input type="number" 
                                       class="form-control" 
                                       name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                       value="{{ $setting['value'] }}"
                                       id="{{ $groupKey }}_{{ $setting['key'] }}"
                                       step="1"
                                       min="0">
                                <span class="input-group-text">/ pesan</span>
                            </div>
                            <small class="text-muted">Biaya tetap per pesan yang dikenakan ke client Self Service</small>
                        </div>
                    @endif
                    @if($setting['key'] === 'self_service_platform_fee_percent')
                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                <i class="ti ti-percentage text-info me-1"></i> Platform Fee (Persentase)
                            </label>
                            <div class="input-group input-group-lg">
                                <input type="number" 
                                       class="form-control" 
                                       name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                       value="{{ $setting['value'] }}"
                                       id="{{ $groupKey }}_{{ $setting['key'] }}"
                                       step="0.1"
                                       min="0"
                                       max="100">
                                <span class="input-group-text">%</span>
                            </div>
                            <small class="text-muted">Persentase dari biaya Meta yang ditambahkan sebagai platform fee</small>
                        </div>
                    @endif
                @endforeach

                <div class="alert alert-light border mb-0">
                    <h6 class="alert-heading small"><i class="ti ti-calculator me-1"></i>Contoh Perhitungan:</h6>
                    <p class="small mb-0">
                        Jika biaya Meta = Rp 300, Fee Fixed = Rp 50, Fee % = 10%<br>
                        <strong>Total = Rp 300 + Rp 50 + (10% × 300) = Rp 380</strong>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <!-- Other Billing Settings -->
    <div class="col-md-6">
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-success text-white">
                <h6 class="mb-0"><i class="ti ti-settings me-2"></i>Pengaturan Lainnya</h6>
            </div>
            <div class="card-body">
                @foreach($settings[$groupKey] ?? [] as $setting)
                    @if($setting['key'] === 'default_message_price')
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                <i class="ti ti-message-dollar text-primary me-1"></i> Harga Default per Pesan
                            </label>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text">Rp</span>
                                <input type="number" 
                                       class="form-control" 
                                       name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                       value="{{ $setting['value'] }}"
                                       id="{{ $groupKey }}_{{ $setting['key'] }}"
                                       step="1"
                                       min="0">
                            </div>
                            <small class="text-muted">Harga default jika tidak ada pricing template spesifik dari Meta</small>
                        </div>
                    @endif
                    @if($setting['key'] === 'low_balance_threshold')
                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                <i class="ti ti-alert-triangle text-warning me-1"></i> Batas Saldo Rendah
                            </label>
                            <div class="input-group input-group-lg">
                                <span class="input-group-text">Rp</span>
                                <input type="number" 
                                       class="form-control" 
                                       name="settings[{{ $groupKey }}][{{ $setting['key'] }}]"
                                       value="{{ $setting['value'] }}"
                                       id="{{ $groupKey }}_{{ $setting['key'] }}"
                                       step="1000"
                                       min="0">
                            </div>
                            <small class="text-muted">Client akan mendapat notifikasi jika saldo di bawah nilai ini</small>
                        </div>
                    @endif
                @endforeach

                <div class="alert alert-info mb-0">
                    <h6 class="alert-heading small"><i class="ti ti-bulb me-1"></i>Tips:</h6>
                    <ul class="small mb-0 ps-3">
                        <li>Set batas saldo rendah sesuai dengan rata-rata pemakaian harian client</li>
                        <li>Harga default digunakan untuk template baru yang belum ada di pricing Meta</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>