@extends('layouts.app')

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

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

    @php
        $employeeSteps = [
            'basic' => [
                'label' => 'Basic Info',
                'title' => 'Basic Information',
                'subtitle' => 'Personal and contact details',
                'formSubtitle' => "Enter 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' => 'Enter employment dates and work details.',
                'icon' => 'bi-briefcase',
                'theme' => 'sky',
            ],
            'salary' => [
                'label' => 'Salary Details',
                'title' => 'Salary Details',
                'subtitle' => 'Compensation and pay group',
                'formSubtitle' => 'Set salary group and initial annual CTC.',
                'icon' => 'bi-wallet2',
                'theme' => 'rose',
            ],
            'bank' => [
                'label' => 'Bank Account Details',
                'title' => 'Bank Account Details',
                'subtitle' => 'Payout account information',
                'formSubtitle' => 'Enter bank account details for salary payout.',
                'icon' => 'bi-bank',
                'theme' => 'violet',
            ],
        ];
    @endphp

    <div class="employee-create" x-data="{
        tab: 'basic',
        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>Add Employee</h2>
            <p>Create a new employee by filling in the details below.</p>
        </div>

        <form action="{{ route('employees.store') }}" method="POST" class="employee-create__layout" autocomplete="off" novalidate data-employee-form="create">
            @csrf

            <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-plus"></i>
                    </div>
                    <p class="employee-create__promo-title">Add a New Team Member</p>
                    <p class="employee-create__promo-text">Complete each step to create a full employee profile.</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 === 'basic') 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'" class="employee-create__grid">
                    <div>
                        <label class="employee-create__label">Name <span>*</span></label>
                        <input type="text" name="name" value="{{ old('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') }}" 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">Password <span>*</span></label>
                        <div class="employee-create__password">
                            <input :type="showPassword ? 'text' : 'password'" name="password" id="employee_password" autocomplete="new-password" placeholder="Enter password" 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') }}" placeholder="Auto-generate" class="employee-create__control employee-create__control--muted">
                        <p class="employee-create__hint">Leave blank to auto-generate using company prefix.</p>
                        @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') }}" 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') === 'male' ? 'selected' : '' }}>Male</option>
                            <option value="female" {{ old('gender') === 'female' ? 'selected' : '' }}>Female</option>
                            <option value="other" {{ old('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') }}" 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') }}" 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') }}" 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>

                <div x-show="tab === 'work'" x-cloak 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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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') == $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') == $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') == $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>
                                <select name="attendance_mode" class="employee-create__control js-select2">
                                    <option value="tenant_default" {{ old('attendance_mode', 'tenant_default') === 'tenant_default' ? 'selected' : '' }}>Use tenant default</option>
                                    <option value="office_geofence" {{ old('attendance_mode') === 'office_geofence' ? 'selected' : '' }}>Office only</option>
                                    <option value="remote" {{ old('attendance_mode') === 'remote' ? 'selected' : '' }}>Remote only</option>
                                    <option value="hybrid" {{ old('attendance_mode') === 'hybrid' ? 'selected' : '' }}>Hybrid</option>
                                    <option value="normal" {{ old('attendance_mode') === 'normal' ? 'selected' : '' }}>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') == $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') == $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="">Default (Employee)</option>
                                        @foreach($roles as $r)
                                            <option value="{{ $r->id }}" {{ (string) old('role_id') === (string) $r->id ? 'selected' : '' }}>
                                                {{ $r->display_name }} ({{ $r->name }})
                                            </option>
                                        @endforeach
                                    </select>
                                    <p class="employee-create__hint">Leave empty to assign the default Employee role.</p>
                                    @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') }}" 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') }}" 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') }}" 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>
                </div>

                <div x-show="tab === 'salary'" x-cloak 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') == $group->id ? 'selected' : '' }}>{{ $group->name }}</option>
                            @endforeach
                        </select>
                        @error('salary_group_id')<p class="employee-create__error">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="employee-create__label">Initial Annual CTC</label>
                        <input type="number" step="0.01" min="0" name="annual_ctc" value="{{ old('annual_ctc') }}" placeholder="Enter annual CTC" class="employee-create__control">
                        <p class="employee-create__hint">Stored as the first salary history record.</p>
                        @error('annual_ctc')<p class="employee-create__error">{{ $message }}</p>@enderror
                        <p data-js-error="annual_ctc" class="employee-create__error hidden"></p>
                    </div>
                </div>

                <div x-show="tab === 'bank'" x-cloak 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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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') }}" 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.index') }}" class="employee-create__btn employee-create__btn--ghost">Cancel</a>
                    <button type="submit" class="employee-create__btn employee-create__btn--soft">Save</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