@extends('layouts.app')

@section('content')

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; margin-top: 15px;">
    <h2 style="color: #d4af37; font-size: 1.5rem; font-weight: bold;">
        {{ app()->getLocale() == 'ar' ? 'إضافة فرع جديد' : 'Create New Branch' }}
    </h2>
    <a href="{{ route('admin.branches.index') }}" style="background: #666; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none;">
        {{ app()->getLocale() == 'ar' ? 'عودة' : 'Back' }}
    </a>
</div>

<div class="py-12">
    <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">
        <form action="{{ route('admin.branches.store') }}" method="POST" class="space-y-8">
            @csrf

            <!-- Basic Information -->
            <div class="bg-[#111] border border-gray-800 rounded-2xl p-8">
                <h3 class="text-[#d4af37] font-bold mb-6">{{ app()->getLocale() == 'ar' ? 'معلومات الفرع' : 'Branch Information' }}</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'اسم الفرع *' : 'Branch Name *' }}</label>
                        <input type="text" name="name" required class="w-full bg-black border border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none" value="{{ old('name') }}">
                        @error('name') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'الكود *' : 'Code *' }}</label>
                        <input type="text" name="code" required class="w-full bg-black border border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none" value="{{ old('code') }}">
                        @error('code') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'البريد الإلكتروني *' : 'Email *' }}</label>
                        <input type="email" name="email" required class="w-full bg-black border border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none" value="{{ old('email') }}">
                        @error('email') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'الهاتف *' : 'Phone *' }}</label>
                        <input type="text" name="phone" required class="w-full bg-black border border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none" value="{{ old('phone') }}">
                        @error('phone') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'العنوان *' : 'Address *' }}</label>
                        <input type="text" name="address" required class="w-full bg-black border border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none" value="{{ old('address') }}">
                        @error('address') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'المدينة *' : 'City *' }}</label>
                        <input type="text" name="city" required class="w-full bg-black border border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none" value="{{ old('city') }}">
                        @error('city') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'المنطقة *' : 'Region *' }}</label>
                        <input type="text" name="region" required class="w-full bg-black border border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none" value="{{ old('region') }}">
                        @error('region') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'خط العرض' : 'Latitude' }}</label>
                        <input type="number" step="0.00000001" name="latitude" class="w-full bg-black border border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none" value="{{ old('latitude') }}">
                        @error('latitude') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>

                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'خط الطول' : 'Longitude' }}</label>
                        <input type="number" step="0.00000001" name="longitude" class="w-full bg-black border border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none" value="{{ old('longitude') }}">
                        @error('longitude') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>
                </div>
            </div>

            <!-- Manager & Description -->
            <div class="bg-[#111] border border-gray-800 rounded-2xl p-8">
                <h3 class="text-[#d4af37] font-bold mb-6">{{ app()->getLocale() == 'ar' ? 'إدارة الفرع' : 'Branch Management' }}</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'مدير الفرع' : 'Branch Manager' }}</label>
                        <select name="manager_id" class="w-full bg-black border border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none">
                            <option value="">{{ app()->getLocale() == 'ar' ? 'اختر مديراً' : 'Select Manager' }}</option>
                            @foreach($managers as $manager)
                                <option value="{{ $manager->id }}" {{ old('manager_id') == $manager->id ? 'selected' : '' }}>
                                    {{ $manager->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('manager_id') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>

                    <div class="md:col-span-2">
                        <label class="block text-sm text-gray-400 mb-2">{{ app()->getLocale() == 'ar' ? 'الوصف' : 'Description' }}</label>
                        <textarea name="description" rows="4" class="w-full bg-black border border-gray-800 rounded-lg px-4 py-2.5 text-white focus:border-[#d4af37] outline-none">{{ old('description') }}</textarea>
                        @error('description') <span class="text-red-500 text-xs">{{ $message }}</span> @enderror
                    </div>
                </div>
            </div>

            <!-- Form Actions -->
            <div class="flex gap-4">
                <button type="submit" class="bg-[#d4af37] text-black px-6 py-2.5 rounded-lg font-bold hover:bg-[#c9a227] transition-colors">
                    {{ app()->getLocale() == 'ar' ? 'إنشاء الفرع' : 'Create Branch' }}
                </button>
                <a href="{{ route('admin.branches.index') }}" class="bg-gray-800 text-white px-6 py-2.5 rounded-lg font-bold hover:bg-gray-700 transition-colors">
                    {{ app()->getLocale() == 'ar' ? 'إلغاء' : 'Cancel' }}
                </a>
            </div>
        </form>
    </div>
</div>

@endsection
