@extends('layouts.main')
@section('content')
    <style>
        .custom-btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }

        .custom-btn:hover {
            background-color: #0056b3;
        }

        #addExperienceRow {
            min-width: 32px;
            min-height: 32px;
            box-shadow: 0 2px 6px rgba(13, 110, 253, 0.25);
        }

        .profile-card {
            background: #fff;
            border-radius: 20px;
            padding: 24px;
            border: 1px solid #eef0f4;
            box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
        }

        .section-title {
            margin-bottom: 20px;
        }

        .section-title h5 {
            font-size: 18px;
            font-weight: 700;
            color: #111827;
            margin-bottom: 4px;
        }

        .section-title p {
            font-size: 13px;
            color: #6b7280;
            margin-bottom: 0;
        }

        .form-label {
            font-size: 14px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 8px;
        }

        .custom-input {
            height: 50px;
            border-radius: 14px;
            border: 1px solid #e5e7eb;
            padding: 10px 14px;
            font-size: 14px;
            box-shadow: none !important;
        }

        .custom-textarea {
            border-radius: 14px;
            border: 1px solid #e5e7eb;
            padding: 12px 14px;
            font-size: 14px;
            box-shadow: none !important;
        }

        .custom-input:focus,
        .custom-textarea:focus {
            border-color: #0d6efd;
        }

        .btn {
            font-weight: 600;
        }
    </style>
    <div class="container-fluid">
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
            <!-- Header -->
            <div class="card-header bg-white p-4 border-0">
                <div class="d-flex flex-column flex-lg-row justify-content-between align-items-lg-center gap-3">
                    <div>
                        <h3 class="fw-bold text-dark mb-1">
                            Account Settings
                        </h3>
                        <p class="text-muted mb-0">
                            Manage your account privacy and profile information.
                        </p>
                    </div>
                    <!-- Top Menu -->
                    <ul class="list-unstyled d-flex flex-wrap gap-2 mb-0">
                        <li>
                            <a href="{{ route('counsellor.setting.accountsettings') }}"
                                class="btn btn-primary rounded-pill px-4 py-2 fw-semibold">
                                <i class="ri-user-line me-1"></i>
                                Account Settings
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('counsellor.setting.privacypolicy') }}"
                                class="btn btn-outline-primary rounded-pill px-4 py-2 fw-semibold">
                                <i class="ri-shield-check-line me-1"></i>
                                Privacy Policy
                            </a>
                        </li>
                        <li>
                            <a href="{{ route('counsellor.setting.termsconditions') }}"
                                class="btn btn-outline-primary rounded-pill px-4 py-2 fw-semibold">
                                <i class="ri-file-list-3-line me-1"></i>
                                Terms & Conditions
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- Body -->
            <div class="card-body p-4 bg-light">
                @if (session('success'))
                    <div class="alert alert-success alert-dismissible fade show rounded-4">
                        {{ session('success') }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                @endif
                <form action="{{ route('counsellor.setting.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="row g-4">
                        <!-- LEFT -->
                        <!-- Personal Information -->
                        <div class="col-lg-6">
                            <!-- Personal -->
                            <div class="profile-card">
                                <div class="section-title">
                                    <h5>Personal Information</h5>
                                    <p>Update your personal details.</p>
                                </div>
                                <div class="row g-3">
                                    <!-- FIRST NAME -->
                                    <div class="col-md-6">
                                        <label class="form-label">
                                            First Name
                                        </label>
                                        <input type="text" name="first_name" class="form-control custom-input"
                                            value="{{ old('first_name', $user->first_name) }}">
                                    </div>
                                    <!-- LAST NAME -->
                                    <div class="col-md-6">
                                        <label class="form-label">
                                            Last Name
                                        </label>
                                        <input type="text" name="last_name" class="form-control custom-input"
                                            value="{{ old('last_name', $user->last_name) }}">
                                    </div>
                                    <!-- EMAIL -->
                                    <div class="col-md-6">
                                        <label class="form-label">
                                            Email Address
                                        </label>
                                        <input type="email" name="email" class="form-control custom-input"
                                            value="{{ old('email', $user->email) }}">
                                    </div>
                                    <!-- PASSWORD -->
                                    <div class="col-md-6">
                                        <label class="form-label">
                                            New Password
                                        </label>
                                        <input type="password" name="password" class="form-control custom-input"
                                            placeholder="Enter new password">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">
                                            Confirm Password
                                        </label>
                                        <input type="password" name="password_confirmation"
                                            class="form-control custom-input" placeholder="Confirm password">
                                    </div>
                                    <!-- PHONE -->
                                    <div class="col-md-6">
                                        <label class="form-label">
                                            Phone Number
                                        </label>
                                        <input type="text" name="phone_number" class="form-control custom-input"
                                            value="{{ old('phone_number', $user->phone_number) }}">
                                    </div>
                                    <!-- GENDER -->
                                    <div class="col-md-6">
                                        <label class="form-label">
                                            Gender
                                        </label>
                                        <select name="gender" class="form-select custom-input">
                                            <option value="">
                                                Select Gender
                                            </option>
                                            <option value="Female" {{ $user->gender == 'Female' ? 'selected' : '' }}>
                                                Female
                                            </option>
                                            <option value="Male" {{ $user->gender == 'Male' ? 'selected' : '' }}>
                                                Male
                                            </option>
                                        </select>
                                    </div>
                                    <div class="col-6">
                                        <label class="form-label">
                                            Life Quote
                                        </label>
                                        <textarea name="life_quote" rows="3" class="form-control custom-textarea">{{ old('life_quote', $user->life_quote) }}</textarea>
                                    </div>
                                    <!-- ADDRESS -->
                                    <div class="col-12">
                                        <label class="form-label">
                                            Address
                                        </label>
                                        <input type="text" name="address" class="form-control custom-input"
                                            value="{{ old('address', $user->address) }}">
                                    </div>
                                    <!-- BIO -->
                                    <div class="col-12">
                                        <label class="form-label">
                                            Bio
                                        </label>
                                        <textarea name="bio" rows="4" class="form-control custom-textarea">{{ old('bio', $user->bio) }}</textarea>
                                    </div>
                                </div>
                            </div>
                            <!-- Education -->
                            <div class="profile-card mt-4">
                                <div class="section-title">
                                    <h5>Education</h5>
                                    <p>Add your education details.</p>
                                </div>
                                <div class="row g-3">
                                    <!-- DEGREE -->
                                    <div class="col-12">
                                        <label class="form-label">
                                            Degree
                                        </label>
                                        <input type="text" name="degree" class="form-control custom-input"
                                            value="{{ old('degree', $user->degree) }}">
                                    </div>
                                    <!-- UNIVERSITY -->
                                    <div class="col-12">
                                        <label class="form-label">
                                            University
                                        </label>
                                        <input type="text" name="university" class="form-control custom-input"
                                            value="{{ old('university', $user->university) }}">
                                    </div>
                                    <!-- START YEAR -->
                                    <div class="col-md-6">
                                        <label class="form-label">
                                            Start Year
                                        </label>
                                        <input type="month" name="education_start_year"
                                            class="form-control custom-input"
                                            value="{{ old('education_start_year', $user->education_start_year) }}">
                                    </div>
                                    <!-- END YEAR -->
                                    <div class="col-md-6">
                                        <label class="form-label">
                                            End Year
                                        </label>
                                        <input type="month" name="education_end_year" class="form-control custom-input"
                                            value="{{ old('education_end_year', $user->education_end_year) }}">
                                    </div>
                                </div>
                            </div>
                            <!-- Master Degree -->
                            <div class="profile-card mt-4">
                                <div class="section-title">
                                    <h5>Master Education</h5>
                                    <p>Add your education details.</p>
                                </div>
                                <div class="row g-3">
                                    <!-- DEGREE -->
                                    <div class="col-12">
                                        <label class="form-label">
                                            Master Degree
                                        </label>
                                        <input type="text" name="master_degree" class="form-control custom-input"
                                            value="{{ old('master_degree', $user->master_degree) }}">
                                    </div>
                                    <!-- UNIVERSITY -->
                                    <div class="col-12">
                                        <label class="form-label">
                                            University
                                        </label>
                                        <input type="text" name="master_university" class="form-control custom-input"
                                            value="{{ old('master_university', $user->master_university) }}">
                                    </div>
                                    <!-- START YEAR -->
                                    <div class="col-md-6">
                                        <label class="form-label">
                                            Start Year
                                        </label>
                                        <input type="month" name="master_start_year" class="form-control custom-input"
                                            value="{{ old('master_start_year', $user->master_start_year) }}">
                                    </div>
                                    <!-- END YEAR -->
                                    <div class="col-md-6">
                                        <label class="form-label">
                                            End Year
                                        </label>
                                        <input type="month" name="master_end_year" class="form-control custom-input"
                                            value="{{ old('master_end_year', $user->master_end_year) }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- RIGHT -->
                        <div class="col-lg-6">
                            <!-- Professional Details -->
                            <div class="profile-card card border-0 shadow-sm p-4 rounded-3">
                                <!-- Title -->
                                <div class="mb-4">
                                    <h4 class="fw-bold mb-1">Professional Details</h4>
                                    <p class="text-muted mb-0">Update your professional information.</p>
                                </div>
                                <div class="row g-3">
                                     <!-- Experience & Title -->
                                    <div class="col-12">
                                        <label class="form-label d-flex justify-content-between align-items-center mb-3">
                                            <span>Experience Details</span>
                                            <!-- Add Button -->
                                            <button type="button"
                                                class="btn btn-primary btn-sm rounded-circle d-flex align-items-center justify-content-center"
                                                id="addExperienceRow" style="width:32px; height:32px; padding:0;">
                                                <i class="bi bi-plus-lg fs-6"></i>
                                            </button>
                                        </label>
                                        <div id="experienceWrapper">
                                            @php
                                                $experiences = old(
                                                    'experience',
                                                    $user->experience ? json_decode($user->experience, true) : [''],
                                                );
                                                $titles = old(
                                                    'higher_degree',
                                                    $user->higher_degree
                                                        ? json_decode($user->higher_degree, true)
                                                        : [''],
                                                );
                                            @endphp
                                            @foreach ($experiences as $key => $experience)
                                                <div
                                                    class="experience-row border rounded-4 p-3 mb-3 bg-light position-relative">
                                                    <!-- Delete Button -->
                                                    @if ($key != 0)
                                                        <button type="button"
                                                            class="btn btn-danger btn-sm rounded-circle removeBtn position-absolute"
                                                            style="top:12px; right:12px; width:30px; height:30px; padding:0; z-index:2;">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    @endif
                                                    <div class="row g-3">
                                                        <!-- Experience -->
                                                        <div class="col-md-6">
                                                            <label class="form-label">
                                                                Experience (Year)
                                                            </label>
                                                            <input type="number" name="experience[]"
                                                                value="{{ $experience }}"
                                                                class="form-control custom-input"
                                                                placeholder="Enter experience">
                                                        </div>
                                                        <!-- Experience Title -->
                                                        <div class="col-md-6">
                                                            <label class="form-label">
                                                                Experience Title
                                                            </label>
                                                            <input type="text" name="higher_degree[]"
                                                                value="{{ $titles[$key] ?? '' }}"
                                                                class="form-control custom-input"
                                                                placeholder="Enter title">
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    
                                    <!-- Languages -->
                                  <div class="col-12">

                                    <label class="form-label d-flex justify-content-between align-items-center mb-3">
                                        <span class="fw-semibold">Languages</span>

                                        <button type="button"
                                            class="btn btn-primary btn-sm rounded-circle d-flex align-items-center justify-content-center shadow-sm"
                                            id="addLanguageRow"
                                            style="width:32px; height:32px; padding:0;">
                                            <i class="bi bi-plus-lg"></i>
                                        </button>
                                    </label>

                                    <div id="languageWrapper">

                                        @php
                                            $languages = old(
                                                'languages',
                                                $user->languages
                                                    ? json_decode($user->languages, true)
                                                    : ['']
                                            );
                                        @endphp

                                        @foreach ($languages as $key => $language)

                                            <div class="language-row border rounded-4 p-3 mb-3 bg-light position-relative">

                                                {{-- Remove Button --}}
                                                @if ($key != 0)
                                                    <button type="button"
                                                        class="btn btn-danger btn-sm rounded-circle removeLanguageBtn position-absolute"
                                                        style="top:12px; right:12px; width:30px; height:30px; padding:0; z-index:2;">
                                                        <i class="bi bi-trash"></i>
                                                    </button>
                                                @endif

                                                <div class="row g-3">

                                                    <div class="col-md-12">
                                                        <label class="form-label fw-medium">
                                                            Language
                                                        </label>

                                                        <input type="text"
                                                            name="languages[]"
                                                            value="{{ $language }}"
                                                            class="form-control custom-input"
                                                            placeholder="Enter language">
                                                    </div>

                                                </div>

                                            </div>

                                        @endforeach

                                    </div>

                                </div>

                                {{-- Script --}}
                                <script>

                                    document.addEventListener('DOMContentLoaded', function () {

                                        const languageWrapper = document.getElementById('languageWrapper');

                                        const addLanguageRow = document.getElementById('addLanguageRow');

                                        // Add More
                                        addLanguageRow.addEventListener('click', function () {

                                            const html = `
                                                <div class="language-row border rounded-4 p-3 mb-3 bg-light position-relative">

                                                    <button type="button"
                                                        class="btn btn-danger btn-sm rounded-circle removeLanguageBtn position-absolute"
                                                        style="top:12px; right:12px; width:30px; height:30px; padding:0; z-index:2;">
                                                        <i class="bi bi-trash"></i>
                                                    </button>

                                                    <div class="row g-3">

                                                        <div class="col-md-12">
                                                            <label class="form-label fw-medium">
                                                                Language
                                                            </label>

                                                            <input type="text"
                                                                name="languages[]"
                                                                class="form-control custom-input"
                                                                placeholder="Enter language">
                                                        </div>

                                                    </div>

                                                </div>
                                            `;

                                            languageWrapper.insertAdjacentHTML('beforeend', html);

                                        });

                                        // Remove Row
                                        languageWrapper.addEventListener('click', function (e) {

                                            const removeBtn = e.target.closest('.removeLanguageBtn');

                                            if (removeBtn) {

                                                removeBtn.closest('.language-row').remove();

                                            }

                                        });

                                    });

                                </script>
                                    <!-- Expertise -->
                                    <!-- Expertise & Skills -->
                                    <div class="col-12">
                                        <label class="form-label d-flex justify-content-between align-items-center mb-3">
                                            <span>Expertise & Skills</span>
                                            <!-- Add Button -->
                                            <button type="button"
                                                class="btn btn-primary btn-sm rounded-circle d-flex align-items-center justify-content-center"
                                                id="addExpertiseSkillRow" style="width:32px; height:32px; padding:0;">
                                                <i class="bi bi-plus-lg fs-6"></i>
                                            </button>
                                        </label>
                                        <div id="expertiseSkillWrapper">
                                            @php
                                                $expertiseList = old(
                                                    'expertise',
                                                    $user->expertise ? json_decode($user->expertise, true) : [''],
                                                );
                                                $skillsList = old(
                                                    'skills',
                                                    $user->skills ? json_decode($user->skills, true) : [''],
                                                );
                                            @endphp
                                            @foreach ($expertiseList as $key => $expertise)
                                                <div
                                                    class="expertise-skill-row border rounded-4 p-3 mb-3 bg-light position-relative">
                                                    <!-- Delete Button -->
                                                    @if ($key != 0)
                                                        <button type="button"
                                                            class="btn btn-danger btn-sm rounded-circle removeBtn position-absolute"
                                                            style="top:12px; right:12px; width:30px; height:30px; padding:0; z-index:2;">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    @endif
                                                    <div class="row g-3">
                                                        <!-- Expertise -->
                                                        <div class="col-md-6">
                                                            <label class="form-label">
                                                                Expertise
                                                            </label>
                                                            <input type="text" name="expertise[]"
                                                                value="{{ $expertise }}"
                                                                class="form-control custom-input"
                                                                placeholder="Enter expertise">
                                                        </div>
                                                        <!-- Skills -->
                                                        <div class="col-md-6">
                                                            <label class="form-label">
                                                                Skills
                                                            </label>
                                                            <input type="text" name="skills[]"
                                                                value="{{ $skillsList[$key] ?? '' }}"
                                                                class="form-control custom-input"
                                                                placeholder="Enter skills">
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                    
                                    <!-- Resume -->
                                    <!-- Resume -->
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold mb-2">
                                            Resume
                                        </label>
                                        <div class="border rounded-4 bg-white p-3">
                                            <input type="file" name="resume"
                                                class="form-control custom-input border-0 shadow-none">
                                        </div>
                                    </div>
                                    <!-- Profile Image -->
                                    <div class="col-md-6">
                                        <label class="form-label fw-semibold mb-2">
                                            Profile Image
                                        </label>
                                        <div class="border rounded-4 bg-white p-3">
                                            <input type="file" name="profile_image"
                                                class="form-control custom-input border-0 shadow-none">
                                        </div>
                                    </div>
                                    <!-- Membership -->
                                    <!-- Membership & Certificate -->
                                    <div class="col-12">
                                        <div class="border rounded-4 p-4 bg-light">
                                            <!-- Heading -->
                                            <div class="d-flex justify-content-between align-items-center mb-4">
                                                <div>
                                                    <h5 class="fw-bold mb-1">
                                                        Membership / Association
                                                    </h5>
                                                    <p class="text-muted small mb-0">
                                                        Add membership and certificate details.
                                                    </p>
                                                </div>
                                                <!-- Add More -->
                                                <button type="button"
                                                    class="btn btn-primary btn-sm rounded-circle d-flex align-items-center justify-content-center"
                                                    id="addMembershipRow" style="width:32px; height:32px; padding:0;">
                                                    <i class="bi bi-plus-lg"></i>
                                                </button>
                                            </div>
                                            <div id="membershipWrapper">
                                                @php
                                                    $membershipList = old(
                                                        'membership_association',
                                                        $user->membership_association
                                                            ? json_decode($user->membership_association, true)
                                                            : [''],
                                                    );
                                                    $certificateList = old(
                                                        'old_membership_certificate',
                                                        $user->membership_certificate
                                                            ? json_decode($user->membership_certificate, true)
                                                            : [''],
                                                    );
                                                @endphp
                                                @foreach ($membershipList as $key => $membership)
                                                    <div class="membership-row border rounded-4 bg-white p-3 mb-3">
                                                        <div class="row g-3 align-items-end">
                                                            <!-- Membership -->
                                                            <div class="col-md-5">
                                                                <label class="form-label">
                                                                    Membership / Association
                                                                </label>
                                                                <input type="text"
                                                                    name="membership_association[{{ $key }}]"
                                                                    value="{{ $membership }}"
                                                                    class="form-control custom-input @error('membership_association.' . $key) is-invalid @enderror"
                                                                    placeholder="Enter membership">
                                                                @error('membership_association.' . $key)
                                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                                @enderror
                                                            </div>
                                                            <!-- Certificate -->
                                                            <div class="col-md-5">
                                                                <label class="form-label">
                                                                    Membership Certificate
                                                                </label>
                                                                <input type="file"
                                                                    name="membership_certificate[{{ $key }}]"
                                                                    class="form-control custom-input @error('membership_certificate.' . $key) is-invalid @enderror">
                                                                <input type="hidden"
                                                                    name="old_membership_certificate[{{ $key }}]"
                                                                    value="{{ $certificateList[$key] ?? '' }}">
                                                                @error('membership_certificate.' . $key)
                                                                    <div class="invalid-feedback d-block">{{ $message }}
                                                                    </div>
                                                                @enderror

                                                                @if (!empty($certificateList[$key]))
                                                                    <a href="{{ asset('uploads/membership/' . $certificateList[$key]) }}"
                                                                        target="_blank"
                                                                        class="btn btn-sm btn-outline-primary mt-2 rounded-pill">
                                                                        <i class="bi bi-eye me-1"></i>
                                                                        View File
                                                                    </a>
                                                                @endif
                                                            </div>
                                                            <!-- Delete -->
                                                            <div class="col-md-2">
                                                                @if ($key != 0)
                                                                    <button type="button"
                                                                        class="btn btn-danger btn-sm rounded-circle removeMembershipRow d-flex align-items-center justify-content-center"
                                                                        style="width:38px; height:38px; padding:0;">
                                                                        <i class="bi bi-trash"></i>
                                                                    </button>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Script: consolidated add/remove handlers -->
                                    <script>
                                        (function() {
                                            // membershipIndex uses server-side initial value
                                            let membershipIndex = {{ !empty($membershipList) ? max(array_keys($membershipList)) + 1 : 0 }};

                                            function insertHTML(wrapperId, html) {
                                                document.getElementById(wrapperId).insertAdjacentHTML('beforeend', html);
                                            }

                                            // Templates
                                            const experienceTemplate = `
                           <div class="experience-row border rounded-4 p-3 mb-3 bg-light position-relative">
                           <button type="button" class="btn btn-danger btn-sm rounded-circle removeBtn position-absolute" style="top:12px; right:12px; width:30px; height:30px; padding:0; z-index:2;"><i class="bi bi-trash"></i></button>
                           <div class="row g-3">
                           <div class="col-md-6"><label class="form-label">Experience (Year)</label><input type="number" name="experience[]" class="form-control custom-input" placeholder="Enter experience"></div>
                           <div class="col-md-6"><label class="form-label">Experience Title</label><input type="text" name="higher_degree[]" class="form-control custom-input" placeholder="Enter title"></div>
                           </div></div>`;

                                            const expertiseTemplate = `
                           <div class="expertise-skill-row border rounded-4 p-3 mb-3 bg-light position-relative">
                           <button type="button" class="btn btn-danger btn-sm rounded-circle removeBtn position-absolute" style="top:12px; right:12px; width:30px; height:30px; padding:0; z-index:2;"><i class="bi bi-trash"></i></button>
                           <div class="row g-3">
                           <div class="col-md-6"><label class="form-label">Expertise</label><input type="text" name="expertise[]" class="form-control custom-input" placeholder="Enter expertise"></div>
                           <div class="col-md-6"><label class="form-label">Skills</label><input type="text" name="skills[]" class="form-control custom-input" placeholder="Enter skills"></div>
                           </div></div>`;

                                            function membershipTemplate(index) {
                                                return `
                           <div class="membership-row border rounded-4 bg-white p-3 mb-3">
                           <div class="row g-3 align-items-end">
                           <div class="col-md-5"><label class="form-label">Membership / Association</label><input type="text" name="membership_association[${index}]" class="form-control custom-input" placeholder="Enter membership"></div>
                           <div class="col-md-5"><label class="form-label">Membership Certificate</label><input type="file" name="membership_certificate[${index}]" class="form-control custom-input"><input type="hidden" name="old_membership_certificate[${index}]" value=""></div>
                           <div class="col-md-2"><button type="button" class="btn btn-danger btn-sm rounded-circle removeMembershipRow d-flex align-items-center justify-content-center" style="width:38px; height:38px; padding:0;"><i class="bi bi-trash"></i></button></div>
                           </div></div>`;
                                            }

                                            const languageTemplate = `
                           <div class="language-row border rounded-4 p-3 mb-3 bg-light position-relative">
                           <button type="button" class="btn btn-danger btn-sm rounded-circle removeLanguageBtn position-absolute" style="top:12px; right:12px; width:30px; height:30px; padding:0; z-index:2;"><i class="bi bi-trash"></i></button>
                           <div class="row g-3"><div class="col-md-12"><label class="form-label">Language</label><input type="text" name="languages[]" class="form-control custom-input" placeholder="Enter language"></div></div></div>`;

                                            // Add handlers
                                            document.getElementById('addExperienceRow').addEventListener('click', function() {
                                                insertHTML('experienceWrapper', experienceTemplate);
                                            });

                                            document.getElementById('addExpertiseSkillRow').addEventListener('click', function() {
                                                insertHTML('expertiseSkillWrapper', expertiseTemplate);
                                            });

                                            document.getElementById('addMembershipRow').addEventListener('click', function() {
                                                insertHTML('membershipWrapper', membershipTemplate(membershipIndex));
                                                membershipIndex++;
                                            });

                                            // Languages add button (created below in DOM)
                                            const langBtn = document.getElementById('addLanguageRow');
                                            if (langBtn) {
                                                langBtn.addEventListener('click', function() {
                                                    insertHTML('languageWrapper', languageTemplate);
                                                });
                                            }

                                            // Delegated remove handler
                                            document.addEventListener('click', function(e) {
                                                const rem = e.target.closest('.removeBtn');
                                                if (rem) {
                                                    const row = rem.closest('.experience-row') || rem.closest('.expertise-skill-row');
                                                    if (row) row.remove();
                                                }

                                                const remMembership = e.target.closest('.removeMembershipRow');
                                                if (remMembership) {
                                                    const row = remMembership.closest('.membership-row');
                                                    if (row) row.remove();
                                                }

                                                const remLang = e.target.closest('.removeLanguageBtn');
                                                if (remLang) {
                                                    const row = remLang.closest('.language-row');
                                                    if (row) row.remove();
                                                }
                                            });
                                        })();
                                    </script>
                                    <!-- Other Details -->
                                    <div class="col-12">
                                        <label class="form-label">
                                            Other Details
                                        </label>
                                        <textarea name="experience_detail" rows="4" class="form-control" placeholder="Write here...">{{ old('experience_detail', $user->experience_detail) }}</textarea>
                                    </div>
                                </div>
                            </div>
                            <!-- Certificate -->
                            <div class="profile-card mt-4">
                                <div class="section-title">
                                    <h5>Certificates & Achievements</h5>
                                    <p>Add certificates and awards.</p>
                                </div>
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <label class="form-label">
                                            Certificate Title
                                        </label>
                                        <input type="text" name="certificate_title" class="form-control custom-input"
                                            value="{{ old('certificate_title', $user->certificate_title) }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label">
                                            Certificate File
                                        </label>
                                        <input type="file" name="certificate_file" class="form-control custom-input">
                                        <a href="{{ asset('uploads/certificate/' . $user->certificate_file) }}"
                                            target="_blank" class="btn btn-sm btn-outline-primary mt-2 rounded-pill">
                                            <i class="bi bi-eye me-1"></i>
                                            View File
                                        </a>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label">
                                            Achievements
                                        </label>
                                        <textarea name="achievements" rows="4" class="form-control custom-textarea">{{ old('achievements', $user->achievements) }}</textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Buttons -->
                    <div class="d-flex justify-content-end gap-3 mt-4">
                        <button type="submit" class="custom-btn btn-primary rounded-pill px-5">
                            <i class="ri-check-line me-1"></i>
                            Save Changes
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection