@extends('dashboard.base')

@section('content')

{{-- Show validation errors --}}
@if ($errors->any())
    <div class="alert alert-danger">
        <strong>There were some problems with your submission:</strong>
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

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


<div class="container my-4">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center bg-orange text-white p-3">
            <!-- <a href="{{ route('certification_application') }}" class="btn btn-orange text-white d-flex align-items-center">
                <i class="fas fa-arrow-left"></i>
                <span class="ml-2">BACK</span>
            </a> -->
            <h3 class="text-center flex-grow-1 m-0">Vacancy Application</h3>
        </div>
        
        <div class="card-body">
            <h4><strong>Vacancy | Job Application Process</strong></h4>
            <p>Application for the post of: <strong>{{ $position }}</strong></p>

            <form action="{{ route('vacancy.application.submit') }}" method="POST" enctype="multipart/form-data" novalidate>

                        @csrf
                       

                    <input type="hidden" name="position" id="position" value="{{ $position }}">
                    <input type="hidden" name="vacancy_no" id="vacancy_no" value="{{ $vacancy_no }}">
            <!-- Navigation Steps -->
            <ul class="nav nav-tabs" id="stepNav">
                <li class="nav-item step-active">
                    <a class="nav-link active" data-step="1" href="#">Step 1<br>Personal Details</a>
                </li>
                <li class="nav-item"><a class="nav-link" data-step="2" href="#">Step 2<br>Experience</a></li>
                <li class="nav-item"><a class="nav-link" data-step="3" href="#">Step 3<br>Education</a></li>
                <li class="nav-item"><a class="nav-link" data-step="4" href="#">Step 4<br>Training</a></li>
                <li class="nav-item"><a class="nav-link" data-step="5" href="#">Step 5<br>Skills</a></li>
                <li class="nav-item"><a class="nav-link" data-step="6" href="#">Step 6<br>References</a></li>
                <li class="nav-item"><a class="nav-link" data-step="7" href="#">Step 7<br>Attachments</a></li>
                <li class="nav-item"><a class="nav-link" data-step="8" href="#">Step 8<br>Submit Application</a></li>
            </ul>
           

            <!-- Form Sections -->
            <div id="stepForms">
                
            <div class="step-content active" data-step="1">
                <div class="container">
                    <h3 class="mb-3">Personal Details</h3>
                    <!-- <form action="{{ route('vacancy.application.submit') }}" method="POST" enctype="multipart/form-data " novalidate> -->
                    


                    <div class="row">
                        <!-- Left Column -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Title<span class="text-danger">*</span></label>  
                                <select class="form-select" name="title" id="title_step_one" > 
                                    <option>Select</option>
                                    <option>Mr</option>
                                    <option>Ms</option>
                                    <option>Mrs</option>      
                                    <option>Dr</option>
                                </select>
                            </div>

                            <div class="mb-3">
                           
                                <label class="form-label">First Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="first_name" value="{{ Auth::user()->name }}" id="first_name_step_one" >
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Middle Name</label>
                                <input type="text" class="form-control" name="middle_name" value="{{ Auth::user()->middle_name }}" id="middle_name_step_one">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Last Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" value="{{ Auth::user()->last_name }}" name="last_name" id="last_name_step_one">
                            </div>

                            <div class="mb-3">
                                <label class="form-label d-block">Gender<span class="text-danger">*</span></label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="gender" value="Male" id="gender_male" checked>
                                    <label class="form-check-label" for="gender_male">Male</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="gender" value="Female" id="gender_female">
                                    <label class="form-check-label" for="gender_female">Female</label>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Email Address<span class="text-danger">*</span></label>
                                <input  type="email" class="form-control" value="{{ Auth::user()->email }}" name="email" id="email_step_one" placeholder="youremail@example.com">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Primary Phone #<span class="text-danger">*</span></label>
                                <input  type="text" value="{{ Auth::user()->primary_phone }}" class="form-control" name="primary_phone" id="primary_phone_step_one">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Secondary Phone #</label>
                                <input type="text" value="{{ Auth::user()->secondary_phone }}" class="form-control" name="secondary_phone" id="secondary_phone_step_one">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Postal Address</label>
                                <input type="text" value="{{ Auth::user()->postal_address }}" class="form-control" name="postal_address" id="postal_address_step_one">
                            </div>

                           
                        </div>

                        <!-- Right Column -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Nationality <span class="text-danger">*</span></label>
                                <input  type="text" class="form-control" value="{{ Auth::user()->nationality }}" name="nationality" id="nationality_step_one">
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Physical Address <span class="text-danger">*</span></label>
                                <input  type="text" class="form-control" value="{{ Auth::user()->physical_address }}"  name="physical_address" id="physical_address_step_one">
                            </div>
                            <!-- <div class="mb-3">
                                <label class="form-label">District<span class="text-danger">*</span></label>
                                <input  type="text" class="form-control" value="{{ Auth::user()->district }}" name="district" id="district_step_one">
                            </div> -->

                            <!-- <div class="mb-3">
                                <label class="form-label">Village<span class="text-danger">*</span></label>
                                <input  type="text" value="{{ Auth::user()->village }}" class="form-control" name="village" id="village_step_one">
                            </div> -->

                            <!-- <div class="mb-3">
                                <label class="form-label">Traditional Authority (T/A) <span class="text-danger">*</span></label>
                                <input  type="text" value="{{ Auth::user()->traditional_authority }}" class="form-control" name="traditional_authority" id="traditional_authority_step_one">
                            </div> -->

                            <div class="mb-3">
                                <label class="form-label">Available Start Date<span class="text-danger">*</span></label>
                                <input  type="date" class="form-control" name="start_date_step_one" id="start_date_step_one">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Desired Salary<span class="text-danger">*</span></label>
                                <input  type="text" class="form-control" name="desired_salary_step_one" id="desired_salary_step_one">
                            </div>

                            <div class="mb-3">
                                <label class="form-label d-block">Convicted Before<span class="text-danger">*</span></label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="convicted_before_step_one" id="convicted_yes" value="Yes">
                                    <label class="form-check-label" for="convicted_yes">Yes</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="convicted_before_step_one" id="convicted_no" value="No">
                                    <label class="form-check-label" for="convicted_no">No</label>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label d-block">MBS Relation<span class="text-danger">*</span></label>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="mbs_relation_step_one" id="mbs_yes" value="Yes">
                                    <label class="form-check-label" for="mbs_yes">Yes</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="mbs_relation_step_one" id="mbs_no" value="No">
                                    <label class="form-check-label" for="mbs_no">No</label>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Disability<span class="text-danger">*</span></label>
                                <select  class="form-select" name="disability_step_one" id="disability_step_one">
                                    <option>Select</option>
                                    <option>None</option>
                                    <option>Physical</option>
                                    <option>Visual</option>
                                    <option>Hearing</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Medical Condition<span class="text-danger">*</span></label>
                                <input  type="text" class="form-control" name="medical_condition_step_one" id="medical_condition_step_one">
                            </div>
                        </div>
                    </div>

                    <!-- Buttons Row -->
                    <div class="row mt-3">
                        <div class="col-md-6">
                            <button type="button" class="btn btn-primary">Save Details</button>
                        </div>
                        <div class="col-md-6 text-end">
                            <a  href="#" class="btn btn-orange next-step">Next</a>
                        </div>
                    </div>
                </div>
            </div>



<div class="step-content" data-step="2">
    <div class="container">
        <h3 class="mb-3">Work Experience</h3>

        <!-- Work Experience Sections Container -->
        <div id="work-experience-wrapper">
            <!-- Work Experience Template -->
            <div class="work-experience-item border rounded p-3 mb-4">
                <div class="mb-4">
                    <label class="form-label">Experience <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" name="experience_step_two[]" >
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Employer <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="employer_step_two[]" >
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Position <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="position_step_two[]" >
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Country <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="country_step_two[]" >
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Duties <span class="text-danger">*</span></label>
                            <textarea class="form-control" name="duties_step_two[]" rows="4" ></textarea>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Start Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="start_date_step_two[]" >
                        </div>

                        <div class="mb-3">
                            <label class="form-label">End Date</label>
                            <input type="date" class="form-control" name="end_date_step_two[]" >
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Last Salary <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="last_salary_step_two[]" >
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Benefits <span class="text-danger">*</span></label>
                            <textarea class="form-control" name="benefits_step_two[]" rows="2" ></textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Reason(s) for Leaving <span class="text-danger">*</span></label>
                            <textarea class="form-control" name="reason_for_leaving_step_two[]" rows="2" ></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add More Button -->
        <div class="mb-4">
            <button type="button" class="btn btn-outline-primary" id="add-more-experience">+ Add More</button>
        </div>

        <!-- Navigation Buttons -->
        <div class="row mt-3">
            <div class="col-md-6">
                <a href="#" class="btn btn-secondary prev-step">Prev</a>
            </div>
            <div class="col-md-6 text-end">
                <a href="#" class="btn btn-orange next-step">Next</a>
            </div>
        </div>
    </div>
</div>




                            
<div class="step-content" data-step="3">
    <div class="container">
        <h3 class="mb-4">Education</h3>

        <!-- Education Wrapper -->
        <div id="education-wrapper">
            <div class="education-item border rounded p-3 mb-4">
                <div class="row">
                    <!-- Left Column -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Qualification <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="qualification_step_three[]"  placeholder="e.g. Bachelors Degree in Computer Science">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Educational Level <span class="text-danger">*</span></label>
                            <select class="form-select form-control" name="educational_level_step_three[]" >
                                <option value="">Select</option>
                                <option>Certificate</option>
                                <option>Diploma</option>
                                <option>Bachelor's Degree</option>
                                <option>Master's Degree</option>
                                <option>Doctorate (PhD)</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Classification of Qualification </label>
                            <select class="form-select form-control" name="classification_step_three[]" >
                                <option value="">Select</option>
                                <option>First Class</option>
                                <option>Second Class Upper</option>
                                <option>Second Class Lower</option>
                                <option>Pass</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Institution Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="institution_name_step_three[]"  placeholder="i.e. University of Malawi">
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Country <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="country_step_three[]"  placeholder="Country">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Start Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="start_date_step_three[]" >
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Completion Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="completion_date_step_three[]" >
                        </div>

                        <div class="mb-3">
                            <label class="form-label d-block">Have you graduated? <span class="text-danger">*</span></label>
                            <div>
                                <input type="radio" name="graduated_step_three" value="Yes"  checked> Yes
                                <input type="radio" name="graduated_step_three" value="No" > No
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Graduation Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="graduation_date_step_three[]" >
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add More Button -->
        <div class="mb-4">
            <button type="button" class="btn btn-outline-primary" id="add-more-education">+ Add More</button>
        </div>

        <!-- Navigation Buttons -->
        <div class="row mt-3">
            <div class="col-md-6">
                <button type="button" class="btn btn-primary">Save Details</button>
            </div>
            <div class="col-md-6 text-end">
                <a href="#" class="btn btn-secondary prev-step">Prev</a>
                <a href="#" class="btn btn-orange next-step">Next</a>
            </div>
        </div>
    </div>
</div>






                       
<div class="step-content" data-step="4">
    <div class="container">
        <h3 class="mt-4 mb-3">Training Experience</h3>
        <p>Please add details of trainings attended below.</p>

        <!-- Training Wrapper -->
        <div id="training-wrapper">
            <div class="training-item border rounded p-3 mb-4">
                <div class="row">
                    <!-- Left Column -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Training Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="training_title_step_four[]" >
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Training Description <span class="text-danger">*</span></label>
                            <textarea class="form-control" name="training_description_step_four[]" rows="4" ></textarea>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Training Institution <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="training_institution_step_four[]" >
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Country <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="country_step_four[]" >
                        </div>
                    </div>

                    <!-- Right Column -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label">Start Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="start_date_step_four[]" >
                        </div>

                        <div class="mb-3">
                            <label class="form-label">End Date <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="end_date_step_four[]" >
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Add More Button -->
        <div class="mb-4">
            <button type="button" class="btn btn-outline-primary" id="add-more-training">+ Add More</button>
        </div>

        <!-- Navigation Buttons -->
        <div class="row mt-3">
            <div class="col-md-6">
                <button type="button" class="btn btn-primary">Save Details</button>
            </div>
            <div class="col-md-6 text-end">
                <a href="#" class="btn btn-secondary prev-step">Prev</a>
                <a href="#" class="btn btn-orange next-step">Next</a>
            </div>
        </div>
    </div>
</div>






               
<div class="step-content" data-step="5">
    <div class="container">
        <h3 class="mt-4 mb-3">Attained Skills and Competency</h3>
        <p>Please add all relevant Skills and Competencies that you think will provide more benefit to your application.</p>

        <!-- Skills Wrapper -->
        <div id="skills-wrapper">
            <div class="skills-item mb-3">
                <label class="form-label">Skills and Competency Attained</label>
                <textarea class="form-control" name="skills_and_competency_step_five[]" rows="4" placeholder="e.g. Team leadership, Data Analysis, Communication"></textarea>
            </div>
        </div>

        <!-- Add More Button -->
        <div class="mb-4">
            <button type="button" class="btn btn-outline-primary" id="add-more-skill">+ Add More</button>
        </div>

        <!-- Navigation Buttons -->
        <div class="row mt-4">
            <div class="col-md-6">
                <button type="button" class="btn btn-primary">Save Details</button>
            </div>
            <div class="col-md-6 text-end">
                <a href="#" class="btn btn-secondary prev-step">Prev</a>
                <a href="#" class="btn btn-orange next-step">Next</a>
            </div>
        </div>
    </div>
</div>






                
<div class="step-content" data-step="6">
    <div class="container">
        <h3 class="mt-4 mb-3">Referees</h3>
        <p>Please provide at least three (3) traceable referees and their contact details.</p>

        <div id="referee-container">
            <div class="referee-form">
                <div class="row">
                    <!-- Left Side -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label" for="referee_name_1">Referee Name <span class="text-danger">*</span></label>
                            <input type="text" required class="form-control" name="referee_name_step_six[]" id="referee_name_1" >
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="relationship_1">Relationship <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" name="relationship_step_six[]" id="relationship_1" >
                            <!-- <select required class="form-control" name="relationship_step_six[]" id="relationship_1">
                                <option value="Supervisor">Supervisor</option>
                                <option value="Other">Other</option>
                            </select> -->
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="company_1">Company <span class="text-danger">*</span></label>
                            <input type="text" required class="form-control" name="company_step_six[]" id="company_1" >
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="address_1">Address <span class="text-danger">*</span></label>
                            <textarea class="form-control" requried name="address_step_six[]" id="address_1" rows="4" ></textarea>
                        </div>
                    </div>

                    <!-- Right Side -->
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label" for="contact_number_1">Contact Number <span class="text-danger">*</span></label>
                            <input type="text" required class="form-control" name="contact_number_step_six[]" id="contact_number_1" >
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="secondary_contact_1">Secondary Contact <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" requried name="secondary_contact_step_six[]" id="secondary_contact_1">
                        </div>

                        <div class="mb-3">
                            <label class="form-label" for="email_1">Email <span class="text-danger">*</span></label>
                            <input type="email" required class="form-control" name="email_step_six[]" id="email_1" >
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>

        <button type="button" class="btn btn-outline-primary" id="add-more" style="margin-top: 8px">+ Add More</button>

        <div class="row mt-3">
            <div class="col-md-6">
                <button type="button" class="btn btn-primary">Save Details</button>
            </div>
            <div class="col-md-6 text-end">
                <a href="#" class="btn btn-secondary prev-step">Prev</a>
                <a href="#" class="btn btn-orange next-step">Next</a>
            </div>
        </div>
    </div>
</div>

<script>
console.log("Script loaded!");

document.addEventListener("DOMContentLoaded", function () {
    console.log("DOM fully loaded!");

    let maxReferees = 3;
    let refereeCount = 1;

    const refereeContainer = document.getElementById('referee-container');

    function addRemoveButton(refereeElement) {
        const existingBtn = refereeElement.querySelector('.remove-referee-btn');
        if (existingBtn) existingBtn.remove();

        const btn = document.createElement('button');
        btn.type = 'button';
        btn.textContent = 'Remove';
        btn.className = 'btn btn-danger mt-2 remove-referee-btn';

        btn.addEventListener('click', () => {
            const allReferees = refereeContainer.querySelectorAll('.referee-form');
            if (allReferees.length > 1) {
                refereeElement.remove();
                refereeCount--;
            } else {
                alert('At least one referee is required.');
            }
        });

        refereeElement.appendChild(btn);
    }

    document.getElementById('add-more').addEventListener('click', function () {
        if (refereeCount >= maxReferees) {
            alert("You can only add up to three referees.");
            return;
        }

        refereeCount++;

        const newReferee = document.createElement('div');
        newReferee.className = 'referee-form mt-4';

        newReferee.innerHTML = `
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="referee_name_${refereeCount}">Referee Name</label>
                        <input type="text" name="referee_name_step_six[]" class="form-control" id="referee_name_${refereeCount}">
                    </div>
                    <div class="mb-3">
                        <label for="relationship_${refereeCount}">Relationship</label>
                        <input type="text" name="relationship_step_six[]" class="form-control" id="relationship_${refereeCount}">
                    </div>
                    <div class="mb-3">
                        <label for="company_${refereeCount}">Company</label>
                        <input type="text" name="company_step_six[]" class="form-control" id="company_${refereeCount}">
                    </div>
                    <div class="mb-3">
                        <label for="address_${refereeCount}">Address</label>
                        <textarea name="address_step_six[]" class="form-control" id="address_${refereeCount}" rows="3"></textarea>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="mb-3">
                        <label for="contact_number_${refereeCount}">Contact Number</label>
                        <input type="text" name="contact_number_step_six[]" class="form-control" id="contact_number_${refereeCount}">
                    </div>
                    <div class="mb-3">
                        <label for="secondary_contact_${refereeCount}">Secondary Contact</label>
                        <input type="text" name="secondary_contact_step_six[]" class="form-control" id="secondary_contact_${refereeCount}">
                    </div>
                    <div class="mb-3">
                        <label for="email_${refereeCount}">Email</label>
                        <input type="email" name="email_step_six[]" class="form-control" id="email_${refereeCount}">
                    </div>
                </div>
            </div>
        `;

        addRemoveButton(newReferee);
        refereeContainer.appendChild(newReferee);
    });

    // Bind remove button to initial referee
    const initialReferee = refereeContainer.querySelector('.referee-form');
    if (initialReferee) addRemoveButton(initialReferee);

    // Submit event
    const form = document.querySelector('form');

    if (!form) {
        console.error("❌ No <form> element found on the page. Cannot attach submit event.");
    } else {
        console.log("✅ Form found. Attaching submit event.");

        form.addEventListener('submit', function (e) {
            console.log("✅ Form submitted. Collecting referee data...");

            const refereeNames = Array.from(document.querySelectorAll("input[name='referee_name_step_six[]']")).map(input => input.value);
            const relationships = Array.from(document.querySelectorAll("input[name='relationship_step_six[]']")).map(input => input.value);
            const companies = Array.from(document.querySelectorAll("input[name='company_step_six[]']")).map(input => input.value);
            const addresses = Array.from(document.querySelectorAll("textarea[name='address_step_six[]']")).map(textarea => textarea.value);
            const contactNumbers = Array.from(document.querySelectorAll("input[name='contact_number_step_six[]']")).map(input => input.value);
            const secondaryContacts = Array.from(document.querySelectorAll("input[name='secondary_contact_step_six[]']")).map(input => input.value);
            const emails = Array.from(document.querySelectorAll("input[name='email_step_six[]']")).map(input => input.value);

            console.log("Referee Names:", refereeNames);
            console.log("Relationships:", relationships);
            console.log("Companies:", companies);
            console.log("Addresses:", addresses);
            console.log("Contact Numbers:", contactNumbers);
            console.log("Secondary Contacts:", secondaryContacts);
            console.log("Emails:", emails);
        });
    }
});
</script>



                
<div class="step-content" data-step="7">
  <div class="container">
    <h3 class="mt-4 mb-3">Attachments</h3>
    <p>
      Please check and/or add any attachments you would like to include for this job application below.
      Please attach at least a CV*, a Cover Letter*, High Level Certificates* and a National ID* Document.
    </p>

    <div id="attachment-container">
      <div class="attachment-form">
        <div class="row">
          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label" for="attachment_1">Attachment <span class="text-danger">*</span></label>
              <input type="file" class="form-control" required name="attachment_step_seven[]" id="attachment_1" >
            </div>

            <div class="mb-3">
              <label class="form-label" for="attachment_name_1">Attachment Name <span class="text-danger">*</span></label>
              <input type="text" class="form-control" name="attachment_name_step_seven[]" required id="attachment_name_1" >
            </div>
          </div>

          <div class="col-md-6">
            <div class="mb-3">
              <label class="form-label" for="attachment_category_1">Attachment Category <span class="text-danger">*</span></label>
              <select class="form-control" name="attachment_category_step_seven[]" required id="attachment_category_1" >
                <option value="" disabled selected>Select Category</option>
                <option value="qualification certificate">Qualification Certificate</option>
                <option value="training certificate">Training Certificate</option>
                <option value="curriculum vitae">Curriculum Vitae</option>
                <option value="cover letter">Cover Letter</option>
                <option value="passport">Passport</option>
                <option value="national ID">National ID</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>

    <button type="button" class="btn btn-outline-primary" id="add-more-two">+ Add More</button>

    <div class="row mt-3">
      <div class="col-md-6">
        <button type="button" class="btn btn-primary">Save Details</button>
      </div>
      <div class="col-md-6 text-end">
        <a href="#" class="btn btn-secondary prev-step">Prev</a>
        <a href="#" class="btn btn-orange next-step">Next</a>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  let attachmentCount = 1;

  document.getElementById('add-more-two').addEventListener('click', function () {
    attachmentCount++;
    const original = document.querySelector('.attachment-form');
    const clone = original.cloneNode(true);

    // Clear inputs and update IDs for accessibility
    clone.querySelectorAll('input, select').forEach((input) => {
      if (input.type === 'file') {
        input.value = ''; // Clear file input
      } else {
        input.value = '';
      }

      if (input.id) {
        const baseId = input.id.replace(/\d+$/, '');
        input.id = baseId + attachmentCount;
      }
    });

    document.getElementById('attachment-container').appendChild(clone);
  });
});
</script>


                  
<div class="step-content" data-step="8"> 
  <div class="container">
    <div style="box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15); padding: 10px; margin: 5px; border-top: 2px solid #FF6600;">
      <h4 class="mt-4">
        <i class="cil-check" style="color: #FF6600"></i> Preview and Submit
      </h4>
      <p>
        Please review and make sure that the information is correct before submitting.
        Once the vacancy is closed, you will <strong>NOT</strong> be able to make changes.
      </p>
    </div>

    <br>

    <div class="card p-3" style="border: 1px solid #FF6600;">
    <h4>Personal Details Preview</h4>
<div class="border rounded p-3 bg-light mb-3">
  <p><strong>Title:</strong> <span id="preview_title"></span></p>
  <p><strong>First Name:</strong> <span id="preview_first_name"></span></p>
  <p><strong>Middle Name:</strong> <span id="preview_middle_name"></span></p>
  <p><strong>Last Name:</strong> <span id="preview_last_name"></span></p>
  <p><strong>Gender:</strong> <span id="preview_gender"></span></p>
  <p><strong>Email:</strong> <span id="preview_email"></span></p>
  <p><strong>Primary Phone:</strong> <span id="preview_primary_phone"></span></p>
  <p><strong>Secondary Phone:</strong> <span id="preview_secondary_phone"></span></p>
  <p><strong>Postal Address:</strong> <span id="preview_postal_address"></span></p>
  <p><strong>Physical Address:</strong> <span id="preview_physical_address"></span></p>
  <p><strong>Nationality:</strong> <span id="preview_nationality"></span></p>
  <p><strong>Start Date:</strong> <span id="preview_start_date"></span></p>
  <p><strong>Desired Salary:</strong> <span id="preview_desired_salary"></span></p>
  <p><strong>Convicted Before:</strong> <span id="preview_convicted"></span></p>
  <p><strong>MBS Relation:</strong> <span id="preview_mbs_relation"></span></p>
  <p><strong>Disability:</strong> <span id="preview_disability"></span></p>
  <p><strong>Medical Condition:</strong> <span id="preview_medical_condition"></span></p>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const updatePreview = () => {
        document.getElementById('preview_title').textContent = document.getElementById('title_step_one').value;
        document.getElementById('preview_first_name').textContent = document.getElementById('first_name_step_one').value;
        document.getElementById('preview_middle_name').textContent = document.getElementById('middle_name_step_one').value;
        document.getElementById('preview_last_name').textContent = document.getElementById('last_name_step_one').value;

        const gender = document.querySelector('input[name="gender"]:checked');
        document.getElementById('preview_gender').textContent = gender ? gender.value : '';

        document.getElementById('preview_email').textContent = document.getElementById('email_step_one').value;
        document.getElementById('preview_primary_phone').textContent = document.getElementById('primary_phone_step_one').value;
        document.getElementById('preview_secondary_phone').textContent = document.getElementById('secondary_phone_step_one').value;
        document.getElementById('preview_postal_address').textContent = document.getElementById('postal_address_step_one').value;
        document.getElementById('preview_physical_address').textContent = document.getElementById('physical_address_step_one').value;
        document.getElementById('preview_nationality').textContent = document.getElementById('nationality_step_one').value;
        
        document.getElementById('preview_start_date').textContent = document.getElementById('start_date_step_one').value;
        document.getElementById('preview_desired_salary').textContent = document.getElementById('desired_salary_step_one').value;

        const convicted = document.querySelector('input[name="convicted_before_step_one"]:checked');
        document.getElementById('preview_convicted').textContent = convicted ? convicted.value : '';

        const mbsRelation = document.querySelector('input[name="mbs_relation_step_one"]:checked');
        document.getElementById('preview_mbs_relation').textContent = mbsRelation ? mbsRelation.value : '';

        document.getElementById('preview_disability').textContent = document.getElementById('disability_step_one').value;
        document.getElementById('preview_medical_condition').textContent = document.getElementById('medical_condition_step_one').value;
    };

    // Add event listeners to relevant fields
    const inputs = document.querySelectorAll('[data-step="1"] input, [data-step="1"] select');
    inputs.forEach(input => {
        input.addEventListener('input', updatePreview);
        input.addEventListener('change', updatePreview);
    });

    // Initial update in case of prefilled values
    updatePreview();
});
</script>



      <hr>

      <h4>Work Experience Preview</h4>
        <div id="preview_work_experience"></div>

        <script>
document.addEventListener('DOMContentLoaded', function () {
    const workWrapper = document.getElementById('work-experience-wrapper');
    const previewContainer = document.getElementById('preview_work_experience');

    function updateWorkExperiencePreview() {
        const items = workWrapper.querySelectorAll('.work-experience-item');
        previewContainer.innerHTML = ''; // Clear existing preview

        items.forEach((item, index) => {
            const experience = item.querySelector('input[name="experience_step_two[]"]').value;
            const employer = item.querySelector('input[name="employer_step_two[]"]').value;
            const position = item.querySelector('input[name="position_step_two[]"]').value;
            const country = item.querySelector('input[name="country_step_two[]"]').value;
            const duties = item.querySelector('textarea[name="duties_step_two[]"]').value;
            const startDate = item.querySelector('input[name="start_date_step_two[]"]').value;
            const endDate = item.querySelector('input[name="end_date_step_two[]"]').value;
            const lastSalary = item.querySelector('input[name="last_salary_step_two[]"]').value;
            const benefits = item.querySelector('textarea[name="benefits_step_two[]"]').value;
            const reason = item.querySelector('textarea[name="reason_for_leaving_step_two[]"]').value;

            const experienceHtml = `
                <div class="border rounded p-3 mb-3 bg-light">
                    <h5>Experience ${index + 1}</h5>
                    <p><strong>Experience:</strong> ${experience}</p>
                    <p><strong>Employer:</strong> ${employer}</p>
                    <p><strong>Position:</strong> ${position}</p>
                    <p><strong>Country:</strong> ${country}</p>
                    <p><strong>Duties:</strong> ${duties}</p>
                    <p><strong>Start Date:</strong> ${startDate}</p>
                    <p><strong>End Date:</strong> ${endDate}</p>
                    <p><strong>Last Salary:</strong> ${lastSalary}</p>
                    <p><strong>Benefits:</strong> ${benefits}</p>
                    <p><strong>Reason for Leaving:</strong> ${reason}</p>
                </div>
            `;
            previewContainer.insertAdjacentHTML('beforeend', experienceHtml);
        });
    }

    function bindExperienceFields(item) {
        item.querySelectorAll('input, textarea').forEach(input => {
            input.addEventListener('input', updateWorkExperiencePreview);
            input.addEventListener('change', updateWorkExperiencePreview);
        });

        // Add remove button if not already present
        if (!item.querySelector('.remove-experience-btn')) {
            const removeBtn = document.createElement('button');
            removeBtn.textContent = 'Remove';
            removeBtn.type = 'button';
            removeBtn.className = 'remove-experience-btn';
            removeBtn.style.marginTop = '10px';
            removeBtn.style.backgroundColor = '#ef4444';
            removeBtn.style.color = '#fff';
            removeBtn.style.border = 'none';
            removeBtn.style.padding = '6px 12px';
            removeBtn.style.borderRadius = '4px';
            removeBtn.style.cursor = 'pointer';

            removeBtn.addEventListener('click', function () {
                const allItems = workWrapper.querySelectorAll('.work-experience-item');
                if (allItems.length > 1) {
                    item.remove();
                    updateWorkExperiencePreview();
                } else {
                    alert('At least one work experience section must remain.');
                }
            });

            item.appendChild(removeBtn);
        }
    }

    // Bind all existing work experience items
    document.querySelectorAll('.work-experience-item').forEach(item => bindExperienceFields(item));

    // Hook into the Add More button
    document.getElementById('add-more-experience').addEventListener('click', function () {
        const original = workWrapper.querySelector('.work-experience-item');
        const clone = original.cloneNode(true);

        // Remove existing remove button from the clone (to avoid duplicates)
        const oldRemove = clone.querySelector('.remove-experience-btn');
        if (oldRemove) oldRemove.remove();

        // Clear values in the clone
        clone.querySelectorAll('input, textarea').forEach(field => {
            field.value = '';
        });

        workWrapper.appendChild(clone);
        bindExperienceFields(clone);
        updateWorkExperiencePreview();
    });

    // Initial preview build
    updateWorkExperiencePreview();
});
</script>



    </div>

    <hr>


    <h4>Education Preview</h4>
<div id="preview_education"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const educationWrapper = document.getElementById('education-wrapper');
    const educationPreviewContainer = document.getElementById('preview_education');

    function updateEducationPreview() {
        const items = educationWrapper.querySelectorAll('.education-item');
        educationPreviewContainer.innerHTML = ''; // Clear preview

        items.forEach((item, index) => {
            const qualification = item.querySelector('input[name="qualification_step_three[]"]').value;
            const level = item.querySelector('select[name="educational_level_step_three[]"]').value;
            const classification = item.querySelector('select[name="classification_step_three[]"]').value;
            const institution = item.querySelector('input[name="institution_name_step_three[]"]').value;
            const country = item.querySelector('input[name="country_step_three[]"]').value;
            const startDate = item.querySelector('input[name="start_date_step_three[]"]').value;
            const completionDate = item.querySelector('input[name="completion_date_step_three[]"]').value;
            const graduationDate = item.querySelector('input[name="graduation_date_step_three[]"]').value;

            const graduated = item.querySelector('input[type="radio"]:checked')?.value || 'N/A';

            const html = `
                <div class="border rounded p-3 mb-3 bg-light">
                    <h5>Education ${index + 1}</h5>
                    <p><strong>Qualification:</strong> ${qualification}</p>
                    <p><strong>Educational Level:</strong> ${level}</p>
                    <p><strong>Classification:</strong> ${classification}</p>
                    <p><strong>Institution:</strong> ${institution}</p>
                    <p><strong>Country:</strong> ${country}</p>
                    <p><strong>Start Date:</strong> ${startDate}</p>
                    <p><strong>Completion Date:</strong> ${completionDate}</p>
                    <p><strong>Graduated:</strong> ${graduated}</p>
                    <p><strong>Graduation Date:</strong> ${graduationDate}</p>
                </div>
            `;
            educationPreviewContainer.insertAdjacentHTML('beforeend', html);
        });
    }

    function bindEducationFields(item) {
        item.querySelectorAll('input, select, textarea').forEach(field => {
            field.addEventListener('input', updateEducationPreview);
            field.addEventListener('change', updateEducationPreview);
        });

        // Add a remove button if not present
        if (!item.querySelector('.remove-education-btn')) {
            const removeBtn = document.createElement('button');
            removeBtn.textContent = 'Remove';
            removeBtn.type = 'button';
            removeBtn.className = 'remove-education-btn';
            removeBtn.style.marginTop = '10px';
            removeBtn.style.backgroundColor = '#ef4444';
            removeBtn.style.color = '#fff';
            removeBtn.style.border = 'none';
            removeBtn.style.padding = '6px 12px';
            removeBtn.style.borderRadius = '4px';
            removeBtn.style.cursor = 'pointer';

            removeBtn.addEventListener('click', function () {
                const allItems = educationWrapper.querySelectorAll('.education-item');
                if (allItems.length > 1) {
                    item.remove();
                    updateEducationPreview();
                } else {
                    alert('At least one education entry must remain.');
                }
            });

            item.appendChild(removeBtn);
        }
    }

    // Bind events to existing items
    document.querySelectorAll('.education-item').forEach(item => bindEducationFields(item));

    // Extend the add-more button
    document.getElementById('add-more-education').addEventListener('click', function () {
        const original = educationWrapper.querySelector('.education-item');
        const clone = original.cloneNode(true);

        // Remove existing remove button from clone (avoid duplicates)
        const oldRemove = clone.querySelector('.remove-education-btn');
        if (oldRemove) oldRemove.remove();

        // Clear values
        clone.querySelectorAll('input, select, textarea').forEach(field => {
            if (field.type === 'radio') {
                field.checked = false;
            } else {
                field.value = '';
            }
        });

        // Ensure new radio buttons have unique names
        const newRadioName = 'graduated_step_three_' + Date.now();
        clone.querySelectorAll('input[type="radio"]').forEach(radio => {
            radio.name = newRadioName;
        });

        educationWrapper.appendChild(clone);
        bindEducationFields(clone);
        updateEducationPreview();
    });

    // Initial preview on page load
    updateEducationPreview();
});
</script>



<hr>

<h5 class="mb-3">Training Experience</h5>

<h4>Training Experience Preview</h4>
<div id="preview_training"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const trainingWrapper = document.getElementById('training-wrapper');
    const trainingPreviewContainer = document.getElementById('preview_training');

    function updateTrainingPreview() {
        const items = trainingWrapper.querySelectorAll('.training-item');
        trainingPreviewContainer.innerHTML = ''; // Clear current preview

        items.forEach((item, index) => {
            const title = item.querySelector('input[name="training_title_step_four[]"]').value;
            const description = item.querySelector('textarea[name="training_description_step_four[]"]').value;
            const institution = item.querySelector('input[name="training_institution_step_four[]"]').value;
            const country = item.querySelector('input[name="country_step_four[]"]').value;
            const startDate = item.querySelector('input[name="start_date_step_four[]"]').value;
            const endDate = item.querySelector('input[name="end_date_step_four[]"]').value;

            const html = `
                <div class="border rounded p-3 mb-3 bg-light">
                    <h5>Training ${index + 1}</h5>
                    <p><strong>Title:</strong> ${title}</p>
                    <p><strong>Description:</strong> ${description}</p>
                    <p><strong>Institution:</strong> ${institution}</p>
                    <p><strong>Country:</strong> ${country}</p>
                    <p><strong>Start Date:</strong> ${startDate}</p>
                    <p><strong>End Date:</strong> ${endDate}</p>
                </div>
            `;
            trainingPreviewContainer.insertAdjacentHTML('beforeend', html);
        });
    }

    function bindTrainingFields(item) {
        // Attach input listeners
        item.querySelectorAll('input, textarea').forEach(field => {
            field.addEventListener('input', updateTrainingPreview);
            field.addEventListener('change', updateTrainingPreview);
        });

        // Add a remove button if not already present
        if (!item.querySelector('.remove-training-btn')) {
            const removeBtn = document.createElement('button');
            removeBtn.textContent = 'Remove';
            removeBtn.type = 'button';
            removeBtn.className = 'remove-training-btn';
            removeBtn.style.marginTop = '10px';
            removeBtn.style.backgroundColor = '#ef4444';
            removeBtn.style.color = '#fff';
            removeBtn.style.border = 'none';
            removeBtn.style.padding = '6px 12px';
            removeBtn.style.borderRadius = '4px';
            removeBtn.style.cursor = 'pointer';

            removeBtn.addEventListener('click', function () {
                const allItems = trainingWrapper.querySelectorAll('.training-item');
                if (allItems.length > 1) {
                    item.remove();
                    updateTrainingPreview();
                } else {
                    alert('At least one training section must remain.');
                }
            });

            item.appendChild(removeBtn);
        }
    }

    // Initial binding
    document.querySelectorAll('.training-item').forEach(item => bindTrainingFields(item));

    // Add More button logic
    document.getElementById('add-more-training').addEventListener('click', function () {
        const original = trainingWrapper.querySelector('.training-item');
        const clone = original.cloneNode(true);

        // Remove any old remove button from clone
        const oldRemove = clone.querySelector('.remove-training-btn');
        if (oldRemove) oldRemove.remove();

        // Clear inputs
        clone.querySelectorAll('input, textarea').forEach(field => {
            field.value = '';
        });

        trainingWrapper.appendChild(clone);
        bindTrainingFields(clone);
        updateTrainingPreview();
    });

    updateTrainingPreview();
});
</script>




<hr>

<h5 class="mb-3">Attained Skills and Competency</h5>

<div id="skills-preview" style="white-space: pre-wrap; border: 1px solid #ddd; padding: 10px; min-height: 100px;background: #ebedef" >
      <!-- Preview content will appear here -->
      No skills added yet.
    </div>
    <script>

       // Function to update preview content
function updateSkillsPreview() {
    const textareas = document.querySelectorAll('textarea[name="skills_and_competency_step_five[]"]');
    const preview = document.getElementById('skills-preview');

    let allSkills = [];
    textareas.forEach(ta => {
        const val = ta.value.trim();
        if (val) allSkills.push(val);
    });

    preview.textContent = allSkills.length > 0 ? allSkills.join('\n\n') : 'No skills added yet.';
}

// Function to bind remove button
function bindRemoveButton(item) {
    // Remove any existing remove button
    const existingBtn = item.querySelector('.remove-skill-btn');
    if (existingBtn) existingBtn.remove();

    const btn = document.createElement('button');
    btn.textContent = 'Remove';
    btn.type = 'button';
    btn.className = 'remove-skill-btn';
    btn.style.marginTop = '10px';
    btn.style.backgroundColor = '#ef4444';
    btn.style.color = '#fff';
    btn.style.border = 'none';
    btn.style.padding = '6px 12px';
    btn.style.borderRadius = '4px';
    btn.style.cursor = 'pointer';

    btn.addEventListener('click', function () {
        const wrapper = document.getElementById('skills-wrapper');
        const items = wrapper.querySelectorAll('.skills-item');
        if (items.length > 1) {
            item.remove();
            updateSkillsPreview();
        } else {
            alert('At least one skill must remain.');
        }
    });

    item.appendChild(btn);
}

// Update preview when any textarea changes
document.getElementById('skills-wrapper').addEventListener('input', updateSkillsPreview);

// Add More functionality
document.getElementById('add-more-skill').addEventListener('click', function () {
    const wrapper = document.getElementById('skills-wrapper');
    const original = wrapper.querySelector('.skills-item');
    const clone = original.cloneNode(true);

    // Clear textarea
    const textarea = clone.querySelector('textarea');
    textarea.value = '';

    // Remove old remove button if exists
    const oldBtn = clone.querySelector('.remove-skill-btn');
    if (oldBtn) oldBtn.remove();

    // Bind new remove button
    bindRemoveButton(clone);

    wrapper.appendChild(clone);
    updateSkillsPreview();
});

// Initial bind for existing items
document.querySelectorAll('.skills-item').forEach(item => {
    bindRemoveButton(item);
});

// Initial preview
updateSkillsPreview();

// Navigation between steps (example for Prev/Next buttons)
document.querySelectorAll('.prev-step, .next-step').forEach(btn => {
    btn.addEventListener('click', function (e) {
        e.preventDefault();

        // Determine current step container
        const currentStepEl = btn.closest('.step-content');
        if (!currentStepEl) return;

        // Hide current step
        // currentStepEl.style.display = 'none';

        // Determine target step number
        let targetStep = null;

        if (btn.classList.contains('prev-step')) {
            targetStep = btn.getAttribute('data-prev-step');
        } else if (btn.classList.contains('next-step')) {
            targetStep = btn.getAttribute('data-next-step');
        }

        if (targetStep) {
            // Show target step
            const targetStepEl = document.querySelector(`.step-content[data-step="${targetStep}"]`);
            if (targetStepEl) {
                targetStepEl.style.display = 'block';

                // If preview tab, update preview again
                if (targetStep === '6') updateSkillsPreview();
            }
        }
    });
});

    </script>
<hr>

<h5 class="mb-3">Referees</h5>

<div id="referee-preview">
      No referees added yet.
    </div>
    <script>
        function updateRefereePreview() {
            const previewContainer = document.getElementById('referee-preview');
            const refereeForms = document.querySelectorAll('#referee-container .referee-form');

            let output = '';

            refereeForms.forEach((form, index) => {
                const name = form.querySelector('input[name="referee_name_step_six[]"]')?.value.trim() || 'N/A';
                const relationship = form.querySelector('input[name="relationship_step_six[]"]')?.value.trim() || 'N/A';
                const company = form.querySelector('input[name="company_step_six[]"]')?.value.trim() || 'N/A';
                const address = form.querySelector('textarea[name="address_step_six[]"]')?.value.trim() || 'N/A';
                const contact = form.querySelector('input[name="contact_number_step_six[]"]')?.value.trim() || 'N/A';
                const secondary = form.querySelector('input[name="secondary_contact_step_six[]"]')?.value.trim() || 'N/A';
                const email = form.querySelector('input[name="email_step_six[]"]')?.value.trim() || 'N/A';

                output += `
                    <div class="mb-3">
                        <strong>Referee ${index + 1}</strong><br>
                        <strong>Name:</strong> ${name}<br>
                        <strong>Relationship:</strong> ${relationship}<br>
                        <strong>Company:</strong> ${company}<br>
                        <strong>Address:</strong> ${address}<br>
                        <strong>Contact Number:</strong> ${contact}<br>
                        <strong>Secondary Contact:</strong> ${secondary}<br>
                        <strong>Email:</strong> ${email}
                    </div><hr>
                `;
            });

            previewContainer.innerHTML = output || 'No referees added yet.';
        }

        // Monitor input fields for changes
        document.getElementById('referee-container').addEventListener('input', updateRefereePreview);

        // Update preview after "Add More" is clicked
        document.getElementById('add-more').addEventListener('click', () => {
            setTimeout(updateRefereePreview, 100); // Wait for DOM to update
        });


</script>


<hr>

<h5 class="mb-3">Attachments</h5>

<div id="attachment-preview">
      No attachments added yet. 
    </div>
    <script>
        function updateAttachmentPreview() {
    const previewContainer = document.getElementById('attachment-preview');
    const attachmentForms = document.querySelectorAll('#attachment-container .attachment-form');

    let output = '';

    attachmentForms.forEach((form, index) => {
        const fileInput = form.querySelector('input[name="attachment_step_seven[]"]');
        const fileName = fileInput?.files[0]?.name || 'No file selected';

        const name = form.querySelector('input[name="attachment_name_step_seven[]"]')?.value.trim() || 'N/A';
        const category = form.querySelector('select[name="attachment_category_step_seven[]"]')?.value || 'N/A';

        output += `
            <div class="mb-3">
                <strong>Attachment ${index + 1}</strong><br>
                <strong>File Name:</strong> ${fileName}<br>
                <strong>Attachment Name:</strong> ${name}<br>
                <strong>Category:</strong> ${category}
            </div><hr>
        `;
    });

    previewContainer.innerHTML = output || 'No attachments added yet.';
}

// Add a remove button to each form
function bindAttachmentRemoveButton(form) {
    // Remove existing button if any
    const oldBtn = form.querySelector('.remove-attachment-btn');
    if (oldBtn) oldBtn.remove();

    const removeBtn = document.createElement('button');
    removeBtn.type = 'button';
    removeBtn.textContent = 'Remove';
    removeBtn.className = 'remove-attachment-btn';
    removeBtn.style.marginTop = '10px';
    removeBtn.style.backgroundColor = '#ef4444';
    removeBtn.style.color = '#fff';
    removeBtn.style.marginBottom = '8px';
    removeBtn.style.border = 'none';
    removeBtn.style.padding = '6px 12px';
    removeBtn.style.borderRadius = '4px';
    removeBtn.style.cursor = 'pointer';

    removeBtn.addEventListener('click', () => {
        const forms = document.querySelectorAll('#attachment-container .attachment-form');
        if (forms.length > 1) {
            form.remove();
            updateAttachmentPreview();
        } else {
            alert('At least one attachment must remain.');
        }
    });

    form.appendChild(removeBtn);
}

// Bind initial forms
document.querySelectorAll('#attachment-container .attachment-form').forEach(bindAttachmentRemoveButton);

// Trigger preview on input or file selection
document.getElementById('attachment-container').addEventListener('input', updateAttachmentPreview);
document.getElementById('attachment-container').addEventListener('change', updateAttachmentPreview);

// Rebind after adding new fields
document.getElementById('add-more-two').addEventListener('click', () => {
    setTimeout(() => {
        // Get the newest form and bind remove
        const allForms = document.querySelectorAll('#attachment-container .attachment-form');
        const latestForm = allForms[allForms.length - 1];
        bindAttachmentRemoveButton(latestForm);
        updateAttachmentPreview();
    }, 100);
});

// Initial preview
updateAttachmentPreview();

// Show preview tab without hiding the form
document.querySelectorAll('[data-next-step="8"]').forEach(btn => {
    btn.addEventListener('click', function (e) {
        e.preventDefault();

        // Ensure preview section is visible
        const previewSection = document.querySelector('.step-content[data-step="8"]');
        if (previewSection) {
            previewSection.style.display = 'block';
            updateAttachmentPreview();
        }
    });
});
</script>

    <div class="row mt-4">
      <div class="col-md-6">
        <button type="button" class="btn btn-primary">Save Details</button>
        <a href="#" class="btn btn-secondary prev-step">Prev</a>
      </div>
      <div class="col-md-6 text-end">
        <button type="submit" class="btn btn-orange">Submit Application</button>
      </div>
      
    </div>
    
  </div>
  
</div>

</form>
<!-- Custom Styles -->
<style>
    .btn-orange {
        background-color: #ff6c2f;
        color: white;
        border: none;
    }
    .btn-orange:hover {
        background-color: #e65a1b;
    }
    .bg-orange {
        background-color: #ff6c2f;
    }

    /* Step Navigation */
    .nav-tabs {
        border-bottom: none;
        display: flex;
    }

    .nav-tabs .nav-item {
        position: relative;
    }

    .nav-tabs .nav-link {
        border: none;
        font-weight: bold;
        color: #333;
        padding: 10px 20px;
        cursor: pointer;
    }

    .nav-tabs .nav-link.active {
        background-color: #ff6c2f;
        color: white;
        border-radius: 5px;
        position: relative;
    }

    .nav-tabs .nav-link.active::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -15px;
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 15px solid #ff6c2f;
        transform: translateY(-50%);
    }

    /* Step Content */
    .step-content {
        display: none;
    }

    .step-content.active {
        display: block;
    }
</style>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const steps = document.querySelectorAll(".nav-link");
        const forms = document.querySelectorAll(".step-content");

        function updateButtons() {
            const currentStep = parseInt(document.querySelector(".nav-link.active").getAttribute("data-step"));

            document.querySelectorAll(".prev-step").forEach(btn => {
                btn.classList.toggle("disabled", currentStep === 1);
            });

            document.querySelectorAll(".next-step").forEach(btn => {
                btn.style.display = currentStep === 8 ? "none" : "inline-block";
            });
        }

        steps.forEach(step => {
            step.addEventListener("click", function (e) {
                e.preventDefault();
                const stepNumber = this.getAttribute("data-step");

                // Remove active class from all steps and forms
                steps.forEach(s => s.classList.remove("active"));
                forms.forEach(f => f.classList.remove("active"));

                // Add active class to clicked step and corresponding form
                this.classList.add("active");
                document.querySelector(`.step-content[data-step="${stepNumber}"]`).classList.add("active");

                updateButtons();
            });
        });

        // ✅ Handle "Next" button click — THIS is what you want
        document.querySelectorAll(".next-step").forEach(button => {
            button.addEventListener("click", function (e) {
                e.preventDefault();

                // updateStep8Preview(); // update step 8 data

                const currentStep = parseInt(document.querySelector(".nav-link.active").getAttribute("data-step"));
                const nextStep = currentStep + 1;
                const nextStepElement = document.querySelector(`.nav-link[data-step="${nextStep}"]`);

                if (nextStepElement) {
                    nextStepElement.click(); // jump to the next tab
                }
            });
        });

        // ✅ Handle "Prev" button click
        document.querySelectorAll(".prev-step").forEach(button => {
            button.addEventListener("click", function (e) {
                e.preventDefault();

                const currentStep = parseInt(document.querySelector(".nav-link.active").getAttribute("data-step"));
                const prevStep = currentStep - 1;
                const prevStepElement = document.querySelector(`.nav-link[data-step="${prevStep}"]`);

                if (prevStepElement) {
                    prevStepElement.click(); // jump to previous tab
                }
            });
        });

        updateButtons();
    });

    // Leave your updateStep8Preview() function as is below this
</script>
</form>


@endsection