﻿<x-app-layout>
    <x-slot name="header">
        <div class="flex justify-between items-center">
            <h2 class="font-semibold text-l text-gray-800 leading-tight">
                {{ __('إضافة مستخدم جديد') }}
            </h2>
            <a href="{{ route('users.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 p-4 rounded">
                العودة للقائمة
            </a>
        </div>
    </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('users.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-gray-700 text-sm font-bold mb-2">الاسم الكامل:</label>
                                <input type="text" name="name" id="name" class="shadow appearance-none border rounded w-full py-2 p-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('name') border-red-500 @enderror" value="{{ old('name') }}" required>
                                @error('name')
                                    <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label for="email" class="block text-gray-700 text-sm font-bold mb-2">البريد الإلكتروني:</label>
                                <input type="email" name="email" id="email" class="shadow appearance-none border rounded w-full py-2 p-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('email') border-red-500 @enderror" value="{{ old('email') }}" required>
                                @error('email')
                                    <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label for="password" class="block text-gray-700 text-sm font-bold mb-2">كلمة المرور:</label>
                                <input type="password" name="password" id="password" class="shadow appearance-none border rounded w-full py-2 p-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('password') border-red-500 @enderror" required>
                                @error('password')
                                    <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label for="password_confirmation" class="block text-gray-700 text-sm font-bold mb-2">تأكيد كلمة المرور:</label>
                                <input type="password" name="password_confirmation" id="password_confirmation" class="shadow appearance-none border rounded w-full py-2 p-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" required>
                            </div>

                            <div class="mb-4">
                                <label for="branch_id" class="block text-gray-700 text-sm font-bold mb-2">الفرع:</label>
                                <select name="branch_id" id="branch_id" class="select2 shadow appearance-none border rounded w-full py-2 p-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
                                    <option value="">اختر الفرع</option>
                                    @foreach($branches as $branch)
                                        <option value="{{ $branch->id }}" {{ old('branch_id') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                                    @endforeach
                                </select>
                                @error('branch_id')
                                    <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div class="mb-4 md:col-span-2">
                                <label class="block text-gray-700 text-sm font-bold mb-2">رقم الهاتف:</label>
                                <div class="flex gap-2">
                                    <!-- Country Code Dropdown -->
                                    <select name="country_code" id="country_code" class="select2 shadow appearance-none border rounded w-40 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('country_code') border-red-500 @enderror">
                                        <option value="">اختر الدولة</option>
                                        <option value="SA" {{ old('country_code') == 'SA' ? 'selected' : '' }}>السعودية (+966)</option>
                                        <option value="AE" {{ old('country_code') == 'AE' ? 'selected' : '' }}>الإمارات (+971)</option>
                                        <option value="KW" {{ old('country_code') == 'KW' ? 'selected' : '' }}>الكويت (+965)</option>
                                        <option value="QA" {{ old('country_code') == 'QA' ? 'selected' : '' }}>قطر (+974)</option>
                                        <option value="BH" {{ old('country_code') == 'BH' ? 'selected' : '' }}>البحرين (+973)</option>
                                        <option value="OM" {{ old('country_code') == 'OM' ? 'selected' : '' }}>عمان (+968)</option>
                                        <option value="JO" {{ old('country_code') == 'JO' ? 'selected' : '' }}>الأردن (+962)</option>
                                        <option value="LB" {{ old('country_code') == 'LB' ? 'selected' : '' }}>لبنان (+961)</option>
                                        <option value="EG" {{ old('country_code') == 'EG' ? 'selected' : '' }}>مصر (+20)</option>
                                        <option value="GB" {{ old('country_code') == 'GB' ? 'selected' : '' }}>بريطانيا (+44)</option>
                                        <option value="US" {{ old('country_code') == 'US' ? 'selected' : '' }}>أمريكا (+1)</option>
                                    </select>

                                    <!-- Phone Number Input -->
                                    <input type="tel" name="phone" id="phone" placeholder="أدخل رقم الهاتف" class="shadow appearance-none border rounded flex-1 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('phone') border-red-500 @enderror" value="{{ old('phone') }}">
                                </div>
                                @error('country_code')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                                @error('phone')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                                <p class="text-gray-500 text-xs mt-1">مثال: 0501234567 (بدون رمز الدولة)</p>
                            </div>

                            <div class="mb-4">
                                <label for="position" class="block text-gray-700 text-sm font-bold mb-2">المسمى الوظيفي:</label>
                                <input type="text" name="position" id="position" class="shadow appearance-none border rounded w-full py-2 p-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline @error('position') border-red-500 @enderror" value="{{ old('position') }}">
                                @error('position')
                                    <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-6 mt-6">
                            <label class="block text-gray-700 text-lg font-bold mb-4">الأدوار والصلاحيات:</label>
                            @error('roles')
                                <p class="text-red-500 text-s mt-1">{{ $message }}</p>
                            @enderror
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 bg-gray-50 p-4 rounded-lg">
                                @foreach($roles as $role)
                                    <div class="mb-2 bg-white p-3 rounded shadow-sm hover:shadow-md transition-all">
                                        <label class="inline-flex items-center">
                                            <input type="checkbox" name="roles[]" value="{{ $role->id }}" class="form-checkbox h-5 w-5 text-primary-600" {{ in_array($role->id, old('roles', [])) ? 'checked' : '' }}>
                                            <span class="mr-2 font-medium">{{ $role->name }}</span>
                                        </label>
                                        @if($role->description)
                                            <p class="text-gray-500 text-s mt-1 mr-7">{{ $role->description }}</p>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="flex items-center justify-between mt-8">
                            <a href="{{ route('users.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 p-4 rounded focus:outline-none focus:shadow-outline">
                                إلغاء
                            </a>
                            <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">
                                حفظ المستخدم
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
