@extends('layouts.app')
@section('title', 'Buat Pengajuan RKAT')
@section('page-title', 'Buat Pengajuan RKAT')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('pengaju.rkat.index') }}">RKAT</a></li>
    <li class="breadcrumb-item active">Buat</li>
@endsection
@section('content')
<div class="page-header">
    <div class="page-header-left d-flex align-items-center">
        <div class="page-header-title"><h5 class="m-b-10">Buat Pengajuan RKAT</h5></div>
    </div>
    <div class="page-header-right ms-auto">
        <a href="{{ route('pengaju.rkat.index') }}" class="btn btn-outline-secondary"><i class="feather-arrow-left me-1"></i> Kembali</a>
    </div>
</div>

<div class="alert alert-info d-flex align-items-center">
    <i class="feather-info me-2"></i>
    <span>Periode aktif: <strong>{{ $periode->nama }}</strong> ({{ $periode->buka->format('d M Y') }} - {{ $periode->tutup->format('d M Y') }})</span>
</div>

<div class="card menu-detail-card mb-3">
    <div class="card-body">
        <div class="row g-3 align-items-center">
            <div class="col-md-4">
                <small class="text-muted d-block">Pagu Unit Periode Ini</small>
                <strong class="fs-5">{{ $pagu ? 'Rp ' . number_format($pagu->nominal_pagu, 0, ',', '.') : 'Belum diatur' }}</strong>
            </div>
            <div class="col-md-4">
                <small class="text-muted d-block">Total RKAT Saat Ini</small>
                <strong class="fs-5" id="paguTotalRkat">Rp 0</strong>
            </div>
            <div class="col-md-4">
                <small class="text-muted d-block">Selisih Pagu</small>
                <strong class="fs-5" id="paguSelisih">{{ $pagu ? 'Rp ' . number_format($pagu->nominal_pagu, 0, ',', '.') : '-' }}</strong>
            </div>
        </div>
        <div class="alert alert-warning mt-3 mb-0 d-none" id="paguWarning">
            <i class="feather-alert-circle me-1"></i>
            Total RKAT melebihi pagu unit. Pengajuan tetap dapat diajukan, tetapi akan menjadi perhatian Admin Keuangan dan Yayasan.
        </div>
    </div>
</div>

@if($existing ?? false)
    @php
        $existingStats = $existing->items->countBy('status_validasi');
        $existingAcc = $existing->items->sum(fn ($item) => (float) ($item->acc ?? 0));
        $existingSelisih = $pagu ? (float) $pagu->nominal_pagu - (float) $existing->total : null;
    @endphp
    <div class="card menu-detail-card mb-4">
        <div class="card-body">
            <div class="menu-rkat-existing-state">
                <span class="menu-rkat-existing-icon"><i class="feather-check-circle"></i></span>
                <h5>RKAT Periode Ini Sudah Ada</h5>
                <p>
                    Unit Anda sudah memiliki RKAT untuk periode <strong>{{ $periode->nama }}</strong>.
                    Untuk membuat pengajuan anggaran baru, buat permohonan pengajuan baru terlebih dahulu.
                </p>
            </div>

            <div class="menu-info-grid menu-rkat-existing-summary mt-3">
                <div class="menu-info-row">
                    <div class="menu-info-label">Nomor</div>
                    <div class="menu-info-value">{{ $existing->code }}</div>
                </div>
                <div class="menu-info-row">
                    <div class="menu-info-label">Perihal</div>
                    <div class="menu-info-value">{{ $existing->perihal }}</div>
                </div>
                <div class="menu-info-row">
                    <div class="menu-info-label">Status</div>
                    <div class="menu-info-value"><span class="badge {{ $existing->displayBadgeClass('pengaju') }}">{{ $existing->displayStatusLabel('pengaju') }}</span></div>
                </div>
                <div class="menu-info-row">
                    <div class="menu-info-label">Total Diajukan</div>
                    <div class="menu-info-value">Rp {{ number_format((float) $existing->total, 0, ',', '.') }}</div>
                </div>
                <div class="menu-info-row">
                    <div class="menu-info-label">Total ACC</div>
                    <div class="menu-info-value text-success fw-semibold">Rp {{ number_format($existingAcc, 0, ',', '.') }}</div>
                </div>
                <div class="menu-info-row">
                    <div class="menu-info-label">Selisih Pagu</div>
                    <div class="menu-info-value {{ $existingSelisih !== null && $existingSelisih < 0 ? 'text-danger' : 'text-success' }}">
                        {{ $existingSelisih === null ? '-' : (($existingSelisih < 0 ? '-Rp ' : 'Rp ') . number_format(abs($existingSelisih), 0, ',', '.')) }}
                    </div>
                </div>
                <div class="menu-info-row">
                    <div class="menu-info-label">Item</div>
                    <div class="menu-info-value">
                        Pending {{ (int) ($existingStats[\App\Models\Item::STATUS_PENDING] ?? 0) }},
                        Revisi {{ (int) ($existingStats[\App\Models\Item::STATUS_REVISI] ?? 0) }},
                        Disetujui {{ (int) ($existingStats[\App\Models\Item::STATUS_DISETUJUI] ?? 0) }},
                        Ditolak {{ (int) ($existingStats[\App\Models\Item::STATUS_DITOLAK] ?? 0) }}
                    </div>
                </div>
            </div>

            <div class="menu-rkat-existing-actions mt-3">
                <a href="{{ route('pengaju.rkat.show', $existing) }}" class="btn btn-primary">
                    <i class="feather-eye me-1"></i> Lihat RKAT
                </a>
                <a href="{{ route('pengaju.rkat.index') }}" class="btn btn-outline-primary">
                    <i class="feather-list me-1"></i> Daftar RKAT
                </a>
            </div>
        </div>
    </div>
@else
<form action="{{ route('pengaju.rkat.store') }}" method="POST" enctype="multipart/form-data" id="rkatForm"
      data-require-document="true"
      data-required-documents="surat"
      data-has-document="false"
      data-document-message="Surat permohonan wajib diunggah sebelum mengajukan RKAT. Simpan draft tetap bisa tanpa surat.">
    @csrf
    <input type="hidden" name="periode_id" value="{{ $periode->id }}">
    <input type="hidden" name="submit_action" id="submitAction" value="draft">

    <div class="card menu-form-card mb-3">
        <div class="card-header"><h6 class="mb-0">Informasi RKAT</h6></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Unit</label>
                    <input type="text" class="form-control" value="{{ auth()->user()->unit }}" disabled>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Periode</label>
                    <input type="text" class="form-control" value="{{ $periode->nama }}" disabled>
                </div>
                <div class="col-12">
                    <label class="form-label">Perihal <span class="text-danger">*</span></label>
                    <input type="text" name="perihal" class="form-control @error('perihal') is-invalid @enderror" value="{{ old('perihal') }}" placeholder="Rencana Kegiatan dan Anggaran Tahunan" required>
                    @error('perihal') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-12">
                    <label class="form-label">Ringkasan</label>
                    <textarea name="ringkasan" class="form-control" rows="3" placeholder="Ringkasan RKAT (opsional)">{{ old('ringkasan') }}</textarea>
                </div>
            </div>
        </div>
    </div>

    <div class="card menu-form-card mb-3">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h6 class="mb-0">Item Kegiatan</h6>
            <button type="button" class="btn btn-sm btn-success" id="btnAddItem"><i class="feather-plus me-1"></i> Tambah Item</button>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered menu-rkat-item-table" id="itemsTable">
                    <colgroup>
                        <col class="rkat-col-no">
                        <col class="rkat-col-main">
                        <col class="rkat-col-desc">
                        <col class="rkat-col-category">
                        <col class="rkat-col-time">
                        <col class="rkat-col-money">
                        <col class="rkat-col-action">
                    </colgroup>
                    <thead class="table-light">
                        <tr>
                            <th class="rkat-col-no text-center">No</th>
                            <th class="rkat-col-main">Nama Kegiatan <span class="text-danger">*</span></th>
                            <th class="rkat-col-desc">Keterangan</th>
                            <th class="rkat-col-category">Kategori</th>
                            <th class="rkat-col-time">Waktu</th>
                            <th class="rkat-col-money text-end">Biaya <span class="text-danger">*</span></th>
                            <th class="rkat-col-action"></th>
                        </tr>
                    </thead>
                    <tbody id="itemsBody">
                    </tbody>
                    <tfoot>
                        <tr class="fw-bold">
                            <td colspan="5" class="text-end">Total</td>
                            <td class="text-end" id="grandTotal">Rp 0</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            @error('items') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
        </div>
    </div>

    <div class="card menu-form-card mb-3">
        <div class="card-header"><h6 class="mb-0">Dokumen</h6></div>
        <div class="card-body">
            <div class="menu-doc-download mb-3">
                <div>
                    <strong>Template Surat Permohonan</strong>
                    <small class="text-muted d-block">Pastikan surat telah diisi dan bertanda tangan sebelum diunggah kembali sebagai PDF.</small>
                </div>
                <x-template-download-menu :templates="$documentTemplates" category="rkat" />
            </div>
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Surat Permohonan (PDF, maks 20MB)</label>
                    <input type="file" name="surat" class="form-control @error('surat') is-invalid @enderror" accept=".pdf">
                    @error('surat') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
                <div class="col-md-6">
                    <label class="form-label">Proposal (PDF, maks 20MB)</label>
                    <input type="file" name="proposal" class="form-control @error('proposal') is-invalid @enderror" accept=".pdf">
                    @error('proposal') <div class="invalid-feedback">{{ $message }}</div> @enderror
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex gap-2 mb-4">
        <button type="submit" class="btn btn-secondary" value="draft" onclick="document.getElementById('submitAction').value='draft'">
            <i class="feather-save me-1"></i> Simpan Draft
        </button>
        <button type="submit" class="btn btn-primary" value="submit" onclick="document.getElementById('submitAction').value='submit'">
            <i class="feather-send me-1"></i> Simpan & Ajukan
        </button>
    </div>
</form>
@endif
@endsection

@if(!($existing ?? false))
@push('js')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let itemIndex = 0;
    const tbody = document.getElementById('itemsBody');
    const pagu = {{ (float) ($pagu?->nominal_pagu ?? 0) }};
    const categories = @json($categories->map(fn($cat) => ['id' => $cat->id, 'name' => $cat->name])->values());

    function escapeAttr(value) {
        return String(value ?? '').replace(/[&<>"']/g, char => ({
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;',
        }[char]));
    }

    function currencyRaw(value) {
        if (value === null || value === undefined || value === '') return '0';
        if (typeof value === 'number') return String(Math.round(value));
        const text = String(value).trim();
        if (/^\d+\.\d{1,2}$/.test(text)) return String(Math.round(parseFloat(text)));
        if (/^\d+,\d{1,2}$/.test(text)) return String(Math.round(parseFloat(text.replace(',', '.'))));
        const digits = text.replace(/[^\d]/g, '');
        return digits.replace(/^0+(?=\d)/, '') || '0';
    }

    function addRow(data) {
        const idx = itemIndex++;
        const tr = document.createElement('tr');
        tr.dataset.idx = idx;
        const kegiatan = escapeAttr(data?.kegiatan || '');
        const keterangan = escapeAttr(data?.keterangan || '');
        const waktuMulai = escapeAttr(data?.waktu_mulai || '');
        const waktuSelesai = escapeAttr(data?.waktu_selesai || '');
        const categoryId = String(data?.budget_category_id || '');
        const biayaRaw = currencyRaw(data?.biaya ?? 0);
        const biaya = escapeAttr(window.ebRupiah ? window.ebRupiah.format(biayaRaw) : biayaRaw);
        const biayaRawId = `itemBiayaRaw${idx}`;
        const categoryOptions = ['<option value="">Pilih</option>'].concat(categories.map(category => `<option value="${category.id}" ${String(category.id) === categoryId ? 'selected' : ''}>${escapeAttr(category.name)}</option>`)).join('');
        tr.innerHTML = `
            <td class="text-center align-middle item-no"></td>
            <td class="menu-rkat-item-cell">
                <input type="text" name="items[${idx}][kegiatan]" class="form-control form-control-sm menu-rkat-item-input" value="${kegiatan}" placeholder="Nama kegiatan" required>
            </td>
            <td class="menu-rkat-item-cell">
                <input type="text" name="items[${idx}][keterangan]" class="form-control form-control-sm menu-rkat-item-input" value="${keterangan}" placeholder="Keterangan (opsional)">
            </td>
            <td class="menu-rkat-item-cell">
                <select name="items[${idx}][budget_category_id]" class="form-select form-select-sm menu-rkat-item-input">${categoryOptions}</select>
            </td>
            <td class="menu-rkat-item-cell">
                <div class="menu-rkat-date-inline">
                    <input type="date" name="items[${idx}][waktu_mulai]" class="form-control form-control-sm menu-rkat-item-input" value="${waktuMulai}">
                    <span>s/d</span>
                    <input type="date" name="items[${idx}][waktu_selesai]" class="form-control form-control-sm menu-rkat-item-input" value="${waktuSelesai}">
                </div>
            </td>
            <td class="menu-rkat-item-cell">
                <input type="text" class="form-control form-control-sm text-end menu-rkat-item-input input-biaya js-rupiah-input" value="${biaya}" inputmode="numeric" autocomplete="off" data-rupiah-target="#${biayaRawId}" required>
                <input type="hidden" name="items[${idx}][biaya]" id="${biayaRawId}" class="input-biaya-raw" value="${biayaRaw}">
            </td>
            <td class="text-center align-middle"><button type="button" class="btn btn-sm menu-remove-btn btn-remove" title="Hapus item" aria-label="Hapus item"><i class="feather-x"></i></button></td>
        `;
        tbody.appendChild(tr);
        window.ebRupiah?.init(tr);
        recalc();
    }

    function recalc() {
        let grand = 0;
        tbody.querySelectorAll('tr').forEach((tr, i) => {
            tr.querySelector('.item-no').textContent = i + 1;
            const rawValue = tr.querySelector('.input-biaya-raw')?.value || window.ebRupiah?.raw(tr.querySelector('.input-biaya')?.value || 0) || 0;
            grand += parseFloat(rawValue || 0);
        });
        document.getElementById('grandTotal').textContent = 'Rp ' + grand.toLocaleString('id-ID');
        document.getElementById('paguTotalRkat').textContent = 'Rp ' + grand.toLocaleString('id-ID');
        if (pagu > 0) {
            const selisih = pagu - grand;
            document.getElementById('paguSelisih').textContent = (selisih < 0 ? '-Rp ' : 'Rp ') + Math.abs(selisih).toLocaleString('id-ID');
            document.getElementById('paguSelisih').classList.toggle('text-danger', selisih < 0);
            document.getElementById('paguWarning').classList.toggle('d-none', selisih >= 0);
        }
    }

    document.getElementById('btnAddItem').addEventListener('click', () => addRow());

    tbody.addEventListener('click', e => {
        if (e.target.closest('.btn-remove')) {
            e.target.closest('tr').remove();
            recalc();
        }
    });

    tbody.addEventListener('input', e => {
        if (e.target.classList.contains('input-biaya')) recalc();
    });

    @if(old('items'))
        @foreach(old('items') as $i => $item)
            @php
                $oldItem = [
                    'budget_category_id' => data_get($item, 'budget_category_id', ''),
                    'kegiatan' => data_get($item, 'kegiatan', ''),
                    'keterangan' => data_get($item, 'keterangan', ''),
                    'waktu_mulai' => data_get($item, 'waktu_mulai', ''),
                    'waktu_selesai' => data_get($item, 'waktu_selesai', ''),
                    'biaya' => data_get($item, 'biaya', data_get($item, 'harga', 0)),
                ];
            @endphp
            addRow({!! \Illuminate\Support\Js::from($oldItem) !!});
        @endforeach
    @else
        addRow();
    @endif
});
</script>
@endpush
@endif