@extends('layouts.app')
@section('title', 'Ongeza Mfanyakazi')
@section('page-title', 'Ongeza Mfanyakazi Mpya')
@section('content')

<div class="space-y-6" data-animate>
    {{-- Error Messages --}}
    @if ($errors->any())
        <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl p-4">
            <div class="flex items-start space-x-3">
                <div class="w-8 h-8 bg-red-100 dark:bg-red-800 rounded-full flex items-center justify-center">
                    <span class="material-icons text-red-600 dark:text-red-300 text-sm">error</span>
                </div>
                <div>
                    <h4 class="text-red-800 dark:text-red-200 font-medium mb-2">Makosa yamejitokeza:</h4>
                    <ul class="list-disc list-inside text-red-700 dark:text-red-300 space-y-1">
                        @foreach ($errors->all() as $error)
                            <li class="text-sm">{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    @endif

    {{-- Page Header --}}
    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-2xl font-bold text-gray-900 dark:text-white">Ongeza Mfanyakazi Mpya</h1>
            <p class="text-gray-600 dark:text-gray-400 mt-1">Jaza fomu hii kuongeza mfanyakazi mpya</p>
        </div>
        
        <a href="{{ route('employees.index') }}" 
           class="inline-flex items-center px-4 py-2.5 bg-gray-600 text-white rounded-xl hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 transition-all duration-200">
            <span class="material-icons text-lg mr-2">arrow_back</span>
            Rudi Nyuma
        </a>
    </div>

    {{-- Form Container --}}
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
        <form action="{{ route('employees.store') }}" method="POST" class="space-y-6" x-data="employeeForm()">
            @csrf
            
            {{-- Tab Navigation --}}
            <div class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
                <nav class="flex px-6" aria-label="Tabs">
                    <button type="button" 
                            @click="activeTab = 'user-details'"
                            :class="{ 
                                'border-primary-500 text-primary-600 dark:text-primary-400': activeTab === 'user-details',
                                'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300': activeTab !== 'user-details'
                            }"
                            class="py-4 px-6 border-b-2 font-medium text-sm transition-all duration-200 flex items-center space-x-2">
                        <span class="material-icons text-lg">person</span>
                        <span>Maelezo ya Mtumiaji</span>
                    </button>
                    
                    <button type="button" 
                            @click="activeTab = 'employee-details'"
                            :class="{ 
                                'border-primary-500 text-primary-600 dark:text-primary-400': activeTab === 'employee-details',
                                'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300': activeTab !== 'employee-details'
                            }"
                            class="py-4 px-6 border-b-2 font-medium text-sm transition-all duration-200 flex items-center space-x-2">
                        <span class="material-icons text-lg">badge</span>
                        <span>Maelezo ya Kazi</span>
                    </button>
                    
                    <button type="button" 
                            @click="activeTab = 'organizational-info'"
                            :class="{ 
                                'border-primary-500 text-primary-600 dark:text-primary-400': activeTab === 'organizational-info',
                                'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300': activeTab !== 'organizational-info'
                            }"
                            class="py-4 px-6 border-b-2 font-medium text-sm transition-all duration-200 flex items-center space-x-2">
                        <span class="material-icons text-lg">business</span>
                        <span>Maelezo ya Shirika</span>
                    </button>
                </nav>
            </div>

            {{-- Tab Content --}}
            <div class="p-6">
                {{-- Tab 1: User Details --}}
                <div x-show="activeTab === 'user-details'" class="space-y-6">
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="w-10 h-10 bg-blue-100 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
                            <span class="material-icons text-blue-600 dark:text-blue-400">person</span>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Maelezo ya Mtumiaji</h3>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Taarifa za kimsingi za mtumiaji</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Jina Kamili <span class="text-red-500">*</span>
                            </label>
                            <input type="text" 
                                   name="name" 
                                   value="{{ old('name') }}"
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 @error('name') border-red-500 @enderror" 
                                   placeholder="Ingiza jina kamili" 
                                   required>
                            @error('name')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Barua Pepe <span class="text-red-500">*</span>
                            </label>
                            <input type="email" 
                                   name="email" 
                                   value="{{ old('email') }}"
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 @error('email') border-red-500 @enderror" 
                                   placeholder="mfanyakazi@example.com" 
                                   required>
                            @error('email')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Nenosiri <span class="text-red-500">*</span>
                            </label>
                            <div class="relative">
                                <input type="password" 
                                       name="password" 
                                       x-model="password"
                                       class="w-full px-4 py-3 pr-12 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 @error('password') border-red-500 @enderror" 
                                       placeholder="Ingiza nenosiri"
                                       required>
                                <button type="button" 
                                        @click="generatePassword()"
                                        class="absolute right-3 top-1/2 transform -translate-y-1/2 text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 transition-colors"
                                        title="Tengeneza nenosiri kiotomatiki">
                                    <span class="material-icons text-lg">auto_fix_high</span>
                                </button>
                            </div>
                            @error('password')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                                Nenosiri linapaswa kuwa na angalau herufi 8
                            </p>
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Thibitisha Nenosiri <span class="text-red-500">*</span>
                            </label>
                            <input type="password" 
                                   name="password_confirmation" 
                                   x-model="passwordConfirmation"
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 @error('password_confirmation') border-red-500 @enderror" 
                                   placeholder="Rudia nenosiri" 
                                   required>
                            @error('password_confirmation')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                {{-- Tab 2: Employee Details --}}
                <div x-show="activeTab === 'employee-details'" class="space-y-6">
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="w-10 h-10 bg-green-100 dark:bg-green-900/20 rounded-lg flex items-center justify-center">
                            <span class="material-icons text-green-600 dark:text-green-400">badge</span>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Maelezo ya Kazi</h3>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Taarifa za kazi na mawasiliano</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Jukumu <span class="text-red-500">*</span>
                            </label>
                            <select name="role_id" 
                                    class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 @error('role_id') border-red-500 @enderror" 
                                    required>
                                <option value="">Chagua Jukumu</option>
                                @foreach($roles as $role)
                                    <option value="{{ $role->id }}" {{ old('role_id') == $role->id ? 'selected' : '' }}>
                                        {{ $role->role }}
                                    </option>
                                @endforeach
                            </select>
                            @error('role_id')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Nambari ya Simu <span class="text-red-500">*</span>
                            </label>
                            <input type="text" 
                                   name="phone" 
                                   value="{{ old('phone') }}"
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 @error('phone') border-red-500 @enderror" 
                                   placeholder="+255 XXX XXX XXX" 
                                   required>
                            @error('phone')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Nambari ya Jeshi
                            </label>
                            <input type="text" 
                                   name="force_number" 
                                   value="{{ old('force_number') }}"
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 @error('force_number') border-red-500 @enderror" 
                                   placeholder="FN/XXXX/2024">
                            @error('force_number')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Cheo
                            </label>
                            <input type="text" 
                                   name="rank" 
                                   value="{{ old('rank') }}"
                                   class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 @error('rank') border-red-500 @enderror" 
                                   placeholder="Ingiza cheo">
                            @error('rank')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>

                {{-- Tab 3: Organizational Information --}}
                <div x-show="activeTab === 'organizational-info'" class="space-y-6">
                    <div class="flex items-center space-x-3 mb-6">
                        <div class="w-10 h-10 bg-purple-100 dark:bg-purple-900/20 rounded-lg flex items-center justify-center">
                            <span class="material-icons text-purple-600 dark:text-purple-400">business</span>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Maelezo ya Shirika</h3>
                            <p class="text-sm text-gray-600 dark:text-gray-400">Kituo na eneo la kazi</p>
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Kituo <span class="text-red-500">*</span>
                            </label>
                            <select name="post_id" 
                                    class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 @error('post_id') border-red-500 @enderror" 
                                    required>
                                <option value="">Chagua Kituo</option>
                                @foreach($posts as $post)
                                    <option value="{{ $post->id }}" {{ old('post_id') == $post->id ? 'selected' : '' }}>
                                        {{ $post->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('post_id')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <div>
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                                Wilaya <span class="text-red-500">*</span>
                            </label>
                            <select name="district_id" 
                                    class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 @error('district_id') border-red-500 @enderror" 
                                    required>
                                <option value="">Chagua Wilaya</option>
                                @foreach($districts as $district)
                                    <option value="{{ $district->id }}" {{ old('district_id') == $district->id ? 'selected' : '' }}>
                                        {{ $district->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('district_id')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            {{-- Form Actions --}}
            <div class="bg-gray-50 dark:bg-gray-700/50 px-6 py-4 flex items-center justify-between border-t border-gray-200 dark:border-gray-700">
                <a href="{{ route('employees.index') }}" 
                   class="px-6 py-2.5 text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-600 border border-gray-300 dark:border-gray-500 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-500 transition-colors flex items-center space-x-2">
                    <span class="material-icons text-lg">arrow_back</span>
                    <span>Ghairi</span>
                </a>
                
                <div class="flex items-center space-x-3">
                    <button type="button" 
                            @click="nextTab()" 
                            x-show="activeTab !== 'organizational-info'"
                            class="px-6 py-2.5 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors flex items-center space-x-2">
                        <span>Endelea</span>
                        <span class="material-icons text-lg">arrow_forward</span>
                    </button>
                    
                    <button type="submit" 
                            x-show="activeTab === 'organizational-info'" 
                            class="px-6 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center space-x-2">
                        <span class="material-icons text-lg">save</span>
                        <span>Hifadhi</span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
function employeeForm() {
    return {
        activeTab: 'user-details',
        password: '',
        passwordConfirmation: '',

        nextTab() {
            if (this.activeTab === 'user-details') {
                this.activeTab = 'employee-details';
            } else if (this.activeTab === 'employee-details') {
                this.activeTab = 'organizational-info';
            }
        },

        generatePassword() {
            const defaultPassword = 'polisi@1234';
            this.password = defaultPassword;
            this.passwordConfirmation = defaultPassword;
            
            // Update the actual form fields
            document.querySelector('input[name="password"]').value = defaultPassword;
            document.querySelector('input[name="password_confirmation"]').value = defaultPassword;
        }
    };
}
</script>
@endpush