@extends('layouts.app')

@section('title', 'Pengisian Saldo Awal')

@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-xl">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="nk-block-head nk-block-head-sm">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">
                            <h3 class="nk-block-title page-title">Pengisian Saldo Awal</h3>
                            <div class="nk-block-des text-soft">
                                <p>Formulir untuk memasukkan saldo awal akun pada awal periode akuntansi.</p>
                            </div>
                        </div>
                        <div class="nk-block-head-content">
                            {{-- Saldo awal biasanya tidak ada daftar kembali karena ini transaksi satu kali --}}
                            {{-- <a href="{{ route('yayasan.transaksi.saldo-awal.index') }}" class="btn btn-outline-light bg-white d-sm-inline-flex"><em class="icon ni ni-arrow-left"></em><span>Kembali</span></a> --}}
                        </div>
                    </div>
                </div>

                <div class="nk-block">
                    <div class="card card-bordered">
                        <div class="card-inner">
                            @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <h5>Terjadi Kesalahan Validasi:</h5>
                                <ul class="mb-0">
                                    @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            @endif

                            @if (session('success'))
                            <div class="alert alert-success alert-icon">
                                <em class="icon ni ni-check-circle"></em> {{ session('success') }}
                            </div>
                            @endif
                            @if (session('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                {{ session('error') }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            @endif

                            <form action="{{ route('yayasan.transaksi.saldo-awal.store') }}" method="POST" class="form-validate">
                                @csrf

                                {{-- Bagian Header Transaksi Saldo Awal --}}
                                <h5 class="title mb-3">Informasi Saldo Awal</h5>
                                <div class="row g-gs">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="tanggal_transaksi">Tanggal Saldo Awal <span class="text-danger">*</span></label>
                                            <div class="form-control-wrap">
                                                <input type="text" class="form-control @error('tanggal_transaksi') is-invalid @enderror" id="tanggal_transaksi" name="tanggal_transaksi" value="{{ old('tanggal_transaksi', $defaultTanggal) }}" required>
                                            </div>
                                            @error('tanggal_transaksi')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="periode_id">Periode Pelaporan<span class="text-danger"> *</span></label>
                                            <div class="form-control-wrap">
                                                <select class="form-control @error('periode_id') is-invalid @enderror" id="periode_id" name="periode_id" required>
                                                    <option value="">-- Pilih Periode Pelaporan --</option>
                                                    @foreach($periode as $p)
                                                    <option value="{{ $p->id }}" {{ old('periode_id', $defaultPeriode) == $p->id ? 'selected' : '' }}>
                                                        Semester {{ $p->semester }} - {{ $p->tahun }}
                                                    </option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            @error('periode')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label class="form-label" for="no_referensi">Nomor Bukti</label>
                                            <div class="form-control-wrap">
                                                <input type="text" class="form-control @error('no_referensi') is-invalid @enderror" id="no_referensi" name="no_referensi" value="{{ old('no_referensi', $nextNomorBukti) }}" placeholder="Otomatis jika dikosongkan">
                                            </div>
                                            @error('no_referensi')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="keterangan">Keterangan Umum</label>
                                            <div class="form-control-wrap">
                                                <textarea class="form-control @error('keterangan') is-invalid @enderror" id="keterangan" name="keterangan">{{ old('keterangan', 'Entri Saldo Awal ' . $periodeActive->semester . ' - ' . $periodeActive->tahun) }}</textarea>
                                            </div>
                                            @error('keterangan')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="unit_id_header">Unit Terkait (Opsional, untuk keseluruhan transaksi)</label>
                                            <div class="form-control-wrap">
                                                <select class="form-control form-select @error('unit_id_header') is-invalid @enderror" id="unit_id_header" name="unit_id_header" data-search="on">
                                                    <option value="">-- Pilih Unit (Opsional) --</option>
                                                    @foreach($units as $unit)
                                                    <option value="{{ $unit->id }}" {{ old('unit_id_header') == $unit->id ? 'selected' : '' }}>{{ $unit->nama_unit }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            @error('unit_id_header')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                                        </div>
                                    </div>
                                    <!-- <div class="col-md-6">
                                        <div class="form-group">
                                            <label class="form-label" for="kode_akun">Akun</label>
                                            <div class="form-control-wrap">
                                                <select class="form-control form-select @error('kode_akun') is-invalid @enderror" id="kode_akun" name="kode_akun" data-search="on">
                                                    <option value="">-- Pilih Unit (Opsional) --</option>
                                                    @foreach($akuns as $akun)
                                                    <option value="{{ $akun->kode_akun }}" {{ old('kode_akun') == $akun->kode_akun ? 'selected' : '' }}>{{ $akun->kode_akun }} - {{ $akun->nama_akun }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            @error('kode_akun')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                                        </div>
                                    </div> -->
                                </div>

                                <hr class="preview-hr my-4">

                                {{-- Bagian Detail Akun Saldo Awal --}}
                                <h5 class="title mb-3">Detail Akun (Debit dan Kredit harus seimbang)</h5>
                                @error('details')
                                <div class="alert alert-danger">
                                    <strong>Kesalahan pada Detail Transaksi: {{ $message }}</strong>
                                </div>
                                @enderror

                                <div class="table-responsive" style="overflow-x: auto; -webkit-overflow-scrolling: touch;">
                                    <table class="table table-bordered" style="min-width: 900px;">
                                        <thead>
                                            <tr>
                                                <th style="width: 25%;">Akun COA</th>
                                                <th style="width: 20%;">Keterangan Item</th>
                                                <th style="width: 15%;" class="text-right">Debit (Rp)</th>
                                                <th style="width: 15%;" class="text-right">Kredit (Rp)</th>
                                                <th style="width: 15%;">Unit Detail (Opsional)</th>
                                                <th style="width: 10%;" class="text-center">Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody id="detail-container">
                                            @if (old('details'))
                                            @foreach (old('details') as $index => $detail)
                                            @include('yayasan.transaksi.saldo-awal._detail_row', [
                                            'index' => $index,
                                            'detail' => (object) $detail,
                                            'akuns' => $akuns,
                                            'units' => $units,
                                            ])
                                            @endforeach
                                            @else
                                            {{-- Default 2 baris awal --}}
                                            <!-- @include('yayasan.transaksi.saldo-awal._detail_row', ['index' => 0, 'detail' => null, 'akuns' => $akuns, 'units' => $units]) -->
                                            <!-- @include('yayasan.transaksi.saldo-awal._detail_row', ['index' => 1, 'detail' => null, 'akuns' => $akuns, 'units' => $units]) -->
                                            @endif
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <td colspan="2" class="text-right font-weight-bold">Total Seimbang</td>
                                                <td class="text-right font-weight-bold" id="total_debit_display">0,00</td>
                                                <td class="text-right font-weight-bold" id="total_kredit_display">0,00</td>
                                                <td></td>
                                                <td></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>

                                <button type="button" class="btn btn-outline-primary mt-3 float-end" id="add-detail-row">Tambah Baris Akun</button>
                                <br>
                                <br>
                                <hr>
                                <div class="col-12 mt-5">
                                    <div class="form-group float-end">
                                        <button type="submit" id="submitButton" class="btn btn-lg btn-primary" disabled><em class="icon ni ni-save"></em> <span>Simpan</span></button>
                                        {{-- Saldo awal biasanya tidak ada tombol batal kembali --}}
                                        {{-- <a href="{{ route('yayasan.transaksi.saldo-awal.index') }}" class="btn btn-lg btn-outline-light">Batal</a> --}}
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
{{-- Memuat CSS Flatpickr dari CDN --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

{{-- Memuat JS Flatpickr dari CDN --}}
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
{{-- Memuat JS Month Select Plugin untuk Flatpickr --}}
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/monthSelect/style.css" />


{{-- Memuat SweetAlert2 dari CDN (jika digunakan) --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    (function($) {
        "use strict";

        // Data dari PHP Controller
        const akunsData = @json($akunsDataJs);
        const unitsData = @json($unitsDataJs);

        // Inisialisasi Date Picker
        $('#tanggal_transaksi').flatpickr({

        });
        $('#periode').flatpickr({
            plugins: [
            new monthSelectPlugin({
                shorthand: true,
                dateFormat: "Y-m",
                altFormat: "F Y"
            })
            ],
            onChange: function(selectedDates, dateStr, instance) {
            // Update periode saat bulan berubah
            $('#periode').val(dateStr);
        }
    });

        // Inisialisasi Select2
        function initializeSelect2(selector) {
           $(selector).select2({
            placeholder: "-- Pilih --",
            allowClear: true,
                dropdownParent: $('body') // Penting untuk tampilan di modal atau elemen tersembunyi
            });
       }
        initializeSelect2('.form-select'); // Untuk header unit
        initializeSelect2('.form-select-detail'); // Untuk detail akun


        // Selalu tampilkan 2 digit desimal (format Indonesia)
        function formatRupiah(number) {
            if (!isFinite(number)) number = 0;
            return number.toLocaleString('id-ID', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        }

// Parser pintar: terima "35,067,379.78" (US) atau "35.067.379,78" (ID)
function parseRupiah(str) {
    if (str == null) return 0;
    str = String(str).trim();

    // buang simbol non angka kecuali pemisah . , dan tanda minus
    str = str.replace(/[^\d\-,.]/g, '');

    const hasDot = str.includes('.');
    const hasComma = str.includes(',');

    // Jika ada dua jenis pemisah, tentukan mana desimal dari yang paling kanan
    if (hasDot && hasComma) {
        const lastDot = str.lastIndexOf('.');
        const lastComma = str.lastIndexOf(',');

        if (lastDot > lastComma) {
            // titik sebagai desimal, koma sebagai ribuan
            str = str.replace(/,/g, '');
        } else {
            // koma sebagai desimal, titik sebagai ribuan
            str = str.replace(/\./g, '').replace(',', '.');
        }
    } else if (hasComma && !hasDot) {
        // Hanya koma: cek apakah pola ribuan (1,234 atau 12,345,678)
        if (/^\d{1,3}(,\d{3})+$/.test(str)) {
            str = str.replace(/,/g, '');
        } else {
            str = str.replace(',', '.'); // anggap koma = desimal
        }
    } else if (hasDot && !hasComma) {
        // Hanya titik: cek apakah pola ribuan (1.234 atau 12.345.678)
        if (/^\d{1,3}(\.\d{3})+$/.test(str)) {
            str = str.replace(/\./g, '');
        } // else: titik = desimal (biarkan)
    }

    // Terakhir, pastikan hanya 1 titik desimal yang tersisa
    // (jika masih ada ribuan sisa, hapus)
    const parts = str.split('.');
    if (parts.length > 2) {
        // gabung semua kecuali 2 segmen terakhir sebagai ribuan
        const dec = parts.pop();
        str = parts.join('') + '.' + dec;
    }

    const n = parseFloat(str);
    return isNaN(n) ? 0 : n;
}

function handleAmountInput($input) {
    let el = $input[0];
    let start = el.selectionStart;
    let end = el.selectionEnd;

    // Hitung jumlah digit sebelum kursor
    let before = $input.val().slice(0, start);
    let digitsBefore = before.replace(/[^\d]/g, '').length;

    // Parsing dan format ulang
    const number = parseRupiah($input.val());
    let formatted = formatRupiah(number);
    $input.val(formatted);

    // Hitung posisi kursor baru berdasarkan digit sebelumnya
    let currentDigits = 0;
    let newPos = formatted.length;
    for (let i = 0; i < formatted.length; i++) {
        if (/\d/.test(formatted[i])) {
            currentDigits++;
        }
        if (currentDigits >= digitsBefore) {
            newPos = i + 1;
            break;
        }
    }

    // Set kembali posisi kursor
    el.setSelectionRange(newPos, newPos);

    updateTotals();
}


        // Fungsi untuk mengupdate total debit dan kredit
        function updateTotals() {
            let totalDebit = 0;
            let totalKredit = 0;

            $('.input-debit').each(function() {
                totalDebit += parseRupiah($(this).val());
            });

            $('.input-kredit').each(function() {
                totalKredit += parseRupiah($(this).val());
            });

            $('#total_debit_display').text(formatRupiah(totalDebit));
            $('#total_kredit_display').text(formatRupiah(totalKredit));

            // Visual indicator for balance
            const $submitBtn = $('#submitButton');
            if (Math.abs(totalDebit - totalKredit) < 0.001) { // Toleransi float
                $submitBtn.prop('disabled', false);
                $('#total_debit_display, #total_kredit_display').removeClass('text-danger').addClass('text-success');
            } else {
                $submitBtn.prop('disabled', true);
                $('#total_debit_display, #total_kredit_display').removeClass('text-success').addClass('text-danger');
            }
        }

        // Script untuk menambahkan baris detail
        let detailRowIndex = {{ old('details') ? count(old('details')) : 0 }}; // Mulai dari jumlah baris yang sudah ada jika ada old input
        function addDetailRow(detail = null, index = null) {
            // Jika index tidak diberikan, gunakan global detailRowIndex
            const currentIndex = detailRowIndex++;
            
            let akunOptions = '<option value="">-- Pilih Akun --</option>';
            akunsData.forEach(akun => {
                const selected = (detail && detail.kode_akun == akun.kode_akun) ? 'selected' : '';
                // PERBAIKAN: Menggunakan akun.kode_akun karena ini yang dikirim dari controller
                akunOptions += `<option value="${akun.kode_akun}" data-saldo-normal="${akun.saldo_normal}" ${selected}>${akun.kode_akun} - ${akun.nama_akun}</option>`;
            });

            let unitOptions = '<option value="">-- Pilih Unit (Opsional) --</option>';
            unitsData.forEach(unit => {
                const selected = (detail && detail.unit_id == unit.id) ? 'selected' : '';
                unitOptions += `<option value="${unit.id}" ${selected}>${unit.nama_unit}</option>`;
            });

            const newRowHtml = `
            <tr class="detail-row">
            <td>
            <div class="form-group mb-0">
            <select name="details[${currentIndex}][kode_akun]" class="form-control form-select-detail" required>
            ${akunOptions}
            </select>
            </div>
            </td>
            <td>
            <div class="form-group mb-0">
            <input type="text" name="details[${currentIndex}][keterangan_detail]" class="form-control" value="${detail ? (detail.keterangan_detail || '') : ''}" placeholder="Keterangan item">
            </div>
            </td>
            <td>
            <div class="form-group mb-0">
            <input type="text" name="details[${currentIndex}][debit]" class="form-control text-right input-debit numeric-rupiah-detail" value="${detail && detail.debit ? formatRupiah(parseFloat(detail.debit)) : ''}">
            </div>
            </td>
            <td>
            <div class="form-group mb-0">
            <input type="text" name="details[${currentIndex}][kredit]" class="form-control text-right input-kredit numeric-rupiah-detail" value="${detail && detail.kredit ? formatRupiah(parseFloat(detail.kredit)) : ''}">
            </div>
            </td>
            <td>
            <div class="form-group mb-0">
            <select name="details[${currentIndex}][unit_id]" class="form-control form-select-detail-unit">
            ${unitOptions}
            </select>
            </div>
            </td>
            <td class="text-center">
            <button type="button" class="btn btn-sm btn-danger remove-detail-row">
            <em class="icon ni ni-trash"></em>
            </button>
            ${detail ? `<input type="hidden" name="details[${currentIndex}][id]" value="${detail.id || ''}">` : ''}
            </td>
            </tr>
            `;
            const newRow = $(newRowHtml);
            $('#detail-container').append(newRow);

            // Inisialisasi Select2 untuk baris baru
            initializeSelect2(newRow.find('.form-select-detail'));
            initializeSelect2(newRow.find('.form-select-detail-unit'));


            // Attach event listeners untuk input amount di baris baru
            newRow.find('.numeric-rupiah-detail').on('keyup', function() {
                handleAmountInput($(this));
                // Pastikan hanya salah satu kolom (debit/kredit) yang bisa diisi
                const currentInput = $(this);
                if (parseRupiah(currentInput.val()) > 0) { // Hanya jika ada nilai yang dimasukkan
                    if (currentInput.hasClass('input-debit')) {
                        currentInput.closest('tr').find('.input-kredit').val('0');
                    } else if (currentInput.hasClass('input-kredit')) {
                        currentInput.closest('tr').find('.input-debit').val('0');
                    }
                }
            });

            // Auto-fill debit/kredit based on saldo_normal of selected account
            newRow.find('.form-select-detail').on('change', function() {
                const selectedOption = $(this).find('option:selected');
                const saldoNormal = selectedOption.data('saldo-normal');
                const row = $(this).closest('.detail-row');
                const debitInput = row.find('.input-debit');
                const kreditInput = row.find('.input-kredit');

                // Simpan nilai yang sudah ada sebelum membersihkan
                const existingDebit = parseRupiah(debitInput.val());
                const existingKredit = parseRupiah(kreditInput.val());
                const existingAmount = existingDebit + existingKredit;

                // Clear both fields first
                debitInput.val('0');
                kreditInput.val('0');

                // If no account selected, do nothing more
                if (!saldoNormal) {
                    updateTotals(); // Recalculate totals after clearing
                    return;
                }

                // Move existing value (if any) to the correct field
                if (saldoNormal === 'D') { // Asumsi saldo_normal dari database adalah 'D' atau 'K'
                    debitInput.val(formatRupiah(existingAmount));
            } else if (saldoNormal === 'K') {
                kreditInput.val(formatRupiah(existingAmount));
            }
                updateTotals(); // Recalculate totals
            });

            // Increment index for next row, if this was not an old input
            if (index === null) {
                detailRowIndex++;
            }
            updateTotals(); // Initial calculation for the new row
        }


        $(document).ready(function() {
            // Handle initial rows if old('details') is empty (first load)
            @if (!old('details'))
                addDetailRow(null, 0); // Baris pertama
                addDetailRow(null, 1); // Baris kedua
                @endif

            // Event listener untuk tombol "Tambah Baris Akun"
            $('#add-detail-row').click(function() {
                addDetailRow();
            });

            // Event listener untuk tombol hapus baris detail
            $('#detail-container').on('click', '.remove-detail-row', function() {
                if ($('.detail-row').length > 2) { // Pastikan minimal 2 baris
                    $(this).closest('.detail-row').remove();
                    updateTotals(); // Perbarui total setelah menghapus
                } else {
                    Swal.fire({ // Menggunakan SweetAlert2 jika ada
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Minimal dua baris detail diperlukan (untuk Debit dan Kredit).',
                        confirmButtonText: 'OK'
                    });
                }
            });

           // Ketik: format live + kunci kolom lawan
           $('#detail-container').on('input', '.input-debit, .input-kredit', function () {
            const $this = $(this);
            handleAmountInput($this);

            const $row = $this.closest('tr');
            if ($this.hasClass('input-debit') && parseRupiah($this.val()) > 0) {
                $row.find('.input-kredit').val('0,00');
            }
            if ($this.hasClass('input-kredit') && parseRupiah($this.val()) > 0) {
                $row.find('.input-debit').val('0,00');
            }
        });

// Paste: normalisasi berbagai format (US/ID) lalu format ID
$('#detail-container').on('paste', '.input-debit, .input-kredit', function (e) {
    e.preventDefault();
    let text = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
    const number = parseRupiah(text);
    $(this).val(formatRupiah(number));
    updateTotals();

    const $row = $(this).closest('tr');
    if ($(this).hasClass('input-debit') && number > 0) {
        $row.find('.input-kredit').val('0,00');
    }
    if ($(this).hasClass('input-kredit') && number > 0) {
        $row.find('.input-debit').val('0,00');
    }
});


            // Perbarui no_referensi saat halaman dimuat jika kosong
            const noReferensiInput = $('#no_referensi');
            if (noReferensiInput.val() === '') {
                noReferensiInput.val('{{ $nextNomorBukti }}'); // Set nilai default dari controller
            }

            // Initial calculation on page load
            updateTotals();

            // Auto-hide alerts
    //         setTimeout(function() {
    //             $('.alert').alert('close');
    //         }, 5000);
});

    })(jQuery);
</script>
@endpush