@extends('layouts.app')

@section('content')
    <div class="space-y-6">
        <div class="flex flex-wrap items-center justify-between gap-4">
            <div>
                <h2 class="text-2xl font-semibold text-slate-900">Pengeluaran Barang</h2>
                <p class="text-sm text-slate-500">Catat pemakaian bahan baku untuk produksi.</p>
            </div>
            <x-button href="{{ route('warehouse.out.create') }}">Tambah Pengeluaran</x-button>
        </div>

        <x-card>
            <form method="get" class="mb-4 grid gap-3 md:grid-cols-4">
                <x-input name="q" placeholder="Cari item" :value="$search" />
                <x-input name="start_date" type="date" label="Dari" :value="$startDate" />
                <x-input name="end_date" type="date" label="Sampai" :value="$endDate" />
                <div class="flex items-end">
                    <x-button type="submit" variant="secondary" class="w-full">Filter</x-button>
                </div>
            </form>

            @php
                $formatQty = function ($value) {
                    $num = (float) ($value ?? 0);
                    return rtrim(rtrim(number_format($num, 2, '.', ''), '0'), '.') ?: '0';
                };
            @endphp

            <x-table>
                <thead class="bg-slate-50 text-xs uppercase text-slate-500">
                    <tr>
                        <th class="px-4 py-3">Tanggal</th>
                        <th class="px-4 py-3">Item</th>
                        <th class="px-4 py-3">Qty</th>
                        <th class="px-4 py-3">Catatan</th>
                        <th class="px-4 py-3">Dibuat</th>
                        <th class="px-4 py-3 text-right">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($outs as $row)
                        <tr class="border-b border-slate-100">
                            <td class="px-4 py-3">{{ $row->tanggal?->format('d-m-Y') }}</td>
                            <td class="px-4 py-3 font-medium text-slate-800">{{ $row->item?->nama }}</td>
                            <td class="px-4 py-3">{{ $formatQty($row->qty) }} {{ $row->item?->satuan }}</td>
                            <td class="px-4 py-3">{{ $row->note ?: '-' }}</td>
                            <td class="px-4 py-3">{{ $row->creator?->name ?? $row->creator?->username ?? '-' }}</td>
                            <td class="px-4 py-3 text-right">
                                <form method="post" action="{{ route('warehouse.out.destroy', $row) }}" onsubmit="return confirm('Hapus pengeluaran ini?')">
                                    @csrf
                                    @method('delete')
                                    <x-button variant="danger" type="submit" class="px-2" title="Hapus" aria-label="Hapus">
                                        <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path d="M6 2a1 1 0 0 0-1 1v1H3.5a1 1 0 0 0 0 2H4v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6h.5a1 1 0 1 0 0-2H15V3a1 1 0 0 0-1-1H6Zm2 6a1 1 0 1 1 2 0v6a1 1 0 1 1-2 0V8Zm4 0a1 1 0 1 1 2 0v6a1 1 0 1 1-2 0V8Z"/>
                                        </svg>
                                    </x-button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td class="px-4 py-6 text-center text-slate-500" colspan="6">Belum ada pengeluaran.</td>
                        </tr>
                    @endforelse
                </tbody>
            </x-table>

            <div class="mt-4">{{ $outs->links() }}</div>
        </x-card>
    </div>
@endsection
