@extends('layouts.master')

@section('content')
<div class="header bg-primary text-white p-3 mb-3 rounded mt-3">
    <h3 class="m-0 font-weight-normal">Range Plafond</h3>
</div>
<div class="card">
    <div class="card-header">
        <h6 class="card-title">Pengaturan Range Plafond</h6>
    </div>
    <div class="card-body">

        @php
            $low = $ranges->where('rating', 'Kurang Terpercaya')->first() ?? (object)['plafond_minimal'=>0, 'plafond_maksimal'=>0];
            $middle = $ranges->where('rating', 'Terpercaya')->first() ?? (object)['plafond_minimal'=>0, 'plafond_maksimal'=>0];
            $high = $ranges->where('rating', 'Sangat Terpercaya')->first() ?? (object)['plafond_minimal'=>0];
        @endphp

        <form action="{{ route('range-plafond.update') }}" method="POST">
            @csrf
            <div class="row">
                <div class="col-md-4">
                    <div class="card mb-3">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th class="bg-danger text-white">Low</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Nilai Minimum</label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="text" name="kurang_terpercaya_min" class="form-control plafon-rupiah" value="{{ number_format($low->plafond_minimal ?? 0, 0, ',', '.') }}" required oninput="this.value = formatRupiah(this.value)">
                                </div>
                                <small class="text-muted">Batas minimal saat ini: Rp {{ number_format($low->plafond_minimal ?? 0, 0, ',', '.') }}</small>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Nilai Maksimum</label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="text" name="kurang_terpercaya_max" class="form-control plafon-rupiah" value="{{ number_format($low->plafond_maksimal ?? 0, 0, ',', '.') }}" required oninput="this.value = formatRupiah(this.value)">
                                </div>
                                <small class="text-muted">Batas maksimal saat ini: Rp {{ number_format($low->plafond_maksimal ?? 0, 0, ',', '.') }}</small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card mb-3">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th class="bg-warning text-white">Middle</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Nilai Minimum</label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="text" name="terpercaya_min" class="form-control plafon-rupiah" value="{{ number_format($middle->plafond_minimal ?? 0, 0, ',', '.') }}" required oninput="this.value = formatRupiah(this.value)">
                                </div>
                                <small class="text-muted">Batas minimal saat ini: Rp {{ number_format($middle->plafond_minimal ?? 0, 0, ',', '.') }}</small>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Nilai Maksimum</label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="text" name="terpercaya_max" class="form-control plafon-rupiah" value="{{ number_format($middle->plafond_maksimal ?? 0, 0, ',', '.') }}" required oninput="this.value = formatRupiah(this.value)">
                                </div>
                                <small class="text-muted">Batas maksimal saat ini: Rp {{ number_format($middle->plafond_maksimal ?? 0, 0, ',', '.') }}</small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card mb-3">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th class="bg-success text-white">High</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label class="form-label">Nilai Minimum</label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="text" name="sangat_terpercaya_min" class="form-control plafon-rupiah" value="{{ number_format($high->plafond_minimal ?? 0, 0, ',', '.') }}" required oninput="this.value = formatRupiah(this.value)">
                                </div>
                                <small class="text-muted">Batas minimal saat ini: Rp {{ number_format($high->plafond_minimal ?? 0, 0, ',', '.') }}</small>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Nilai Maksimum</label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="text" class="form-control" value="Tidak Terbatas" disabled>
                                </div>
                                <small class="text-muted">Tidak ada batas maksimal</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                </div>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<style>
    .text-muted {
        font-size: 0.85rem;
        margin-top: 0.25rem;
    }
    .input-group {
        margin-bottom: 0.25rem;
    }
</style>

<script>
// Format rupiah untuk input plafon
function formatRupiah(angka) {
    let number_string = angka.replace(/[^\d]/g, ''),
        sisa = number_string.length % 3,
        rupiah = number_string.substr(0, sisa),
        ribuan = number_string.substr(sisa).match(/\d{3}/g);
    if (ribuan) {
        let separator = sisa ? '.' : '';
        rupiah += separator + ribuan.join('.');
    }
    return rupiah;
}
// Event input: format otomatis saat mengetik
$(document).on('input', '.plafon-rupiah', function() {
    this.value = formatRupiah(this.value);
});
// Pastikan saat submit, semua input plafon diubah ke angka
$(document).on('submit', 'form', function() {
    $(this).find('input.plafon-rupiah').val(function(_, v) {
        return v.replace(/\D/g, '');
    });
});
</script>
@endpush
@endsection