@extends('layouts.app')

@section('content')
<div class="nk-block">
    <div class="card card-bordered">
        <div class="card-inner">
            <h5 class="title">Form Transfer Dana (Step 2)</h5>

            <form action="{{ route('yayasan.transaksi.penyaluran-dana.wizardStore', ['noReferensi' => $noReferensi]) }}" method="POST">
                @csrf

                <div class="row g-4">
                    <div class="col-md-6">
                        <label class="form-label">Tanggal Transfer</label>
                        <input type="date" name="tanggal" class="form-control" value="{{ old('tanggal', date('Y-m-d')) }}" required>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Nominal</label>
                        <input type="text" class="form-control" id="nominal_display" placeholder="Masukkan nominal" autocomplete="off" value="{{ number_format($totalNominal, 0, ',', '.') }}">
                        <input type="hidden" name="nominal" id="nominal" value="{{ $totalNominal }}">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Dari Akun</label>
                        <select name="dari_akun_id" class="form-select js-select2" id="select-dari-akun" data-search="on" data-placeholder="-- Pilih Akun Sumber --" required>
                            <option value="">-- Pilih Akun Sumber --</option>
                            @foreach($akunKasPengirim as $akun)
                            <option value="{{ $akun->kode_akun }}">{{ $akun->kode_akun }} - {{ $akun->nama_akun }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Ke Akun</label>
                        <select name="ke_akun_id" class="form-select js-select2" id="select-ke-akun" data-search="on" data-placeholder="-- Pilih Akun Tujuan --" required>
                            <option value="">-- Pilih Akun Tujuan --</option>
                            @foreach($akunKasPenerima as $akun)
                            <option value="{{ $akun->kode_akun }}">{{ $akun->kode_akun }} - {{ $akun->nama_akun }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="col-12">
                        <label class="form-label">Deskripsi (Opsional)</label>
                        <textarea name="deskripsi" class="form-control" rows="2">{{ old('deskripsi') }}</textarea>
                    </div>
                </div>

                <div class="d-flex justify-content-end mt-3">
                    <a href="{{ route('yayasan.transaksi.penyaluran-dana.wizardStep1', ['noReferensi' => $noReferensi]) }}" class="btn btn-light">Kembali ke Step 1</a>
                    <button type="submit" class="btn btn-primary">
                        Proses Transfer <em class="icon ni ni-send-alt ms-1"></em>
                    </button>
                    
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
 $(document).ready(function () {
    function formatRupiahValue(str) {
        if (!str) return '';
        let s = String(str).replace(/[^\d,]/g, '');
        const parts = s.split(',');
        let intPart = parts[0].replace(/^0+/, '') || '0';
        let decPart = parts[1] ? parts[1].slice(0, 2) : '';
        let rgx = /(\d+)(\d{3})/;
        let out = intPart;
        while (rgx.test(out)) {
            out = out.replace(rgx, '$1' + '.' + '$2');
        }
        return decPart ? out + ',' + decPart : out;
    }
    function toNumeric(str) {
        if (!str) return '';
        let v = String(str).replace(/\./g, '');
        v = v.replace(',', '.');
        return v;
    }
    const $display = $('#nominal_display');
    const $hidden = $('#nominal');
    $display.on('input', function (e) {
        const formatted = formatRupiahValue(e.target.value);
        e.target.value = formatted;
        $hidden.val(toNumeric(formatted));
        const len = e.target.value.length;
        e.target.setSelectionRange(len, len);
    });
    $('form').on('submit', function() {
        const val = $('#nominal_display').val();
        $('#nominal').val(toNumeric(val));
    });

    const $dariSelect = $('#select-dari-akun');
    const $keSelect = $('#select-ke-akun');

    $dariSelect.on('change', function () {
        const selectedValue = $(this).val();

        $keSelect.find('option').each(function () {
            if ($(this).val() === selectedValue && selectedValue !== '') {
                $(this).prop('disabled', true);
                if ($keSelect.val() === selectedValue) {
                    $keSelect.val('').trigger('change');
                }
            } else {
                $(this).prop('disabled', false);
            }
        });

        $keSelect.trigger('change.select2');
    });
});
</script>
@endpush