<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-l text-gray-800 leading-tight">
            {{ __('إضافة شركة جديدة') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7l m-auto sm:p-6 lg:p-8">
            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    <form action="{{ route('companies.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- اسم الشركة -->
                            <div>
                                <x-input-label for="name" :value="__('اسم الشركة')" />
                                <x-text-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus />
                                <x-input-error :messages="$errors->get('name')" class="mt-2" />
                            </div>

                            <!-- السجل التجاري -->
                            <div>
                                <x-input-label for="commercial_record" :value="__('السجل التجاري (اختياري)')" />
                                <x-text-input id="commercial_record" class="block mt-1 w-full" type="text" name="commercial_record" :value="old('commercial_record')" />
                                <x-input-error :messages="$errors->get('commercial_record')" class="mt-2" />
                            </div>

                            <!-- الرقم الضريبي -->
                            <div>
                                <x-input-label for="tax_number" :value="__('الرقم الضريبي (اختياري)')" />
                                <x-text-input id="tax_number" class="block mt-1 w-full" type="text" name="tax_number" :value="old('tax_number')" />
                                <x-input-error :messages="$errors->get('tax_number')" class="mt-2" />
                            </div>

                            <!-- العنوان -->
                            <div>
                                <x-input-label for="address" :value="__('العنوان (اختياري)')" />
                                <x-text-input id="address" class="block mt-1 w-full" type="text" name="address" :value="old('address')" />
                                <x-input-error :messages="$errors->get('address')" class="mt-2" />
                            </div>

                            <!-- رقم الهاتف -->
                            <div>
                                <x-input-label for="phone" :value="__('رقم الهاتف (اختياري)')" />
                                <x-text-input id="phone" class="block mt-1 w-full" type="text" name="phone" :value="old('phone')" />
                                <x-input-error :messages="$errors->get('phone')" class="mt-2" />
                            </div>

                            <!-- البريد الإلكتروني -->
                            <div>
                                <x-input-label for="email" :value="__('البريد الإلكتروني (اختياري)')" />
                                <x-text-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" />
                                <x-input-error :messages="$errors->get('email')" class="mt-2" />
                            </div>

                            <!-- الموقع الإلكتروني -->
                            <div>
                                <x-input-label for="website" :value="__('الموقع الإلكتروني')" />
                                <x-text-input id="website" class="block mt-1 w-full" type="url" name="website" :value="old('website')" />
                                <x-input-error :messages="$errors->get('website')" class="mt-2" />
                            </div>

                            <!-- العملة الأساسية -->
                            <div>
                                <x-input-label for="currency" :value="__('العملة الأساسية')" />
                                <select id="currency" name="currency" class="block mt-1 w-full border-gray-300 focus:border-primary-500 focus:ring-primary-500 rounded-md shadow-sm" required>
                                    <option value="">{{ __('اختر العملة') }}</option>
                                    <option value="ريال سعودي" {{ old('currency', 'ريال سعودي') == 'ريال سعودي' ? 'selected' : '' }}>{{ __('ريال سعودي') }}</option>
                                    <option value="درهم اماراتي" {{ old('currency') == 'درهم اماراتي' ? 'selected' : '' }}>{{ __('درهم اماراتي') }}</option>
                                    <option value="جنيه مصري" {{ old('currency') == 'جنيه مصري' ? 'selected' : '' }}>{{ __('جنيه مصري') }}</option>
                                    <option value="دولار امريكي" {{ old('currency') == 'دولار امريكي' ? 'selected' : '' }}>{{ __('دولار امريكي') }}</option>
                                </select>
                                <x-input-error :messages="$errors->get('currency')" class="mt-2" />
                            </div>

                            <!-- العملة الجزئية -->
                            <div>
                                <x-input-label for="sub_currency" :value="__('العملة الجزئية (اختياري)')" />
                                <select id="sub_currency" name="sub_currency" class="block mt-1 w-full border-gray-300 focus:border-primary-500 focus:ring-primary-500 rounded-md shadow-sm">
                                    <option value="">{{ __('اختر العملة الجزئية') }}</option>
                                    <option value="هللة" {{ old('sub_currency', 'هللة') == 'هللة' ? 'selected' : '' }}>{{ __('هللة') }}</option>
                                    <option value="قرش" {{ old('sub_currency') == 'قرش' ? 'selected' : '' }}>{{ __('قرش') }}</option>
                                    <option value="سنت" {{ old('sub_currency') == 'سنت' ? 'selected' : '' }}>{{ __('سنت') }}</option>
                                </select>
                                <x-input-error :messages="$errors->get('sub_currency')" class="mt-2" />
                            </div>

                            <!-- شعار الشركة -->
                            <div>
                                <x-input-label for="logo" :value="__('شعار الشركة')" />
                                <input id="logo" class="block mt-1 w-full border-gray-300 focus:border-primary-500 focus:ring-primary-500 rounded-md shadow-sm" type="file" name="logo" accept="image/*" />
                                <x-input-error :messages="$errors->get('logo')" class="mt-2" />
                            </div>

                            <!-- حالة التفعيل -->
                            <div class="flex items-center mt-4">
                                <input id="is_active" type="checkbox" class="rounded border-gray-300 text-primary-600 shadow-sm focus:ring-primary-500" name="is_active" checked>
                                <label for="is_active" class="mr-2 text-sm text-gray-600">{{ __('تفعيل الشركة') }}</label>
                            </div>
                        </div>

                        <div class="flex items-center justify-end mt-6">
                            <a href="{{ route('companies.index') }}" class="inline-flex items-center p-4 py-2 bg-gray-300 border border-transparent rounded-md font-semibold text-s text-gray-800 uppercase tracking-widest hover:bg-gray-400 focus:bg-gray-400 active:bg-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 transition ease-in-out duration-150 ml-3">
                                {{ __('إلغاء') }}
                            </a>
                            <x-primary-button>
                                {{ __('إضافة') }}
                            </x-primary-button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
