@extends('layouts.app')

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

@section('content')
<div class="mx-auto max-w-6xl space-y-6" x-data="{ section: 'basic', createAccess: {{ old('create_system_user') ? 'true' : 'false' }} }">
    <header class="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between"><div><p class="text-xs font-bold uppercase tracking-[.18em] text-emerald-600">Employees & HR</p><h1 class="mt-1 text-3xl font-bold text-slate-950">Add employee</h1><p class="mt-1 text-sm text-slate-500">Create the HR record, optional salary and optional system access in one controlled transaction.</p></div><a href="{{ route('app.employees.index') }}" class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-bold text-slate-700">Cancel</a></header>

    <nav class="flex gap-2 overflow-x-auto rounded-2xl border border-slate-200 bg-white p-2 shadow-sm">@foreach(['basic'=>'Basic','contact'=>'Contact','employment'=>'Employment','uae'=>'UAE details','salary'=>'Salary & WPS','access'=>'System access'] as $key=>$label)<button type="button" @click="section='{{ $key }}'" :class="section==='{{ $key }}' ? 'bg-emerald-600 text-white' : 'text-slate-600 hover:bg-slate-50'" class="shrink-0 rounded-xl px-4 py-2.5 text-xs font-bold">{{ $label }}</button>@endforeach</nav>

    <form action="{{ route('app.employees.store') }}" method="POST" enctype="multipart/form-data" class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
        @csrf
        <section x-show="section==='basic'" class="grid gap-4 md:grid-cols-3"><div class="md:col-span-3"><h2 class="text-lg font-bold text-slate-950">Basic details</h2><p class="text-xs text-slate-500">Identity information for the employee master record.</p></div><label class="text-xs font-semibold text-slate-700">Employee ID<input name="employee_code" value="{{ old('employee_code') }}" class="erp-input mt-1" placeholder="Auto-generated if empty"></label><label class="text-xs font-semibold text-slate-700">First name *<input name="first_name" value="{{ old('first_name') }}" required class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Middle name<input name="middle_name" value="{{ old('middle_name') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Last name<input name="last_name" value="{{ old('last_name') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Display name<input name="display_name" value="{{ old('display_name') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Gender<select name="gender" class="erp-input mt-1"><option value="">Not specified</option>@foreach(['male','female','other','prefer_not_to_say'] as $gender)<option value="{{ $gender }}" @selected(old('gender')===$gender)>{{ ucfirst(str_replace('_',' ',$gender)) }}</option>@endforeach</select></label><label class="text-xs font-semibold text-slate-700">Date of birth<input type="date" name="date_of_birth" value="{{ old('date_of_birth') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Nationality<input name="nationality" value="{{ old('nationality') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Marital status<select name="marital_status" class="erp-input mt-1"><option value="">Not specified</option>@foreach(['single','married','divorced','widowed'] as $status)<option value="{{ $status }}" @selected(old('marital_status')===$status)>{{ ucfirst($status) }}</option>@endforeach</select></label><label class="text-xs font-semibold text-slate-700 md:col-span-3">Profile photo<input type="file" name="profile_photo" accept=".jpg,.jpeg,.png,.webp" class="erp-input mt-1"></label></section>

        <section x-show="section==='contact'" x-cloak class="grid gap-4 md:grid-cols-3"><div class="md:col-span-3"><h2 class="text-lg font-bold text-slate-950">Contact & emergency</h2><p class="text-xs text-slate-500">Work and personal channels remain distinct.</p></div><label class="text-xs font-semibold text-slate-700">UAE mobile<input name="mobile" value="{{ old('mobile') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Personal mobile<input name="personal_mobile" value="{{ old('personal_mobile') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Work email<input type="email" name="email" value="{{ old('email') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Personal email<input type="email" name="personal_email" value="{{ old('personal_email') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700 md:col-span-2">UAE address<textarea name="uae_address" class="erp-input mt-1">{{ old('uae_address') }}</textarea></label><label class="text-xs font-semibold text-slate-700 md:col-span-3">Home-country address<textarea name="home_country_address" class="erp-input mt-1">{{ old('home_country_address') }}</textarea></label><label class="text-xs font-semibold text-slate-700">Emergency contact<input name="emergency_contact_name" value="{{ old('emergency_contact_name') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Relation<input name="emergency_contact_relation" value="{{ old('emergency_contact_relation') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Emergency mobile<input name="emergency_contact_mobile" value="{{ old('emergency_contact_mobile') }}" class="erp-input mt-1"></label></section>

        <section x-show="section==='employment'" x-cloak class="grid gap-4 md:grid-cols-3"><div class="md:col-span-3"><h2 class="text-lg font-bold text-slate-950">Employment</h2><p class="text-xs text-slate-500">Branch, department, manager, contract and weekly schedule.</p></div><label class="text-xs font-semibold text-slate-700">Branch *<select name="branch_id" required class="erp-input mt-1">@foreach($branches as $branch)<option value="{{ $branch->id }}" @selected(old('branch_id')==$branch->id)>{{ $branch->name }}</option>@endforeach</select></label><label class="text-xs font-semibold text-slate-700">Department<select name="department_id" class="erp-input mt-1"><option value="">No department</option>@foreach($departments as $department)<option value="{{ $department->id }}" @selected(old('department_id')==$department->id)>{{ $department->name }}</option>@endforeach</select></label><label class="text-xs font-semibold text-slate-700">Designation<input name="designation" value="{{ old('designation') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Reporting manager<select name="reporting_manager_id" class="erp-input mt-1"><option value="">No manager</option>@foreach($managers as $manager)<option value="{{ $manager->id }}">{{ $manager->full_name }}</option>@endforeach</select></label><label class="text-xs font-semibold text-slate-700">Employment type<select name="employment_type" class="erp-input mt-1">@foreach(['full_time'=>'Permanent / full time','contract'=>'Contract','temporary'=>'Temporary','part_time'=>'Part time','intern'=>'Intern','consultant'=>'Consultant'] as $key=>$label)<option value="{{ $key }}" @selected(old('employment_type','full_time')===$key)>{{ $label }}</option>@endforeach</select></label><label class="text-xs font-semibold text-slate-700">Joining date *<input type="date" name="joining_date" value="{{ old('joining_date',today()->format('Y-m-d')) }}" required class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Probation start<input type="date" name="probation_start" value="{{ old('probation_start') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Probation end<input type="date" name="probation_end" value="{{ old('probation_end') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Work location<input name="work_location" value="{{ old('work_location') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Contract start<input type="date" name="contract_start" value="{{ old('contract_start') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Contract end<input type="date" name="contract_end" value="{{ old('contract_end') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Weekly off<select name="weekly_off" class="erp-input mt-1">@foreach(['monday','tuesday','wednesday','thursday','friday','saturday','sunday'] as $day)<option value="{{ $day }}" @selected(old('weekly_off','sunday')===$day)>{{ ucfirst($day) }}</option>@endforeach</select></label></section>

        <section x-show="section==='uae'" x-cloak class="grid gap-4 md:grid-cols-3"><div class="md:col-span-3"><h2 class="text-lg font-bold text-slate-950">UAE employment details</h2><p class="text-xs text-slate-500">Expiry dates connect to the HR compliance dashboard.</p></div>@foreach([['passport_number','Passport number','text'],['passport_issue_date','Passport issue','date'],['passport_expiry','Passport expiry','date'],['passport_country','Passport country','text'],['emirates_id','Emirates ID','text'],['emirates_id_issue_date','EID issue','date'],['emirates_id_expiry','EID expiry','date'],['visa_number','Visa number','text'],['visa_file_number','Visa file number','text'],['visa_issue_date','Visa issue','date'],['visa_expiry','Visa expiry','date'],['visa_type','Visa type','text'],['sponsor','Sponsor','text'],['work_permit_number','Work permit','text'],['work_permit_issue_date','Work permit issue','date'],['work_permit_expiry','Work permit expiry','date'],['labour_card_number','Labour card','text'],['insurance_provider','Insurance provider','text'],['insurance_number','Insurance number','text'],['insurance_expiry','Insurance expiry','date']] as [$name,$label,$type])<label class="text-xs font-semibold text-slate-700">{{ $label }}<input type="{{ $type }}" name="{{ $name }}" value="{{ old($name) }}" class="erp-input mt-1"></label>@endforeach</section>

        <section x-show="section==='salary'" x-cloak class="grid gap-4 md:grid-cols-3"><div class="md:col-span-3"><h2 class="text-lg font-bold text-slate-950">Salary & encrypted bank/WPS details</h2><p class="text-xs text-slate-500">Visible and editable only with salary permission. Leave basic salary blank to configure later.</p></div>@if(auth()->check() && auth()->user()->hasPermission('payroll.salary.edit'))<label class="text-xs font-semibold text-slate-700">Basic salary<input type="number" step=".01" min="0" name="salary[basic_salary]" value="{{ old('salary.basic_salary') }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Housing allowance<input type="number" step=".01" min="0" name="salary[housing_allowance]" value="{{ old('salary.housing_allowance',0) }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Transport allowance<input type="number" step=".01" min="0" name="salary[transport_allowance]" value="{{ old('salary.transport_allowance',0) }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Other fixed allowance<input type="number" step=".01" min="0" name="salary[other_fixed_allowance]" value="{{ old('salary.other_fixed_allowance',0) }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Variable allowance<input type="number" step=".01" min="0" name="salary[variable_allowance]" value="{{ old('salary.variable_allowance',0) }}" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">OT hourly rate<input type="number" step=".0001" min="0" name="salary[overtime_hourly_rate]" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Payment method<select name="salary[payment_method]" class="erp-input mt-1">@foreach(['bank_transfer','wps','cash','cheque'] as $method)<option value="{{ $method }}">{{ ucfirst(str_replace('_',' ',$method)) }}</option>@endforeach</select></label><label class="text-xs font-semibold text-slate-700">Payroll group<select name="salary[payroll_group_id]" class="erp-input mt-1"><option value="">Default</option>@foreach($payrollGroups as $group)<option value="{{ $group->id }}">{{ $group->name }}</option>@endforeach</select></label><label class="flex items-center gap-2 self-end rounded-xl border border-slate-200 px-3 py-3 text-xs"><input type="checkbox" name="salary[overtime_eligible]" value="1"> Overtime eligible</label><label class="text-xs font-semibold text-slate-700">Bank name<input name="bank[bank_name]" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Account holder<input name="bank[account_holder]" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">IBAN<input name="bank[iban]" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Account number<input name="bank[account_number]" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Routing / bank code<input name="bank[routing_code]" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">WPS employee ID<input name="bank[wps_employee_id]" class="erp-input mt-1"></label>@else<div class="rounded-xl bg-amber-50 p-4 text-sm text-amber-800 md:col-span-3">Your role can create employee records but cannot view or edit salary and bank information.</div>@endif</section>

        <section x-show="section==='access'" x-cloak class="grid gap-4 md:grid-cols-2"><div class="md:col-span-2"><h2 class="text-lg font-bold text-slate-950">Optional system access</h2><p class="text-xs text-slate-500">The employee record remains separate from the user login.</p></div><label class="flex items-center gap-3 rounded-xl border border-slate-200 p-4 text-sm font-bold md:col-span-2"><input type="checkbox" name="create_system_user" value="1" x-model="createAccess"> Create system user now</label><template x-if="createAccess"><div class="contents"><label class="text-xs font-semibold text-slate-700">Login email<input type="email" name="access[email]" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Username<input name="access[username]" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Temporary password<input type="password" name="access[password]" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700">Confirm password<input type="password" name="access[password_confirmation]" class="erp-input mt-1"></label><label class="text-xs font-semibold text-slate-700 md:col-span-2">Role<select name="access[role_id]" class="erp-input mt-1"><option value="">Choose role</option>@foreach($roles as $role)<option value="{{ $role->id }}">{{ $role->name }}</option>@endforeach</select></label><div class="rounded-xl bg-amber-50 p-4 text-xs text-amber-800 md:col-span-2">The user will be restricted to the selected employee branch and required to change the temporary password at first login.</div></div></template></section>

        <div class="mt-6 flex flex-col gap-3 border-t border-slate-200 pt-5 sm:flex-row sm:items-center sm:justify-between"><p class="text-xs text-slate-500">All saved changes are tenant-scoped and recorded in the audit trail.</p><button class="rounded-xl bg-emerald-600 px-6 py-3 text-sm font-bold text-white">Create employee record</button></div>
    </form>
</div>
@endsection