@extends('layouts.app')

@section('title', 'Tambah Transaksi Rekap')

@section('content')
<div class="max-w-3xl mx-auto 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">Tambah Transaksi Rekap</h1>
            <p class="text-gray-500 text-sm">Catat penerimaan (D) maupun pengeluaran (K).</p>
        </div>
    </div>

    <div class="bg-white p-6 rounded-lg shadow border border-gray-200">
        @include('carei.partials.alert')

        <form action="{{ route('carei.rekap.store') }}" method="POST" class="space-y-5">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label for="tgl" class="block text-sm font-medium text-gray-700 mb-1">Tanggal</label>
                    <input id="tgl" type="date" name="tgl" value="{{ old('tgl', now()->format('Y-m-d')) }}" required class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    @error('tgl')
                        <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="no_bukti" class="block text-sm font-medium text-gray-700 mb-1">No Bukti</label>
                    <input id="no_bukti" type="text" name="no_bukti" value="{{ old('no_bukti', $noBukti) }}" required class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    @error('no_bukti')
                        <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div>
                <label for="uraian" class="block text-sm font-medium text-gray-700 mb-1">Uraian</label>
                <textarea id="uraian" name="uraian" rows="3" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">{{ old('uraian') }}</textarea>
                @error('uraian')
                    <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label for="penerima" class="block text-sm font-medium text-gray-700 mb-1">Penerima / Nama (untuk DRPP)</label>
                <input id="penerima" type="text" name="penerima" value="{{ old('penerima') }}" placeholder="cth. Joni, dkk" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                @error('penerima')
                    <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                @enderror
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                <div>
                    <label for="activity" class="block text-sm font-medium text-gray-700 mb-1">Activity</label>
                    <input id="activity" type="text" name="activity" value="{{ old('activity') }}" placeholder="cth. 5.1, 6.1" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    @error('activity')
                        <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="bucket" class="block text-sm font-medium text-gray-700 mb-1">Bucket</label>
                    <input id="bucket" type="text" name="bucket" value="{{ old('bucket') }}" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                    @error('bucket')
                        <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="kode_mak" class="block text-sm font-medium text-gray-700 mb-1">Kode MAK</label>
                    <select id="kode_mak" name="kode_mak" class="w-full border-gray-300 rounded-lg p-2.5 border focus:ring-teal-500 focus:border-teal-500">
                        <option value="">- pilih / kosongkan -</option>
                        @foreach($kodeMaks as $km)
                            <option value="{{ $km->kode_mak }}" @selected(old('kode_mak') === $km->kode_mak)>{{ $km->kode_mak }}</option>
                        @endforeach
                    </select>
                    @error('kode_mak')
                        <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label for="d" class="block text-sm font-medium text-emerald-800 mb-1">Dana Masuk (D) - Rp</label>
                    <input id="d" type="number" step="0.01" min="0" name="d" value="{{ old('d') }}" placeholder="0" class="w-full border-emerald-300 rounded-lg p-2.5 border bg-emerald-50 focus:ring-teal-500 focus:border-teal-500">
                    @error('d')
                        <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                    @enderror
                </div>
                <div>
                    <label for="k" class="block text-sm font-medium text-red-800 mb-1">Pengeluaran (K) - Rp</label>
                    <input id="k" type="number" step="0.01" min="0" name="k" value="{{ old('k') }}" placeholder="0" class="w-full border-red-300 rounded-lg p-2.5 border bg-red-50 focus:ring-teal-500 focus:border-teal-500">
                    @error('k')
                        <p class="text-xs text-red-600 mt-1.5">{{ $message }}</p>
                    @enderror
                </div>
            </div>
            <p class="text-xs text-gray-500">Isi salah satu: D untuk dana masuk, K untuk pengeluaran.</p>

            <div class="pt-6 mt-6 border-t border-gray-200 flex justify-end gap-3">
                <a href="{{ route('carei.rekap.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