@extends('layouts.app')

@section('title', TranslationHelper::transFromDatabase('Inventory.CreateUnitTitle', __('إضافة وحدة قياس جديدة')))

@section('content')
<div class="container m-auto p-4 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2l font-semibold text-black">{{ TranslationHelper::transFromDatabase('Inventory.CreateUnitTitle', __('إضافة وحدة قياس جديدة')) }}</h1>
        <a href="{{ route('inventory.units.index') }}" class="bg-gray-200 hover:bg-gray-300 text-black font-bold py-2 p-4 rounded inline-flex items-center">
            <span>{{ TranslationHelper::transFromDatabase('Inventory.BackToUnits', __('العودة لقائمة الوحدات')) }}</span>
        </a>
    </div>

    <div class="bg-white rounded-lg shadow-md p-6">
        @if ($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 p-4 py-3 rounded mb-4">
                <ul class="list-disc list-inside">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('inventory.units.store') }}" method="POST">
            @csrf
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="mb-4">
                    <label for="name" class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.UnitName', __('اسم الوحدة')) }} <span class="text-red-600">*</span></label>
                    <input type="text" id="name" name="name" value="{{ old('name') }}" required
                        class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                </div>

                <div class="mb-4">
                    <label for="code" class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('Inventory.UnitCode', __('رمز الوحدة')) }}</label>
                    <input type="text" id="code" name="code" value="{{ old('code') }}"
                        class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">
                </div>

                <div class="mb-4 col-span-2">
                    <label for="description" class="block text-black font-bold mb-2">{{ TranslationHelper::transFromDatabase('General.Description', __('الوصف')) }}</label>
                    <textarea id="description" name="description" rows="3"
                        class="shadow appearance-none border rounded w-full py-2 p-3 text-black leading-tight focus:outline-none focus:shadow-outline">{{ old('description') }}</textarea>
                </div>

                <div class="mb-4">
                    <div class="flex items-center">
                        <input type="checkbox" id="is_active" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}
                            class="w-4 h-4 text-primary-600 bg-gray-100 border-gray-300 rounded focus:ring-primary-500">
                        <label for="is_active" class="mr-2 text-black font-bold">{{ TranslationHelper::transFromDatabase('Status.Active', __('نشط')) }}</label>
                    </div>
                </div>
            </div>

            <div class="flex items-center justify-end mt-6">
                <button type="submit" class="bg-primary-600 hover:bg-primary-700 text-white font-bold py-2 p-4 rounded focus:outline-none focus:shadow-outline">
                    {{ TranslationHelper::transFromDatabase('Inventory.SaveUnit', __('حفظ الوحدة')) }}
                </button>
            </div>
        </form>
    </div>
</div>
@endsection