@extends('layouts.app')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<style>
    .ts-control { background-color: black !important; border-color: #1f2937 !important; color: white !important; padding: 0.75rem 1rem !important; border-radius: 0.5rem !important; }
    .ts-dropdown { background-color: #111 !important; border-color: #1f2937 !important; color: white !important; }
    .ts-dropdown .active { background-color: #d4af37 !important; color: black !important; }
    .ts-dropdown .option { color: #9ca3af; }
    .ts-control input { color: white !important; }
</style>
@endpush

@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' ? 'إضافة مستخدم جديد' : 'Add New User' }}
    </h2>
    <a href="{{ route('admin.users.index') }}" style="background: #666; color: white; padding: 0.5rem 1rem; border-radius: 0.5rem; text-decoration: none; font-size: 0.875rem; font-weight: bold;">
        {{ app()->getLocale() == 'ar' ? 'عودة' : 'Back' }}
    </a>
</div>

<div class="py-12">
        <div class="mx-auto sm:px-6 lg:px-8" style="max-width: 850px;">
            <div class="bg-[#111] border border-gray-800 rounded-2xl overflow-hidden shadow-2xl">
                <div class="p-8 text-gray-300">
                    <form action="{{ route('admin.users.store') }}" method="POST">
                        @csrf
                        
                        <!-- Employee Selection Section -->
                        <div class="mb-8 p-6 bg-black/40 rounded-xl border border-dashed border-gray-800">
                            <label class="block text-xs text-[#d4af37] uppercase tracking-wider font-bold mb-3">
                                {{ app()->getLocale() == 'ar' ? 'ربط بموظف (اختياري)' : 'Link to Employee (Optional)' }}
                            </label>
                            <select id="employee_select" name="employee_id" placeholder="{{ app()->getLocale() == 'ar' ? 'ابحث عن موظف...' : 'Search for employee...' }}">
                                <option value="">{{ app()->getLocale() == 'ar' ? 'اختر موظفاً لسحب بياناته...' : 'Select an employee to pull data...' }}</option>
                                @foreach($employees as $emp)
                                    <option value="{{ $emp->id }}" 
                                        data-name="{{ $emp->name }}" 
                                        data-email="{{ $emp->email }}"
                                        data-job="{{ $emp->jobTitle ? $emp->jobTitle->name : '---' }}"
                                        data-branches="{{ $emp->branches->pluck('name')->implode(', ') }}">
                                        {{ $emp->name }} ({{ $emp->jobTitle ? $emp->jobTitle->name : '---' }})
                                    </option>
                                @endforeach
                            </select>

                            <div id="employee_details" class="hidden mt-4 grid grid-cols-2 gap-4 p-4 bg-[#d4af37]/5 rounded-lg border border-[#d4af37]/20">
                                <div>
                                    <span class="block text-[10px] text-gray-500 uppercase tracking-widest font-bold">{{ app()->getLocale() == 'ar' ? 'الوظيفة' : 'Job Title' }}</span>
                                    <span id="detail_job" class="text-sm text-white font-bold"></span>
                                </div>
                                <div>
                                    <span class="block text-[10px] text-gray-500 uppercase tracking-widest font-bold">{{ app()->getLocale() == 'ar' ? 'الفروع' : 'Branches' }}</span>
                                    <span id="detail_branches" class="text-sm text-[#d4af37] font-bold"></span>
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                            <div class="space-y-2">
                                <label class="block text-xs text-gray-500 uppercase tracking-wider font-bold">{{ app()->getLocale() == 'ar' ? 'الاسم' : 'Name' }}</label>
                                <input type="text" name="name" id="user_name"
                                    class="w-full bg-black border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none text-sm transition-all" 
                                    required>
                            </div>

                            <div class="space-y-2">
                                <label class="block text-xs text-gray-500 uppercase tracking-wider font-bold">{{ app()->getLocale() == 'ar' ? 'البريد الإلكتروني' : 'Email' }}</label>
                                <input type="email" name="email" id="user_email"
                                    class="w-full bg-black border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none text-sm transition-all" 
                                    required>
                            </div>

                            <div class="space-y-2">
                                <label class="block text-xs text-gray-500 uppercase tracking-wider font-bold">{{ app()->getLocale() == 'ar' ? 'كلمة المرور' : 'Password' }}</label>
                                <input type="password" name="password" 
                                    class="w-full bg-black border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none text-sm transition-all" 
                                    required>
                            </div>

                            <div class="space-y-2">
                                <label class="block text-xs text-gray-500 uppercase tracking-wider font-bold">{{ app()->getLocale() == 'ar' ? 'تأكيد كلمة المرور' : 'Confirm Password' }}</label>
                                <input type="password" name="password_confirmation" 
                                    class="w-full bg-black border-gray-800 rounded-lg px-4 py-3 text-white focus:border-[#d4af37] outline-none text-sm transition-all" 
                                    required>
                            </div>
                        </div>

                        <div class="mb-8 border-t border-gray-800 pt-8">
                            <label class="block text-xs text-gray-500 mb-4 uppercase tracking-wider font-bold">{{ app()->getLocale() == 'ar' ? 'الأدوار' : 'Roles' }}</label>
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                                @foreach($roles as $role)
                                    <label class="group flex items-center p-3 rounded-lg border border-gray-800 bg-black/20 cursor-pointer hover:border-[#d4af37]/50 hover:bg-[#d4af37]/5 transition-all">
                                        <input type="checkbox" name="roles[]" value="{{ $role->name }}" 
                                            class="w-4 h-4 rounded border-gray-700 bg-gray-900 text-[#d4af37] focus:ring-[#d4af37] focus:ring-offset-black transition-all">
                                        <span class="text-xs text-gray-400 mr-3 group-hover:text-white transition-colors">{{ $role->name }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>

                        <div class="flex items-center justify-end gap-4 pt-6 border-t border-gray-800">
                            <button type="submit" 
                                class="bg-[#d4af37] hover:bg-[#b08d2a] text-black font-bold py-3 px-10 rounded-lg text-sm transition-all shadow-lg active:scale-95">
                                {{ app()->getLocale() == 'ar' ? 'إضافة المستخدم' : 'Add User' }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script>
    new TomSelect("#employee_select", {
        create: false,
        sortField: {
            field: "text",
            direction: "asc"
        },
        onChange: function(value) {
            const select = document.getElementById('employee_select');
            const selectedOption = select.options[select.selectedIndex];
            
            if (value && selectedOption) {
                const name = selectedOption.getAttribute('data-name');
                const email = selectedOption.getAttribute('data-email');
                const job = selectedOption.getAttribute('data-job');
                const branches = selectedOption.getAttribute('data-branches');

                document.getElementById('user_name').value = name;
                document.getElementById('user_email').value = email;
                
                document.getElementById('detail_job').textContent = job;
                document.getElementById('detail_branches').textContent = branches;
                document.getElementById('employee_details').classList.remove('hidden');
            } else {
                document.getElementById('employee_details').classList.add('hidden');
            }
        }
    });
</script>
@endpush

@endsection