@extends('layouts.app')
@section('title', 'Tambah Pengeluaran Kas')

@section('content')
<div class="nk-block-head">
    <div class="nk-block-head-content">
        <h4 class="nk-block-title">Tambah Pengeluaran Kas</h4>
        <p>Formulir untuk ajuan pengeluaran diluar RKAS</p>
    </div>
</div>

<form action="{{ route('yayasan.transaksi.pengeluaran-kas.store') }}" method="POST" enctype="multipart/form-data">
    @csrf

    {{-- HEADER --}}
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Informasi Header Transaksi</h5>
            <div class="row gy-3">
                <div class="col-md-6">
                    <label class="form-label" for="tanggal">Tanggal Transaksi</label>
                    <input type="date" id="tanggal" name="tanggal" class="form-control" required>
                </div>
               <!--  <div class="col-md-6">
                    <label class="form-label" for="metode_pembayaran">Metode Pembayaran</label>
                    <select id="metode_pembayaran" name="metode_pembayaran" class="form-select">
                        <option value="">-- Pilih Metode --</option>
                        <option value="Transfer">Transfer</option>
                        <option value="Tunai">Tunai</option>
                    </select>
                </div> -->
                <div class="col-md-6">
                    <label class="form-label" for="unit_id">Unit</label>

                    @if (auth()->user()->role_id == 1)
                    {{-- Yayasan bisa pilih semua unit --}}
                    <select id="unit_id" name="unit_id" class="form-select" required>
                        <option value="">-- Pilih Unit --</option>
                        @foreach($units as $unit)
                        <option value="{{ $unit->kode_unit }}"
                            {{ old('unit_id', auth()->user()->unit_id) == $unit->id ? 'selected' : '' }}>
                            {{ $unit->nama_unit }}
                        </option>
                        @endforeach
                    </select>
                    @else
                    {{-- Non-Yayasan, paksa ke unit user --}}
                    <input type="hidden" name="unit_id" value="{{ auth()->user()->unit_id }}">
                    <input type="text" class="form-control" value="{{ auth()->user()->unit->nama_unit ?? '-' }}" readonly>
                    @endif
                </div>

                <div class="col-md-6">
                    <!-- <label class="form-label" for="jenis_transaksi">Jenis Pengeluaran</label> -->
                    <input type="hidden" id="jenis_transaksi" name="jenis_transaksi" class="form-control" value="pengeluaran_kas" readonly>
                </div>
                <div class="col-12">
                    <label class="form-label" for="deskripsi">Deskripsi</label>
                    <textarea id="deskripsi" name="deskripsi" rows="3" class="form-control"></textarea>
                </div>
            </div>
        </div>
    </div>

    {{-- DETAIL --}}
    <div class="card mt-4">
        <div class="card-body">
            <h5 class="card-title">Detail Pengeluaran</h5>
            <div id="detail-wrapper"></div>
            <button type="button" class="btn btn-sm btn-secondary mt-2" id="add-row">
                <em class="icon ni ni-plus"></em> Tambah Baris
            </button>
            <hr>
            <div class="text-end mt-3">
                <button class="btn btn-primary" type="submit">
                    <em class="icon ni ni-save"></em> Simpan Transaksi
                </button>
            </div>
        </div>
    </div>

</form>

<!-- Template Baris Detail -->
<template id="detail-template">
    <div class="detail-item row gy-2 gx-3 border p-3 mb-2 rounded bg-light">
        <div class="col-md-4">
            <label class="form-label">Periode</label>
            <input type="month" name="detail[periode][]" class="form-control" required>
        </div>
        <div class="col-md-4">
            <label class="form-label">Kegiatan</label>
            <select name="detail[kode_akun][]" class="form-select select2" required>
                <option value="">-- Pilih Akun --</option>
                @foreach ($akuns as $a)
                <option value="{{ $a->kode_akun }}">{{ $a->kode_akun }} - {{ $a->nama_akun }}</option>
                @endforeach
            </select>
        </div>

        <!-- {{-- Pendanaan --}}-->
        <!--<div class="col-md-4 pendanaan-field {{ auth()->user()->role_id == 1 ? 'd-none' : '' }}">-->
        <!--    <label class="form-label">Pendanaan</label>-->
        <!--    <select name="detail[pendanaan_id][]" class="form-select select2">-->
        <!--        <option value="">-- Pendanaan --</option>-->
        <!--        @foreach ($jenisPendanaans as $p)-->
        <!--        <option value="{{ $p->id }}">{{ $p->nama }}</option>-->
        <!--        @endforeach-->
        <!--    </select>-->
        <!--</div>-->

        {{-- Akun Kas --}}
        <div class="col-md-4 akun-kas-field {{ auth()->user()->role_id == 1 ? '' : 'd-none' }}">
            <label class="form-label">Akun Kas</label>
            <select name="detail[pendanaan_id][]" class="form-select select2">
                <option value="">-- Akun Kas --</option>
                @foreach ($akunKasYayasan as $kas)
                <option value="{{ $kas->kode_akun }}">{{ $kas->kode_akun }} - {{ $kas->nama_akun }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-md-3">
            <label class="form-label">Quantity</label>
            <input type="number" name="detail[vol][]" class="form-control" required>
        </div>
        <div class="col-md-3">
            <label class="form-label">Satuan</label>
            <input type="text" name="detail[satuan][]" class="form-control" required>
        </div>
        <div class="col-md-3">
            <label class="form-label">Harga Satuan</label>
            <input type="text" name="detail[harga_satuan][]" class="form-control nominal-input" required>
        </div>
        <div class="col-md-3">
            <label class="form-label">Nominal</label>
            <input type="text" name="detail[nominal][]" class="form-control nominal-input" required>
        </div>
        <div class="col-md-12">
            <label class="form-label">Deskripsi Item</label>
            <textarea name="detail[deskripsi_item][]" class="form-control" rows="2"></textarea>
        </div>

        <div class="col-md-12 d-flex align-items-end justify-content-end">
            <button type="button" class="btn btn-danger btn-sm remove-row">
                <em class="icon ni ni-trash"></em> Hapus
            </button>
        </div>
    </div>
    <br>
</template>
@endsection

@push('scripts')

<script>
    const isYayasan = {{ auth()->user()->role_id == 1 ? 'true' : 'false' }};

    document.addEventListener('DOMContentLoaded', function () {
        const wrapper = document.getElementById('detail-wrapper');
        const template = document.getElementById('detail-template');

        function addRow() {
            const clone = template.content.cloneNode(true);
            wrapper.appendChild(clone);

            // Init Select2 setelah append
            $(wrapper).find('.select2').select2({
                width: '100%',
                placeholder: '-- Pilih --',
                allowClear: true
            });
        }

        // Tambah 1 baris saat awal load
        addRow();

        document.getElementById('add-row').addEventListener('click', function () {
            addRow();
        });

        // Remove baris
        document.addEventListener('click', function (e) {
            if (e.target.closest('.remove-row')) {
                const items = document.querySelectorAll('.detail-item');
                if (items.length > 1) {
                    e.target.closest('.detail-item').remove();
                }
            }
        });

        // Format nominal rupiah
        document.addEventListener('input', function (e) {
            if (e.target.classList.contains('nominal-input')) {
                let value = e.target.value.replace(/\D/g, '');
                e.target.value = formatRupiah(value);
            }
        });

        function formatRupiah(angka) {
            return angka.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
        }
    });
</script>
@endpush