@extends('layouts.app')

@section('title', 'Onboard Employee')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('employees.index') }}">Employees</a>
        <span class="separator">/</span>
        <span class="current">Onboard Employee</span>
    </div>
@endsection

@section('content')
<div x-data="employeeForm()">
    <div class="flex items-center justify-between mb-5">
        <div>
            <h1 class="font-display text-2xl font-semibold text-gray-900">Onboard New Employee</h1>
            <p class="text-sm text-gray-500 mt-1">Fill in the employee details across all sections</p>
        </div>
    </div>

    <form method="POST" action="{{ route('employees.store') }}" enctype="multipart/form-data" class="space-y-4">
        @csrf

        {{-- Section 1: Personal Information --}}
        <div class="card-static overflow-hidden">
            <button type="button" @click="sections.personal = !sections.personal" class="w-full card-header cursor-pointer hover:bg-gray-50 transition-colors">
                <h2 class="card-header-title flex items-center gap-2">
                    <svg class="w-5 h-5 text-primary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    Personal Information
                </h2>
                <svg class="w-5 h-5 text-gray-400 transition-transform" :class="sections.personal ? 'rotate-180' : ''" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            <div x-show="sections.personal" x-collapse class="card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div>
                        <label class="form-label">Employee Code</label>
                        <input type="text" value="{{ $employeeCode }}" class="form-input bg-gray-50" readonly>
                        <p class="text-xxs text-gray-400 mt-1">Auto-generated</p>
                    </div>
                    <div>
                        <label for="first_name" class="form-label">First Name <span class="text-danger-500">*</span></label>
                        <input type="text" id="first_name" name="first_name" value="{{ old('first_name') }}" class="form-input @error('first_name') form-input-error @enderror" required>
                        @error('first_name') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="last_name" class="form-label">Last Name <span class="text-danger-500">*</span></label>
                        <input type="text" id="last_name" name="last_name" value="{{ old('last_name') }}" class="form-input @error('last_name') form-input-error @enderror" required>
                        @error('last_name') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="email" class="form-label">Email <span class="text-danger-500">*</span></label>
                        <input type="email" id="email" name="email" value="{{ old('email') }}" class="form-input @error('email') form-input-error @enderror" required>
                        @error('email') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="date_of_birth" class="form-label">Date of Birth</label>
                        <input type="date" id="date_of_birth" name="date_of_birth" value="{{ old('date_of_birth') }}" class="form-input">
                    </div>
                    <div>
                        <label for="gender" class="form-label">Gender</label>
                        <select id="gender" name="gender" class="form-select">
                            <option value="">Select</option>
                            <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                            <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                            <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>
                    <div>
                        <label for="nationality" class="form-label">Nationality</label>
                        <input type="text" id="nationality" name="nationality" value="{{ old('nationality') }}" placeholder="e.g. Omani" class="form-input">
                    </div>
                    <div>
                        <label for="national_id" class="form-label">National / Civil ID</label>
                        <input type="text" id="national_id" name="national_id" value="{{ old('national_id') }}" class="form-input">
                    </div>
                    <div>
                        <label for="passport_number" class="form-label">Passport Number</label>
                        <input type="text" id="passport_number" name="passport_number" value="{{ old('passport_number') }}" class="form-input">
                    </div>
                    <div>
                        <label for="marital_status" class="form-label">Marital Status</label>
                        <select id="marital_status" name="marital_status" class="form-select">
                            <option value="">Select</option>
                            <option value="single" {{ old('marital_status') == 'single' ? 'selected' : '' }}>Single</option>
                            <option value="married" {{ old('marital_status') == 'married' ? 'selected' : '' }}>Married</option>
                            <option value="divorced" {{ old('marital_status') == 'divorced' ? 'selected' : '' }}>Divorced</option>
                            <option value="widowed" {{ old('marital_status') == 'widowed' ? 'selected' : '' }}>Widowed</option>
                        </select>
                    </div>
                    <div>
                        <label for="profile_photo" class="form-label">Profile Photo</label>
                        <input type="file" id="profile_photo" name="profile_photo" accept="image/*" class="form-input text-sm">
                    </div>
                </div>
            </div>
        </div>

        {{-- Section 2: Employment Details --}}
        <div class="card-static overflow-hidden">
            <button type="button" @click="sections.employment = !sections.employment" class="w-full card-header cursor-pointer hover:bg-gray-50 transition-colors">
                <h2 class="card-header-title flex items-center gap-2">
                    <svg class="w-5 h-5 text-primary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></svg>
                    Employment Details
                </h2>
                <svg class="w-5 h-5 text-gray-400 transition-transform" :class="sections.employment ? 'rotate-180' : ''" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            <div x-show="sections.employment" x-collapse class="card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div>
                        <label for="department_id" class="form-label">Department <span class="text-danger-500">*</span></label>
                        <select id="department_id" name="department_id" class="form-select @error('department_id') form-input-error @enderror" required>
                            <option value="">Select Department</option>
                            @foreach($departments as $dept)
                                <option value="{{ $dept->id }}" {{ old('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                            @endforeach
                        </select>
                        @error('department_id') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="designation_id" class="form-label">Designation <span class="text-danger-500">*</span></label>
                        <select id="designation_id" name="designation_id" class="form-select @error('designation_id') form-input-error @enderror" required>
                            <option value="">Select Designation</option>
                            @foreach($designations as $des)
                                <option value="{{ $des->id }}" {{ old('designation_id') == $des->id ? 'selected' : '' }}>{{ $des->name }}</option>
                            @endforeach
                        </select>
                        @error('designation_id') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="reporting_manager_id" class="form-label">Reporting Manager</label>
                        <select id="reporting_manager_id" name="reporting_manager_id" class="form-select">
                            <option value="">Select Manager</option>
                            @foreach($employees as $emp)
                                <option value="{{ $emp->id }}" {{ old('reporting_manager_id') == $emp->id ? 'selected' : '' }}>{{ $emp->full_name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label for="joining_date" class="form-label">Joining Date <span class="text-danger-500">*</span></label>
                        <input type="date" id="joining_date" name="joining_date" value="{{ old('joining_date', date('Y-m-d')) }}" class="form-input @error('joining_date') form-input-error @enderror" required>
                        @error('joining_date') <p class="form-error">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label for="probation_end_date" class="form-label">Probation End Date</label>
                        <input type="date" id="probation_end_date" name="probation_end_date" value="{{ old('probation_end_date') }}" class="form-input">
                    </div>
                    <div>
                        <label for="contract_type" class="form-label">Contract Type <span class="text-danger-500">*</span></label>
                        <select id="contract_type" name="contract_type" class="form-select" required>
                            <option value="permanent" {{ old('contract_type', 'permanent') == 'permanent' ? 'selected' : '' }}>Permanent</option>
                            <option value="contract" {{ old('contract_type') == 'contract' ? 'selected' : '' }}>Contract</option>
                            <option value="temporary" {{ old('contract_type') == 'temporary' ? 'selected' : '' }}>Temporary</option>
                        </select>
                    </div>
                    <div>
                        <label for="contract_end_date" class="form-label">Contract End Date</label>
                        <input type="date" id="contract_end_date" name="contract_end_date" value="{{ old('contract_end_date') }}" class="form-input">
                    </div>
                    <div>
                        <label for="work_location" class="form-label">Work Location</label>
                        <input type="text" id="work_location" name="work_location" value="{{ old('work_location') }}" placeholder="e.g. Head Office, Muscat" class="form-input">
                    </div>
                    <div>
                        <label for="status" class="form-label">Initial Status</label>
                        <select id="status" name="status" class="form-select">
                            <option value="active" {{ old('status', 'active') == 'active' ? 'selected' : '' }}>Active</option>
                            <option value="on_probation" {{ old('status') == 'on_probation' ? 'selected' : '' }}>On Probation</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        {{-- Section 3: Banking Details --}}
        <div class="card-static overflow-hidden">
            <button type="button" @click="sections.banking = !sections.banking" class="w-full card-header cursor-pointer hover:bg-gray-50 transition-colors">
                <h2 class="card-header-title flex items-center gap-2">
                    <svg class="w-5 h-5 text-primary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
                    Banking Details
                </h2>
                <svg class="w-5 h-5 text-gray-400 transition-transform" :class="sections.banking ? 'rotate-180' : ''" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            <div x-show="sections.banking" x-collapse class="card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div>
                        <label for="bank_name" class="form-label">Bank Name</label>
                        <input type="text" id="bank_name" name="bank_name" value="{{ old('bank_name') }}" placeholder="e.g. Bank Muscat" class="form-input">
                    </div>
                    <div>
                        <label for="branch_name" class="form-label">Branch</label>
                        <input type="text" id="branch_name" name="branch_name" value="{{ old('branch_name') }}" class="form-input">
                    </div>
                    <div>
                        <label for="account_number" class="form-label">Account Number</label>
                        <input type="text" id="account_number" name="account_number" value="{{ old('account_number') }}" class="form-input">
                    </div>
                    <div>
                        <label for="iban" class="form-label">IBAN</label>
                        <input type="text" id="iban" name="iban" value="{{ old('iban') }}" class="form-input">
                    </div>
                    <div>
                        <label for="swift_code" class="form-label">SWIFT Code</label>
                        <input type="text" id="swift_code" name="swift_code" value="{{ old('swift_code') }}" class="form-input">
                    </div>
                    <div>
                        <label for="bank_code" class="form-label">Bank Code (WPS)</label>
                        <input type="text" id="bank_code" name="bank_code" value="{{ old('bank_code') }}" class="form-input">
                    </div>
                </div>
            </div>
        </div>

        {{-- Section 4: Emergency Contacts --}}
        <div class="card-static overflow-hidden">
            <button type="button" @click="sections.emergency = !sections.emergency" class="w-full card-header cursor-pointer hover:bg-gray-50 transition-colors">
                <h2 class="card-header-title flex items-center gap-2">
                    <svg class="w-5 h-5 text-danger-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>
                    Emergency Contacts
                </h2>
                <svg class="w-5 h-5 text-gray-400 transition-transform" :class="sections.emergency ? 'rotate-180' : ''" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            <div x-show="sections.emergency" x-collapse class="card-body space-y-4">
                <template x-for="(contact, index) in emergencyContacts" :key="index">
                    <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
                        <div class="flex items-center justify-between mb-3">
                            <h4 class="text-sm font-medium text-gray-700" x-text="'Contact ' + (index + 1)"></h4>
                            <button type="button" @click="emergencyContacts.splice(index, 1)" class="text-danger-500 hover:text-danger-600 text-xs" x-show="emergencyContacts.length > 1">Remove</button>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
                            <div>
                                <label class="form-label">Name</label>
                                <input type="text" :name="'emergency_contacts[' + index + '][name]'" x-model="contact.name" class="form-input">
                            </div>
                            <div>
                                <label class="form-label">Relationship</label>
                                <input type="text" :name="'emergency_contacts[' + index + '][relationship]'" x-model="contact.relationship" placeholder="e.g. Spouse, Parent" class="form-input">
                            </div>
                            <div>
                                <label class="form-label">Phone</label>
                                <input type="text" :name="'emergency_contacts[' + index + '][phone]'" x-model="contact.phone" class="form-input">
                            </div>
                            <div>
                                <label class="form-label">Email</label>
                                <input type="email" :name="'emergency_contacts[' + index + '][email]'" x-model="contact.email" class="form-input">
                            </div>
                            <div class="md:col-span-2">
                                <label class="form-label">Address</label>
                                <input type="text" :name="'emergency_contacts[' + index + '][address]'" x-model="contact.address" class="form-input">
                            </div>
                        </div>
                    </div>
                </template>
                <button type="button" @click="addEmergencyContact()" class="btn-secondary text-sm">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                    Add Contact
                </button>
            </div>
        </div>

        {{-- Section 5: Documents --}}
        <div class="card-static overflow-hidden">
            <button type="button" @click="sections.documents = !sections.documents" class="w-full card-header cursor-pointer hover:bg-gray-50 transition-colors">
                <h2 class="card-header-title flex items-center gap-2">
                    <svg class="w-5 h-5 text-primary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                    Documents
                </h2>
                <svg class="w-5 h-5 text-gray-400 transition-transform" :class="sections.documents ? 'rotate-180' : ''" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            <div x-show="sections.documents" x-collapse class="card-body space-y-4">
                <template x-for="(doc, index) in documents" :key="index">
                    <div class="p-4 bg-gray-50 rounded-lg border border-gray-200">
                        <div class="flex items-center justify-between mb-3">
                            <h4 class="text-sm font-medium text-gray-700" x-text="'Document ' + (index + 1)"></h4>
                            <button type="button" @click="documents.splice(index, 1)" class="text-danger-500 hover:text-danger-600 text-xs">Remove</button>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
                            <div>
                                <label class="form-label">Type</label>
                                <select :name="'documents[' + index + '][document_type]'" class="form-select">
                                    @foreach($documentTypes as $docType)
                                        <option value="{{ $docType->name }}">{{ $docType->name }}</option>
                                    @endforeach
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                            <div>
                                <label class="form-label">Document Number</label>
                                <input type="text" :name="'documents[' + index + '][document_number]'" class="form-input">
                            </div>
                            <div>
                                <label class="form-label">Issue Date</label>
                                <input type="date" :name="'documents[' + index + '][issue_date]'" class="form-input">
                            </div>
                            <div>
                                <label class="form-label">Expiry Date</label>
                                <input type="date" :name="'documents[' + index + '][expiry_date]'" class="form-input">
                            </div>
                            <div class="md:col-span-2">
                                <label class="form-label">File</label>
                                <input type="file" :name="'documents[' + index + '][file]'" accept=".pdf,.jpg,.jpeg,.png,.doc,.docx" class="form-input text-sm">
                            </div>
                        </div>
                    </div>
                </template>
                <button type="button" @click="addDocument()" class="btn-secondary text-sm">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                    Add Document
                </button>
            </div>
        </div>

        {{-- Section 6: Custom Fields --}}
        @if($customFields->isNotEmpty())
        <div class="card-static overflow-hidden">
            <button type="button" @click="sections.custom = !sections.custom" class="w-full card-header cursor-pointer hover:bg-gray-50 transition-colors">
                <h2 class="card-header-title flex items-center gap-2">
                    <svg class="w-5 h-5 text-primary-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/></svg>
                    Additional Information
                </h2>
                <svg class="w-5 h-5 text-gray-400 transition-transform" :class="sections.custom ? 'rotate-180' : ''" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>
            </button>
            <div x-show="sections.custom" x-collapse class="card-body">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    @foreach($customFields->flatten() as $field)
                        <div>
                            <label class="form-label">{{ $field->field_label }} @if($field->is_required)<span class="text-danger-500">*</span>@endif</label>
                            @if($field->field_type === 'select')
                                <select name="custom_fields[{{ $field->id }}]" class="form-select" {{ $field->is_required ? 'required' : '' }}>
                                    <option value="">Select</option>
                                    @foreach($field->options ?? [] as $option)
                                        <option value="{{ $option }}">{{ $option }}</option>
                                    @endforeach
                                </select>
                            @elseif($field->field_type === 'textarea')
                                <textarea name="custom_fields[{{ $field->id }}]" class="form-input" rows="3" {{ $field->is_required ? 'required' : '' }} placeholder="{{ $field->placeholder }}">{{ old("custom_fields.{$field->id}") }}</textarea>
                            @elseif($field->field_type === 'checkbox')
                                <label class="flex items-center gap-2 mt-2">
                                    <input type="checkbox" name="custom_fields[{{ $field->id }}]" value="1" class="form-checkbox">
                                    <span class="text-sm text-gray-700">{{ $field->placeholder ?? 'Yes' }}</span>
                                </label>
                            @else
                                <input type="{{ $field->field_type }}" name="custom_fields[{{ $field->id }}]" value="{{ old("custom_fields.{$field->id}") }}" class="form-input" {{ $field->is_required ? 'required' : '' }} placeholder="{{ $field->placeholder }}">
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif

        {{-- Submit --}}
        <div class="flex items-center gap-3 pt-2">
            <button type="submit" class="btn-primary">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                Onboard Employee
            </button>
            <a href="{{ route('employees.index') }}" class="btn-secondary">Cancel</a>
        </div>
    </form>
</div>

@push('scripts')
<script>
function employeeForm() {
    return {
        sections: {
            personal: true,
            employment: true,
            banking: false,
            emergency: false,
            documents: false,
            custom: false,
        },
        emergencyContacts: [{ name: '', relationship: '', phone: '', email: '', address: '' }],
        documents: [],
        addEmergencyContact() {
            this.emergencyContacts.push({ name: '', relationship: '', phone: '', email: '', address: '' });
        },
        addDocument() {
            this.documents.push({});
        }
    }
}
</script>
@endpush
@endsection