@extends('admin.layouts.master')
@section('title') Employee Edit @endsection

@section('content')
@component('components.breadcrumb')
    @slot('li_1') Employee Edit @endslot
    @slot('title') Employee Edit @endslot
@endcomponent 


<div class="row">
    <div class="col-lg-12">
        
      <form method="POST" action="{{ route('admin.employee.update', $employee->id) }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="row gx-3">
        <!-- First Name -->
        <div class="col-md-6 mb-3">
            <label for="first_name" class="form-label font-size-14">
                First Name <span class="text-danger">*</span>
            </label>
            <input
                type="text"
                class="form-control form-control-custom @error('first_name') is-invalid @enderror"
                id="first_name"
                name="first_name"
                value="{{ old('first_name', $employee->user->first_name ?? '') }}"
                placeholder="Enter first name"
                required
            />
            @error('first_name') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <!-- Last Name -->
        <div class="col-md-6 mb-3">
            <label for="last_name" class="form-label font-size-14">
                Last Name <span class="text-danger">*</span>
            </label>
            <input
                type="text"
                class="form-control form-control-custom @error('last_name') is-invalid @enderror"
                id="last_name"
                name="last_name"
                value="{{ old('last_name', $employee->user->last_name ?? '') }}"
                placeholder="Enter last name"
                required
            />
            @error('last_name') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <!-- Email -->
        <div class="col-md-6 mb-3">
            <label for="email" class="form-label font-size-14">
                Email <span class="text-danger">*</span>
            </label>
            <input
                type="email"
                class="form-control form-control-custom @error('email') is-invalid @enderror"
                id="email"
                name="email"
                value="{{ old('email', $employee->user->email ?? '') }}"
                placeholder="Enter email address"
                required
            />
            @error('email') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
        <!-- Phone -->
        <div class="col-md-6 mb-3">
            <label for="phone" class="form-label font-size-14">
                Phone <span class="text-danger">*</span>
            </label>
            <input
                type="text"
                class="form-control form-control-custom @error('phone') is-invalid @enderror"
                id="phone"
                name="phone"
                value="{{ old('phone', $employee->user->phone ?? '') }}"
                placeholder="Enter phone number"
                maxlength="10"
                required
            />
            @error('phone') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

         <!-- Gender -->
        <div class="col-md-6 mb-3">
            <label for="gender" class="form-label font-size-14">
                Gender <span class="text-danger">*</span>
            </label>
            <select
                class="form-control form-control-custom @error('gender') is-invalid @enderror"
                id="gender"
                name="gender"
                required
            >
                <option value="">Select Gender</option>
                <option value="male" {{ old('gender', $employee->user->gender ?? '') == 'male' ? 'selected' : '' }}>Male</option>
                <option value="female" {{ old('gender', $employee->user->gender ?? '') == 'female' ? 'selected' : '' }}>Female</option>
            </select>
            @error('gender') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

       
        <!-- Password -->
        <div class="col-md-6 mb-3">
            <label for="password" class="form-label font-size-14">
                Password
            </label>
            <div class="input-group mb-2">
                <input
                    type="password"
                    class="form-control form-control-custom @error('password') is-invalid @enderror"
                    id="password"
                    name="password"
                    placeholder="Enter password"
                />
                @error('password') 
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
        </div>

        <!-- Password Confirmation -->
        <div class="col-md-6 mb-3">
            <label for="password_confirmation" class="form-label font-size-14">
                Confirm Password
            </label>
            <input
                type="password"
                class="form-control form-control-custom @error('password_confirmation') is-invalid @enderror"
                id="password_confirmation"
                name="password_confirmation"
                placeholder="Confirm password"
            />
            @error('password_confirmation') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <!-- Experience -->
        <div class="col-md-6 mb-3">
            <label for="experience" class="form-label font-size-14">
                Total Years of Experience <span class="text-danger">*</span>
            </label>
            <input
                type="number"
                class="form-control form-control-custom @error('experience') is-invalid @enderror"
                id="experience"
                name="experience"
                value="{{ old('experience', $employee->experience ?? '') }}"
                placeholder="Enter experience"
                required
            />
            @error('experience') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <!-- CTC -->
        <div class="col-md-6 mb-3">
            <label for="ctc" class="form-label font-size-14">
                Current CTC (Annual) <span class="text-danger">*</span>
            </label>
            <input
                type="text"
                class="form-control form-control-custom @error('ctc') is-invalid @enderror"
                id="ctc"
                name="ctc"
                value="{{ old('ctc', $employee->ctc ?? '') }}"
                placeholder="Enter current CTC"
                required
            />
            @error('ctc') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <!-- ECTC -->
        <div class="col-md-6 mb-3">
            <label for="ectc" class="form-label font-size-14">
                Expected Salary (CAD/year) <span className="text-danger">*</span>
            </label>
            <input
                type="text"
                class="form-control form-control-custom @error('ectc') is-invalid @enderror"
                id="ectc"
                name="ectc"
                value="{{ old('ectc', $employee->ectc ?? '') }}"
                placeholder="Enter ECTC"
                required
            />
            @error('ectc') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <!-- Notice Period -->
        <div class="col-md-6 mb-3">
            <label for="notice_period" class="form-label font-size-14">
                Notice Period (in Days) <span class="text-danger">*</span>
            </label>
            <input
                type="number"
                class="form-control form-control-custom @error('notice_period') is-invalid @enderror"
                id="notice_period"
                name="notice_period"
                value="{{ old('notice_period', $employee->notice_period ?? '') }}"
                placeholder="Enter notice period"
                required
            />
            @error('notice_period') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <!-- Eductation -->
        <div class="col-md-6 mb-3">
            <label for="education" class="form-label font-size-14">
                Highest Level of Education  <span className="text-danger">*</span>
            </label>
            <input
                type="text"
                class="form-control form-control-custom @error('education') is-invalid @enderror"
                id="education"
                name="education"
                value="{{ old('education', $employee->education ?? '') }}"
                placeholder="Enter Highest Level of Education"
                required
            />
            @error('education') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

       
        <!-- Desired Job Type -->
        <div class="col-md-6 mb-3">
            <label for="desired_job_type" class="form-label font-size-14">
                Employment Type Preference <span class="text-danger">*</span>
            </label>
            <select
                class="form-control form-control-custom @error('desired_job_type') is-invalid @enderror"
                id="desired_job_type"
                name="desired_job_type"
                required
            >
                <option value="">Select</option>
                <option value="contractual" {{ old('desired_job_type', $employee->desired_job_type ?? '') == 'contractual' ? 'selected' : '' }}>Contractual</option>
                <option value="permanent" {{ old('desired_job_type', $employee->desired_job_type ?? '') == 'permanent' ? 'selected' : '' }}>Permanent</option>
            </select>
            @error('desired_job_type') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <!-- Preferred Shift -->
        <div class="col-md-6 mb-3">
            <label for="preferred_shift" class="form-label font-size-14">
                Preferred Work Shift <span class="text-danger">*</span>
            </label>
            <select
                class="form-control form-control-custom @error('preferred_shift') is-invalid @enderror"
                id="preferred_shift"
                name="preferred_shift"
                required
            >
                <option value="">Select</option>
                <option value="day" {{ old('preferred_shift', $employee->preferred_shift ?? '') == 'day' ? 'selected' : '' }}>Day</option>
                <option value="night" {{ old('preferred_shift', $employee->preferred_shift ?? '') == 'night' ? 'selected' : '' }}>Night</option>
            </select>
            @error('preferred_shift') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <!-- Language -->
        <div class="col-md-6 mb-3">
            <label for="language" class="form-label font-size-14">
                Languages Spoken <span class="text-danger">*</span>
            </label>
            <select
                class="form-control form-control-custom @error('language') is-invalid @enderror"
                id="language"
                name="language"
                required
            >
                <option value="">Select Language</option>
                @foreach($languages as $language)
                    <option value="{{ $language->name }}" {{ old('language', $employee->language ?? '') == $language->name ? 'selected' : '' }}>
                        {{ $language->name }}
                    </option>
                @endforeach
            </select>
            @error('language') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
        <!-- Skills -->
        <div class="form-group mb-3">
            <label for="skills">Skills</label>
            <select name="skills[]" class="form-control" multiple>
                @foreach($skills as $skill)
                     <option value="{{ $skill->id }}"
                        {{ in_array($skill->id, old('skills', explode(',',$employee->skills) ?? [])) ? 'selected' : '' }}>
                        {{ $skill->skill_name }}
                    </option>
                @endforeach
            </select>
        </div>

        <!-- Country -->
        <div class="col-md-6 mb-3">
            <label for="country_id" class="form-label font-size-14">
                Country <span class="text-danger">*</span>
            </label>
            <select
                class="form-control form-control-custom @error('country_id') is-invalid @enderror"
                id="country_id"
                name="country_id"
                required
            >
                <option value="">Select Country</option>
                @foreach($countries as $country)
                    <option value="{{ $country->id }}" {{ old('country_id', $employee->user->address->country_id ?? '') == $country->id ? 'selected' : '' }}>
                        {{ $country->name }}
                    </option>
                @endforeach
            </select>
            @error('country_id') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <!-- State -->
        <div class="col-md-6 mb-3">
            <label for="state_id" class="form-label font-size-14">
                State/Province <span class="text-danger">*</span>
            </label>
            <select
                class="form-control form-control-custom @error('state_id') is-invalid @enderror"
                id="state_id"
                name="state_id"
                required
            >
                <option value="">Select State</option>
                @foreach($states as $state)
                    <option value="{{ $state->id }}" {{ old('state_id', $employee->user->address->state_id ?? '') == $state->id ? 'selected' : '' }}
                          {{ !$state->enable ? 'disabled' : '' }}>
                        {{ $state->name }}
                    </option>
                @endforeach
            </select>
            @error('state_id') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

          <!-- Street -->
        <div class="col-md-6 mb-3">
            <label for="street" class="form-label font-size-14">
               Street  <span className="text-danger">*</span>
            </label>
            <input
                type="text"
                class="form-control form-control-custom @error('street') is-invalid @enderror"
                id="street"
                name="street"
                value="{{ old('street', $employee->user->address->street ?? '') }}"
                placeholder="Enter Street"
                required
            />
            @error('education') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
          <!-- City -->
        <div class="col-md-6 mb-3">
            <label for="city" class="form-label font-size-14">
               City  <span className="text-danger">*</span>
            </label>
            <input
                type="text"
                class="form-control form-control-custom @error('city') is-invalid @enderror"
                id="city"
                name="city"
                value="{{ old('city', $employee->user->address->city ?? '') }}"
                placeholder="Enter City"
                required
            />
            @error('city') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
          <!-- Postal Code -->
        <div class="col-md-12 mb-3">
            <label for="[postal_code]" class="form-label font-size-14">
               Postal Code  <span className="text-danger">*</span>
            </label>
            <input
                type="text"
                class="form-control form-control-custom @error('postal_code') is-invalid @enderror"
                id="postal_code"
                name="postal_code"
                value="{{ old('postal_code', $employee->user->address->postal_code ?? '') }}"
                placeholder="Enter Postal Code"
                required
            />
            @error('postal_code') 
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
        <div class="col-md-6 mb-3">
            <label for="profile" class="form-label font-size-14">Profile Picture</label>
            <input
                type="file"
                class="form-control form-control-custom @error('profile') is-invalid @enderror"
                id="profile"
                name="profile"
                accept="image/*"
            />
            @if($employee->profile)
                <div class="mt-2">
                    <img src="{{ asset('storage/' . $employee->profile) }}" alt="Profile Picture" width="80" height="80">
                </div>
            @endif
            @error('profile')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
        <div class="col-md-6 mb-3">
            <label for="cv" class="form-label font-size-14">Resume (CV)</label>
            <input
                type="file"
                class="form-control form-control-custom @error('cv') is-invalid @enderror"
                id="cv"
                name="cv"
                accept=".pdf,.doc,.docx"
            />
            @if($employee->cv)
                <small class="form-text text-muted">
                    Current CV: <a class="text-primary" href="{{ asset('storage/' . $employee->cv) }}" target="_blank"><i class="ri-download-line me-1"></i>Download</a>
                </small>
            @endif
            @error('cv')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        <div class="col-12">
            <div class="row">
                <div class="col-12">
                    <label for="cv" class="form-label font-size-14">Social Links</label>
                </div>
                <div class="col-12">
                    <div class="row">
                        <div class="col">
                            <select class="form-select" id="social_links-select">
                                <option value="">Select Platform</option>
                                @foreach($socialLinksArr as $platform)
                                    <option value="{{ $platform->name }}" data-name="{{ $platform->name }}"
                                        {{ $employee->user->socialLinks->contains('platform', $platform->name) ? 'disabled' : '' }}>
                                        {{ $platform->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-auto">
                            <button type="button" class="btn btn-secondary" id="add-social_links-btn">Add Social Link</button>
                        </div>
                    </div>
                </div>
            
            
                <div id="social_links-container"  class="col-12 mt-2">
                    <div class="row">
                        @foreach($employee->user->socialLinks as $i => $link)
                            <div class="col-12">
                                <div class="row g-3 align-items-end mb-2">
                                    <div class="col">
                                        <label class="form-label">{{ $link->platform }}</label>
                                        <input type="text" name="social_links[{{ $i }}][value]" class="form-control" value="{{ $link->url }}" required>
                                        <input type="hidden" name="social_links[{{ $i }}][id]" value="{{ $link->platform }}">
                                    </div>
                                    <div class="col-auto">
                                        <button type="button" class="btn btn-danger btn-sm remove-btn" data-select="social-platform-select" data-value="{{ $link->social_platform_id }}">Remove</button>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

            </div>
        </div>


    <div class="col-12">
        <div class="row mt-3">
            <div class="col-12">
                <label for="cv" class="form-label font-size-14">Licenses</label>
            </div>
            <div class="col-12">
                <div class="row">
                    <div class="col">
                        <select class="form-select" id="licenses-select">
                            <option value="">Select License</option>
                            @foreach($licenses as $item)
                                <option value="{{ $item->id }}"
                                        {{ $employee->licences->contains('licence_id', $item->id) ? 'disabled' : '' }}>
                                    {{ $item->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-secondary" id="add-licenses-btn">Add License</button>
                    </div>
                </div>
            </div>
            <div id="licenses-container"  class="col-12 mt-2">
                @foreach($employee->licences as $i => $license)
                    @php
                    $noExpiry = old("licences.$i.noExpiry", $license->noExpiry);
                @endphp
                <div class="row g-3 align-items-end mb-2 license-row">
                    <div class="col">
                        <label class="form-label">{{ $license->licence->name }}</label>
                        <input type="hidden" name="licenses[{{ $i }}][id]" value="{{ $license->licence_id }}">
                    </div>
                    <div class="col">
                        <label class="form-label">Expire Month</label>
                        <input type="number" name="licenses[{{ $i }}][expire_month]" class="form-control"
                            value="{{ $license->expire_month ?? '' }}" placeholder="Expire Month" {{ $noExpiry ? 'disabled' : '' }}>
                    </div>
                    <div class="col">
                        <label class="form-label">Expire Year</label>
                        <input type="number" name="licenses[{{ $i }}][expire_year]" class="form-control"
                            value="{{ $license->expire_year ?? '' }}" placeholder="Expire Year" min="1900" max="2100" {{ $noExpiry ? 'disabled' : '' }}>
                    </div>
                    <div class="col-auto d-flex align-items-center">
                        <div class="form-check mt-4">
                            <input class="form-check-input" type="checkbox" 
                                name="licenses[{{ $i }}][noExpiry]" 
                                id="noExpiry-{{ $license->id }}" 
                                value="1" {{ $license->noExpiry ? 'checked' : '' }}>
                            <label class="form-check-label" for="noExpiry-{{ $license->id }}">
                                No Expiry
                            </label>
                        </div>
                    </div>
                    <div class="col-auto d-flex align-items-center">
                        <button type="button" class="btn btn-danger btn-sm remove-btn" data-select="license-select" data-value="{{ $license->id }}">Remove</button>
                    </div>
                </div>
            @endforeach
            </div>
        </div>
    </div>
    <div class="col-12">
        <div class="row mt-3">
            <div class="col-12">
                <label for="cv" class="form-label font-size-14">Certifications</label>
            </div>
            <div class="col-12">
                <div class="row">
                    <div class="col">
                        <select class="form-select" id="certifications-select">
                            <option value="">Select Certification</option>
                            @foreach($certifications as $item)
                                <option value="{{ $item->id }}"
                                    {{ $employee->certifications->contains('certification_id', $item->id) ? 'disabled' : '' }}>
                                    {{ $item->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-secondary" id="add-certifications-btn">Add Certification</button>
                        
                    </div>
                </div>
            </div>
            <div id="certifications-container" class="col-12 mt-2">
                @foreach($employee->certifications as $i => $cert)
                    @php
                    $noExpiry = old("certifications.$i.noExpiry", $cert->noExpiry);
                @endphp
                <div class="row g-3 align-items-end mb-2 certification-row">
                    <div class="col">
                        <label class="form-label">{{ $cert->certification->name }}</label>
                        <input type="hidden" name="certifications[{{ $i }}][id]" value="{{ $cert->certification_id }}">
                    </div>
                    <div class="col-auto d-flex gap-2">
                        <input type="number" name="certifications[{{ $i }}][expire_month]" class="form-control"
                            value="{{ old("certifications.$i.expire_month", $cert->expire_month) }}"
                            placeholder="Expire Month (MM)" min="1" max="12" {{ $noExpiry ? 'disabled' : '' }}/>

                        <input type="number" name="certifications[{{ $i }}][expire_year]" class="form-control"
                            value="{{ old("certifications.$i.expire_year", $cert->expire_year) }}"
                            placeholder="Expire Year (YYYY)" min="2023" max="2100" {{ $noExpiry ? 'disabled' : '' }}/>

                        <div class="form-check align-self-center">
                            <input type="checkbox" name="certifications[{{ $i }}][noExpiry]" value="1" class="form-check-input"
                                {{ old("certifications.$i.noExpiry", $cert->noExpiry) ? 'checked' : '' }} />
                            <label class="form-check-label">No Expiry</label>
                        </div>
                    </div>
                    

                    <div class="col-md-2">
                        <button type="button" class="btn btn-danger btn-sm remove-btn" data-select="certification-select" data-value="{{ $cert->certification_id }}">Remove</button>
                    </div>
                    
                </div>
            @endforeach
            </div>
        </div>
    </div>
        <!-- Submit Button -->
        <div class="col-md-12 mb-3 text-center mt-3">
            <button type="submit" class="w-100 btn btn-primary">Update Employee</button>
        </div>
    </div>
</form>

    </div>
</div>
@endsection
@section('script')
<script>
document.addEventListener('DOMContentLoaded', function () {
    let counters = {
        certifications: {{ count($employee->certifications) }},
        licenses: {{ count($employee->licences) }},
        social_links: {{ count($employee->user->socialLinks) }},
    };

    // Reusable add row logic
    function createRow({ type, id, label }) {
        const index = counters[type]++;
        const container = document.getElementById(`${type}-container`);

        let rowHtml = '';

        if (type === 'social_links') {
            rowHtml = `
                <div class="col-12">
                <div class="row g-3 align-items-end mb-2 social-row">
                    <div class="col">
                        <label class="form-label">${label}</label>
                        <input type="hidden" name="social_links[${index}][id]" value="${id}">
                        <input type="text" name="social_links[${index}][value]" class="form-control" placeholder="Profile URL" required />
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-danger btn-sm remove-btn" data-select="social-select" data-value="${id}">Remove</button>
                    </div>
                </div></div>`;
        } else {
            // type = certifications or licenses
            rowHtml = `
            <div class="col-12">
                <div class="row g-3 align-items-end mb-2 ${type}-row">
                    <div class="col">
                        <label class="form-label">${label}</label>
                        <input type="hidden" name="${type}[${index}][id]" value="${id}">
                        <div class="d-flex gap-2 align-items-center">
                            <input type="number" name="${type}[${index}][expire_month]" class="form-control expire-month" placeholder="Expire Month (MM)" min="1" max="12" />
                            <input type="number" name="${type}[${index}][expire_year]" class="form-control expire-year" placeholder="Expire Year (YYYY)" min="2023" max="2100" />
                            <div class="form-check align-self-center">
                                <input type="checkbox" name="${type}[${index}][noExpiry]" value="1" class="form-check-input no-expiry-checkbox" id="noExpiry-${type}-${index}">
                                <label class="form-check-label" for="noExpiry-${type}-${index}">No Expiry</label>
                            </div>
                        </div>
                    </div>
                    <div class="col-auto">
                        <button type="button" class="btn btn-danger btn-sm remove-btn" data-select="${type}-select" data-value="${id}">Remove</button>
                    </div>
                </div>
            </div>`;
        }

        const row = document.createElement('div');
        row.innerHTML = rowHtml;
        container.appendChild(row);

        // Disable selected option in the dropdown
        document.querySelector(`#${type}-select option[value="${id}"]`).disabled = true;
        document.getElementById(`${type}-select`).value = '';
    }

    // Add button handler
    function setupAddHandler(type) {
        const select = document.getElementById(`${type}-select`);
        const addBtn = document.getElementById(`add-${type}-btn`);

        addBtn.addEventListener('click', function () {
            const selectedOption = select.options[select.selectedIndex];
            const id = selectedOption.value;
            const label = selectedOption.text;

            if (!id) return;

            createRow({ type: type, id: id, label: label });
        });
    }

    // Remove handler
    document.body.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-btn')) {
            const value = e.target.getAttribute('data-value');
            const selectId = e.target.getAttribute('data-select');
            const selectElement = document.getElementById(selectId);

            if (selectElement) {
                const optionToEnable = selectElement.querySelector(`option[value="${value}"]`);
                if (optionToEnable) optionToEnable.disabled = false;
            }

            e.target.closest('.row').remove();
        }
    });

    // No Expiry checkbox change handler
    document.body.addEventListener('change', function (e) {
        if (e.target.classList.contains('no-expiry-checkbox')) {
            const container = e.target.closest('.row');
            if (!container) return;

            const expireMonth = container.querySelector('.expire-month');
            const expireYear = container.querySelector('.expire-year');

            if (e.target.checked) {
                if (expireMonth) expireMonth.disabled = true;
                if (expireYear) expireYear.disabled = true;
            } else {
                if (expireMonth) expireMonth.disabled = false;
                if (expireYear) expireYear.disabled = false;
            }
        }
    });

    // Init handlers
    ['certifications', 'licenses', 'social_links'].forEach(setupAddHandler);
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Function to attach change listeners to 'noExpiry' checkboxes
    function attachNoExpiryToggle(entity) {
        document.querySelectorAll(`input[type="checkbox"][name^="${entity}["][name$="[noExpiry]"]`).forEach(function (checkbox) {
            checkbox.addEventListener('change', function () {
                const match = this.name.match(new RegExp(`${entity}\\[(\\d+)\\]\\[noExpiry\\]`));
                if (!match) return;

                const index = match[1];

                const monthInput = document.querySelector(`input[name="${entity}[${index}][expire_month]"]`);
                const yearInput = document.querySelector(`input[name="${entity}[${index}][expire_year]"]`);

                if (this.checked) {
                    monthInput.disabled = true;
                    yearInput.disabled = true;
                } else {
                    monthInput.disabled = false;
                    yearInput.disabled = false;
                }
            });
        });
    }

    // Call for both types
    attachNoExpiryToggle('licenses');
    attachNoExpiryToggle('certifications');
});
</script>


@endsection