@extends('layouts.dashboard')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-md p-6">
        <h2 class="text-2xl font-bold mb-6">Buat Pesanan</h2>

        <div class="mb-6">
            <h3 class="text-lg font-semibold mb-2">Detail Barang:</h3>
            <div class="bg-gray-50 p-4 rounded">
                <p class="mb-2"><span class="font-medium">Nama:</span> {{ $barang->nama }}</p>
                <p class="mb-2"><span class="font-medium">Harga:</span> Rp {{ number_format($barang->harga, 0, ',', '.') }}</p>
                <p class="mb-2"><span class="font-medium">Stok Tersedia:</span> {{ $barang->stok }}</p>
            </div>
        </div>

        <form action="{{ route('pesanan.store') }}" method="POST" class="space-y-4">
            @csrf
            <input type="hidden" name="barang_id" value="{{ $barang->id }}">

            <div>
                <label for="jumlah" class="block text-sm font-medium text-gray-700 mb-1">Jumlah</label>
                <input type="number" name="jumlah" id="jumlah"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                    min="1" max="{{ $barang->stok }}" value="1" required>
            </div>

            <div>
                <label for="catatan" class="block text-sm font-medium text-gray-700 mb-1">Catatan (Opsional)</label>
                <textarea name="catatan" id="catatan" rows="3"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
            </div>

            <div class="flex justify-between items-center mt-6">
                <a href="{{ route('barang.show', $barang) }}"
                    class="px-4 py-2 bg-gray-500 text-white rounded-md hover:bg-gray-600">
                    Kembali
                </a>
                <button type="submit"
                    class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                    Buat Pesanan
                </button>
            </div>
        </form>
    </div>
</div>
@endsection