@extends('layouts.app') {{-- Sesuaikan layout Anda --}}

@section('content')
<div class="container">
    <h2>Ajukan Anggaran Baru</h2>

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('yayasan.ajuan-anggaran.store') }}" method="POST">
        @csrf

        <div class="card mb-3">
            <div class="card-header">Informasi Umum Ajuan</div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="tanggal_ajuan" class="form-label">Tanggal Ajuan:</label>
                    <input type="date" class="form-control" id="tanggal_ajuan" name="tanggal_ajuan" value="{{ old('tanggal_ajuan', date('Y-m-d')) }}" required>
                </div>
                <div class="mb-3">
                    <label for="periode_bulan_tahun" class="form-label">Periode (Bulan Tahun):</label>
                    <input type="text" class="form-control" id="periode_bulan_tahun" name="periode_bulan_tahun" value="{{ old('periode_bulan_tahun', date('F Y')) }}" placeholder="Contoh: Oktober 2023" required>
                </div>
                <div class="mb-3">
                    <label for="deskripsi_ajuan" class="form-label">Deskripsi Ajuan:</label>
                    <textarea class="form-control" id="deskripsi_ajuan" name="deskripsi_ajuan" rows="3" required>{{ old('deskripsi_ajuan') }}</textarea>
                </div>
                <div class="mb-3">
                    <label for="unit_id" class="form-label">Unit Pengaju:</label>
                    <select class="form-control" id="unit_id" name="unit_id" required>
                        <option value="">Pilih Unit</option>
                        @foreach ($units as $unit)
                            <option value="{{ $unit->id }}" {{ old('unit_id', Auth::user()->unit_id) == $unit->id ? 'selected' : '' }}>{{ $unit->nama_unit }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header">Detail Ajuan</div>
            <div class="card-body">
                <div id="detail-rows">
                    @if (old('details'))
                        @foreach (old('details') as $index => $detail)
                            @include('yayasan.ajuan-anggaran._detail_row', [
                                'index' => $index,
                                'detail' => (object)$detail,
                                'akuns' => $akuns,
                                'units' => $units,
                                'programKegiatans' => $programKegiatans,
                                'jenisPendanaans' => $jenisPendanaans
                            ])
                        @endforeach
                    @else
                        @include('yayasan.ajuan-anggaran._detail_row', [
                            'index' => 0,
                            'detail' => null,
                            'akuns' => $akuns,
                            'units' => $units,
                            'programKegiatans' => $programKegiatans,
                            'jenisPendanaans' => $jenisPendanaans
                        ])
                    @endif
                </div>
                <button type="button" class="btn btn-secondary btn-sm" id="add-detail-row">Tambah Baris Detail</button>
            </div>
        </div>

        <button type="submit" class="btn btn-primary">Ajukan Anggaran</button>
        <a href="{{ route('yayasan.ajuan-anggaran.index') }}" class="btn btn-secondary">Batal</a>
    </form>
</div>

<template id="detail-row-template">
    @include('yayasan.ajuan-anggaran._detail_row', [
        'index' => '__INDEX__', // Placeholder for JavaScript
        'detail' => null,
        'akuns' => $akuns,
        'units' => $units,
        'programKegiatans' => $programKegiatans,
        'jenisPendanaans' => $jenisPendanaans
    ])
</template>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        let detailIndex = {{ count(old('details', [])) > 0 ? count(old('details')) : 1 }};

        document.getElementById('add-detail-row').addEventListener('click', function () {
            const template = document.getElementById('detail-row-template').content.cloneNode(true);
            const newRow = template.firstElementChild;
            newRow.innerHTML = newRow.innerHTML.replace(/__INDEX__/g, detailIndex);
            document.getElementById('detail-rows').appendChild(newRow);
            detailIndex++;
        });

        document.getElementById('detail-rows').addEventListener('click', function (event) {
            if (event.target.classList.contains('remove-detail-row')) {
                event.target.closest('.detail-row').remove();
            }
        });
    });
</script>
@endpush