@extends('layouts.app')

@section('title', 'Edit Employee')
@section('heading', 'Edit Employee')

@section('content')
    @include('employees.top-submenu')

    @php
        $employeeSteps = [
            'basic' => [
                'label' => 'Basic Info',
                'title' => 'Basic Information',
                'subtitle' => 'Personal and contact details',
                'formSubtitle' => "Update the employee's personal and contact details.",
                'icon' => 'bi-person',
                'theme' => 'teal',
            ],
            'work' => [
                'label' => 'Work Info',
                'title' => 'Work Information',
                'subtitle' => 'Role, dates, and reporting',
                'formSubtitle' => 'Update employment dates and work details.',
                'icon' => 'bi-briefcase',
                'theme' => 'sky',
            ],
            'salary' => [
                'label' => 'Salary Details',
                'title' => 'Salary Details',
                'subtitle' => 'Compensation and pay group',
                'formSubtitle' => 'Update salary group and compensation details.',
                'icon' => 'bi-wallet2',
                'theme' => 'rose',
            ],
            'bank' => [
                'label' => 'Bank Account Details',
                'title' => 'Bank Account Details',
                'subtitle' => 'Payout account information',
                'formSubtitle' => 'Update bank account details for salary payout.',
                'icon' => 'bi-bank',
                'theme' => 'violet',
            ],
        ];
        $initialTab = in_array(request('tab'), ['basic', 'work', 'salary', 'bank'], true) ? request('tab') : 'basic';
    @endphp

    <div class="employee-create" x-data="{
        tab: '{{ $initialTab }}',
        tabs: ['basic', 'work', 'salary', 'bank'],
        next() {
            const form = this.$root.querySelector('form[data-employee-form]');
            if (form && window.KiyoEmployeeForm && window.KiyoFormValidation) {
                const errors = window.KiyoEmployeeForm.validateStep(form, this.tab);
                if (Object.keys(errors).length > 0) {
                    window.KiyoFormValidation.showErrors(form, errors, window.KiyoEmployeeForm.fieldTabs);
                    return;
                }
                window.KiyoFormValidation.clearErrors(form);
            }
            const index = this.tabs.indexOf(this.tab);
            if (index < this.tabs.length - 1) {
                this.tab = this.tabs[index + 1];
            }
        },
        isDone(key) {
            return this.tabs.indexOf(key) < this.tabs.indexOf(this.tab);
        },
        isActive(key) {
            return this.tab === key;
        }
    }">
        <div class="employee-create__intro">
            <h2>Edit Employee</h2>
            <p>Update {{ $employee->name }}’s details below.</p>
        </div>

        <form action="{{ route('employees.update', $employee) }}" method="POST" class="employee-create__layout" autocomplete="off" novalidate data-employee-form="edit">
            @csrf
            @method('PUT')

            <aside class="employee-create__sidebar">
                @include('employees.partials.steps-nav', ['employeeSteps' => $employeeSteps])

                <div class="employee-create__promo">
                    <div class="employee-create__promo-icon">
                        <i class="bi bi-person-gear"></i>
                    </div>
                    <p class="employee-create__promo-title">Update Team Member</p>
                    <p class="employee-create__promo-text">Review each step and save changes when ready.</p>
                </div>
            </aside>

            <div class="employee-create__panel">
                @foreach($employeeSteps as $key => $step)
                    <div class="employee-create__panel-head employee-create__panel-head--{{ $step['theme'] }}" x-show="tab === '{{ $key }}'" @unless($key === $initialTab) x-cloak @endunless>
                        <span class="employee-create__panel-icon">
                            <i class="bi {{ $step['icon'] }}"></i>
                        </span>
                        <div>
                            <h3>{{ $step['title'] }}</h3>
                            <p>{{ $step['formSubtitle'] }}</p>
                        </div>
                    </div>
                @endforeach

                <div x-show="tab === 'basic'" @unless($initialTab === 'basic') x-cloak @endunless class="employee-create__grid">
                    <div>
                        <label class="employee-create__label">Name <span>*</span></label>
                        <input type="text" name="name" value="{{ old('name', $employee->name) }}" placeholder="Enter full name" class="employee-create__control">
                        @error('name')<p class="employee-create__error">{{ $message }}</p>@enderror
                        <p data-js-error="name" class="employee-create__error hidden"></p>
                    </div>
                    <div>
                        <label class="employee-create__label">Email <span>*</span></label>
                        <input type="email" name="email" value="{{ old('email', $employee->email) }}" autocomplete="email" placeholder="Enter email address" class="employee-create__control lowercase">
                        @error('email')<p class="employee-create__error">{{ $message }}</p>@enderror
                        <p data-js-error="email" class="employee-create__error hidden"></p>
                    </div>
                    <div x-data="{ showPassword: false }">
                        <label class="employee-create__label">New Password</label>
                        <div class="employee-create__password">
                            <input :type="showPassword ? 'text' : 'password'" name="password" id="employee_password" autocomplete="off" placeholder="Leave blank to keep current" class="employee-create__control">
                            <button type="button" @click="showPassword = !showPassword" class="employee-create__password-toggle" :aria-label="showPassword ? 'Hide password' : 'Show password'">
                                <i class="bi" :class="showPassword ? 'bi-eye-slash' : 'bi-eye'"></i>
                            </button>
                        </div>
                        @error('password')<p class="employee-create__error">{{ $message }}</p>@enderror
                        <p data-js-error="password" class="employee-create__error hidden"></p>
                    </div>
                    <div>
                        <label class="employee-create__label">Employee Number</label>
                        <input type="text" name="employee_number" value="{{ old('employee_number', $employee->employee_number) }}"
                               class="employee-create__control {{ ($canFullyManageEmployee ?? false) ? '' : 'employee-create__control--muted' }}"
                               @unless($canFullyManageEmployee ?? false) readonly @endunless>
                        @unless($canFullyManageEmployee ?? false)
                            <p class="employee-create__hint">Only admins can change the employee number.</p>
                        @endunless
                        @error('employee_number')<p class="employee-create__error">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="employee-create__label">Phone</label>
                        <div class="employee-create__phone">
                            <span class="employee-create__phone-code">+91</span>
                            <input type="text" name="phone" value="{{ old('phone', $employee->phone) }}" inputmode="numeric" maxlength="10" placeholder="Enter phone number" class="employee-create__control">
                        </div>
                        @error('phone')<p class="employee-create__error">{{ $message }}</p>@enderror
                        <p data-js-error="phone" class="employee-create__error hidden"></p>
                    </div>
                    <div>
                        <label class="employee-create__label">Gender <span>*</span></label>
                        <select name="gender" class="employee-create__control js-select2">
                            <option value="">Select gender</option>
                            <option value="male" {{ old('gender', $employee->gender) === 'male' ? 'selected' : '' }}>Male</option>
                            <option value="female" {{ old('gender', $employee->gender) === 'female' ? 'selected' : '' }}>Female</option>
                            <option value="other" {{ old('gender', $employee->gender) === 'other' ? 'selected' : '' }}>Other</option>
                        </select>
                        @error('gender')<p class="employee-create__error">{{ $message }}</p>@enderror
                        <p data-js-error="gender" class="employee-create__error hidden"></p>
                    </div>
                    <div>
                        <label class="employee-create__label">Date of Birth</label>
                        <input type="date" name="dob" value="{{ old('dob', $employee->dob?->format('Y-m-d')) }}" class="employee-create__control" max="{{ now()->format('Y-m-d') }}">
                        @error('dob')<p class="employee-create__error">{{ $message }}</p>@enderror
                        <p data-js-error="dob" class="employee-create__error hidden"></p>
                    </div>
                    <div>
                        <label class="employee-create__label">Father Name</label>
                        <input type="text" name="father_name" value="{{ old('father_name', $employee->father_name) }}" placeholder="Enter father name" class="employee-create__control">
                        @error('father_name')<p class="employee-create__error">{{ $message }}</p>@enderror
                        <p data-js-error="father_name" class="employee-create__error hidden"></p>
                    </div>
                    <div>
                        <label class="employee-create__label">PAN Number</label>
                        <input type="text" name="pan_number" value="{{ old('pan_number', $employee->pan_number) }}" autocomplete="off" data-lpignore="true" data-1p-ignore data-bwignore maxlength="10" class="employee-create__control uppercase" placeholder="ABCDE1234F">
                        @error('pan_number')<p class="employee-create__error">{{ $message }}</p>@enderror
                        <p data-js-error="pan_number" class="employee-create__error hidden"></p>
                    </div>
                    <div>
                        <label class="employee-create__label">Status</label>
                        <select name="status" class="employee-create__control js-select2">
                            <option value="active" {{ old('status', $employee->status) === 'active' ? 'selected' : '' }}>Active</option>
                            <option value="inactive" {{ old('status', $employee->status) === 'inactive' ? 'selected' : '' }}>Inactive</option>
                        </select>
                        @error('status')<p class="employee-create__error">{{ $message }}</p>@enderror
                    </div>
                </div>

                <div x-show="tab === 'work'" @unless($initialTab === 'work') x-cloak @endunless class="employee-create__sections">
                    <section>
                        <h4 class="employee-create__section-title">
                            <i class="bi bi-calendar3"></i>
                            Employment Dates
                        </h4>
                        <div class="employee-create__grid">
                            <div>
                                <label class="employee-create__label">Joining Date</label>
                                <input type="date" name="joining_date" value="{{ old('joining_date', $employee->joining_date?->format('Y-m-d')) }}" class="employee-create__control">
                                @error('joining_date')<p class="employee-create__error">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="employee-create__label">Registration Date</label>
                                <input type="date" name="registration_date" value="{{ old('registration_date', $employee->registration_date?->format('Y-m-d') ?? $employee->created_at?->format('Y-m-d')) }}" class="employee-create__control">
                                @error('registration_date')<p class="employee-create__error">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="employee-create__label">Confirmation Date</label>
                                <input type="date" name="confirmation_date" value="{{ old('confirmation_date', $employee->confirmation_date?->format('Y-m-d')) }}" class="employee-create__control">
                                @error('confirmation_date')<p class="employee-create__error">{{ $message }}</p>@enderror
                                <p data-js-error="confirmation_date" class="employee-create__error hidden"></p>
                            </div>
                            <div>
                                <label class="employee-create__label">Probation End Date</label>
                                <input type="date" name="probation_end_date" value="{{ old('probation_end_date', $employee->probation_end_date?->format('Y-m-d')) }}" class="employee-create__control">
                                @error('probation_end_date')<p class="employee-create__error">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="employee-create__label">PF Join / Registration Date</label>
                                <input type="date" name="pf_join_date" value="{{ old('pf_join_date', $employee->pf_join_date?->format('Y-m-d')) }}" class="employee-create__control">
                                @error('pf_join_date')<p class="employee-create__error">{{ $message }}</p>@enderror
                                <p data-js-error="pf_join_date" class="employee-create__error hidden"></p>
                            </div>
                            <div>
                                <label class="employee-create__label">Last Working Day</label>
                                <input type="date" name="last_working_date" value="{{ old('last_working_date', $employee->last_working_date?->format('Y-m-d')) }}" class="employee-create__control">
                                @error('last_working_date')<p class="employee-create__error">{{ $message }}</p>@enderror
                            </div>
                        </div>
                    </section>
                    <section>
                        <h4 class="employee-create__section-title">
                            <i class="bi bi-briefcase"></i>
                            Work Details
                        </h4>
                        <div class="employee-create__grid">
                            <div>
                                <label class="employee-create__label">Department</label>
                                <div class="employee-create__combo">
                                    <select name="department_id" class="employee-create__control js-select2">
                                        <option value="">Select</option>
                                        @foreach($departments as $d)
                                            <option value="{{ $d->id }}" {{ old('department_id', $employee->department_id) == $d->id ? 'selected' : '' }}>{{ $d->name }}</option>
                                        @endforeach
                                    </select>
                                    <button type="button" aria-label="Add department" title="Add department" class="employee-create__add-btn" onclick="window.dispatchEvent(new CustomEvent('open-modal', { detail: 'quick-create-department' }))">
                                        <i class="bi bi-plus"></i>
                                    </button>
                                </div>
                                @error('department_id')<p class="employee-create__error">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="employee-create__label">Designation <span>*</span></label>
                                <div class="employee-create__combo">
                                    <select name="designation_id" class="employee-create__control js-select2">
                                        <option value="">Select</option>
                                        @foreach($designations as $d)
                                            <option value="{{ $d->id }}" {{ old('designation_id', $employee->designation_id) == $d->id ? 'selected' : '' }}>{{ $d->name }}</option>
                                        @endforeach
                                    </select>
                                    <button type="button" aria-label="Add designation" title="Add designation" class="employee-create__add-btn" onclick="window.dispatchEvent(new CustomEvent('open-modal', { detail: 'quick-create-designation' }))">
                                        <i class="bi bi-plus"></i>
                                    </button>
                                </div>
                                @error('designation_id')<p class="employee-create__error">{{ $message }}</p>@enderror
                                <p data-js-error="designation_id" class="employee-create__error hidden"></p>
                            </div>
                            <div>
                                <label class="employee-create__label">Location <span>*</span></label>
                                <div class="employee-create__combo">
                                    <select name="location_id" class="employee-create__control js-select2">
                                        <option value="">Select</option>
                                        @foreach($locations as $loc)
                                            <option value="{{ $loc->id }}" {{ old('location_id', $employee->location_id) == $loc->id ? 'selected' : '' }}>{{ $loc->name }}</option>
                                        @endforeach
                                    </select>
                                    <button type="button" aria-label="Add location" title="Add location" class="employee-create__add-btn" onclick="window.dispatchEvent(new CustomEvent('open-modal', { detail: 'quick-create-location' }))">
                                        <i class="bi bi-plus"></i>
                                    </button>
                                </div>
                                @error('location_id')<p class="employee-create__error">{{ $message }}</p>@enderror
                                <p data-js-error="location_id" class="employee-create__error hidden"></p>
                            </div>
                            <div>
                                <label class="employee-create__label">Attendance mode</label>
                                @php $currentMode = old('attendance_mode', $employee->attendance_mode ?: 'tenant_default'); @endphp
                                <select name="attendance_mode" class="employee-create__control js-select2">
                                    <option value="tenant_default" @selected($currentMode === 'tenant_default' || $currentMode === '')>Use tenant default</option>
                                    <option value="office_geofence" @selected($currentMode === 'office_geofence')>Office only</option>
                                    <option value="remote" @selected($currentMode === 'remote')>Remote only</option>
                                    <option value="hybrid" @selected($currentMode === 'hybrid')>Hybrid</option>
                                    <option value="normal" @selected($currentMode === 'normal')>Normal</option>
                                </select>
                                @error('attendance_mode')<p class="employee-create__error">{{ $message }}</p>@enderror
                            </div>
                            <div>
                                <label class="employee-create__label">Shift <span>*</span></label>
                                <div class="employee-create__combo">
                                    <select name="shift_id" class="employee-create__control js-select2">
                                        <option value="">Select</option>
                                        @foreach($shifts as $s)
                                            <option value="{{ $s->id }}" {{ old('shift_id', $employee->shift_id) == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>
                                        @endforeach
                                    </select>
                                    <button type="button" aria-label="Add shift" title="Add shift" class="employee-create__add-btn" onclick="window.dispatchEvent(new CustomEvent('open-modal', { detail: 'quick-create-shift' }))">
                                        <i class="bi bi-plus"></i>
                                    </button>
                                </div>
                                @error('shift_id')<p class="employee-create__error">{{ $message }}</p>@enderror
                                <p data-js-error="shift_id" class="employee-create__error hidden"></p>
                            </div>
                            <div>
                                <label class="employee-create__label">Reporting Manager</label>
                                <select name="report_to" class="employee-create__control js-select2">
                                    <option value="">Select</option>
                                    @foreach($managers as $m)
                                        <option value="{{ $m->id }}" {{ old('report_to', $employee->report_to) == $m->id ? 'selected' : '' }}>{{ $m->name }}</option>
                                    @endforeach
                                </select>
                                @error('report_to')<p class="employee-create__error">{{ $message }}</p>@enderror
                                <p data-js-error="report_to" class="employee-create__error hidden"></p>
                            </div>
                            @if(auth()->user()->hasPermission('users_edit'))
                                <div>
                                    <label class="employee-create__label">Role</label>
                                    <select name="role_id" class="employee-create__control js-select2">
                                        <option value="">—</option>
                                        @foreach($roles as $r)
                                            <option value="{{ $r->id }}" {{ (string) old('role_id', $employee->role_id) === (string) $r->id ? 'selected' : '' }}>
                                                {{ $r->display_name }} ({{ $r->name }})
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('role_id')<p class="employee-create__error">{{ $message }}</p>@enderror
                                </div>
                            @endif
                            <div>
                                <label class="employee-create__label">Work State</label>
                                <input type="text" name="work_state" value="{{ old('work_state', $employee->work_state) }}" class="employee-create__control" placeholder="Telangana">
                                @error('work_state')<p class="employee-create__error">{{ $message }}</p>@enderror
                                <p data-js-error="work_state" class="employee-create__error hidden"></p>
                            </div>
                            <div>
                                <label class="employee-create__label">PT Location</label>
                                <input type="text" name="pt_location" value="{{ old('pt_location', $employee->pt_location) }}" class="employee-create__control">
                                @error('pt_location')<p class="employee-create__error">{{ $message }}</p>@enderror
                                <p data-js-error="pt_location" class="employee-create__error hidden"></p>
                            </div>
                            <div>
                                <label class="employee-create__label">UAN Number</label>
                                <input type="text" name="uan_number" value="{{ old('uan_number', $employee->uan_number) }}" inputmode="numeric" maxlength="12" class="employee-create__control" placeholder="100012345678">
                                @error('uan_number')<p class="employee-create__error">{{ $message }}</p>@enderror
                                <p data-js-error="uan_number" class="employee-create__error hidden"></p>
                            </div>
                        </div>
                    </section>
                    @if($canFullyManageEmployee ?? false)
                        <section>
                            <h4 class="employee-create__section-title">
                                <i class="bi bi-shield-lock"></i>
                                Access
                            </h4>
                            <div class="employee-create__grid">
                                <div>
                                    <label class="employee-create__label inline-flex items-center gap-2">
                                        <input type="hidden" name="allow_login" value="0">
                                        <input type="checkbox" name="allow_login" value="1" class="rounded border-slate-300" @checked(old('allow_login', $employee->allow_login))>
                                        Allow login
                                    </label>
                                </div>
                            </div>
                        </section>
                    @endif
                </div>

                <div x-show="tab === 'salary'" @unless($initialTab === 'salary') x-cloak @endunless class="employee-create__grid">
                    <div>
                        <label class="employee-create__label">Salary Group</label>
                        <select name="salary_group_id" class="employee-create__control js-select2">
                            <option value="">Select</option>
                            @foreach($salaryGroups as $group)
                                <option value="{{ $group->id }}" {{ old('salary_group_id', $employee->salary_group_id) == $group->id ? 'selected' : '' }}>{{ $group->name }}</option>
                            @endforeach
                        </select>
                        @error('salary_group_id')<p class="employee-create__error">{{ $message }}</p>@enderror
                    </div>
                    @php
                        $latestRevision = $employee->latestEffectiveSalaryRevision();
                    @endphp
                    @if(!$latestRevision || $latestRevision->ctc_annual <= 0)
                        <div>
                            <label class="employee-create__label">Annual CTC</label>
                            <input type="number" step="0.01" min="0" name="annual_ctc" value="{{ old('annual_ctc', $employee->annual_ctc) }}" placeholder="Enter annual CTC" class="employee-create__control">
                            @error('annual_ctc')<p class="employee-create__error">{{ $message }}</p>@enderror
                            <p data-js-error="annual_ctc" class="employee-create__error hidden"></p>
                        </div>
                    @else
                        <div class="employee-create__hint" style="grid-column: 1 / -1;">
                            Salary amounts are maintained in Salary History. Use the employee profile salary tab to revise compensation.
                        </div>
                    @endif
                </div>

                <div x-show="tab === 'bank'" @unless($initialTab === 'bank') x-cloak @endunless class="employee-create__grid">
                    <div>
                        <label class="employee-create__label">Account Holder Name</label>
                        <input type="text" name="account_holder_name" value="{{ old('account_holder_name', $employee->account_holder_name) }}" placeholder="Enter account holder name" class="employee-create__control">
                        @error('account_holder_name')<p class="employee-create__error">{{ $message }}</p>@enderror
                        <p data-js-error="account_holder_name" class="employee-create__error hidden"></p>
                    </div>
                    <div>
                        <label class="employee-create__label">Bank Name</label>
                        <input type="text" name="bank_name" value="{{ old('bank_name', $employee->bank_name) }}" placeholder="Enter bank name" class="employee-create__control">
                        @error('bank_name')<p class="employee-create__error">{{ $message }}</p>@enderror
                        <p data-js-error="bank_name" class="employee-create__error hidden"></p>
                    </div>
                    <div>
                        <label class="employee-create__label">Account Number</label>
                        <input type="text" name="account_number" value="{{ old('account_number', $employee->account_number) }}" placeholder="Enter account number" class="employee-create__control">
                        @error('account_number')<p class="employee-create__error">{{ $message }}</p>@enderror
                        <p data-js-error="account_number" class="employee-create__error hidden"></p>
                    </div>
                    <div>
                        <label class="employee-create__label">Branch Name</label>
                        <input type="text" name="branch_name" value="{{ old('branch_name', $employee->branch_name) }}" placeholder="Enter branch name" class="employee-create__control">
                        @error('branch_name')<p class="employee-create__error">{{ $message }}</p>@enderror
                        <p data-js-error="branch_name" class="employee-create__error hidden"></p>
                    </div>
                    <div>
                        <label class="employee-create__label">City</label>
                        <input type="text" name="city" value="{{ old('city', $employee->city) }}" placeholder="Enter city" class="employee-create__control">
                        @error('city')<p class="employee-create__error">{{ $message }}</p>@enderror
                        <p data-js-error="city" class="employee-create__error hidden"></p>
                    </div>
                    <div>
                        <label class="employee-create__label">IFSC Code</label>
                        <input type="text" name="ifsc_code" value="{{ old('ifsc_code', $employee->ifsc_code) }}" placeholder="Enter IFSC code" class="employee-create__control uppercase">
                        @error('ifsc_code')<p class="employee-create__error">{{ $message }}</p>@enderror
                        <p data-js-error="ifsc_code" class="employee-create__error hidden"></p>
                    </div>
                </div>

                <div class="employee-create__actions">
                    <a href="{{ route('employees.show', $employee) }}" class="employee-create__btn employee-create__btn--ghost">Cancel</a>
                    <button type="submit" class="employee-create__btn employee-create__btn--soft">Update</button>
                    <button type="button" x-show="tab !== 'bank'" @click="next()" class="employee-create__btn employee-create__btn--primary">
                        Next
                        <i class="bi bi-arrow-right"></i>
                    </button>
                </div>
            </div>
        </form>
    </div>

    @include('employees.partials.quick-create-modals')
    @include('employees.partials.form-validation')
@endsection