@php
    $moduleName = 'Pharmacy';
    $arName = 'الصيدلية';
@endphp
<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-xl text-black leading-tight">
                {{ \App\Helpers\TranslationHelper::transFromDatabase($moduleName . ' - Create Medication', __($arName . ' - إضافة دواء جديد')) }}
            </h2>
            <a href="{{ route('healthcare.pharmacy.items.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded-md hover:bg-gray-600 transition">
                {{ __('Back') }}
            </a>
        </div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-black">
                    <form action="{{ route('healthcare.pharmacy.items.store') }}" method="POST">
                        @csrf
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <x-input-label for="trade_name" :value="__('Trade Name')" />
                                <x-text-input id="trade_name" class="block mt-1 w-full" type="text" name="trade_name" required autofocus />
                            </div>
                            <div>
                                <x-input-label for="scientific_name" :value="__('Scientific Name')" />
                                <x-text-input id="scientific_name" class="block mt-1 w-full" type="text" name="scientific_name" />
                            </div>
                            <div>
                                <x-input-label for="category" :value="__('Category')" />
                                <x-text-input id="category" class="block mt-1 w-full" type="text" name="category" />
                            </div>
                            <div>
                                <x-input-label for="form" :value="__('Form')" />
                                <x-text-input id="form" class="block mt-1 w-full" type="text" name="form" placeholder="e.g. Tablet, Syrup" />
                            </div>
                            <div>
                                <x-input-label for="strength" :value="__('Strength')" />
                                <x-text-input id="strength" class="block mt-1 w-full" type="text" name="strength" placeholder="e.g. 500mg" />
                            </div>
                            <div>
                                <x-input-label for="unit_price" :value="__('Unit Price')" />
                                <x-text-input id="unit_price" class="block mt-1 w-full" type="number" step="0.01" name="unit_price" required />
                            </div>
                            <div>
                                <label class="inline-flex items-center mt-6">
                                    <input type="checkbox" name="is_controlled" value="1" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
                                    <span class="mr-2 text-sm text-black">{{ __('Is Controlled Medication?') }}</span>
                                </label>
                            </div>
                        </div>

                        <div class="mt-6 flex justify-end">
                            <button type="submit" class="bg-indigo-600 text-white px-6 py-2 rounded-md hover:bg-indigo-700">
                                {{ __('Save') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>