@extends('layouts.app')

@section('title', 'Tambah Barang - INUFA')

@section('header', 'Peralatan Audio Sound System')

@section('content')
<div class="bg-white rounded shadow-md p-6 max-w-2xl mx-auto">
    <h2 class="text-2xl font-bold mb-6">Tambah Barang Baru</h2>
    
    <!-- Validation Errors -->
    @if ($errors->any())
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
        <strong class="font-bold">Input tidak valid!</strong>
        <ul class="mt-2 list-disc list-inside text-sm">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    
    <form action="{{ route('barang.store') }}" method="POST" class="space-y-4" enctype="multipart/form-data">
        @csrf
        
        <!-- Nama Barang -->
        <div class="grid grid-cols-3 items-center">
            <label for="nama" class="font-semibold">Nama Barang:</label>
            <div class="col-span-2">
                <input type="text" id="nama" name="nama" placeholder="Masukkan nama barang" class="w-full p-2 border border-gray-300 rounded" required>
            </div>
        </div>
        
        <!-- Stok -->
        <div class="grid grid-cols-3 items-center">
            <label for="stok" class="font-semibold">Stok:</label>
            <div class="col-span-2">
                <input type="number" id="stok" name="stok" min="0" placeholder="Masukkan jumlah stok" class="w-full p-2 border border-gray-300 rounded" required>
            </div>
        </div>
        
        <!-- Gambar -->
        <div class="grid grid-cols-3 items-center">
            <label for="gambar" class="font-semibold">Gambar:</label>
            <div class="col-span-2">
                <input type="file" id="gambar" name="gambar" class="w-full p-2 border border-gray-300 rounded">
                <p class="text-sm text-gray-500 mt-1">Format: JPG, PNG. Maks: 2MB</p>
            </div>
        </div>
        
        <!-- Hidden fields for required data -->
        <input type="hidden" name="kategori" value="Lainnya">
        <input type="hidden" name="deskripsi" value="Deskripsi barang">
        
        <!-- Tombol -->
        <div class="flex justify-end space-x-4 pt-4">
            <a href="{{ route('barang') }}" class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">
                Batal
            </a>
            <button type="submit" class="px-4 py-2 bg-blue-800 text-white rounded hover:bg-blue-700">
                Simpan
            </button>
        </div>
    </form>
</div>
@endsection