@extends('layouts.app')

@section('title', 'Approval Pengeluaran Kas: ' . $pengeluaranKa->nomor_bukti)

@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">Pengeluaran Kas: {{ $pengeluaranKa->nomor_bukti }}</h3>
                                <div class="nk-block-des text-soft">
                                    <p>Formulir untuk menyetujui transaksi pengeluaran kas.</p>
                                </div>
                            </div>
                            <div class="nk-block-head-content">
                                <a href="{{ route('yayasan.transaksi.pengeluaran-kas-gaji.index') }}" class="btn btn-outline-light bg-white d-none d-sm-inline-flex">
                                    <em class="icon ni ni-arrow-left"></em>
                                    <span>Kembali ke Daftar Pengeluaran Kas</span>
                                </a>
                                @if ($pengeluaranKa->status ==='draft' || $pengeluaranKa->status === 'process')
                                    <button type="button" class="btn btn-success ml-2" data-bs-toggle="modal" data-bs-target="#modalApproval">
                                        <em class="icon ni ni-check-circle"></em>
                                        <span>Proses Transaksi</span>
                                    </button>
                                @endif
                            </div>

                            <div class="modal fade" tabindex="-1" id="modalApproval">
                                <div class="modal-dialog modal-lg" role="document">
                                    <div class="modal-content">
                                        <a href="#" class="close" data-bs-dismiss="modal" aria-label="Close" onclick="$('#modalApproval').modal('hide'); return false;">
                                            <em class="icon ni ni-cross"></em>
                                        </a>
                                        <div class="modal-header">
                                            <h5 class="modal-title">Pengeluaran Kas: {{ $pengeluaranKa->nomor_bukti }}</h5>
                                        </div>
                                        <div class="modal-body">
                                            <div class="nk-tb-list nk-tb-ulog">
                                                <div class="nk-tb-item nk-tb-head">
                                                    <div class="nk-tb-col"><span>No</span></div>
                                                    <div class="nk-tb-col"><span>Akun</span></div>
                                                    <div class="nk-tb-col"><span>Unit</span></div>
                                                    <div class="nk-tb-col"><span>Program/Kegiatan</span></div>
                                                    <div class="nk-tb-col"><span>Jenis Pendanaan</span></div>
                                                    <div class="nk-tb-col"><span>Deskripsi Item</span></div>
                                                    <div class="nk-tb-col text-end"><span>Nominal</span></div>
                                                </div>
                                                @foreach ($pengeluaranKa->detailTransaksi as $i => $detail)
                                                    <div class="nk-tb-item">
                                                        <div class="nk-tb-col">{{ $i + 1 }}</div>
                                                        <div class="nk-tb-col">{{ $detail->akun->kode_akun ?? '-' }} - {{ $detail->akun->nama_akun ?? '-' }}</div>
                                                        <div class="nk-tb-col">{{ $detail->unit->nama_unit ?? '-' }}</div>
                                                        <div class="nk-tb-col">{{ $detail->programKegiatan->nama ?? '-' }}</div>
                                                        <div class="nk-tb-col">{{ $detail->jenisPendanaan->nama ?? '-' }}</div>
                                                        <div class="nk-tb-col">{{ $detail->deskripsi_item ?? '-' }}</div>
                                                        <div class="nk-tb-col text-end">{{ number_format($detail->nominal, 0, ',', '.') }}</div>
                                                    </div>
                                                @endforeach
                                            </div>
                                            <form action="{{ route('yayasan.transaksi.pengeluaran-kas-gaji.approval-process', $pengeluaranKa->id) }}" method="POST" class="d-flex align-items-center w-50">
                                                @csrf
                                                <div class="form-group mb-0 me-3 flex-grow-1">
                                                    <select name="approval_status" id="approval_status" class="form-select" required>
                                                        <option value="">-- Pilih Status --</option>
                                                        <option value="approval">Setujui</option>
                                                        <option value="reject">Tolak</option>
                                                        <option value="revision">Revisi</option>
                                                    </select>
                                                </div>
                                                <button type="submit" class="btn btn-primary">Simpan</button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="nk-block">
                        <div class="card card-bordered">
                            <div class="card-inner">
                                @if (session('success'))
                                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                                        {{ session('success') }}
                                    </div>
                                @elseif (session('error'))
                                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                        {{ session('error') }}
                                    </div>
                                @elseif (session('warning'))
                                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                        {{ session('warning') }}
                                    </div>
                                @endif

                                @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


                                <form action="{{ route('yayasan.transaksi.pengeluaran-kas-gaji.update', $pengeluaranKa->id) }}" method="POST">
                                    @csrf
                                    @method('PUT')

                                    <div class="card-inner">
                                        <h5 class="card-title">Informasi Transaksi</h5>
                                        <hr>
                                        <div class="row gy-4">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="form-label">Tanggal Transaksi:</label>
                                                    <div class="form-control-plaintext">{{ $pengeluaranKa->tanggal->format('d F Y') }}</div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="form-label">Nomor Referensi:</label>
                                                    <div class="form-control-plaintext">{{ $pengeluaranKa->nomor_bukti ?? '-' }}</div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="form-label">Unit Terkait:</label>
                                                    <div class="form-control-plaintext">{{ $pengeluaranKa->unit->nama_unit ?? '-' }}</div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="form-label">Metode Pembayaran:</label>
                                                    <div class="form-control-plaintext">{{ $pengeluaranKa->metode_pembayaran ?? '-' }}</div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="form-label">Jenis Pengeluaran:</label>
                                                    <div class="form-control-plaintext">{{ $pengeluaranKa->jenis_transaksi ?? '-' }}</div>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="form-label">Deskripsi Transaksi:</label>
                                                    <div class="form-control-plaintext">{{ $pengeluaranKa->deskripsi }}</div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mt-4 float-end">
                                        </div>
                                    </div>

                                    <div class="card-inner">
                                        <div class="detail-transaksi">
                                        <hr class="preview-hr">

                                        <h5 class="title mb-3">Detail Transaksi</h5>
                                        <hr>

                                        @error('details')
                                            <div class="alert alert-danger">
                                                <strong>{{ $message }}</strong>
                                            </div>
                                        @enderror

                                        <div id="detail-container">
                                            @if (old('details'))
                                                @foreach (old('details') as $index => $detail)
                                                    @include('yayasan.transaksi.pengeluaran-kas-gaji._detail_row', [
                                                        'index' => $index,
                                                        'detail' => (object) $detail,
                                                        'akuns' => $akuns,
                                                        'units' => $units,
                                                        'programKegiatans' => $programKegiatans,
                                                        'jenisPendanaans' => $jenisPendanaans,
                                                        'is_edit' => true,
                                                    ])
                                                @endforeach
                                            @else
                                                @foreach ($pengeluaranKa->detailTransaksi as $index => $detail)
                                                    @include('yayasan.transaksi.pengeluaran-kas-gaji._detail_row', [
                                                        'index' => $index,
                                                        'detail' => $detail,
                                                        'akuns' => $akuns,
                                                        'units' => $units,
                                                        'programKegiatans' => $programKegiatans,
                                                        'jenisPendanaans' => $jenisPendanaans,
                                                        'is_edit' => true,
                                                    ])
                                                @endforeach
                                            @endif
                                        </div>

                                        <hr class="preview-hr">
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('.form-select-2').select2({
                placeholder: "-- Pilih Akun --",
                allowClear: true
            });

            let detailRowIndex = $('#detail-container').children('.detail-row').length;

            $('#add-detail-row').click(function() {
                const newRowTemplate = `
                    @include('yayasan.transaksi.pengeluaran-kas-gaji._detail_row', [
                        'index' => 'DETAIL_INDEX_PLACEHOLDER',
                        'detail' => null,
                        'akuns' => $akuns,
                        'units' => $units,
                        'programKegiatans' => $programKegiatans,
                        'jenisPendanaans' => $jenisPendanaans,
                        'is_edit' => true,
                    ])
                `;
                const newRow = $(newRowTemplate.replace(/DETAIL_INDEX_PLACEHOLDER/g, detailRowIndex));
                $('#detail-container').append(newRow);

                // Inisialisasi Select2 untuk baris baru
                newRow.find('.form-select-2').select2({
                    placeholder: "-- Pilih Akun --",
                    allowClear: true
                });

                detailRowIndex++;
                updateTotals();
            });

            $('#detail-container').on('click', '.remove-detail-row', function() {
                const row = $(this).closest('.detail-row');
                // Jika baris punya ID (sudah ada di database), tandai untuk dihapus
                if (row.find('input[name^="details"][name$="[id]"]').val()) {
                    row.hide(); // Sembunyikan baris
                    row.find('input[name^="details"][name$="[_destroy]"]').val(1); // Set flag _destroy
                } else {
                    // Jika baris baru (belum punya ID), langsung hapus dari DOM
                    row.remove();
                }
                updateTotals(); // Update total setelah menghapus baris
            });

            function updateTotals() {
                let totalDebit = 0;
                let totalKredit = 0;

                $('.detail-row').each(function() {
                    const row = $(this);
                    // Hanya hitung jika baris tidak ditandai untuk dihapus
                    if (row.find('.destroy-flag').val() != 1) {
                        let debitVal = row.find('.input-debit').val() || '0';
                        debitVal = debitVal.replace(/\./g, '').replace(/,/g, '.');
                        const debit = parseFloat(debitVal);

                        let kreditVal = row.find('.input-kredit').val() || '0';
                        kreditVal = kreditVal.replace(/\./g, '').replace(/,/g, '.');
                        const kredit = parseFloat(kreditVal);

                        if (!isNaN(debit)) totalDebit += debit;
                        if (!isNaN(kredit)) totalKredit += kredit;
                    }
                });

                $('#total_debit').val(totalDebit.toLocaleString('id-ID', { minimumFractionDigits: 0, maximumFractionDigits: 0 }));
                $('#total_kredit').val(totalKredit.toLocaleString('id-ID', { minimumFractionDigits: 0, maximumFractionDigits: 0 }));
            }

            $('#detail-container').on('input', '.input-debit, .input-kredit', updateTotals);

            updateTotals();

            $('form').submit(function() {
                $('.input-debit, .input-kredit').each(function() {
                    let val = $(this).val();
                    val = val.replace(/\./g, '');
                    val = val.replace(/,/g, '.');
                    $(this).val(val);
                });
            });

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

            // get status from pengeluaranKa
            const status = "{{ $pengeluaranKa->status }}";
            console.log('Status:', status);
            if (status !== 'approval') {
                $('.detail-transaksi').hide();
            } else {
                $('.detail-transaksi').show();
            }
        });
    </script>
@endpush