<x-admin-layout title="Input Biaya" subtitle="Catat biaya operasional cabang, ongkir, perlengkapan, maintenance, sampai marketing.">
    <div class="grid gap-5 lg:grid-cols-[380px_1fr]">
        <section class="rounded-lg bg-white p-5 shadow-sm">
            <h2 class="font-semibold">Tambah Biaya</h2>
            <form method="post" action="{{ route('expenses.store') }}" class="mt-4 space-y-4">
                @csrf
                <label class="block text-sm">
                    Cabang
                    <select name="branch_id" class="mt-1 w-full rounded-md border px-3 py-2" required>
                        @foreach ($branches as $branch)
                            <option value="{{ $branch->id }}" @selected((int) old('branch_id', $filters['branch_id'] ?? auth()->user()->branch_id) === $branch->id)>{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </label>

                <label class="block text-sm">
                    Tanggal biaya
                    <input type="date" name="expense_date" value="{{ old('expense_date', now()->toDateString()) }}" class="mt-1 w-full rounded-md border px-3 py-2" required>
                </label>

                <label class="block text-sm">
                    Nama biaya
                    <input name="name" value="{{ old('name') }}" placeholder="Contoh: Beli plastik laundry" class="mt-1 w-full rounded-md border px-3 py-2" required>
                </label>

                <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
                    <label class="block text-sm">
                        Jenis biaya
                        <select name="type" class="mt-1 w-full rounded-md border px-3 py-2" required>
                            @foreach ($types as $value => $label)
                                <option value="{{ $value }}" @selected(old('type', 'operational') === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </label>

                    <label class="block text-sm">
                        Nominal
                        <input type="number" name="amount" min="0" step="0.01" value="{{ old('amount') }}" placeholder="0" class="mt-1 w-full rounded-md border px-3 py-2" required>
                    </label>
                </div>

                <label class="block text-sm">
                    Keterangan
                    <textarea name="description" rows="3" placeholder="Catatan tambahan bila perlu" class="mt-1 w-full rounded-md border px-3 py-2">{{ old('description') }}</textarea>
                </label>

                <button class="w-full rounded-md bg-slate-900 px-4 py-2 font-medium text-white">Simpan Biaya</button>
            </form>
        </section>

        <section class="space-y-5">
            <div class="rounded-lg bg-white p-5 shadow-sm">
                <form method="get" action="{{ route('expenses.index') }}" class="grid gap-3 md:grid-cols-5 md:items-end">
                    <label class="text-sm">
                        Cabang
                        <select name="branch_id" class="mt-1 w-full rounded-md border px-3 py-2">
                            @if (auth()->user()->isOwner())
                                <option value="">Semua cabang</option>
                            @endif
                            @foreach ($branches as $branch)
                                <option value="{{ $branch->id }}" @selected((int) ($filters['branch_id'] ?? 0) === $branch->id)>{{ $branch->name }}</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="text-sm">
                        Dari
                        <input type="date" name="start" value="{{ $filters['start'] }}" class="mt-1 w-full rounded-md border px-3 py-2">
                    </label>
                    <label class="text-sm">
                        Sampai
                        <input type="date" name="end" value="{{ $filters['end'] }}" class="mt-1 w-full rounded-md border px-3 py-2">
                    </label>
                    <label class="text-sm">
                        Jenis
                        <select name="type" class="mt-1 w-full rounded-md border px-3 py-2">
                            <option value="">Semua jenis</option>
                            @foreach ($typeLabels as $value => $label)
                                <option value="{{ $value }}" @selected(($filters['type'] ?? null) === $value)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </label>
                    <button class="rounded-md border px-4 py-2 text-sm font-medium">Filter</button>
                </form>
            </div>

            <div class="grid gap-4 md:grid-cols-3">
                <div class="rounded-lg bg-white p-5 shadow-sm">
                    <div class="text-sm text-slate-500">Total biaya periode ini</div>
                    <div class="mt-2 text-2xl font-bold">Rp {{ number_format($total, 0, ',', '.') }}</div>
                </div>
                <div class="rounded-lg bg-white p-5 shadow-sm">
                    <div class="text-sm text-slate-500">Jumlah transaksi</div>
                    <div class="mt-2 text-2xl font-bold">{{ number_format($expenses->total(), 0, ',', '.') }}</div>
                </div>
                <div class="rounded-lg bg-white p-5 shadow-sm">
                    <div class="text-sm text-slate-500">Periode</div>
                    <div class="mt-2 text-lg font-semibold">{{ \Illuminate\Support\Carbon::parse($filters['start'])->format('d/m/Y') }} - {{ \Illuminate\Support\Carbon::parse($filters['end'])->format('d/m/Y') }}</div>
                </div>
            </div>

            <div class="overflow-hidden rounded-lg bg-white shadow-sm">
                <div class="overflow-x-auto">
                    <table class="w-full text-left text-sm">
                        <thead class="bg-slate-100 text-xs uppercase text-slate-500">
                            <tr>
                                <th class="px-4 py-3">Tanggal</th>
                                <th class="px-4 py-3">Biaya</th>
                                <th class="px-4 py-3">Cabang</th>
                                <th class="px-4 py-3">Jenis</th>
                                <th class="px-4 py-3 text-right">Nominal</th>
                                <th class="px-4 py-3">Input</th>
                                <th class="px-4 py-3"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y">
                            @forelse ($expenses as $expense)
                                <tr class="align-top">
                                    <td class="whitespace-nowrap px-4 py-3">{{ $expense->expense_date?->format('d/m/Y') }}</td>
                                    <td class="px-4 py-3">
                                        <div class="font-medium">{{ $expense->name }}</div>
                                        @if ($expense->description)
                                            <div class="mt-1 max-w-md text-xs text-slate-500">{{ $expense->description }}</div>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3">{{ $expense->branch?->name }}</td>
                                    <td class="px-4 py-3">
                                        <span class="rounded-full bg-slate-100 px-2 py-1 text-xs font-medium">{{ $typeLabels[$expense->type] ?? $expense->type }}</span>
                                    </td>
                                    <td class="whitespace-nowrap px-4 py-3 text-right font-semibold">Rp {{ number_format((float) $expense->amount, 0, ',', '.') }}</td>
                                    <td class="px-4 py-3 text-xs text-slate-500">{{ $expense->user?->name ?? '-' }}</td>
                                    <td class="px-4 py-3 text-right">
                                        @if ($expense->type !== 'bonus_payout')
                                            <details class="relative">
                                                <summary class="cursor-pointer rounded-md border px-3 py-1 text-center text-xs font-medium">Edit</summary>
                                                <div class="absolute right-0 z-10 mt-2 w-80 rounded-lg border bg-white p-4 text-left shadow-xl">
                                                    <form method="post" action="{{ route('expenses.update', $expense) }}" class="space-y-3">
                                                        @csrf
                                                        @method('put')
                                                        <label class="block text-xs">Cabang
                                                            <select name="branch_id" class="mt-1 w-full rounded-md border px-3 py-2">
                                                                @foreach ($branches as $branch)
                                                                    <option value="{{ $branch->id }}" @selected($expense->branch_id === $branch->id)>{{ $branch->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </label>
                                                        <label class="block text-xs">Tanggal
                                                            <input type="date" name="expense_date" value="{{ $expense->expense_date?->toDateString() }}" class="mt-1 w-full rounded-md border px-3 py-2">
                                                        </label>
                                                        <label class="block text-xs">Nama biaya
                                                            <input name="name" value="{{ $expense->name }}" class="mt-1 w-full rounded-md border px-3 py-2">
                                                        </label>
                                                        <label class="block text-xs">Jenis
                                                            <select name="type" class="mt-1 w-full rounded-md border px-3 py-2">
                                                                @foreach ($types as $value => $label)
                                                                    <option value="{{ $value }}" @selected($expense->type === $value)>{{ $label }}</option>
                                                                @endforeach
                                                            </select>
                                                        </label>
                                                        <label class="block text-xs">Nominal
                                                            <input type="number" name="amount" min="0" step="0.01" value="{{ $expense->amount }}" class="mt-1 w-full rounded-md border px-3 py-2">
                                                        </label>
                                                        <label class="block text-xs">Keterangan
                                                            <textarea name="description" rows="2" class="mt-1 w-full rounded-md border px-3 py-2">{{ $expense->description }}</textarea>
                                                        </label>
                                                        <button class="rounded-md bg-slate-900 px-3 py-2 text-xs font-medium text-white">Update</button>
                                                    </form>
                                                    <form method="post" action="{{ route('expenses.destroy', $expense) }}" onsubmit="return confirm('Hapus biaya ini?')" class="mt-2">
                                                        @csrf
                                                        @method('delete')
                                                        <button class="rounded-md border border-red-200 px-3 py-2 text-xs font-medium text-red-700">Hapus</button>
                                                    </form>
                                                </div>
                                            </details>
                                        @else
                                            <span class="text-xs text-slate-400">Otomatis</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="px-4 py-10 text-center text-slate-500">Belum ada biaya pada filter ini.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                <div class="border-t px-4 py-3">{{ $expenses->links() }}</div>
            </div>
        </section>
    </div>
</x-admin-layout>
