@extends('layouts.app')

@section('content')

@if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<!-- Create Post Form -->
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title mb-0">Create New Employee</h3>
                </div>
                <div class="card-body">
                    <form id="employeeForm" action="{{ route('employees.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <!-- Basic Information Section -->
                        <div class="card mb-3">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">
                                    <i class="fas fa-user"></i> Basic Information
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="employee_code">Employee Code <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('employee_code') is-invalid @enderror"
                                                   id="employee_code" name="employee_code" value="{{ old('employee_code') }}" required>
                                            @error('employee_code')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="first_name">First Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('first_name') is-invalid @enderror"
                                                   id="first_name" name="first_name" value="{{ old('first_name') }}" required>
                                            @error('first_name')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="last_name">Last Name</label>
                                            <input type="text" class="form-control @error('last_name') is-invalid @enderror"
                                                   id="last_name" name="last_name" value="{{ old('last_name') }}">
                                            @error('last_name')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="profile_photo">Candidate Photo</label>
                                            <input type="file" class="form-control-file @error('profile_photo') is-invalid @enderror"
                                                   id="profile_photo" name="profile_photo" accept="image/*" required>
                                            @error('profile_photo')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="email">Email <span class="text-danger">*</span></label>
                                            <input type="email" class="form-control @error('email') is-invalid @enderror"
                                                   id="email" name="email" value="{{ old('email') }}" required>
                                            @error('email')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="phone">Phone</label>
                                            <input type="text" class="form-control @error('phone') is-invalid @enderror"
                                                   id="phone" name="phone" value="{{ old('phone') }}">
                                            @error('phone')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="date_of_birth">Date of Birth</label>
                                            <input type="date" class="form-control @error('date_of_birth') is-invalid @enderror"
                                                   id="date_of_birth" name="date_of_birth" value="{{ old('date_of_birth') }}">
                                            @error('date_of_birth')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="national_id_number">National ID Number</label>
                                            <input type="text" class="form-control @error('national_id_number') is-invalid @enderror"
                                                   id="national_id_number" name="national_id_number" value="{{ old('national_id_number') }}">
                                            @error('national_id_number')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="gender">Gender</label>
                                            <select class="form-control @error('gender') is-invalid @enderror" id="gender" name="gender">
                                                <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')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="marital_status">Marital Status</label>
                                            <select class="form-control @error('marital_status') is-invalid @enderror" id="marital_status" name="marital_status">
                                                <option value="">Select Status</option>
                                                <option value="single" {{ old('marital_status') == 'single' ? 'selected' : '' }}>Single</option>
                                                <option value="married" {{ old('marital_status') == 'married' ? 'selected' : '' }}>Married</option>
                                                <option value="other" {{ old('marital_status') == 'other' ? 'selected' : '' }}>Other</option>
                                            </select>
                                            @error('marital_status')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="joined_at">Joined Date</label>
                                            <input type="date" class="form-control @error('joined_at') is-invalid @enderror"
                                                   id="joined_at" name="joined_at" value="{{ old('joined_at') }}">
                                            @error('joined_at')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="probation_end_at">Probation End Date</label>
                                            <input type="date" class="form-control @error('probation_end_at') is-invalid @enderror"
                                                   id="probation_end_at" name="probation_end_at" value="{{ old('probation_end_at') }}">
                                            @error('probation_end_at')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Job Details Section -->
                        {{-- <div class="card mb-3">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">
                                    <i class="fas fa-briefcase"></i> Job Details
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="department_id">Department <span class="text-danger">*</span></label>
                                            <select class="form-control @error('department_id') is-invalid @enderror"
                                                    id="department_id" name="department_id" required>
                                                <option value="">Select Department</option>
                                                @foreach($departments as $department)
                                                    <option value="{{ $department->id }}" {{ old('department_id') == $department->id ? 'selected' : '' }}>
                                                        {{ $department->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('department_id')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="designation_id">Designation <span class="text-danger">*</span></label>
                                            <select class="form-control @error('designation_id') is-invalid @enderror"
                                                    id="designation_id" name="designation_id" required>
                                                <option value="">Select Designation</option>
                                            </select>
                                            @error('designation_id')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="reporting_manager_id">Reporting Manager</label>
                                            <select class="form-control @error('reporting_manager_id') is-invalid @enderror"
                                                    id="reporting_manager_id" name="reporting_manager_id">
                                                <option value="">Select Manager</option>
                                                @foreach($employees as $manager)
                                                    <option value="{{ $manager->id }}" {{ old('reporting_manager_id') == $manager->id ? 'selected' : '' }}>
                                                        {{ $manager->first_name }} {{ $manager->last_name }} ({{ $manager->employee_code }})
                                                    </option>
                                                @endforeach
                                            </select>
                                            @error('reporting_manager_id')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="employment_type">Employment Type <span class="text-danger">*</span></label>
                                            <select class="form-control @error('employment_type') is-invalid @enderror"
                                                    id="employment_type" name="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>
                                            </select>
                                            @error('employment_type')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="basic_salary">Basic Salary <span class="text-danger">*</span></label>
                                            <input type="number" step="0.01" class="form-control @error('basic_salary') is-invalid @enderror"
                                                   id="basic_salary" name="basic_salary" value="{{ old('basic_salary') }}" required>
                                            @error('basic_salary')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="allowances">Allowances</label>
                                            <input type="number" step="0.01" class="form-control @error('allowances') is-invalid @enderror"
                                                   id="allowances" name="allowances" value="{{ old('allowances') }}">
                                            @error('allowances')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <label for="joining_date">Joining Date <span class="text-danger">*</span></label>
                                            <input type="date" class="form-control @error('joining_date') is-invalid @enderror"
                                                   id="joining_date" name="joining_date" value="{{ old('joining_date') }}" required>
                                            @error('joining_date')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="confirmation_date">Confirmation Date</label>
                                            <input type="date" class="form-control @error('confirmation_date') is-invalid @enderror"
                                                   id="confirmation_date" name="confirmation_date" value="{{ old('confirmation_date') }}">
                                            @error('confirmation_date')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> --}}

                        <!-- Addresses Section -->
                        <div class="card mb-3">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">
                                    <i class="fas fa-map-marker-alt"></i> Addresses
                                    <button type="button" class="btn btn-success btn-sm float-right" id="addAddress">
                                        <i class="fas fa-plus"></i> Add Address
                                    </button>
                                </h5>
                            </div>
                            <div class="card-body">
                                <div id="addressesContainer">
                                    <!-- Addresses will be added here dynamically -->
                                </div>
                            </div>
                        </div>

                        <!-- Education Section -->
                        <div class="card mb-3">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">
                                    <i class="fas fa-graduation-cap"></i> Education
                                    <button type="button" class="btn btn-success btn-sm float-right" id="addEducation">
                                        <i class="fas fa-plus"></i> Add Education
                                    </button>
                                </h5>
                            </div>
                            <div class="card-body">
                                <div id="educationsContainer">
                                    <!-- Education entries will be added here -->
                                </div>
                                <p class="text-muted mb-0"><small>Click the button above to add education details</small></p>
                            </div>
                        </div>

                        <!-- Experience Section -->
                        <div class="card mb-3">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">
                                    <i class="fas fa-briefcase"></i> Work Experience
                                    <button type="button" class="btn btn-success btn-sm float-right" id="addExperience">
                                        <i class="fas fa-plus"></i> Add Experience
                                    </button>
                                </h5>
                            </div>
                            <div class="card-body">
                                <div id="experiencesContainer">
                                    <!-- Experience entries will be added here -->
                                </div>
                                <p class="text-muted mb-0"><small>Click the button above to add work experience</small></p>
                            </div>
                        </div>

                        <!-- Skills Section -->
                        <div class="card mb-3">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">
                                    <i class="fas fa-code"></i> Skills
                                    <button type="button" class="btn btn-success btn-sm float-right" id="addSkill">
                                        <i class="fas fa-plus"></i> Add Skill
                                    </button>
                                </h5>
                            </div>
                            <div class="card-body">
                                <div id="skillsContainer">
                                    <!-- Skills will be added here -->
                                </div>
                                <p class="text-muted mb-0"><small>Click the button above to add skills</small></p>
                            </div>
                        </div>

                        <!-- Emergency Contacts Section -->
                        <div class="card mb-3">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">
                                    <i class="fas fa-phone-alt"></i> Emergency Contacts
                                    <button type="button" class="btn btn-success btn-sm float-right" id="addEmergencyContact">
                                        <i class="fas fa-plus"></i> Add Emergency Contact
                                    </button>
                                </h5>
                            </div>
                            <div class="card-body">
                                <div id="emergencyContactsContainer">
                                    <!-- Emergency contacts will be added here -->
                                </div>
                                <p class="text-muted mb-0"><small>Click the button above to add emergency contacts</small></p>
                            </div>
                        </div>

                        <!-- Bank Details Section -->
                        <div class="card mb-3">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">
                                    <i class="fas fa-university"></i> Bank Details
                                    <button type="button" class="btn btn-success btn-sm float-right" id="addBankAccount">
                                        <i class="fas fa-plus"></i> Add Bank Account
                                    </button>
                                </h5>
                            </div>
                            <div class="card-body">
                                <div id="bankAccountsContainer">
                                    <!-- Bank accounts will be added here -->
                                </div>
                                <p class="text-muted mb-0"><small>Click the button above to add bank accounts</small></p>
                            </div>
                        </div>

                        <!-- References Section -->
                        <div class="card mb-3">
                            <div class="card-header bg-light">
                                <h5 class="mb-0">
                                    <i class="fas fa-users"></i> References
                                    <button type="button" class="btn btn-success btn-sm float-right" id="addReference">
                                        <i class="fas fa-plus"></i> Add Reference
                                    </button>
                                </h5>
                            </div>
                            <div class="card-body">
                                <div id="referencesContainer">
                                    <!-- References will be added here -->
                                </div>
                                <p class="text-muted mb-0"><small>Click the button above to add references</small></p>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="row mt-4">
                            <div class="col-12 text-center">
                                <button type="submit" class="btn btn-primary btn-lg px-5">
                                    <i class="fas fa-save"></i> Save Employee
                                </button>
                                {{-- <a href="{{ route('employees.index') }}" class="btn btn-secondary btn-lg px-5">
                                    <i class="fas fa-times"></i> Cancel
                                </a> --}}
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script>
$(document).ready(function() {
    // Initialize with one address
    addAddress();

    // Department change - load designations
    $('#department_id').change(function() {
        var departmentId = $(this).val();
        if (departmentId) {
            $.ajax({
                url: '/get-designations/' + departmentId,
                type: 'GET',
                success: function(data) {
                    $('#designation_id').empty().append('<option value="">Select Designation</option>');
                    $.each(data, function(key, value) {
                        $('#designation_id').append('<option value="' + value.id + '">' + value.title + '</option>');
                    });

                    // Set old value if exists
                    var oldValue = "{{ old('designation_id') }}";
                    if (oldValue) {
                        $('#designation_id').val(oldValue);
                    }
                }
            });
        }
    });

    // Load designations if department already selected
    if ($('#department_id').val()) {
        $('#department_id').trigger('change');
    }

    // Form validation on submit
    $('#employeeForm').submit(function(e) {
        if (!validateForm()) {
            e.preventDefault();
            return false;
        }
    });
});

// Form validation function
function validateForm() {
    var isValid = true;
    var firstError = null;

    // Clear all previous validation errors
    $('.is-invalid').removeClass('is-invalid');
    $('.invalid-feedback').remove();

    // Validate required fields
    $('[required]').each(function() {
        var field = $(this);
        var value = field.val();

        if (!value || value.trim() === '') {
            isValid = false;
            highlightField(field, 'This field is required');

            if (!firstError) {
                firstError = field;
            }
        }

        // Email validation
        if (field.attr('type') === 'email' && value) {
            var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailPattern.test(value)) {
                isValid = false;
                highlightField(field, 'Please enter a valid email address');

                if (!firstError) {
                    firstError = field;
                }
            }
        }
    });

    // Validate that at least one address exists
    if ($('#addressesContainer .address-item').length === 0) {
        alert('Please add at least one address');
        isValid = false;
    }

    // Validate date fields
    var joiningDate = $('#joining_date').val();
    var confirmationDate = $('#confirmation_date').val();
    var probationEndDate = $('#probation_end_at').val();
    var dateOfBirth = $('#date_of_birth').val();

    if (joiningDate && confirmationDate && confirmationDate < joiningDate) {
        alert('Confirmation date cannot be before joining date');
        highlightField($('#confirmation_date'), 'Confirmation date must be after joining date');
        isValid = false;
    }

    if (joiningDate && probationEndDate && probationEndDate < joiningDate) {
        alert('Probation end date cannot be before joining date');
        highlightField($('#probation_end_at'), 'Probation end date must be after joining date');
        isValid = false;
    }

    if (dateOfBirth && joiningDate && dateOfBirth > joiningDate) {
        alert('Date of birth cannot be after joining date');
        highlightField($('#date_of_birth'), 'Date of birth must be before joining date');
        isValid = false;
    }

    // Scroll to first error
    if (firstError) {
        $('html, body').animate({
            scrollTop: firstError.offset().top - 100
        }, 500);
    }

    if (!isValid) {
        alert('Please fix the validation errors before submitting.');
    }

    return isValid;
}

// Highlight invalid fields
function highlightField(field, message) {
    field.addClass('is-invalid');
    if (field.next('.invalid-feedback').length === 0) {
        field.after('<div class="invalid-feedback">' + message + '</div>');
    }
}

// Address functions
function addAddress() {
    var index = $('#addressesContainer .address-item').length;
    var html = `
        <div class="address-item card mb-3">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 text-right">
                        <button type="button" class="btn btn-danger btn-sm remove-item">
                            <i class="fas fa-times"></i> Remove
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Address Type <span class="text-danger">*</span></label>
                            <select class="form-control" name="addresses[${index}][type]" required>
                                <option value="current">Current</option>
                                <option value="permanent">Permanent</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Address Line 1 <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="addresses[${index}][address_line_1]" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Address Line 2</label>
                            <input type="text" class="form-control" name="addresses[${index}][address_line_2]">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>City <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="addresses[${index}][city]" required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>State</label>
                            <input type="text" class="form-control" name="addresses[${index}][state]">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Postal Code</label>
                            <input type="text" class="form-control" name="addresses[${index}][postal_code]">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Country <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="addresses[${index}][country]" required>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    $('#addressesContainer').append(html);
}

// Education functions
function addEducation() {
    var index = $('#educationsContainer .education-item').length;
    var html = `
        <div class="education-item card mb-3">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 text-right">
                        <button type="button" class="btn btn-danger btn-sm remove-item">
                            <i class="fas fa-times"></i> Remove
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Degree Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="educations[${index}][degree_title]" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Institution <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="educations[${index}][institution_name]" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Field of Study</label>
                            <input type="text" class="form-control" name="educations[${index}][field_of_study]">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Start Date</label>
                            <input type="date" class="form-control" name="educations[${index}][start_date]">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>End Date</label>
                            <input type="date" class="form-control" name="educations[${index}][end_date]">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Grade</label>
                            <input type="text" class="form-control" name="educations[${index}][grade]">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <div class="custom-control custom-checkbox mt-4">
                                <input type="checkbox" class="custom-control-input" name="educations[${index}][is_current]" id="education_current_${index}" value="1">
                                <label class="custom-control-label" for="education_current_${index}">Currently Studying</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    $('#educationsContainer').append(html);
}

// Experience functions
function addExperience() {
    var index = $('#experiencesContainer .experience-item').length;
    var html = `
        <div class="experience-item card mb-3">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 text-right">
                        <button type="button" class="btn btn-danger btn-sm remove-item">
                            <i class="fas fa-times"></i> Remove
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Company Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="experiences[${index}][company_name]" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Job Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="experiences[${index}][job_title]" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Employment Type <span class="text-danger">*</span></label>
                            <select class="form-control" name="experiences[${index}][employment_type]" required>
                                <option value="">Select Type</option>
                                <option value="full_time">Full Time</option>
                                <option value="part_time">Part Time</option>
                                <option value="contract">Contract</option>
                                <option value="internship">Internship</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Start Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="experiences[${index}][start_date]" required>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>End Date</label>
                            <input type="date" class="form-control" name="experiences[${index}][end_date]">
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <div class="custom-control custom-checkbox mt-4">
                                <input type="checkbox" class="custom-control-input currently-working"
                                       name="experiences[${index}][currently_working]"
                                       id="exp_current_${index}" value="1">
                                <label class="custom-control-label" for="exp_current_${index}">Currently Working</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="form-group">
                            <label>Salary</label>
                            <input type="number" step="0.01" class="form-control" name="experiences[${index}][salary]">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <label>Job Description</label>
                            <textarea class="form-control" name="experiences[${index}][job_description]" rows="2"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    $('#experiencesContainer').append(html);
}

// Skills functions
function addSkill() {
    var index = $('#skillsContainer .skill-item').length;
    var html = `
        <div class="skill-item card mb-3">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 text-right">
                        <button type="button" class="btn btn-danger btn-sm remove-item">
                            <i class="fas fa-times"></i> Remove
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Skill Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="skills[${index}][skill_name]" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Proficiency Level <span class="text-danger">*</span></label>
                            <select class="form-control" name="skills[${index}][proficiency_level]" required>
                                <option value="">Select Level</option>
                                <option value="beginner">Beginner</option>
                                <option value="intermediate">Intermediate</option>
                                <option value="advanced">Advanced</option>
                                <option value="expert">Expert</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    $('#skillsContainer').append(html);
}

// Emergency Contact functions
function addEmergencyContact() {
    var index = $('#emergencyContactsContainer .emergency-contact-item').length;
    var html = `
        <div class="emergency-contact-item card mb-3">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 text-right">
                        <button type="button" class="btn btn-danger btn-sm remove-item">
                            <i class="fas fa-times"></i> Remove
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="emergency_contacts[${index}][name]" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Relationship <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="emergency_contacts[${index}][relationship]" required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Phone <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="emergency_contacts[${index}][phone]" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Alternate Phone</label>
                            <input type="text" class="form-control" name="emergency_contacts[${index}][alternate_phone]">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    $('#emergencyContactsContainer').append(html);
}

// Bank Account functions
function addBankAccount() {
    var index = $('#bankAccountsContainer .bank-account-item').length;
    var html = `
        <div class="bank-account-item card mb-3">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 text-right">
                        <button type="button" class="btn btn-danger btn-sm remove-item">
                            <i class="fas fa-times"></i> Remove
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Bank Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="bank_accounts[${index}][bank_name]" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Account Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="bank_accounts[${index}][account_title]" required>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Account Number <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="bank_accounts[${index}][account_number]" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>IBAN</label>
                            <input type="text" class="form-control" name="bank_accounts[${index}][iban]">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Branch Name</label>
                            <input type="text" class="form-control" name="bank_accounts[${index}][branch_name]">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="custom-control custom-checkbox">
                            <input type="checkbox" class="custom-control-input"
                                   name="bank_accounts[${index}][is_primary]"
                                   id="bank_primary_${index}" value="1">
                            <label class="custom-control-label" for="bank_primary_${index}">Set as Primary Account</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    $('#bankAccountsContainer').append(html);
}

// Reference functions
function addReference() {
    var index = $('#referencesContainer .reference-item').length;
    var html = `
        <div class="reference-item card mb-3">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 text-right">
                        <button type="button" class="btn btn-danger btn-sm remove-item">
                            <i class="fas fa-times"></i> Remove
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="references[${index}][name]" required>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Company Name</label>
                            <input type="text" class="form-control" name="references[${index}][company_name]">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Designation</label>
                            <input type="text" class="form-control" name="references[${index}][designation]">
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Phone <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="references[${index}][phone]" required>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control" name="references[${index}][email]">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Relationship</label>
                            <input type="text" class="form-control" name="references[${index}][relationship]">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    `;
    $('#referencesContainer').append(html);
}

// Remove item handler
$(document).on('click', '.remove-item', function() {
    $(this).closest('.card').remove();
});

// Handle currently working checkbox
$(document).on('change', '.currently-working', function() {
    var container = $(this).closest('.row');
    var endDateField = container.find('input[name*="[end_date]"]');
    var startDateField = container.find('input[name*="[start_date]"]');

    if ($(this).is(':checked')) {
        endDateField.prop('disabled', true).val('').removeAttr('required');
    } else {
        endDateField.prop('disabled', false);
    }
});

// Event listeners for add buttons
$(document).ready(function() {
    $('#addAddress').click(addAddress);
    $('#addEducation').click(addEducation);
    $('#addExperience').click(addExperience);
    $('#addSkill').click(addSkill);
    $('#addEmergencyContact').click(addEmergencyContact);
    $('#addBankAccount').click(addBankAccount);
    $('#addReference').click(addReference);
});
</script>
@endpush