@extends('layouts.app')

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

@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 DRPP</h1>
            <p class="text-gray-500 text-sm">Buat Daftar Rincian Permintaan Pembayaran baru.</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <a href="{{ route('carei.drpp.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.drpp.store') }}">
            @csrf

            <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mb-4 pb-2 border-b border-gray-100">Identitas DRPP</h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label for="nomor" class="block text-sm font-medium text-gray-700 mb-1">Nomor DRPP</label>
                    <input id="nomor" type="text" name="nomor" value="{{ old('nomor') }}" placeholder="biarkan kosong utk otomatis" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    @error('nomor')
                        <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="termin" class="block text-sm font-medium text-gray-700 mb-1">Termin / Keterangan</label>
                    <input id="termin" type="text" name="termin" value="{{ old('termin') }}" placeholder="cth. Termin I" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    @error('termin')
                        <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <h3 class="text-sm font-bold uppercase text-teal-800 tracking-wider mt-6 mb-4 pb-2 border-b border-gray-100">Informasi Organisasi</h3>

            <div class="mt-5">
                <label for="kementerian" class="block text-sm font-medium text-gray-700 mb-1">Kementerian</label>
                <input id="kementerian" type="text" name="kementerian" value="{{ old('kementerian', 'Kementerian Koordinator Bidang Pemberdayaan Masyarakat') }}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                @error('kementerian')
                    <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                @enderror
            </div>

            <div class="mt-5">
                <label for="unit_organisasi" class="block text-sm font-medium text-gray-700 mb-1">Unit Organisasi</label>
                <input id="unit_organisasi" type="text" name="unit_organisasi" value="{{ old('unit_organisasi', 'Proyek CARE-I') }}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                @error('unit_organisasi')
                    <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                @enderror
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-5">
                <div>
                    <label for="lokasi" class="block text-sm font-medium text-gray-700 mb-1">Lokasi</label>
                    <input id="lokasi" type="text" name="lokasi" value="{{ old('lokasi') }}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    @error('lokasi')
                        <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="satuan_kerja" class="block text-sm font-medium text-gray-700 mb-1">Satuan Kerja</label>
                    <input id="satuan_kerja" type="text" name="satuan_kerja" value="{{ old('satuan_kerja') }}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    @error('satuan_kerja')
                        <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="mt-5">
                <label for="alamat" class="block text-sm font-medium text-gray-700 mb-1">Alamat</label>
                <textarea id="alamat" name="alamat" rows="2" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">{{ old('alamat') }}</textarea>
                @error('alamat')
                    <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.drpp.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</button>
            </div>
        </form>
    </div>

</div>
@endsection