@extends('layouts.app')

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

@section('content')
<div class="bg-white rounded shadow p-6 max-w-3xl">
    <form action="{{ route('items.store') }}" method="POST">
        @csrf

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="mb-4">
                <label class="block mb-2 font-medium">Kategori</label>
                <select name="category_id" class="w-full border rounded px-3 py-2" required>
                    <option value="">-- Pilih Kategori --</option>
                    @foreach ($categories as $category)
                        <option value="{{ $category->id }}" @selected(old('category_id') == $category->id)>{{ $category->name }}</option>
                    @endforeach
                </select>
                @error('category_id')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
            </div>

            <div class="mb-4">
                <label class="block mb-2 font-medium">Divisi</label>
                <select name="division_id" class="w-full border rounded px-3 py-2">
                    <option value="">-- Pilih Divisi --</option>
                    @foreach ($divisions as $division)
                        <option value="{{ $division->id }}" @selected(old('division_id') == $division->id)>{{ $division->name }}</option>
                    @endforeach
                </select>
                @error('division_id')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="mb-4">
                <div class="mb-2 flex items-center justify-between gap-3">
                    <label class="font-medium">Kode Barang</label>
                    <label class="flex items-center gap-2 text-sm text-gray-600">
                        <input
                            id="autoCodeCheckbox"
                            type="checkbox"
                            name="auto_code"
                            value="1"
                            class="rounded border-gray-300"
                            @checked(old('auto_code', true))
                        >
                        Kode otomatis
                    </label>
                </div>
                <input
                    id="codeInput"
                    type="text"
                    name="code"
                    value="{{ old('code') }}"
                    class="w-full border rounded px-3 py-2 disabled:bg-gray-100 disabled:text-gray-500"
                    placeholder="Otomatis dibuat oleh sistem"
                >
                @error('code')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
            </div>
            <div class="mb-4">
                <label class="block mb-2 font-medium">Nama Barang</label>
                <input type="text" name="name" value="{{ old('name') }}" class="w-full border rounded px-3 py-2" required>
                @error('name')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="mb-4">
                <label class="block mb-2 font-medium">Stok Awal</label>
                <input type="number" name="stock" value="{{ old('stock', 0) }}" class="w-full border rounded px-3 py-2" min="0" required>
                @error('stock')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
            </div>
            <div class="mb-4">
                <label class="block mb-2 font-medium">Satuan</label>
                <input type="text" name="unit" value="{{ old('unit', 'Pcs') }}" class="w-full border rounded px-3 py-2" placeholder="Contoh: Pcs, Pack, Botol" required>
                @error('unit')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div class="mb-4">
                <label class="block mb-2 font-medium">Minimum Stok</label>
                <input type="number" name="minimum_stock" value="{{ old('minimum_stock', 2) }}" class="w-full border rounded px-3 py-2" min="0" required>
                @error('minimum_stock')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
            </div>
            <div class="mb-4">
                <label class="block mb-2 font-medium">Harga</label>
                <input type="number" name="price" value="{{ old('price', 0) }}" class="w-full border rounded px-3 py-2" min="0" required>
                @error('price')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
            </div>
        </div>

        <div class="mb-4">
            <label class="block mb-2 font-medium">Deskripsi</label>
            <textarea name="description" class="w-full border rounded px-3 py-2" rows="4">{{ old('description') }}</textarea>
            @error('description')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
        </div>

        <div class="flex gap-2">
            <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Simpan</button>
            <a href="{{ route('items.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">Kembali</a>
        </div>
    </form>
</div>

<script>
    function toggleCodeInput() {
        const checkbox = document.getElementById('autoCodeCheckbox');
        const codeInput = document.getElementById('codeInput');

        if (!checkbox || !codeInput) return;

        codeInput.disabled = checkbox.checked;
        codeInput.required = !checkbox.checked;
        codeInput.placeholder = checkbox.checked ? 'Otomatis dibuat oleh sistem' : 'Contoh: BRG001';

        if (checkbox.checked) {
            codeInput.value = '';
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        const checkbox = document.getElementById('autoCodeCheckbox');

        toggleCodeInput();
        checkbox?.addEventListener('change', toggleCodeInput);
    });
</script>
@endsection