@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto space-y-6">
    <!-- Page Header -->
    <div class="flex items-center gap-4">
        <a href="{{ route('inventory.items') }}" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        </a>
        <h1 class="text-2xl font-bold text-gray-900">
            {{ isset($item) && $item ? __('inventory.edit_item') : __('inventory.create_item') }}
        </h1>
    </div>

    <!-- Form -->
    <form method="POST" action="{{ isset($item) && $item ? route('inventory.items.update', $item) : route('inventory.items.store') }}"
          class="bg-white rounded-xl border border-gray-200 p-6 space-y-5">
        @csrf
        @if(isset($item) && $item)
        @method('PUT')
        @endif

        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <!-- Name -->
            <div>
                <label for="name" class="block text-sm font-medium text-gray-700 mb-1">{{ __('inventory.item_name') }} <span class="text-red-500">*</span></label>
                <input type="text" id="name" name="name" value="{{ old('name', isset($item) ? $item->name : '') }}"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500" required>
                @error('name')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Code -->
            <div>
                <label for="code" class="block text-sm font-medium text-gray-700 mb-1">{{ __('inventory.item_code') }}</label>
                <input type="text" id="code" name="code" value="{{ old('code', isset($item) ? $item->code : '') }}"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500" dir="ltr">
                @error('code')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Unit -->
            <div>
                <label for="unit" class="block text-sm font-medium text-gray-700 mb-1">{{ __('inventory.unit') }} <span class="text-red-500">*</span></label>
                <select id="unit" name="unit" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500" required>
                    <option value="عدد" {{ old('unit', isset($item) ? $item->unit : '') === 'عدد' ? 'selected' : '' }}>عدد</option>
                    <option value="کیلوگرم" {{ old('unit', isset($item) ? $item->unit : '') === 'کیلوگرم' ? 'selected' : '' }}>کیلوگرم</option>
                    <option value="متر" {{ old('unit', isset($item) ? $item->unit : '') === 'متر' ? 'selected' : '' }}>متر</option>
                    <option value="مترمربع" {{ old('unit', isset($item) ? $item->unit : '') === 'مترمربع' ? 'selected' : '' }}>مترمربع</option>
                    <option value="لیتر" {{ old('unit', isset($item) ? $item->unit : '') === 'لیتر' ? 'selected' : '' }}>لیتر</option>
                    <option value="رول" {{ old('unit', isset($item) ? $item->unit : '') === 'رول' ? 'selected' : '' }}>رول</option>
                    <option value="بسته" {{ old('unit', isset($item) ? $item->unit : '') === 'بسته' ? 'selected' : '' }}>بسته</option>
                    <option value="دستگاه" {{ old('unit', isset($item) ? $item->unit : '') === 'دستگاه' ? 'selected' : '' }}>دستگاه</option>
                    <option value="تن" {{ old('unit', isset($item) ? $item->unit : '') === 'تن' ? 'selected' : '' }}>تن</option>
                    <option value="ساعت" {{ old('unit', isset($item) ? $item->unit : '') === 'ساعت' ? 'selected' : '' }}>ساعت</option>
                </select>
                @error('unit')
                    <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Category -->
            <div>
                <label for="category" class="block text-sm font-medium text-gray-700 mb-1">{{ __('inventory.category') }}</label>
                <input type="text" id="category" name="category" value="{{ old('category', isset($item) ? $item->category : '') }}"
                       list="category-list"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500"
                       placeholder="{{ __('inventory.category_placeholder') ?? 'مثال: مصالح، ابزار،...' }}">
                <datalist id="category-list">
                    @foreach($categories as $cat)
                    <option value="{{ $cat }}">
                    @endforeach
                </datalist>
            </div>

            <!-- Min Stock -->
            <div>
                <label for="min_stock" class="block text-sm font-medium text-gray-700 mb-1">{{ __('inventory.min_stock') ?? 'حداقل موجودی' }}</label>
                <input type="number" id="min_stock" name="min_stock" value="{{ old('min_stock', isset($item) ? $item->min_stock : '') }}" step="0.01" min="0"
                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500">
                <p class="mt-1 text-xs text-gray-400">{{ __('inventory.min_stock_help') ?? 'هشدار کاهش موجودی' }}</p>
            </div>

            <!-- Is Active -->
            <div class="flex items-center gap-3">
                <label class="relative inline-flex items-center cursor-pointer">
                    <input type="checkbox" name="is_active" value="1"
                           {{ old('is_active', isset($item) ? $item->is_active : true) ? 'checked' : '' }}
                           class="sr-only peer">
                    <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-teal-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-teal-600"></div>
                    <span class="ms-3 text-sm font-medium text-gray-700">{{ __('inventory.active') }}</span>
                </label>
            </div>

            <!-- Description -->
            <div class="md:col-span-2">
                <label for="description" class="block text-sm font-medium text-gray-700 mb-1">{{ __('inventory.description') ?? 'توضیحات' }}</label>
                <textarea id="description" name="description" rows="3"
                          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500">{{ old('description', isset($item) ? $item->description : '') }}</textarea>
            </div>
        </div>

        <!-- Actions -->
        <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200">
            <a href="{{ route('inventory.items') }}" class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                {{ __('common.cancel') }}
            </a>
            <button type="submit" class="px-6 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 transition-colors">
                {{ isset($item) && $item ? __('common.save_changes') : __('common.create') }}
            </button>
        </div>
    </form>
</div>
@endsection