@extends('layouts.app')

@section('title', 'Buat SPJ')

@section('content')
<div class="space-y-6">

    <div class="flex flex-col md:flex-row justify-between items-start md:items-center bg-white p-5 rounded-lg shadow border border-gray-200 gap-4">
        <div>
            <h1 class="text-xl font-bold text-gray-800">Buat SPJ</h1>
            <p class="text-gray-500 text-sm">Pilih nomor bukti pengeluaran dari rekap realisasi untuk dilekatkan ke SPJ.</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <a href="{{ route('carei.spj.index') }}" class="bg-gray-500 hover:bg-gray-600 text-white text-sm font-medium px-4 py-2 rounded-lg shadow transition">Kembali</a>
        </div>
    </div>

    @include('carei.partials.alert')

    <div class="bg-white p-6 rounded-lg shadow border border-gray-200">
        <form method="POST" action="{{ route('carei.spj.store') }}">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label for="nomor_spj" class="block text-sm font-medium text-gray-700 mb-1">Nomor SPJ</label>
                    <input id="nomor_spj" type="text" name="nomor_spj" value="{{ old('nomor_spj') }}" placeholder="otomatis jika kosong" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    @error('nomor_spj')
                        <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="kegiatan" class="block text-sm font-medium text-gray-700 mb-1">Kegiatan</label>
                    <input id="kegiatan" type="text" name="kegiatan" value="{{ old('kegiatan') }}" placeholder="cth. Rekomendasi Kebijakan ..." class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    @error('kegiatan')
                        <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="tanggal" class="block text-sm font-medium text-gray-700 mb-1">Tanggal</label>
                    <input id="tanggal" type="date" name="tanggal" value="{{ old('tanggal', now()->format('Y-m-d')) }}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    @error('tanggal')
                        <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="mt-6">
                <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">Pilih No Bukti Pengeluaran (dari Rekap Realisasi)</h3>
                <div class="border border-gray-200 rounded-lg max-h-80 overflow-y-auto p-2 divide-y divide-gray-100">
                    @forelse ($pengeluaran as $p)
                        <label class="flex items-start gap-3 py-2 cursor-pointer hover:bg-gray-50 px-2 rounded">
                            <input type="checkbox" name="rekap_ids[]" value="{{ $p->id }}" class="mt-1 rounded border-gray-300 text-teal-600 shadow-sm focus:ring-teal-500">
                            <span class="text-sm">
                                <span class="font-mono font-semibold">No. {{ $p->no_bukti }}</span> &middot; {{ $p->tgl?->format('d/m/Y') }}
                                <span class="block text-gray-500">{{ \Illuminate\Support\Str::limit($p->uraian, 120) }}</span>
                                <span class="block text-xs text-gray-400">MAK: {{ $p->kode_mak ?? '-' }} | Rp {{ number_format($p->k, 0, ',', '.') }}</span>
                            </span>
                        </label>
                    @empty
                        <p class="text-sm text-gray-500 p-3">Belum ada pengeluaran (K > 0) pada rekap realisasi.</p>
                    @endforelse
                </div>
                <div class="mt-2 text-xs text-gray-500">
                    <button type="button" onclick="toggleChecks(true)" class="text-teal-600 hover:underline">Pilih semua</button>
                    &middot;
                    <button type="button" onclick="toggleChecks(false)" class="text-teal-600 hover:underline">Bersihkan</button>
                </div>
                @error('rekap_ids')
                    <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                @enderror
            </div>

            <div class="pt-6 mt-6 border-t border-gray-200 flex justify-end gap-3">
                <a href="{{ route('carei.spj.index') }}" class="bg-gray-500 hover:bg-gray-600 text-white text-sm font-medium px-4 py-2 rounded-lg shadow transition">Batal</a>
                <button type="submit" class="bg-teal-700 hover:bg-teal-800 text-white font-medium px-8 py-2.5 rounded-lg shadow-md transition">Simpan SPJ</button>
            </div>
        </form>
    </div>

</div>
@endsection

@push('scripts')
<script>
    function toggleChecks(checked) {
        document.querySelectorAll('input[name="rekap_ids[]"]').forEach(c => c.checked = checked);
    }
</script>
@endpush