@extends('layouts.app')

@section('content')
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">Add New Employee</h1>
                </div>
                <div>
                    <a href="{{ route('companies.hr.employees.index', $company) }}" class="btn btn-outline-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Employees
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Employee Form -->
    <div class="row">
        <div class="col-12">
            <div class="card">

                <div class="card-body">
                    <form method="POST" action="{{ route('companies.hr.employees.store', $company) }}" id="employeeForm" class="employee-form">
                        @csrf

                        @if($errors->any())
                            <div class="alert alert-danger">
                                <h6>Please fix the following errors:</h6>
                                <ul class="mb-0">
                                    @foreach($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        @if(session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif

                        <!-- Debug Info -->
                        <div class="alert alert-info small">
                            <strong>Debug:</strong> Form Action: {{ route('companies.hr.employees.store', $company) }}<br>
                            Company ID: {{ $company->id }}
                        </div>

                        <!-- Personal Details Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold mb-3" style="color: #2c3e50;">Personal Details</h6>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label class="form-label">Official Full Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('full_name') is-invalid @enderror"
                                       name="full_name" value="{{ old('full_name') }}" required>
                                @error('full_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Preferred Name</label>
                                <input type="text" class="form-control @error('preferred_name') is-invalid @enderror"
                                       name="preferred_name" value="{{ old('preferred_name') }}">
                                @error('preferred_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4">
                                <label class="form-label">Gender <span class="text-danger">*</span></label>
                                <select class="form-select @error('gender') is-invalid @enderror" name="gender" required>
                                    <option value="">Select Gender</option>
                                    <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>Male</option>
                                    <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>Female</option>
                                </select>
                                @error('gender')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label">Email</label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror"
                                       name="email" id="employee_email" value="{{ old('email') }}">
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 d-flex align-items-end">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="no_email" name="no_email"
                                           {{ old('no_email') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="no_email">
                                        No Email
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Employment Details Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold mb-3" style="color: #2c3e50;">Employment Details</h6>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label class="form-label">Employee Number <span class="text-danger">*</span></label>
                                <input type="text" class="form-control @error('employee_id') is-invalid @enderror"
                                       name="employee_id" id="employee_id" value="{{ old('employee_id', $nextEmployeeId) }}" required>
                                @error('employee_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Start Date <span class="text-danger">*</span></label>
                                <input type="date" class="form-control @error('hire_date') is-invalid @enderror"
                                       name="hire_date" value="{{ old('hire_date') }}" required>
                                @error('hire_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Reports To</label>
                                <select class="form-select @error('reports_to') is-invalid @enderror" name="reports_to">
                                    <option value="">Select Manager</option>
                                    @foreach($existingEmployees as $employee)
                                        <option value="{{ $employee->id }}" {{ old('reports_to') == $employee->id ? 'selected' : '' }}>
                                            {{ $employee->full_name }} - {{ $employee->position }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('reports_to')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">&nbsp;</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="employee_id_auto" name="employee_id_auto"
                                           {{ old('employee_id_auto', true) ? 'checked' : '' }}>
                                    <label class="form-check-label" for="employee_id_auto">
                                        Auto Generate ID
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label class="form-label">Position <span class="text-danger">*</span></label>
                                <select class="form-select @error('position') is-invalid @enderror"
                                        name="position" id="position_select" required>
                                    <option value="">Select Position</option>
                                    @foreach($positions as $position)
                                        <option value="{{ $position->title }}" {{ old('position') == $position->title ? 'selected' : '' }}>
                                            {{ $position->title }}
                                        </option>
                                    @endforeach
                                    <option value="other">Other</option>
                                </select>
                                <input type="text" class="form-control mt-2 d-none @error('position') is-invalid @enderror"
                                       name="position_manual" id="position_manual" placeholder="Enter position">
                                @error('position')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Department <span class="text-danger">*</span></label>
                                <select class="form-select @error('department') is-invalid @enderror"
                                        name="department" id="department_select" required>
                                    <option value="">Select Department</option>
                                    @foreach($departments as $department)
                                        <option value="{{ $department->name }}" {{ old('department') == $department->name ? 'selected' : '' }}>
                                            {{ $department->name }}
                                        </option>
                                    @endforeach
                                    <option value="other">Other</option>
                                </select>
                                <input type="text" class="form-control mt-2 d-none @error('department') is-invalid @enderror"
                                       name="department_manual" id="department_manual" placeholder="Enter department">
                                @error('department')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Subsidiary</label>
                                <select class="form-select @error('subsidiary') is-invalid @enderror" name="subsidiary">
                                    <option value="">Select Subsidiary</option>
                                    @foreach($subsidiaries as $key => $name)
                                        <option value="{{ $key }}" {{ old('subsidiary') == $key ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                                @error('subsidiary')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Location</label>
                                <select class="form-select @error('location') is-invalid @enderror" name="location">
                                    <option value="">Select Location</option>
                                    @foreach($locations as $key => $name)
                                        <option value="{{ $key }}" {{ old('location') == $key ? 'selected' : '' }}>{{ $name }}</option>
                                    @endforeach
                                </select>
                                @error('location')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-6">
                                <label class="form-label">Employment Type <span class="text-danger">*</span></label>
                                <select class="form-select @error('employment_type') is-invalid @enderror"
                                        name="employment_type" id="employment_type" required>
                                    <option value="">Select Type</option>
                                    <option value="full_time" {{ old('employment_type') == 'full_time' ? 'selected' : '' }}>Full Time</option>
                                    <option value="part_time" {{ old('employment_type') == 'part_time' ? 'selected' : '' }}>Part Time</option>
                                    <option value="contract" {{ old('employment_type') == 'contract' ? 'selected' : '' }}>Contract</option>
                                    <option value="intern" {{ old('employment_type') == 'intern' ? 'selected' : '' }}>Intern</option>
                                </select>
                                @error('employment_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 d-flex align-items-end">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="not_entitled_to_ot" name="not_entitled_to_ot"
                                           {{ old('not_entitled_to_ot') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="not_entitled_to_ot">
                                        Not Entitled to Overtime (OT)
                                    </label>
                                    <div class="text-muted small">
                                        Check this for executive/management positions
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Contract Duration Fields (shown only for Contract/Intern employment types) -->
                        <div class="row mb-4" id="contract_duration_fields" style="display: none;">
                            <div class="col-md-3">
                                <label class="form-label">Contract End Date</label>
                                <input type="date" class="form-control @error('contract_end_date') is-invalid @enderror"
                                       name="contract_end_date" id="contract_end_date" value="{{ old('contract_end_date') }}">
                                @error('contract_end_date')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Leave blank for indefinite</small>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Duration (Months)</label>
                                <input type="number" class="form-control @error('contract_duration_months') is-invalid @enderror"
                                       name="contract_duration_months" id="contract_duration_months" value="{{ old('contract_duration_months') }}" min="1">
                                @error('contract_duration_months')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Auto-calculated</small>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Extension Reminder</label>
                                <select class="form-select @error('contract_reminder_days') is-invalid @enderror"
                                        name="contract_reminder_days" id="contract_reminder_days">
                                    <option value="">No reminder</option>
                                    <option value="7" {{ old('contract_reminder_days') == '7' ? 'selected' : '' }}>1 week before</option>
                                    <option value="14" {{ old('contract_reminder_days') == '14' ? 'selected' : '' }}>2 weeks before</option>
                                    <option value="30" {{ old('contract_reminder_days', '30') == '30' ? 'selected' : '' }}>1 month before</option>
                                    <option value="60" {{ old('contract_reminder_days') == '60' ? 'selected' : '' }}>2 months before</option>
                                    <option value="90" {{ old('contract_reminder_days') == '90' ? 'selected' : '' }}>3 months before</option>
                                </select>
                                @error('contract_reminder_days')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="text-muted">Notify before expiry</small>
                            </div>
                            <div class="col-md-3 d-flex align-items-center">
                                <div class="alert alert-warning mb-0 w-100 py-2">
                                    <i class="bi bi-bell me-1"></i>
                                    <small><strong>Auto Reminder:</strong> System will send email notifications to HR about contract extension.</small>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Contract Extension Options (shown only for Contract/Intern employment types) -->
                        <div class="row mb-4" id="contract_extension_options" style="display: none;">
                            <div class="col-12">
                                <div class="card bg-light border-0">
                                    <div class="card-body py-3">
                                        <h6 class="mb-3"><i class="bi bi-arrow-repeat me-2"></i>Contract Extension Settings</h6>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="auto_renewal_eligible" name="auto_renewal_eligible"
                                                           {{ old('auto_renewal_eligible') ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="auto_renewal_eligible">
                                                        Eligible for Auto-Renewal
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="notify_employee" name="notify_employee"
                                                           {{ old('notify_employee', true) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="notify_employee">
                                                        Notify Employee About Extension
                                                    </label>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input" type="checkbox" id="notify_manager" name="notify_manager"
                                                           {{ old('notify_manager', true) ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="notify_manager">
                                                        Notify Direct Manager
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-3">
                                            <div class="col-12">
                                                <label class="form-label">Contract Extension Notes</label>
                                                <textarea class="form-control @error('contract_notes') is-invalid @enderror"
                                                          name="contract_notes" rows="2" placeholder="E.g., Performance review required before extension, Budget approval needed, etc.">{{ old('contract_notes') }}</textarea>
                                                @error('contract_notes')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Leave Taken Information Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold mb-3" style="color: #2c3e50;">Leave Taken Information</h6>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-3">
                                <label class="form-label">Annual Leave (Days)</label>
                                <input type="number" class="form-control @error('annual_leave_taken') is-invalid @enderror"
                                       name="annual_leave_taken" value="{{ old('annual_leave_taken', 0) }}" min="0">
                                @error('annual_leave_taken')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Sick Leave (Days)</label>
                                <input type="number" class="form-control @error('sick_leave_taken') is-invalid @enderror"
                                       name="sick_leave_taken" value="{{ old('sick_leave_taken', 0) }}" min="0">
                                @error('sick_leave_taken')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Maternity Leave (Days)</label>
                                <input type="number" class="form-control @error('maternity_leave_taken') is-invalid @enderror"
                                       name="maternity_leave_taken" value="{{ old('maternity_leave_taken', 0) }}" min="0">
                                @error('maternity_leave_taken')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Paternity Leave (Days)</label>
                                <input type="number" class="form-control @error('paternity_leave_taken') is-invalid @enderror"
                                       name="paternity_leave_taken" value="{{ old('paternity_leave_taken', 0) }}" min="0">
                                @error('paternity_leave_taken')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Carry-Forward Leave Balance Information Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <h6 class="fw-bold mb-3" style="color: #2c3e50;">Carry-Forward Leave Balance Information</h6>
                                <div class="alert alert-info py-2">
                                    <small><i class="bi bi-info-circle me-1"></i>
                                    <strong>Company Leave Policy:</strong>
                                    Annual: {{ $attendanceLeaveSettings->annual_leave_entitlement ?? 14 }} days |
                                    Sick: {{ $attendanceLeaveSettings->sick_leave_entitlement ?? 14 }} days |
                                    Maternity: {{ $attendanceLeaveSettings->maternity_leave_entitlement ?? 60 }} days |
                                    Paternity: {{ $attendanceLeaveSettings->paternity_leave_entitlement ?? 7 }} days
                                    <a href="{{ route('companies.hr.settings.attendance-leave', $company) }}" class="ms-2 text-decoration-none" target="_blank">
                                        <i class="bi bi-gear"></i> Update Leave Settings
                                    </a>
                                    |
                                    <a href="{{ route('companies.hr.settings.organization', $company) }}" class="ms-2 text-decoration-none" target="_blank">
                                        <i class="bi bi-diagram-3"></i> Manage Locations & Subsidiaries
                                    </a>
                                    </small>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-3">
                                <label class="form-label">Annual Leave Balance (Days)</label>
                                <input type="number" class="form-control @error('annual_leave_balance') is-invalid @enderror"
                                       name="annual_leave_balance" value="{{ old('annual_leave_balance', (int)($attendanceLeaveSettings->annual_leave_entitlement ?? 14)) }}" min="0">
                                <small class="text-muted">Company: {{ $attendanceLeaveSettings->annual_leave_entitlement ?? 14 }} days</small>
                                @error('annual_leave_balance')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Sick Leave Balance (Days)</label>
                                <input type="number" class="form-control @error('sick_leave_balance') is-invalid @enderror"
                                       name="sick_leave_balance" value="{{ old('sick_leave_balance', (int)($attendanceLeaveSettings->sick_leave_entitlement ?? 14)) }}" min="0">
                                <small class="text-muted">Company: {{ $attendanceLeaveSettings->sick_leave_entitlement ?? 14 }} days</small>
                                @error('sick_leave_balance')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Maternity Leave Balance (Days)</label>
                                <input type="number" class="form-control @error('maternity_leave_balance') is-invalid @enderror"
                                       name="maternity_leave_balance" value="{{ old('maternity_leave_balance', (int)($attendanceLeaveSettings->maternity_leave_entitlement ?? 60)) }}" min="0">
                                <small class="text-muted">Company: {{ $attendanceLeaveSettings->maternity_leave_entitlement ?? 60 }} days</small>
                                @error('maternity_leave_balance')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">Paternity Leave Balance (Days)</label>
                                <input type="number" class="form-control @error('paternity_leave_balance') is-invalid @enderror"
                                       name="paternity_leave_balance" value="{{ old('paternity_leave_balance', (int)($attendanceLeaveSettings->paternity_leave_entitlement ?? 7)) }}" min="0">
                                <small class="text-muted">Company: {{ $attendanceLeaveSettings->paternity_leave_entitlement ?? 7 }} days</small>
                                @error('paternity_leave_balance')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- Send Invitation Email Section -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="send_invitation" name="send_invitation"
                                           {{ old('send_invitation', true) ? 'checked' : '' }}>
                                    <label class="form-check-label fw-bold" for="send_invitation" style="color: #2c3e50;">
                                        Send Invitation Email
                                    </label>
                                    <div class="text-muted small mt-1">
                                        Employee will receive an email to set up their password and access the company workspace
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="d-flex justify-content-between align-items-center pt-4 border-top">
                            <a href="{{ route('companies.hr.employees.index', $company) }}"
                               class="btn btn-outline-secondary">
                                <i class="bi bi-x-circle"></i> Cancel
                            </a>
                            <div>
                                <button type="submit" name="action" value="save_and_add" class="btn btn-outline-primary me-2" id="saveAndAddBtn">
                                    <span class="btn-text">
                                        <i class="bi bi-plus-circle"></i> Save and Add Another Employee
                                    </span>
                                    <span class="btn-loading d-none">
                                        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                                        Processing...
                                    </span>
                                </button>
                                <button type="submit" name="action" value="save" class="btn btn-primary" id="saveBtn">
                                    <span class="btn-text">
                                        <i class="bi bi-check-circle"></i> Save Employee
                                    </span>
                                    <span class="btn-loading d-none">
                                        <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
                                        <span id="loadingText">Saving Employee...</span>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const employeeIdInput = document.getElementById('employee_id');
    const employeeIdAuto = document.getElementById('employee_id_auto');
    const positionSelect = document.getElementById('position_select');
    const positionManual = document.getElementById('position_manual');
    const departmentSelect = document.getElementById('department_select');
    const departmentManual = document.getElementById('department_manual');
    const employeeEmail = document.getElementById('employee_email');
    const noEmailCheckbox = document.getElementById('no_email');
    const sendInvitationCheckbox = document.getElementById('send_invitation');
    const employmentTypeSelect = document.getElementById('employment_type');
    const contractDurationFields = document.getElementById('contract_duration_fields');
    const contractExtensionOptions = document.getElementById('contract_extension_options');
    const hireDateInput = document.querySelector('[name="hire_date"]');
    const contractEndDateInput = document.getElementById('contract_end_date');
    const contractDurationMonthsInput = document.getElementById('contract_duration_months');

    // Handle Employee ID auto-generation toggle
    employeeIdAuto.addEventListener('change', function() {
        if (this.checked) {
            employeeIdInput.value = '{{ $nextEmployeeId }}';
            employeeIdInput.readOnly = true;
            employeeIdInput.classList.add('bg-light');
        } else {
            employeeIdInput.readOnly = false;
            employeeIdInput.classList.remove('bg-light');
            employeeIdInput.focus();
        }
    });

    // Handle No Email checkbox
    noEmailCheckbox.addEventListener('change', function() {
        if (this.checked) {
            employeeEmail.value = '';
            employeeEmail.disabled = true;
            employeeEmail.classList.add('bg-light');
            sendInvitationCheckbox.checked = false;
            sendInvitationCheckbox.disabled = true;
        } else {
            employeeEmail.disabled = false;
            employeeEmail.classList.remove('bg-light');
            sendInvitationCheckbox.disabled = false;
            employeeEmail.focus();
        }
    });

    // Handle Send Invitation checkbox
    sendInvitationCheckbox.addEventListener('change', function() {
        if (this.checked && (!employeeEmail.value || noEmailCheckbox.checked)) {
            alert('Please enter an email address before enabling invitation email.');
            this.checked = false;
        }
    });

    // Handle Position selection
    positionSelect.addEventListener('change', function() {
        if (this.value === 'other') {
            positionManual.classList.remove('d-none');
            positionManual.required = true;
            positionManual.focus();
            this.name = '';
            positionManual.name = 'position';
        } else {
            positionManual.classList.add('d-none');
            positionManual.required = false;
            this.name = 'position';
            positionManual.name = '';
        }
    });

    // Handle Department selection
    departmentSelect.addEventListener('change', function() {
        if (this.value === 'other') {
            departmentManual.classList.remove('d-none');
            departmentManual.required = true;
            departmentManual.focus();
            this.name = '';
            departmentManual.name = 'department';
        } else {
            departmentManual.classList.add('d-none');
            departmentManual.required = false;
            this.name = 'department';
            departmentManual.name = '';
        }
    });

    // Handle Employment Type change (show/hide contract duration fields)
    employmentTypeSelect.addEventListener('change', function() {
        if (this.value === 'contract' || this.value === 'intern') {
            contractDurationFields.style.display = 'flex';
            contractExtensionOptions.style.display = 'flex';
        } else {
            contractDurationFields.style.display = 'none';
            contractExtensionOptions.style.display = 'none';
            // Clear contract fields when not contract/intern
            contractEndDateInput.value = '';
            contractDurationMonthsInput.value = '';
            document.getElementById('contract_reminder_days').value = '';
            document.getElementById('auto_renewal_eligible').checked = false;
            document.getElementById('notify_employee').checked = false;
            document.getElementById('notify_manager').checked = false;
            document.querySelector('[name="contract_notes"]').value = '';
        }
    });

    // Calculate duration in months when end date changes
    contractEndDateInput.addEventListener('change', function() {
        if (this.value && hireDateInput.value) {
            const startDate = new Date(hireDateInput.value);
            const endDate = new Date(this.value);
            
            if (endDate > startDate) {
                const months = Math.round((endDate - startDate) / (1000 * 60 * 60 * 24 * 30));
                contractDurationMonthsInput.value = months;
            }
        }
    });

    // Calculate end date when duration changes
    contractDurationMonthsInput.addEventListener('change', function() {
        if (this.value && hireDateInput.value) {
            const startDate = new Date(hireDateInput.value);
            const months = parseInt(this.value);
            
            if (months > 0) {
                const endDate = new Date(startDate);
                endDate.setMonth(endDate.getMonth() + months);
                contractEndDateInput.value = endDate.toISOString().split('T')[0];
            }
        }
    });

    // Recalculate when hire date changes (if contract type is selected)
    hireDateInput.addEventListener('change', function() {
        if ((employmentTypeSelect.value === 'contract' || employmentTypeSelect.value === 'intern') && contractDurationMonthsInput.value) {
            // Recalculate end date based on duration
            const startDate = new Date(this.value);
            const months = parseInt(contractDurationMonthsInput.value);
            
            if (months > 0) {
                const endDate = new Date(startDate);
                endDate.setMonth(endDate.getMonth() + months);
                contractEndDateInput.value = endDate.toISOString().split('T')[0];
            }
        }
    });

    // Initialize states
    if (employeeIdAuto.checked) {
        employeeIdInput.readOnly = true;
        employeeIdInput.classList.add('bg-light');
    }

    if (noEmailCheckbox.checked) {
        employeeEmail.disabled = true;
        employeeEmail.classList.add('bg-light');
        sendInvitationCheckbox.disabled = true;
        sendInvitationCheckbox.checked = false;
    } else {
        // If no email is not checked and there's no old form data, check send invitation by default
        if (!{{ old('send_invitation') ? 'true' : 'false' }}) {
            sendInvitationCheckbox.checked = true;
        }
    }

    // Check if employment type is contract/intern on page load (for old form data)
    if (employmentTypeSelect.value === 'contract' || employmentTypeSelect.value === 'intern') {
        contractDurationFields.style.display = 'flex';
        contractExtensionOptions.style.display = 'flex';
    }

    // Form loading is now handled globally by the form-loading component
});
</script>
@endpush