@extends('layouts.app')

@section('content')
<div class="nk-block">
    <div class="card card-bordered">
        <div class="card-inner">
            <h5 class="title">Form Transaksi Non Program</h5>
            <hr>
            <form action="{{ route('yayasan.transaksi.non-program.store') }}" method="POST">
                @csrf

                <!-- Hidden unit_id -->
                <input type="hidden" id="unit_id" value="{{ $userUnitId }}"> <!-- Replace with your logic -->

                <div class="row g-4">
                    <div class="col-md-4">
                        <label class="form-label">Debit / Kredit</label>
                        <select name="debit_kredit" class="form-select" id="debit_kredit" required>
                            <option value="">-- Pilih Tipe --</option>
                            <option value="debit">Debit</option>
                            <option value="kredit">Kredit</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Tanggal Transaksi</label>
                        <input type="date" name="tanggal" class="form-control" required>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label">Nominal</label>
                        <input type="text" class="form-control" id="nominal_display" placeholder="Masukkan nominal" autocomplete="off">
                        <input type="hidden" name="nominal" id="nominal">
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Dari Akun</label>
                        <select name="dari_akun_id" class="form-select" id="select-dari-akun" required>
                            <option value="">-- Pilih Akun Sumber --</option>
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label class="form-label">Ke Akun</label>
                        <select name="ke_akun_id" class="form-select" id="select-ke-akun" required>
                            <option value="">-- Pilih Akun Tujuan --</option>
                        </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>

                <hr>
                <div class="mt-4 float-end">
                    <a href="{{ route('yayasan.transaksi.non-program.index') }}" class="btn btn-light">Batal</a>
                    <button type="submit" class="btn btn-primary">
                        Simpan <em class="icon ni ni-send-alt ms-1"></em>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function () {
        // Format nominal input
        $('#nominal_display').on('input', function () {
            let number_string = $(this).val().replace(/[^,\d]/g, '').toString();
            let split = number_string.split(',');
            let sisa = split[0].length % 3;
            let rupiah = split[0].substr(0, sisa);
            let ribuan = split[0].substr(sisa).match(/\d{3}/gi);

            if (ribuan) {
                let separator = sisa ? '.' : '';
                rupiah += separator + ribuan.join('.');
            }

            rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
            $(this).val(rupiah);
            $('#nominal').val(number_string.replace(/\./g, ''));
        });

        // Handle change of debit_kredit
        $('#debit_kredit').on('change', function () {
            const tipe = $(this).val();
            const unitId = $('#unit_id').val();

            if (tipe === 'debit') {
                loadAkun('dari', '#select-dari-akun');
                loadAkun('ke', '#select-ke-akun', unitId);
            } else if (tipe === 'kredit') {
                loadAkun('dari', '#select-dari-akun', unitId);
                loadAkun('ke', '#select-ke-akun');
            } else {
                $('#select-dari-akun').html('<option value="">-- Pilih Akun Sumber --</option>');
                $('#select-ke-akun').html('<option value="">-- Pilih Akun Tujuan --</option>');
            }
        });

        function loadAkun(type, targetSelect, unitId = null) {
            let url = `{{ route('yayasan.transaksi.non-program.get-akun') }}?type=${type}`;
            if (unitId) {
                url += `&unit_id=${unitId}`;
            }

            $.ajax({
                url: url,
                method: 'GET',
                success: function (response) {
                    const $select = $(targetSelect);
                    $select.empty();
                    $select.append('<option value="">-- Pilih Akun --</option>');
                    response.forEach(function (akun) {
                        $select.append(`<option value="${akun.kode_akun}">${akun.kode_akun} - ${akun.nama_akun}</option>`);
                    });
                },
                error: function () {
                    alert('Gagal memuat akun. Silakan coba lagi.');
                }
            });
        }
    });
</script>
@endpush