@extends('layouts.app')
@section('title','Catat Pengeluaran')
@section('page-title','Catat Pengeluaran')

@push('head')
<style>
.ss-wrap{position:relative}
.ss-input{width:100%;border:1px solid #d1d5db;border-radius:.5rem;padding:.5rem .75rem;font-size:.875rem;background:#fff;outline:none;box-sizing:border-box;line-height:1.4}
.ss-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.25)}
.ss-input.is-invalid{border-color:#f87171}
.ss-dropdown{position:fixed;background:#fff;border:1px solid #d1d5db;border-radius:.5rem;box-shadow:0 6px 20px rgba(0,0,0,.11);z-index:9999;max-height:220px;overflow-y:auto}
.ss-item{padding:7px 11px;cursor:pointer;font-size:.875rem;line-height:1.35;border-bottom:1px solid #f3f4f6;user-select:none}
.ss-item:last-child{border-bottom:none}
.ss-item:hover{background:#eff6ff}
.ss-empty{padding:9px 11px;color:#9ca3af;font-size:.84rem}
</style>
@endpush

@section('content')
<div class="max-w-2xl">
<div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
<form method="POST" action="{{ route('expenses.store') }}" class="space-y-4">
@csrf

@if($errors->any())
<div class="bg-red-50 border border-red-200 rounded-lg px-4 py-3">
    <p class="text-red-700 text-sm font-medium mb-1">Terdapat kesalahan:</p>
    <ul class="list-disc list-inside text-red-600 text-sm space-y-0.5">
        @foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach
    </ul>
</div>
@endif

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">
            Kategori <span class="text-red-500">*</span>
        </label>
        <div class="ss-wrap">
            <input type="text" id="cat-search" autocomplete="off" placeholder="Cari atau pilih kategori pengeluaran…"
                   class="ss-input @error('category_id') is-invalid @enderror">
            <input type="hidden" name="category_id" id="cat-hidden" value="{{ old('category_id') }}">
            <div id="cat-dropdown" class="ss-dropdown" style="display:none"></div>
        </div>
        @error('category_id')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
        @if($categories->isEmpty())
        <p class="text-xs text-orange-600 mt-1">
            Belum ada kategori. <a href="{{ route('expenses.categories.index') }}" class="underline font-medium">Tambah kategori dulu</a>.
        </p>
        @endif
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Tanggal <span class="text-red-500">*</span></label>
        <input type="date" name="date" value="{{ old('date', date('Y-m-d')) }}"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 @error('date') border-red-400 @enderror">
        @error('date')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
    </div>
</div>

<div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Keterangan <span class="text-red-500">*</span></label>
    <input type="text" name="description" value="{{ old('description') }}"
           placeholder="Deskripsi pengeluaran..."
           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 @error('description') border-red-400 @enderror">
    @error('description')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
</div>

<div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Jumlah (Rp) <span class="text-red-500">*</span></label>
    <input type="number" name="amount" value="{{ old('amount') }}" min="0" step="1"
           placeholder="0"
           class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 @error('amount') border-red-400 @enderror">
    @error('amount')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Metode Pembayaran</label>
        <select name="payment_method" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="tunai" {{ old('payment_method','tunai') === 'tunai' ? 'selected' : '' }}>Tunai</option>
            <option value="transfer" {{ old('payment_method') === 'transfer' ? 'selected' : '' }}>Transfer Bank</option>
        </select>
    </div>
    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">No. Referensi</label>
        <input type="text" name="reference_number" value="{{ old('reference_number') }}"
               placeholder="Opsional"
               class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>
</div>

<div>
    <label class="block text-sm font-medium text-gray-700 mb-1">Catatan</label>
    <textarea name="notes" rows="2" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">{{ old('notes') }}</textarea>
</div>

<div class="flex gap-3 pt-2">
    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium px-5 py-2 rounded-lg transition">Simpan Pengeluaran</button>
    <a href="{{ route('expenses.index') }}" class="bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-medium px-5 py-2 rounded-lg transition">Batal</a>
</div>
</form>
</div>
</div>

@php
    $categoriesData = $categories->map(fn($c) => ['id' => $c->id, 'name' => $c->name]);
@endphp
@push('scripts')
<script>
const expCatData = @json($categoriesData);

function positionDropdown(input, dd) {
    var r = input.getBoundingClientRect();
    dd.style.top = (r.bottom + 2) + 'px';
    dd.style.left = r.left + 'px';
    dd.style.width = r.width + 'px';
}
function safeEsc(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;');
}

function initExpCatSearch() {
    var input  = document.getElementById('cat-search');
    var hidden = document.getElementById('cat-hidden');
    var dd     = document.getElementById('cat-dropdown');
    function render(q) {
        var list = q ? expCatData.filter(c => c.name.toLowerCase().includes(q.toLowerCase())) : expCatData;
        dd.innerHTML = list.length
            ? list.map(c => '<div class="ss-item" data-id="'+c.id+'" data-name="'+safeEsc(c.name)+'">'+safeEsc(c.name)+'</div>').join('')
            : '<div class="ss-empty">Data tidak ditemukan</div>';
        dd.querySelectorAll('.ss-item').forEach(function(el) {
            el.addEventListener('mousedown', function(e) {
                e.preventDefault(); hidden.value = el.dataset.id; input.value = el.dataset.name; dd.style.display = 'none';
            });
        });
        positionDropdown(input, dd); dd.style.display = 'block';
    }
    input.addEventListener('focus', function() { render(input.value); });
    input.addEventListener('input', function() { render(input.value); hidden.value = ''; });
    input.addEventListener('blur', function() { setTimeout(function() { dd.style.display = 'none'; }, 220); });
}

document.addEventListener('DOMContentLoaded', function() {
    initExpCatSearch();
    var oldCat = '{{ old('category_id') }}';
    if (oldCat) {
        var c = expCatData.find(x => String(x.id) === oldCat);
        if (c) document.getElementById('cat-search').value = c.name;
    }
});
</script>
@endpush
@endsection