@extends('includes/layout')
@section('main-page-content')
    @php
        $step = 'step' . request()->step;
    @endphp

    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card mb-4">
            <div class="card mb-4">
                <div class="p-3 px-5">
                    <div class="h4 pb-0 mb-0 m-header">SWMS Report</div>
                </div>
            </div>
            <!-- Stepper -->
            <div class="root">
                <div class="container">
                    <div class="container-wrapper">
                        <div class="progressbar">
                            <div class="progress-step @if ($step == 'step1') progress-step-active @endif"
                                data-title="Step 1"></div>
                            <div class="progress-step @if ($step == 'step2') progress-step-active @endif"
                                data-title="Step 2"></div>
                            <div class="progress-step @if ($step == 'step3') progress-step-active @endif"
                                data-title="Step 3"></div>
                            <div class="progress-step @if ($step == 'step4') progress-step-active @endif"
                                data-title="Step 4"></div>
                            <div class="progress-step @if ($step == 'step5') progress-step-active @endif"
                                data-title="Step 5"></div>
                            <div class="progress-step @if ($step == 'step6') progress-step-active @endif"
                                data-title="Step 6"></div>
                                <!-- <div class="progress-step @if ($step == 'step7') progress-step-active @endif"
                                data-title="Step 7"></div>    -->
                        </div>
                    </div>
                </div>
            </div>
            <!-- End Stepper -->
            @include('Swms/NewSwmsReport/' . $step)

            <div class="row px-5 py-2">
                <div class="mt-4 w-100 d-flex justify-content-between">
                    <button type="button" class="report-btn btn  me-2 waves-effect waves-light"
                        onclick="_back();">Back</button>
                    <button type="button" class="btn btn-next btn-primary waves-effect waves-light"
                        onclick="_submit();">Save and Next</button>
                </div>
            </div>
        </div> <!-- this div is start inside of each file and end here --->
    </div>
    </div>
@endsection




@section('css-js')
    <style>
        .form-label-other {
            font-family: Poppins;
            font-size: 14px;
            font-weight: 600;
            line-height: 21px;
            text-align: left;
            color: #544f5a;
        }

        .h5 {
            font-family: Poppins;
            font-size: 14px;
            font-weight: 600;
            line-height: 21px;
            text-align: left;

        }

        .form-check-with-border {
            border-left: 2px solid #ccc;
        }

        .btn:not([class*=btn-]):active,
        .btn:not([class*=btn-]).active,
        .btn:not([class*=btn-]).show,
        .btn:not([class*=btn-]) {
            border: 1px solid #BCBCBC;
        }

        .paragraph {
            color: #019ff3;
            font-family: Poppins;
            font-size: 14px;
            font-weight: 600;
            line-height: 21px;
            text-align: left;

        }

        .report-btn {
            color: #BCBCBC;
            border: 1px solid #BCBCBC;
        }

        .report-btn:hover {
            color: #BCBCBC;
            border: 1px solid #BCBCBC;
        }

        .injury {
            background: #F4F5FA;
        }

        .h4 {
            text-transform: uppercase;
            font-family: Poppins;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            text-align: left;
        }

        .card {
            border-radius: 2px;
        }

        .detail-card {
            background: #019ff3;
        }

        .detail-card .h5 {
            font-family: Poppins;
            font-size: 16px;
            font-weight: 600;
            line-height: 24px;
            text-align: left;
            letter-spacing: 0.5px;
        }

        .detail-card .p {
            font-size: 14px;
            line-height: 18px;
        }

        /* Add custom styles here */
        .flex {
            display: flex;
            align-items: center;
        }

        .form-group.form-check {
            border-left: 3px solid #007bff;
            /* Adjust border properties as needed */
            padding-left: 10px;
            /* Adjust padding to separate border from content */
        }

        .form-label {
            margin-right: 10px;
            /* Adjust spacing between label and radio buttons */
        }

        .form-check {
            margin-left: 20px;
            /* Adjust spacing between radio buttons */
        }

        /* Styles for Progress Bar */
        .progressbar {
            position: relative;
            display: flex;
            justify-content: space-around;
            counter-reset: step;
            margin: 2rem 0 4rem;
        }

        .progressbar::before,
        .progress {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            height: 4px;
            width: 100%;
            background-color: #dcdcdc;
        }

        .progress {
            background-color: var(--primary-color);
            width: 0%;
            transition: 0.3s;
            z-index: -1;
        }

        .progress-step {
            width: 2.1875rem;
            height: 2.1875rem;
            background-color: #dcdcdc;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
        }

        .progress-step::before {
            counter-increment: step;
            content: counter(step);
        }

        .container {
            width: 100%;
            z-index: 1;
            overflow-x: auto;
        }


        .progressbar {
            counter-reset: step;
            white-space: nowrap;
        }

        .progress-step::after {
            content: attr(data-title);
            position: absolute;
            top: calc(100% + 0.5rem);
            font-size: 0.85rem;
            color: #666;
        }

        .progress-step-active {
            background: #019FF3;
            color: #f3f3f3;
        }



        .input-group {
            margin: 2rem 0;
        }

        .form-step {
            display: none;
            transform-origin: top;
            animation: animate 0.5s;
        }


        .form-step-active {
            display: block;
        }

        @media only screen and (max-width: 768px) {
            .progressbar li {
                width: auto;
            }

            .progressbar {
                display: flex;
                gap: 20px;
            }

            .report-btn {
                white-space: nowrap;
            }

            .btn-primary {
                white-space: nowrap;
                padding: 0px 40px 0px 40px;
            }

            .container-wrapper {
                display: inline-block;
                /* Ensure container wraps its content */
            }
        }
    </style>


    <script>
        @if ($step == 'step1')

            $(document).ready(function() {
                _get();
            });
            function _get() {
    $.ajax({
        type: "POST",
        url: "{{ url('/api/swms-report-edit-step1') }}",
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        data: {
            'swms_report_id': '{{ request()->swms_report_id }}'
        },
        success: function(response) {
            var swms = response.data.swms;
            var authorised_by_list = response.data.authorised_by_list;
            var company_list = response.data.company_name;

            // Populate authorised by dropdown
            var _html = `<option value="" selected data-id="" data-title="">--Select an option --</option>`;
            for (var i = 0; i < authorised_by_list.length; i++) {
                const empPersonalDetails = authorised_by_list[i].emp_personal_details;
                if (empPersonalDetails) {
                    var { emp_id, first_name, last_name, middle_name } = empPersonalDetails;
                    var accessRole = authorised_by_list[i].access_role || {};
                    var accessRoleId = accessRole.id ?? '';
                    var empTierTitle = authorised_by_list[i].emp_tier?.title ?? '';

                    _html += `<option value="${emp_id}" data-id="${accessRoleId}">${first_name ?? ''} ${middle_name ?? ''} ${last_name ?? ''} - ${empTierTitle}</option>`;
                }
            }
            $('.step1 .site_manager_or_forman').html(_html);

            // // Populate company name dropdown
            // var companyOptions = `<option value="" selected>--Select Company--</option>`;
            // for (var j = 0; j < company_list.length; j++) {
            //     var { id, fname, mname, lname } = company_list[j];
            //     companyOptions += `<option value="${id}">${fname ?? ''} ${mname ?? ''} ${lname ?? ''}</option>`;
            // }
            // $('.step1 .company_name').html(companyOptions);

            // If a company is associated with the SWMS, select it
            if (swms && swms.company_name) {
                $('.step1 .company_name').val(swms.company_name);
            }

            // Other SWMS details
          if (swms) {
                $('.step1 .swms_number').val(swms.swms_number);
                $('.step1 .title').val(swms.title);
                $('.step1 .company_name').val(swms.company_name);
                $('.step1 .site_manager_or_forman').val(swms.site_manager_or_forman || ''); 
                $('.step1 .revision_number').val(swms.revision_number);
                $('.step1 .version_number').val(swms.version_number);
                var startDate = swms.start_date ? swms.start_date : new Date().toISOString().split('T')[0];
                $('.step1 .start_date').val(startDate);
                $('.step1 .contact_number').val(swms.contact_number);
                $('.step1 .company_address').val(swms.company_address);
                $('.step1 .scope_of_work').val(swms.scope_of_work??'');
                if(swms.scope_of_work=='undefined' ||swms.scope_of_work =='' ){
                    $('.step1 .scope_of_work').val('');

                }else{
                    $('.step1 .scope_of_work').val(swms.scope_of_work);

                }

                $('.step1 .principal_contractor').val(swms.principal_contractor);
                $('.step1 .principal_contractor_address').val(swms.principal_contractor_address);
                $('.step1 .principal_contractor_number').val(swms.principal_contractor_number);

                $('.step1 .description').val(swms.description);
            } else {
                    var startDate = swms.start_date ? swms.start_date : new Date().toISOString().split('T')[0];
                    $('.step1 .start_date').val(startDate);
                $('.step1 .swms_number').val(response.data.swms_number);
            }

         
        },
        error: function(response) {
            if (response.status == 500) {
                toastr.error("Something went wrong");
            } else {
                toastr.error(response.responseJSON.message);
            }
        }
    });
}


            function _submit() {
                loader(true);

                var _FormData = new FormData();

                _FormData.append("swms_report_id", '{{ request()->swms_report_id }}');
                _FormData.append("swms_number", $('.step1 .swms_number').val())
                _FormData.append("title", $('.step1 .title').val())
                _FormData.append("site_manager_or_forman", $('.step1 .site_manager_or_forman').val())
                _FormData.append("revision_number", $('.step1 .revision_number').val())
                _FormData.append("version_number", $('.step1 .version_number').val())
                _FormData.append("start_date", $('.step1 .start_date').val())
                _FormData.append("contact_number", $('.step1 .contact_number').val())
                _FormData.append("company_name", $('.step1 .company_name').val())
                _FormData.append("company_address", $('.step1 .company_address').val())
                _FormData.append("scope_of_work", $('.step1 .scope_of_work').val())
                _FormData.append("principal_contractor", $('.step1 .principal_contractor').val())
                _FormData.append("principal_contractor_address", $('.step1 .principal_contractor_address').val())
                _FormData.append("principal_contractor_number", $('.step1 .principal_contractor_number').val())

                _FormData.append("description", $('.step1 .description').val())

                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/swms-report-store-step1') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: _FormData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        toastr.success(response.message);
                        setTimeout(
                            function() {
                                window.location.href =
                                    "{{ url('swms-report-list/create/2') }}/" + response.data
                                    .swms_report_id;
                            },
                            1000);
                        loader(false);
                    },
                    error: function(response) {
                        loader(false);
                        if (response.status == 500) {
                            toastr.error("Something went wrong")
                        } else {
                            toastr.error(response.responseJSON.message)
                        }
                    }
                });

            }

            function _back() {
                window.location.href = "{{ url('/') }}/swms-report-list";
            }
        @endif

        @if ($step == 'step2')

            $(document).ready(function() {
                _get();
            });

            function _get() {
                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/swms-report-edit-step2') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        'swms_report_id': '{{ request()->swms_report_id }}'
                    },

                    success: function(response) {
                        if (response.data && response.data.swms_meta) {
                            var swms_meta = response.data.swms_meta;

                            if (swms_meta.consultation_method) {
                                if (swms_meta.consultation_method === 'Toolbox Talk') {
                                    $('input[name="consultation_method"][value="Toolbox Talk"]').prop('checked',
                                        true);
                                    $('.step2 #consultationMethodOther').val(''); 
                                } else {
                                    $('input[name="consultation_method"][value="Other"]').prop('checked', true);
                                    $('.step2 #consultationMethodOther').val(swms_meta.consultation_method);
                                }
                            } else {
                                $('input[name="consultation_method"]').prop('checked', false);
                                $('.step2 #consultationMethodOther').val('');
                            }

                            if (swms_meta.review_frequency) {
                                var reviewFrequency = swms_meta.review_frequency;
                                $('input[name="review_frequency"][value="' + reviewFrequency + '"]').prop(
                                    'checked', true);
                            } else {
                                $('input[name="review_frequency"]').prop('checked', false);
                            }

                            if (swms_meta.recieved_date) {
                                $('.step2 #receivedDate').val(swms_meta.recieved_date);
                            } else {
                                $('.step2 #receivedDate').val(''); // Clear if not available
                            }

                            if (swms_meta.date_recieved_by_reviewer) {
                                $('.step2 #dateReceivedByReviewer').val(swms_meta.date_recieved_by_reviewer);
                            } else {
                                $('.step2 #dateReceivedByReviewer').val('');
                            }

                            // Handle is_based_on_risk if it exists
                            if (swms_meta.is_based_on_risk || swms_meta.is_based_on_risk !== undefined) {
                                $('input[name="is_based_on_risk"][value="' + swms_meta.is_based_on_risk + '"]')
                                    .prop('checked', true);
                            } else {
                                $('input[name="is_based_on_risk"]').prop('checked',
                                    false);
                            }

                            // Handle is_worker_consulted if it exists
                            if (swms_meta.is_worker_consulted !== undefined) {
                                $('input[name="worker_consultation"][value="' + swms_meta.is_worker_consulted +
                                    '"]').prop('checked', true);
                            } else {
                                $('input[name="worker_consultation"]').prop('checked',
                                    false); // Clear if not available
                            }

                            // Handle is_hsr_consulted if it exists
                            if (swms_meta.is_hsr_consulted !== undefined) {
                                $('input[name="hsr_consultation"][value="' + swms_meta.is_hsr_consulted + '"]')
                                    .prop('checked', true);
                            } else {
                                $('input[name="hsr_consultation"]').prop('checked',
                                    false); // Clear if not available
                            }
                        }

                        if (Array.isArray(response.data.GeneralNotes) && response.data.GeneralNotes.length >
                            0) {
                            $('.questions-section').show();
                            $('.swms-questions').show();
                            $('.swms-questions-answer').show();
                            renderGeneralNotes(response.data.GeneralNotes, response.data
                                .SwmsGeneralNoteAnswers);
                        } else {
                            $('.questions-section').hide();
                            $('.swms-questions').hide();
                            $('.swms-questions-answer').hide();
                        }

                    }

                });
            }

            function renderGeneralNotes(GeneralNotes, SwmsGeneralNoteAnswers) {
                var container = $('.swms-questions-answer'); // Assuming this is where you want to append the questions
                container.empty();

                GeneralNotes.forEach(function(note) {
                    // Fetch the answer by note ID, if available
                    var answer = SwmsGeneralNoteAnswers[note.id] ? SwmsGeneralNoteAnswers[note.id].answer : '';

                    // Create HTML for each note with a text input for the answer
                    let noteHtml = `
            <div class="mb-3">
                <h6><strong style="color:black">Title:</strong> ${note.title}</h6>
                <p><strong style="color:black">Description:</strong> ${note.description || ''}</p>
                <input type="text" class="form-control" id="answer-${note.id}" name="answers[${note.id}]" value="${answer}" placeholder="Write your answer here">
            </div>
        `;

                    container.append(noteHtml);
                });
            }

            function _submit() {
                loader(true);

                var _FormData = new FormData();

                _FormData.append("swms_report_id", '{{ request()->swms_report_id }}');

                var consultationMethod = $('.step2 input[name="consultation_method"]:checked').val();

                // If "Other" is selected, include the value from the input field
                if (consultationMethod === "Other") {
                    var otherConsultationMethod = $('.step2 #consultationMethodOther').val();
                    _FormData.append("consultation_method", otherConsultationMethod);
                } else {
                    _FormData.append("consultation_method", consultationMethod ||
                        "");
                }
                var reviewFrequency = $('.step2 input[name="review_frequency"]:checked').val();
                _FormData.append("review_frequency", reviewFrequency);

                var receivedDate = $('.step2 #receivedDate').val();
                _FormData.append("received_date", receivedDate);

                var dateReceivedByReviewer = $('.step2 #dateReceivedByReviewer').val();
                _FormData.append("date_received_by_reviewer", dateReceivedByReviewer);

                var isBasedOnRisk = $('.step2 input[name="is_based_on_risk"]:checked').val();
                _FormData.append("is_based_on_risk", isBasedOnRisk);

                var workerConsultation = $('.step2 input[name="worker_consultation"]:checked').val();
                _FormData.append("worker_consultation", workerConsultation);

                var hsrConsultation = $('.step2 input[name="hsr_consultation"]:checked').val();
                _FormData.append("hsr_consultation", hsrConsultation);

                var inputAnswers = {};
                $('input[name^="answers"]').each(function() {
                    var questionId = $(this).attr('name').match(/\d+/)[0];
                    inputAnswers[questionId] = $(this).val();
                });
                _FormData.append("InputAnswers", JSON.stringify(inputAnswers));

                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/swms-report-store-step2') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: _FormData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        loader(false);
                        toastr.success(response.message);
                        setTimeout(function() {
                            window.location.href = "{{ url('swms-report-list/create/3') }}/" +
                                response
                                .data.swms_report_id;
                        }, 1000);
                    },
                    error: function(response) {
                        loader(false);
                        if (response.status == 500) {
                            toastr.error("Something went wrong");
                        } else {
                            toastr.error(response.responseJSON.message);
                        }
                    }
                });
            }


            function _back() {
                window.location.href =
                    "{{ url('/') }}/swms-report-list/create/1/{{ request()->swms_report_id }}";
            }
        @endif

        @if ($step == 'step3')

            $(document).ready(function() {
                _get();
            });

            function _get() {

                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/swms-report-edit-step3') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        'swms_report_id': '{{ request()->swms_report_id }}'
                    },
                    success: function(response) {
                        
                        var swmsDevelopedBy = response.data.swmsDevelopedBy;
                        var authorised_by_list = response.data.authorised_by_list;
                        var SwmsApprovedBy = response.data.SwmsApprovedBy;
                        var SwmsReviewResponsible = response.data.SwmsReviewResponsible;
                        var SwmsMonitoringResponsible = response.data.SwmsMonitoringResponsible;
                        var SwmsComplianceResponsible = response.data.SwmsComplianceResponsible;


                        if (swmsDevelopedBy) {
                            populateDropdownAndRows(swmsDevelopedBy, authorised_by_list)

                        }
                        if (SwmsApprovedBy) {
                            ApprovedBypopulateDropdownAndRows(SwmsApprovedBy, authorised_by_list)

                        }
                        if (SwmsReviewResponsible) {
                            SwmsReviewResponsiblepopulateDropdownAndRows(SwmsReviewResponsible,
                                authorised_by_list)

                        }
                        if (SwmsMonitoringResponsible) {
                            SwmsMonitoringResponsiblepopulateDropdownAndRows(SwmsMonitoringResponsible,
                                authorised_by_list)
                        }
                        if (SwmsComplianceResponsible) {
                            SwmsComplianceResponsiblepopulateDropdownAndRows(SwmsComplianceResponsible,
                                authorised_by_list)
                        }


                    },
                    error: function(response) {

                        if (response.status == 500) {
                            console.log(response)

                            toastr.error(response.responseJSON.message);
                        } else {
                            console.log(response)
                            toastr.error(response.responseJSON.message);
                        }
                    }

                });

            }

            function _submit() {

                loader(true);

                var _FormData = new FormData();

                _FormData.append("swms_report_id", '{{ request()->swms_report_id }}');

                // developed_by
                $('.column_signature-handover-wrapper .column_signature-handover-row').each(function() {
                    var empId = $(this).find('.column_signature_handover_emp_id').val();
                    var signatureInputs = $(this).find('.column_signature_handover_signature');
                    var date = $(this).find('.column_signature_handover_date').val();

                    // Check if empId or date is undefined or empty
                    if (empId && empId !== 'undefined') {
                        _FormData.append("column_employee_id[]", empId);
                    } else {
                        console.warn("Employee ID is missing in a row");
                    }

                    if (date && date !== 'undefined') {
                        _FormData.append("column_date[]", date);
                    } else {
                        console.warn("Date is missing in a row");
                    }

                    // Loop through each signature input to get all files
                    signatureInputs.each(function(index, input) {
                        if (input.files && input.files[0]) {
                            _FormData.append("column_signature[]", input.files[0]);
                        } else {
                            _FormData.append("column_signature[]", null);
                        }
                    });
                });
                // approved by
                $('.column_approved-by-wrapper .approved-by-column-row').each(function() {
                    var approvedByEmpId = $(this).find('.columns_approved_by_emp_id').val();
                    var approvedBysignatureInputs = $(this).find('.columns_approved_by_signature');
                    var approvedBydate = $(this).find('.columns_approved_by_date').val();

                    // Check if approvedByEmpId or date is undefined or empty
                    if (approvedByEmpId && approvedByEmpId !== 'undefined') {
                        _FormData.append("columns_approved_by_emp_id[]", approvedByEmpId);
                    } else {
                        console.warn("Employee ID is missing in a row");
                    }

                    if (approvedBydate && approvedBydate !== 'undefined') {
                        _FormData.append("columns_approved_by_date[]", approvedBydate);
                    } else {
                        console.warn("Date is missing in a row");
                    }

                    // Loop through each signature input to get all files
                    approvedBysignatureInputs.each(function(index, input) {
                        if (input.files && input.files[0]) {
                            _FormData.append("columns_approved_by_signature[]", input.files[0]);
                        } else {
                            _FormData.append("columns_approved_by_signature[]", null);
                        }
                    });
                });
                // review responible
                $('.column-review-responsible-wrapper .review-responsible-column-row').each(function() {
                    var reviewResponsibleEmpId = $(this).find('.review-responsible_by_emp_id').val();
                    var reviewResponsibleSignatureInputs = $(this).find('.review-responsible_by_signature');
                    var reviewResponsibleDate = $(this).find('.review-responsible_by_date').val();

                    // Check if reviewResponsibleEmpId or date is undefined or empty
                    if (reviewResponsibleEmpId && reviewResponsibleEmpId !== 'undefined') {
                        _FormData.append("review-responsible_employee_id[]", reviewResponsibleEmpId);
                    } else {
                        console.warn("Employee ID responsible is missing in a row");
                    }

                    if (reviewResponsibleDate && reviewResponsibleDate !== 'undefined') {
                        _FormData.append("review-responsible_by_date[]", reviewResponsibleDate);
                    }

                    // Loop through each signature input to get all files
                    reviewResponsibleSignatureInputs.each(function(index, input) {
                        if (input.files && input.files[0]) {
                            _FormData.append("review-responsible_signature[]", input.files[0]);
                        } else {
                            console.warn("Signature file is missing in a row");
                        }
                    });
                });
                // Monitoring responible
                $('.column-monitoring-responsible-wrapper .monitoring-responsible-column-row').each(function() {
                    var monitoringResponsibleEmpId = $(this).find('.monitoring-responsible_by_emp_id').val();
                    var monitoringResponsibleSignatureInputs = $(this).find(
                        '.monitoring-responsible_by_signature');
                    var monitoringResponsibleDate = $(this).find('.monitoring-responsible_by_date').val();

                    if (monitoringResponsibleEmpId && monitoringResponsibleEmpId !== 'undefined') {
                        _FormData.append("monitoring-responsible_employee_id[]", monitoringResponsibleEmpId);
                    } else {
                        console.warn("Employee ID responsible is missing in a row");
                    }

                    if (monitoringResponsibleDate && monitoringResponsibleDate !== 'undefined') {
                        _FormData.append("monitoring-responsible_by_date[]", monitoringResponsibleDate);
                    } else {
                        console.warn("Date responsible is missing in a row");
                    }

                    monitoringResponsibleSignatureInputs.each(function(index, input) {
                        if (input.files && input.files[0]) {
                            _FormData.append("monitoring-responsible_signature[]", input.files[0]);
                        } else {
                            console.warn("Signature file is missing in a row");
                        }
                    });
                });
                // Compliance responsible
                $('.column-compliance-responsible-wrapper .compliance-responsible-column-row').each(function() {
                    var complianceResponsibleEmpId = $(this).find('.compliance-responsible_by_emp_id').val();
                    var complianceResponsibleSignatureInputs = $(this).find(
                        '.compliance-responsible_by_signature');
                    var complianceResponsibleDate = $(this).find('.compliance-responsible_by_date').val();

                    if (complianceResponsibleEmpId && complianceResponsibleEmpId !== 'undefined') {
                        _FormData.append("compliance-responsible_employee_id[]", complianceResponsibleEmpId);
                    } 

                    if (complianceResponsibleDate && complianceResponsibleDate !== 'undefined') {
                        _FormData.append("compliance-responsible_by_date[]", complianceResponsibleDate);
                    } else {
                        console.warn("Date responsible is missing in a row");
                    }

                    complianceResponsibleSignatureInputs.each(function(index, input) {
                        if (input.files && input.files[0]) {
                            _FormData.append("compliance-responsible_signature[]", input.files[0]);
                        } else {
                            console.warn("Signature file is missing in a row");
                        }
                    });
                });



                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/swms-report-store-step3') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: _FormData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        console.log(response)
                        loader(false);

                        toastr.success(response.message);

                        setTimeout(
                            function() {
                                window.location.href =
                                    "{{ url('/swms-report-list/create/4') }}/" + response.data
                                    .swms_report_id;
                            },
                            1000);
                    },
                    error: function(response) {
                        loader(false);
                        console.log(response)

                        if (response.status == 500) {
                            toastr.error("Something went wrong")
                        } else {
                            toastr.error(response.responseJSON.message)
                        }
                    }
                });

            }

            function _back() {
                window.location.href =
                    "{{ url('/') }}/swms-report-list/create/2/{{ request()->swms_report_id }}";
            }

            function ColumnaddMoreRow(employeeId, signature, date, wrapperClass, rowClass, empIdClass,
                signatureClass,
                dateClass, employeeNameField, signatureField, dateField, apiUrl, inspectionPlanId, name) {
                $.ajax({
                    type: "GET",
                    url: `{{ url('/api/employees-list') }}`,

                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        'inspection_plan_id': inspectionPlanId,
                        'name': name
                    },
                    success: function(response) {

             var authorised_by_list = response.data.authorised_by_list;
            
                var _html =
                    `<option value="" data-id="" data-title="">--Select an option--</option>`;
            
                for (var i = 0; i < authorised_by_list.length; i++) {

                    var empDetails = authorised_by_list[i].emp_personal_details || {};
                    var empTier = authorised_by_list[i].emp_tier || {};
                    var accessRole = authorised_by_list[i].access_role || {};
            
                    var emp_id = empDetails.emp_id ?? '';
                    var first_name = empDetails.first_name ?? '';
                    var last_name = empDetails.last_name ?? '';
                    var middle_name = empDetails.middle_name ?? '';
                    
                    var accessRoleId = accessRole.id ?? '';
                    var accessRoleTitle = accessRole.title ?? '';
                    var empTierTitle = empTier.title ?? '';
            
                    _html +=
                        `<option value="${emp_id}" data-id="${accessRoleId}" data-title="${accessRoleTitle}">${first_name} ${middle_name} ${last_name} - ${empTierTitle}</option>`;
                }

                        var newRow = `
                   <div class="row ${rowClass} align-items-center">
                        <div class="col-lg-4 col-sm-12 mb-3">
                            <label class="text-dark">Name</label>
                            <select class="form-select mt-1  ${empIdClass}" name="${employeeNameField}">
                                ${_html}
                            </select>
                        </div>
                   
                        <div class="col-lg-3 col-sm-6 mb-3">
                            <label>Date</label>
                            <input type="date" class="form-control ${dateClass}" name="${dateField}" value="${date}">
                        </div>
                        <div class="col-lg-1  col-sm-6 mb-3 d-flex ">
                            <button type="button" class=" mt-4 btn btn-danger btn-sm delete-row-button">Delete</button>
                        </div>
                    </div>`;

                        // Append the new row
                        $(`.${wrapperClass}`).append(newRow);

                        if (employeeId) {
                            $(`.${rowClass}`).last().find(`.${empIdClass}`).val(employeeId);
                        }

                        $('.delete-row-button').last().on('click', function() {
                            if ($(`.${rowClass}`).length > 1) {
                            $(this).closest(`.${rowClass}`).remove();
                            } else {
                               toastr.info('You cannot delete this last row.')
                            }
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error('Error fetching options:', error);
                        toastr.error(xhr.responseJSON.message);
                    }
                });
            }
          

            function populateDropdownAndRows(inspectionPlanSignature, authorisedByList) {
                var authorised_by_list =authorisedByList;
            
                var _html =
                    `<option value="" data-id="" data-title="">--Select Developed By--</option>`;
            
                for (var i = 0; i < authorised_by_list.length; i++) {

                    var empDetails = authorised_by_list[i].emp_personal_details || {};
                    var empTier = authorised_by_list[i].emp_tier || {};
                    var accessRole = authorised_by_list[i].access_role || {};
            
                    var emp_id = empDetails.emp_id ?? '';
                    var first_name = empDetails.first_name ?? '';
                    var last_name = empDetails.last_name ?? '';
                    var middle_name = empDetails.middle_name ?? '';
                    
                    var accessRoleId = accessRole.id ?? '';
                    var accessRoleTitle = accessRole.title ?? '';
                    var empTierTitle = empTier.title ?? '';
            
                    _html +=
                        `<option value="${emp_id}" data-id="${accessRoleId}" data-title="${accessRoleTitle}">${first_name} ${middle_name} ${last_name} - ${empTierTitle}</option>`;
                }

                $('.column_signature-handover-wrapper').empty();

                if (inspectionPlanSignature && inspectionPlanSignature.length > 0) {
                    for (var i = 0; i < inspectionPlanSignature.length; i++) {
                        var signatureData = inspectionPlanSignature[i];
                        addRow(signatureData, _html);
                    }
                } else {
                    addRow({}, _html);
                }

                function addRow(signatureData = {}, _html) {
                    var signatureImageUrl = signatureData.signature || ''; // Check if signature image exists
                    var baseUrl = window.location.origin; // Get the current base URL

                    var signatureImageHtml = '';
                    var fileInputRequired = signatureImageUrl ? '' :
                        'required'; // Make input required if no image exists

                    if (signatureImageUrl) {
                        signatureImageHtml = `
                    <div class="col-lg-4 col-sm-6 mb-3 ">
                        <label class="text-dark">Signature Image</label>
                        <a href="${baseUrl}/${signatureImageUrl}" target="_blank">
                            <img src="${baseUrl}/${signatureImageUrl}" alt="Signature Image loading..." class="img-thumbnail " style="max-width:250px;max-height:100px !important" >
                        </a>
                    </div>`;
                  
                    }
                    var newRow = `
                <div class="row column_signature-handover-row align-items-center">
                    <div class="col-lg-4 col-sm-12 mb-3">
                        <label class="text-dark">Name</label>
                        <select class="form-select mt-1 column_signature_handover_emp_id" name="column_employee_id[]">
                            ${_html}
                        </select>
                    </div>
                 
                    ${signatureImageHtml} 
                    <div class="col-lg-3 col-sm-6 mb-3">
                        <label>Date</label>
                        <input type="date" class="form-control column_signature_handover_date" name="column_date[]" value="${signatureData.date || ''}">
                    </div>
                    <div class="col-lg-1  mt-4 col-sm-6 mb-3">
                        <button type="submit" class="btn btn-danger btn-sm delete-signature-row" data-id="${signatureData.id || ''}">
                            Delete
                        </button>
                    </div>
                </div>`;

                        $('.column_signature-handover-wrapper').append(newRow);
                        $('.column_signature-handover-wrapper .column_signature-handover-row')
                            .last().find('.column_signature_handover_emp_id').val(signatureData.employee_id || '');

                        // Handle the file input click
                        $('.column_signature_handover_signature').on('click', function() {
                            var signatureId = $(this).data('existing-signature');
                            if (signatureId) {
                                $(this).val(''); // Clear file input value to allow re-upload
                            }
                        });
                }
            }
            $(document).on('click', '.delete-signature-row', function() {
                const DevelopedById = $(this).data('id');
                const rowToDelete = $(this).closest('.column_signature-handover-row');
                    console.log('DevelopedById:',DevelopedById)
                if (DevelopedById) {
                    $.ajax({
                        url: `{{ url('/api/swms-report-delete-developed-by-step3/${DevelopedById}') }}`,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        success: function(result) {
                            _get()
                            toastr.success(result.message);
                            rowToDelete.remove();
                        },
                        error: function(err) {
                            toastr.error('Error deleting signature.');
                        }
                    });
                } else {
                    rowToDelete.remove();
                }
            });

            // Approved by
            function ApprovedBypopulateDropdownAndRows(approvedByData, authorisedByList) {
             var authorised_by_list =authorisedByList;
            
                var _html =
                    `<option value="" data-id="" data-title="">--Select Approved By--</option>`;
            
                for (var i = 0; i < authorised_by_list.length; i++) {

                    var empDetails = authorised_by_list[i].emp_personal_details || {};
                    var empTier = authorised_by_list[i].emp_tier || {};
                    var accessRole = authorised_by_list[i].access_role || {};
            
                    var emp_id = empDetails.emp_id ?? '';
                    var first_name = empDetails.first_name ?? '';
                    var last_name = empDetails.last_name ?? '';
                    var middle_name = empDetails.middle_name ?? '';
                    
                    var accessRoleId = accessRole.id ?? '';
                    var accessRoleTitle = accessRole.title ?? '';
                    var empTierTitle = empTier.title ?? '';
            
                    _html +=
                        `<option value="${emp_id}" data-id="${accessRoleId}" data-title="${accessRoleTitle}">${first_name} ${middle_name} ${last_name} - ${empTierTitle}</option>`;
                }

                $('.column_approved-by-wrapper').empty();

                if (approvedByData && approvedByData.length > 0) {
                    for (var i = 0; i < approvedByData.length; i++) {
                        var approvalData = approvedByData[i];
                        addRow(approvalData, _html);
                    }
                } else {
                    addRow({}, _html);
                }

                function addRow(approvalData = {}, _html) {
                    var signatureImageUrl = approvalData.signature || ''; 
                    var baseUrl = window.location.origin;

                    var signatureImageHtml = '';
                    var fileInputRequired = signatureImageUrl ? '' :
                        'required'; // Make input required if no image exists

                    if (signatureImageUrl) {
                        signatureImageHtml = `
                            <div class="col-lg-4 col-sm-6 mb-3">
                                <label class="text-dark">Signature Image</label>
                                <a href="${baseUrl}/${signatureImageUrl}" target="_blank">
                                    <img src="${baseUrl}/${signatureImageUrl}" alt="Signature Image loading..." class="img-thumbnail img-fluid" style="max-width:180px;max-height:100px !important">
                                </a>
                            </div>`;
                                      
                                    }

                                    var newRow = `
                        <div class="row approved-by-column-row align-items-center">
                            <div class="col-lg-4 col-sm-12 mb-3">
                                <label class="text-dark">Name</label>
                                <select class="form-select mt-1 columns_approved_by_emp_id" name="columns_approved_by_emp_id[]">
                                    ${_html}
                                </select>
                            </div>

                            ${signatureImageHtml}
                            <div class="col-lg-3 col-sm-6 mb-3">
                                <label>Date</label>
                                <input type="date" class="form-control columns_approved_by_date" name="columns_approved_by_date[]" value="${approvalData.date || ''}">
                            </div>
                            <div class="col-lg-1 col-sm-6 mb-3">
                                <button type="submit" class="btn btn-danger btn-sm delete-approved-row" data-id="${approvalData.id || ''}">
                                    Delete
                                </button>
                            </div>
                        </div>`;


                    $('.column_approved-by-wrapper').append(newRow);
                    $('.column_approved-by-wrapper .approved-by-column-row')
                        .last().find('.columns_approved_by_emp_id').val(approvalData.employee_id || '');

                    // Handle the file input click
                    $('.columns_approved_by_signature').on('click', function() {
                        var signatureId = $(this).data('existing-signature');
                        if (signatureId) {
                            $(this).val(''); // Clear file input value to allow re-upload
                        }
                    });
                }
            }
            $(document).on('click', '.delete-approved-row', function() {
                const DevelopedById = $(this).data('id');
                const rowToDelete = $(this).closest('.approved-by-column-row');

                if (DevelopedById) {
                    $.ajax({
                        url: `{{ url('/api/swms-report-delete-approved-by-step3/${DevelopedById}') }}`,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        success: function(result) {
                            _get()
                            toastr.success(result.message);
                            rowToDelete.remove();
                        },
                        error: function(err) {
                            toastr.error('Error deleting signature.');
                        }
                    });
                } else {
                    rowToDelete.remove();
                }
            });
            // Review by
            function SwmsReviewResponsiblepopulateDropdownAndRows(reviewResponsibleData, authorisedByList) {
                 var authorised_by_list =authorisedByList;
            
                var _html =
                        `<option value="" data-id="" data-title="">--Select Review Responsible --</option>`;
            
                for (var i = 0; i < authorised_by_list.length; i++) {

                    var empDetails = authorised_by_list[i].emp_personal_details || {};
                    var empTier = authorised_by_list[i].emp_tier || {};
                    var accessRole = authorised_by_list[i].access_role || {};
            
                    var emp_id = empDetails.emp_id ?? '';
                    var first_name = empDetails.first_name ?? '';
                    var last_name = empDetails.last_name ?? '';
                    var middle_name = empDetails.middle_name ?? '';
                    
                    var accessRoleId = accessRole.id ?? '';
                    var accessRoleTitle = accessRole.title ?? '';
                    var empTierTitle = empTier.title ?? '';
            
                    _html +=
                        `<option value="${emp_id}" data-id="${accessRoleId}" data-title="${accessRoleTitle}">${first_name} ${middle_name} ${last_name} - ${empTierTitle}</option>`;
                }

                $('.column-review-responsible-wrapper').empty();

                if (reviewResponsibleData && reviewResponsibleData.length > 0) {
                    for (var i = 0; i < reviewResponsibleData.length; i++) {
                        var reviewResponsible = reviewResponsibleData[i];
                        addRow(reviewResponsible, _html);
                    }
                } else {
                    addRow({}, _html);
                }

                function addRow(reviewResponsible = {}, _html) {
                    var signatureImageUrl = reviewResponsible.signature || ''; // Check if signature image exists
                    var baseUrl = window.location.origin; // Get the current base URL

                    var signatureImageHtml = '';
                    var fileInputRequired = signatureImageUrl ? '' :
                        'required'; // Make input required if no image exists

                    if (signatureImageUrl) {
                        signatureImageHtml = `
                            <div class="col-lg-4 col-sm-6 mb-3">
                                <label class="text-dark">Signature Image</label>
                                <a href="${baseUrl}/${signatureImageUrl}" target="_blank">
                                    <img src="${baseUrl}/${signatureImageUrl}" alt="Signature Image loading..." class="img-thumbnail img-fluid" style="max-width:180px;max-height:100px !important">
                                </a>
                            </div>`;
                                      
                                    }

                                    var newRow = `
                        <div class="row review-responsible-column-row align-items-center">
                            <div class="col-lg-4 col-sm-12 mb-3">
                                <label class="text-dark">Name</label>
                                <select class="form-select mt-1 review-responsible_by_emp_id" name="review-responsible_employee_id[]">
                                    ${_html}
                                </select>
                            </div>
                            ${signatureImageHtml}
                            <div class="col-lg-3 col-sm-6 mb-3">
                                <label>Date</label>
                                <input type="date" class="form-control review-responsible_by_date" name="review-responsible_date[]" value="${reviewResponsible.date || ''}">
                            </div>
                            <div class="col-lg-1 col-sm-6 mb-3">
                                <button type="submit" class="btn btn-danger btn-sm delete-review-responsible-row" data-id="${reviewResponsible.id || ''}">
                                    Delete
                                </button>
                            </div>
                        </div>`;

                    $('.column-review-responsible-wrapper').append(newRow);
                    $('.column-review-responsible-wrapper .review-responsible-column-row')
                        .last().find('.review-responsible_by_emp_id').val(reviewResponsible.employee_id || '');

                    $('.review-responsible_by_signature').on('click', function() {
                        var signatureId = $(this).data('existing-signature');
                        if (signatureId) {
                            $(this).val('');
                        }
                    });
                }
            }
            $(document).on('click', '.delete-review-responsible-row', function() {
                const DevelopedById = $(this).data('id');
                const rowToDelete = $(this).closest('.review-responsible-column-row');

                if (DevelopedById) {
                    $.ajax({
                        url: `{{ url('/api/swms-report-delete-review-responsible-step3/${DevelopedById}') }}`,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        success: function(result) {
                            _get()
                            toastr.success(result.message);
                            rowToDelete.remove();
                        },
                        error: function(err) {
                            toastr.error('Error deleting signature.');
                        }
                    });
                } else {
                    rowToDelete.remove();
                }
            });
            // monitoring responsible
            function SwmsMonitoringResponsiblepopulateDropdownAndRows(monitoringResponsibleData, authorisedByList) {
               var authorised_by_list =authorisedByList;
            
                var _html =
                        `<option value="" data-id="" data-title="">--Select Monitoring Responsible --</option>`;
            
                for (var i = 0; i < authorised_by_list.length; i++) {

                    var empDetails = authorised_by_list[i].emp_personal_details || {};
                    var empTier = authorised_by_list[i].emp_tier || {};
                    var accessRole = authorised_by_list[i].access_role || {};
            
                    var emp_id = empDetails.emp_id ?? '';
                    var first_name = empDetails.first_name ?? '';
                    var last_name = empDetails.last_name ?? '';
                    var middle_name = empDetails.middle_name ?? '';
                    
                    var accessRoleId = accessRole.id ?? '';
                    var accessRoleTitle = accessRole.title ?? '';
                    var empTierTitle = empTier.title ?? '';
            
                    _html +=
                        `<option value="${emp_id}" data-id="${accessRoleId}" data-title="${accessRoleTitle}">${first_name} ${middle_name} ${last_name} - ${empTierTitle}</option>`;
                }

                $('.column-monitoring-responsible-wrapper').empty();

                if (monitoringResponsibleData && monitoringResponsibleData.length > 0) {
                    for (var i = 0; i < monitoringResponsibleData.length; i++) {
                        var monitoringResponsible = monitoringResponsibleData[i];
                        addRow(monitoringResponsible, _html);
                    }
                } else {
                    addRow({}, _html);
                }

                function addRow(monitoringResponsible = {}, _html) {
                    var signatureImageUrl = monitoringResponsible.signature || ''; // Check if signature image exists
                    var baseUrl = window.location.origin; // Get the current base URL

                    var signatureImageHtml = '';
                    var fileInputRequired = signatureImageUrl ? '' :
                        'required'; // Make input required if no image exists

                    if (signatureImageUrl) {
                        signatureImageHtml = `
                            <div class="col-lg-4 col-sm-6 mb-3">
                                <label class="text-dark">Signature Image</label>
                                <a href="${baseUrl}/${signatureImageUrl}" target="_blank">
                                    <img src="${baseUrl}/${signatureImageUrl}" alt="Signature Image loading..." class="img-thumbnail img-fluid" style="max-width:180px;max-height:100px !important">
                                </a>
                            </div>`;
                                      
                    }


                                    var newRow = `
                        <div class="row monitoring-responsible-column-row align-items-center">
                            <div class="col-lg-4 col-sm-12 mb-3">
                                <label class="text-dark">Name</label>
                                <select class="form-select mt-1 monitoring-responsible_by_emp_id" name="monitoring-responsible_employee_id[]">
                                    ${_html}
                                </select>
                            </div>
                            ${signatureImageHtml}
                            <div class="col-lg-3 col-sm-6 mb-3">
                                <label>Date</label>
                                <input type="date" class="form-control monitoring-responsible_by_date" name="monitoring-responsible_date[]" value="${monitoringResponsible.date || ''}">
                            </div>
                            <div class="col-lg-1 col-sm-6 mb-3">
                                <button type="submit" class="btn btn-danger btn-sm delete-monitoring-responsible-row" data-id="${monitoringResponsible.id || ''}">
                                    Delete
                                </button>
                            </div>
                        </div>`;
                    $('.column-monitoring-responsible-wrapper').append(newRow);
                    $('.column-monitoring-responsible-wrapper .monitoring-responsible-column-row')
                        .last().find('.monitoring-responsible_by_emp_id').val(monitoringResponsible.employee_id || '');

                    // Handle the file input click
                    $('.monitoring-responsible_by_signature').on('click', function() {
                        var signatureId = $(this).data('existing-signature');
                        if (signatureId) {
                            $(this).val(''); // Clear file input value to allow re-upload
                        }
                    });
                }
            }
            $(document).on('click', '.delete-monitoring-responsible-row', function() {
                const DevelopedById = $(this).data('id');
                const rowToDelete = $(this).closest('.monitoring-responsible-column-row');

                if (DevelopedById) {
                    $.ajax({
                        url: `{{ url('/api/swms-report-delete-monitring-responsible-step3/${DevelopedById}') }}`,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        success: function(result) {
                            _get()
                            toastr.success(result.message);
                            rowToDelete.remove();
                        },
                        error: function(err) {
                            toastr.error('Error deleting signature.');
                        }
                    });
                } else {
                    rowToDelete.remove();
                }
            });
            function SwmsComplianceResponsiblepopulateDropdownAndRows(complianceResponsibleData, authorisedByList) {
                var authorised_by_list =authorisedByList;
            
                var _html =
                        `<option value="" data-id="" data-title="">--Select Monitoring Responsible --</option>`;
            
                for (var i = 0; i < authorised_by_list.length; i++) {

                    var empDetails = authorised_by_list[i].emp_personal_details || {};
                    var empTier = authorised_by_list[i].emp_tier || {};
                    var accessRole = authorised_by_list[i].access_role || {};
            
                    var emp_id = empDetails.emp_id ?? '';
                    var first_name = empDetails.first_name ?? '';
                    var last_name = empDetails.last_name ?? '';
                    var middle_name = empDetails.middle_name ?? '';
                    
                    var accessRoleId = accessRole.id ?? '';
                    var accessRoleTitle = accessRole.title ?? '';
                    var empTierTitle = empTier.title ?? '';
            
                    _html +=
                        `<option value="${emp_id}" data-id="${accessRoleId}" data-title="${accessRoleTitle}">${first_name} ${middle_name} ${last_name} - ${empTierTitle}</option>`;
                }

                $('.column-compliance-responsible-wrapper').empty();

                if (complianceResponsibleData && complianceResponsibleData.length > 0) {
                    for (var i = 0; i < complianceResponsibleData.length; i++) {
                        var complianceResponsible = complianceResponsibleData[i];
                        addComplianceRow(complianceResponsible, _html);
                    }
                } else {
                    addComplianceRow({}, _html);
                }

                function addComplianceRow(complianceResponsible = {}, _html) {
                    var signatureImageUrl = complianceResponsible.signature || ''; // Check if signature image exists
                    var baseUrl = window.location.origin; // Get the current base URL

                    var signatureImageHtml = '';
                    var fileInputRequired = signatureImageUrl ? '' :
                        'required'; // Make input required if no image exists

                    if (signatureImageUrl) {
                        signatureImageHtml = `
            <div class="col-lg-4 col-sm-6 mb-3">
                <label class="text-dark">Signature Image</label>
                <a href="${baseUrl}/${signatureImageUrl}" target="_blank">
                    <img src="${baseUrl}/${signatureImageUrl}" alt="Signature Image loading..." class="img-thumbnail img-fluid" style="max-width:180px;max-height:100px !important">
                </a>
            </div>`;
                     
                    }

                     var newRow = `
                    <div class="row compliance-responsible-column-row align-items-center">
                        <div class="col-lg-4 col-sm-12 mb-3">
                            <label class="text-dark">Name</label>
                            <select class="form-select mt-1 compliance-responsible_by_emp_id" name="compliance-responsible_employee_id[]">
                                ${_html}
                            </select>
                        </div>
                   ${signatureImageHtml}
                    <div class="col-lg-3 col-sm-6 mb-3">
                        <label>Date</label>
                        <input type="date" class="form-control compliance-responsible_by_date" name="compliance-responsible_date[]" value="${complianceResponsible.date || ''}">
                    </div>
                    <div class="col-lg-1 col-sm-6 mb-3">
                        <button type="submit" class="btn btn-danger btn-sm delete-compliance-responsible-row" data-id="${complianceResponsible.id || ''}">
                            Delete
                        </button>
                    </div>
                </div>`;

                    $('.column-compliance-responsible-wrapper').append(newRow);
                    $('.column-compliance-responsible-wrapper .compliance-responsible-column-row')
                        .last().find('.compliance-responsible_by_emp_id').val(complianceResponsible.employee_id || '');

                    // Handle the file input click
                    $('.compliance-responsible_by_signature').on('click', function() {
                        var signatureId = $(this).data('existing-signature');
                        if (signatureId) {
                            $(this).val(''); // Clear file input value to allow re-upload
                        }
                    });
                }
            }

            $(document).on('click', '.delete-compliance-responsible-row', function() {
                const DevelopedById = $(this).data('id');
                const rowToDelete = $(this).closest('.compliance-responsible-column-row');

                if (DevelopedById) {
                    $.ajax({
                        url: `{{ url('/api/swms-report-delete-compliance-responsible-step3/${DevelopedById}') }}`,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        success: function(result) {
                            _get();
                            toastr.success(result.message);
                            rowToDelete.remove();
                        },
                        error: function(err) {
                            toastr.error('Error deleting signature.');
                        }
                    });
                } else {
                    rowToDelete.remove();
                }
            });
        @endif

        @if ($step == 'step4')
            $(document).ready(function() {
                _get();
            });

            function _get() {

                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/swms-report-edit-step4') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        'swms_report_id': '{{ request()->swms_report_id }}'
                    },
                    success: function(response) {
                        var SwmsTaskDetail = response.data.SwmsTaskDetail;
                        var responsible_person_list = response.data.responsible_person_list;
                        console.log("responsible_person_list:",responsible_person_list)
                        console.log("SwmsTaskDetail:",SwmsTaskDetail)

                        if (SwmsTaskDetail) {
                            populateDropdownAndRows(SwmsTaskDetail, responsible_person_list)

                        }

                    },
                    error: function(response) {

                        if (response.status == 500) {
                            console.log(response)

                            toastr.error(response.responseJSON.message);
                        } else {
                            console.log(response)
                            toastr.error(response.responseJSON.message);
                        }
                    }

                });

            }

            function collectTaskDetails() {
                var responsiblePersonIds = collectResponsiblePersonIds(); 
                var imageFiles = collectImageFiles();
                    var _FormData = new FormData();
                    
                    responsiblePersonIds.forEach(function(id) {
                        _FormData.append('responsible_person_ids[]', id);
                    });

                   $('.column-task-details-wrapper .column-task-details-row').each(function(index) {
                    var taskDetailId = $(this).find('.column_task_detail_id').val();
                    if (taskDetailId) {
                        _FormData.append("column_task_detail_id[]", taskDetailId);
                    }

                    var jobTask = $(this).find('.column_job_task').val();
                    var risk = $(this).find('.column_risk').val();
                    var initialRiskRating = $(this).find('.column_initial_risk_rating').val();
                    var hazard = $(this).find('.column_hazard').val();
                    var controlRiskRating = $(this).find('.column_control_risk_rating').val() || '';
                    var controlMeasure = $(this).find('.control_measure').val();
                    var finalRiskRating = $(this).find('.column_final_risk_rating').val();

                   

                 
                    if (jobTask) _FormData.append("column_job_task[]", jobTask);
                    if (risk) _FormData.append("column_risk[]", risk);
                    if (initialRiskRating) _FormData.append("column_initial_risk_rating[]", initialRiskRating);
                    if (hazard) _FormData.append("column_hazard[]", hazard);
                    if (controlRiskRating) _FormData.append("column_control_risk_rating[]", controlRiskRating);
                    if (controlMeasure) _FormData.append("control_measure[]", controlMeasure);
                    if (finalRiskRating) _FormData.append("column_final_risk_rating[]", finalRiskRating);

                    imageFiles.forEach(function(file) {
                            _FormData.append('column_task_details_image[]', file);
                        });
                });

                // Debugging: Check all appended values to verify correct collection
                console.log('FormData Entries:', Array.from(_FormData.entries()));

                return _FormData;
            }
            function _submit() {

                loader(true);
                const _FormData = collectTaskDetails();
                _FormData.append("swms_report_id", '{{ request()->swms_report_id }}');


                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/swms-report-store-step4') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: _FormData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        console.log(response)
                        loader(false);

                        toastr.success(response.message);
                        setTimeout(
                            function() {
                                window.location.href =
                                    "{{ url('/swms-report-list/create/5') }}/" + response.data
                                    .swms_report_id;
                            },
                            1000);
                    },
                    error: function(response) {
                        loader(false);
                        console.log(response)

                        if (response.status == 500) {
                            toastr.error("Something went wrong")
                        } else {
                            toastr.error(response.responseJSON.message)
                        }
                    }
                });

            }

            function populateDropdownAndRows(taskDetails, responsible_person_list) {
                   var _html = `<option value="" data-id="" data-title="">--Select Responsible Person--</option>`;

                    for (var i = 0; i < responsible_person_list.length; i++) {
                        var personalDetails = responsible_person_list[i].emp_personal_details || {};
                        var empTier = responsible_person_list[i].emp_tier || {};
                        var accessRole = responsible_person_list[i].access_role || {};
                
                        var emp_id = personalDetails.emp_id ?? '';
                        var first_name = personalDetails.first_name ?? '';
                        var last_name = personalDetails.last_name ?? '';
                        var middle_name = personalDetails.middle_name ?? '';
                        
                        var accessRoleId = accessRole.id ?? '';
                        var accessRoleTitle = accessRole.title ?? '';
                        var empTierTitle = empTier.title ?? '';
                
                        _html += `
                            <option value="${emp_id}" data-id="${accessRoleId}" data-title="${accessRoleTitle}">
                                ${first_name} ${middle_name} ${last_name} - ${empTierTitle}
                            </option>`;
                    }

                   $('.column-task-details-wrapper').empty();

                    if (taskDetails && taskDetails.length > 0) {
                        for (var i = 0; i < taskDetails.length; i++) {
                            var taskDetail = taskDetails[i];
                            addRow(taskDetail, _html);
                        }
                    } else {
                        addRow({}, _html);
                    }
            }

            function addRow(taskDetail = {}, dropdownHtml) {
                var imageUrl = taskDetail.image || '';
                var baseUrl = window.location.origin;
                var responsiblePersonId = taskDetail.responsible_preson_id || '';
                var optionsHtml = dropdownHtml.split('</option>').map(option => {
                    if (option.includes(`value="${responsiblePersonId}"`)) {
                        return option.replace(`value="${responsiblePersonId}"`,
                        `value="${responsiblePersonId}" selected`);
                    }
                    return option;
                }).join('</option>');
                var imageHtml = imageUrl ? `
                <div class="col-lg-6 col-sm-12 mb-3">
                    <label class="text-dark">Image</label>
                    <a href="${baseUrl}/${imageUrl}" target="_blank">
                        <img src="${baseUrl}/${imageUrl}" alt="Image loading..." class="img-thumbnail img-fluid rounded-3" style="max-width:180px;max-height:100px !important">
                    </a>
                </div>` : `
                <div class="col-lg-6 col-sm-12 mb-3">
                    <label>Upload Image</label>
                    <input type="file" class="form-control column_task_details_image" name="column_task_details_image[]">
                </div>`;

                var newRow = `
                <div class="row column-task-details-row align-items-center">
                    <input type="hidden" class="form-control column_task_detail_id" name="column_task_detail_id[]" value="${taskDetail.id || ''}">
                    <div class="col-lg-6 col-sm-12 mb-3">
                        <label>Job Task</label>
                        <input type="text" class="form-control column_job_task" name="column_job_task[]" value="${taskDetail.job_task || ''}">
                    </div>
        
                        ${imageHtml}
                        <div class="col-lg-6 col-sm-12 mb-3">
                            <label>Risk </label>
                            <input type="text" class="form-control column_risk" name="column_risk[]" value="${taskDetail.risk || ''}">
                        </div>
                        <div class="col-lg-6 col-sm-12 mb-3">
                            <label>Hazard</label>
                            <input type="text" class="form-control column_hazard" name="column_hazard[]" value="${taskDetail.hazard || ''}">
                        </div>

                        <div class="col-lg-6 col-sm-12 mb-3">
                            <label>Initial Risk Rating</label>
                            <input type="number" class="form-control column_initial_risk_rating" name="column_initial_risk_rating[]" value="${taskDetail.initial_risk_rating || ''}">
                        </div>

                        <div class="col-lg-6 col-sm-12 mb-3">
                            <label>Final Risk Rating</label>
                            <input type="number" class="form-control column_final_risk_rating" name="column_final_risk_rating[]" value="${taskDetail.final_risk_ratting || ''}">
                        </div>
                        <div class="col-lg-6 col-sm-12 mb-3">
                            <label>Control Risk Rating</label>
                            <input type="number" class="form-control column_control_risk_rating" name="column_control_risk_rating[]" value="${taskDetail.controle_risk_ratting || ''}">
                        </div>
                            
                        <div class="col-lg-6 col-sm-12 mb-3">
                            <label class="text-dark">Responsible Person</label>
                            <select class="form-select mt-1  column_task_details_responsible_id" name="column_task_details_responsible_id[]">
                                ${optionsHtml}
                            </select>
                        </div>

                        <div class="col-lg-11 col-sm-12 mb-3">
                            <label>Control Measure</label>
                            <textarea class="form-control control_measure" name="control_measure[]" rows="2">${taskDetail.control_measure || ''}</textarea>
                        </div>

                        <div class="col-lg-1 mt-5 col-sm-12 mb-3">
                            <button type="button" class="btn btn-danger btn-sm delete-row-button" data-id="${taskDetail.id || ''}">
                                Delete
                            </button>
                        </div>
                    </div>`;
                $('.column-task-details-wrapper').append(newRow);

                // Handle delete button click
                $('.delete-row-button').last().on('click', function() {
                    $(this).closest('.column-task-details-row').remove();
                });
            }

            function collectImageFiles() {
                    var imageFiles = [];
                    
                        $('.column-task-details-row').each(function() {
                            var imageInput = $(this).find('.column_task_details_image')[0]; 
                            if (imageInput && imageInput.files.length > 0) {
                                for (var i = 0; i < imageInput.files.length; i++) {
                                    imageFiles.push(imageInput.files[i]);
                                }
                            }
                        });
                        console.log("All Image Files: ", imageFiles);
                        
                        return imageFiles;
        }

            function ColumnaddMoreRow(employeeId, signature, date, wrapperClass, rowClass,
                empIdClass, imageClass, dateClass, employeeNameField, imageField, dateField,
                apiUrl, inspectionPlanId, name) {

                $.ajax({
                    type: "GET",
                    url: `{{ url('/api/employees-list') }}`,
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        'inspection_plan_id': inspectionPlanId,
                        'name': name
                    },
                    success: function(response) {
                         var authorisedByList = response.data.authorised_by_list;
                            var _html = `<option value="" data-id="" data-title="">--Select Responsible Person--</option>`;

                            for (var i = 0; i < authorisedByList.length; i++) {
                                var personalDetails = authorisedByList[i].emp_personal_details || {};
                                var empTier = authorisedByList[i].emp_tier || {};
                                var accessRole = authorisedByList[i].access_role || {};

                                var emp_id = personalDetails.emp_id ?? '';
                                var first_name = personalDetails.first_name ?? '';
                                var last_name = personalDetails.last_name ?? '';
                                var middle_name = personalDetails.middle_name ?? '';

                                var accessRoleId = accessRole.id ?? '';
                                var accessRoleTitle = accessRole.title ?? '';
                                var empTierTitle = empTier.title ?? '';

                                _html += `
                                    <option value="${emp_id}" data-id="${accessRoleId}" data-title="${accessRoleTitle}">
                                        ${first_name} ${middle_name} ${last_name} - ${empTierTitle}
                                    </option>`;
                            }

                        var newRow = `
                  <div class="${rowClass} row align-items-center">
                                <div class="col-lg-6 col-sm-12 mb-3">
                                    <label>Job Task </label>
                                    <input type="text" class="form-control column_job_task" name="column_job_task[]" value="">
                                </div>
                                <div class="col-lg-6 col-sm-12 mb-3">
                                    <label>Image </label>
                                    <input type="file" class="form-control column_task_details_image " name="column_task_details_image[]" value="">
                                </div>
                                <div class="col-lg-6 col-sm-12 mb-3">
                                    <label>Risk </label>
                                    <input type="text" class="form-control column_risk" name="column_risk[]" value="">
                                </div>
                                <div class="col-lg-6 col-sm-12 mb-3">
                                    <label>Hazard</label>
                                    <input type="text" class="form-control column_hazard" name="column_hazard[]" value="">
                                </div>
                                <div class="col-lg-6 col-sm-12 mb-3">
                                    <label>Initial Risk Rating</label>
                                    <input type="number" class="form-control column_initial_risk_rating" name="column_initial_risk_rating[]" value="">
                                </div>
                                <div class="col-lg-6 col-sm-12 mb-3">
                                    <label>Final Risk Rating </label>
                                    <input type="number" class="form-control column_final_risk_rating" name="column_final_risk_rating[]" value="">
                                </div>
                        
                                
                                <div class="col-lg-6 col-sm-12 mb-3">
                                    <label>Control Risk Rating </label>
                                    <input type="number" class="form-control column_control_risk_rating" name="column_control_risk_rating[]" value="">
                                </div>
                            
                                <div class="col-lg-6 col-sm-12 mb-3">
                                    <label>Responsible Person </label>
                                    <select class="form-select mt-1   column_task_details_responsible_id ${empIdClass}" name="column_task_details_responsible_id[]">
                                        ${_html}
                                    </select>
                                </div>
                                <div class="col-lg-11 col-sm-12 mb-3">
                                    <label>Control Measure</label>
                                    <textarea class="form-control control_measure" name="control_measure[]" rows="2"></textarea>
                                </div>
                                <div class="col-lg-1  mt-5  col-sm-12 mb-3 d-flex justify-content-end">
                                    <button type="button" class="px-1    btn btn-danger btn-sm delete-row-button">Delete</button>
                                </div>
                            </div>
                        `;

                        // Append the new row
                        $(`.${wrapperClass}`).append(newRow);

                        // Set the selected employee if employeeId is provided
                        if (employeeId) {
                            $(`.${rowClass}`).last().find(`.${empIdClass}`).val(employeeId);
                        }

                        // Handle delete button click
                        $('.delete-row-button').last().on('click', function() {
                            if ($(`.${rowClass}`).length > 1) {
                                $(this).closest(`.${rowClass}`).remove();
                            } else {
                                alert('You cannot delete the first row.');
                            }
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error('Error fetching options:', error);
                        toastr.error(xhr.responseJSON.message);
                    }
                });
            }

            function collectResponsiblePersonIds() {
                var responsiblePersonIds = [];
                $('.column-task-details-row').each(function() {
                    var responsiblePersonId = $(this).find('.column_task_details_responsible_id').val();
                    if (responsiblePersonId) {
                        responsiblePersonIds.push(responsiblePersonId); 
                    }
                });
                
                // Log the collected responsible person IDs
                console.log("All Responsible Person IDs: ", responsiblePersonIds);
                
                return responsiblePersonIds;
            }
            $(document).on('click', '.delete-row-button', function() {
                const taskDetailId = $(this).data('id');
                const rowToDelete = $(this).closest(
                    '.column-task-details-row');

                if (taskDetailId) {
                    $.ajax({
                        url: `/api/swms-report-delete-task-details-step3/${taskDetailId}`,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        success: function(result) {
                            toastr.success(result.message);
                            rowToDelete.remove();
                        },
                        error: function(err) {
                            toastr.error('Error deleting record.'); 
                        }
                    });
                } else {
                    rowToDelete.remove();
                }
            });

            function _back() {
                window.location.href =
                    "{{ url('/') }}/swms-report-list/create/3/{{ request()->swms_report_id }}";
            }
        @endif


        @if ($step == 'step5')

            $(document).ready(function() {
                _get();
            });

            function _get() {
                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/swms-report-edit-step5') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        'swms_report_id': '{{ request()->swms_report_id }}'
                    },
                    success: function(response) {

                        if (response.data && response.data.HazardRisk.length > 0) {
                            renderHazardRisks(response.data.HazardRisk, response.data
                                .selectedHazardRiskIds);
                        } else {
                            $('.hazard-risk-title').hide();
                            // toastr.info('Please create Hazrd Risk in settings if required')

                        }
                        if (response.data && response.data.HazardRisk) {
                            protectionToolPivot(response.data.SwmsProtectionTool, response.data
                                .SwmsProtectionToolPivotSelectedIds)
                        }
                        if (response.data && Array.isArray(response.data.SwmsQuestions) && response.data
                            .SwmsQuestions.length > 0) {
                            $('.questions-section').show();
                            $('.swms-questions').show();
                            $('.swms-questions-answer').show();

                            renderQuestionsAndAnswers(response.data.SwmsQuestions, response.data
                                .SwmsAwnswers);
                        } else {
                            $('.questions-section').hide();
                            $('.swms-questions').hide();
                            $('.swms-questions-answer').hide();
                            // toastr.info('Please create Protection tools in settings if required')
                        }
                    },
                    error: function(response) {
                        if (response.status == 500) {
                            toastr.error("Something went wrong")
                        } else {
                            toastr.error(response.responseJSON.message)
                        }
                    }
                });
            }

            function renderHazardRisks(hazardRisks, selectedHazardRiskIds) {
                var tbody = $('table tbody');
                tbody.empty();

                // Extract IDs from the selected hazard risks to an array for easy comparison
                var selectedIds = selectedHazardRiskIds.map(function(item) {
                    return item.hazard_risks_id; // Assuming hazard_risk_id is the column containing the IDs
                });

                for (let i = 0; i < hazardRisks.length; i += 2) {
                    // Create a new row
                    let row = '<tr>';

                    // Add the first hazard risk in the pair
                    row += `
        <td>
            <span class="form-check">
                <input type="checkbox" class="form-check-input" id="hazard-${hazardRisks[i].id}" name="hazard_risk[]" value="${hazardRisks[i].id}" ${selectedIds.includes(hazardRisks[i].id) ? 'checked' : ''}>
                <label class="form-check-label" for="hazard-${hazardRisks[i].id}">${hazardRisks[i].title}</label>
            </span>
        </td>`;

                    // Check if there is a second hazard risk in the pair, and add it if available
                    if (i + 1 < hazardRisks.length) {
                        row += `
            <td>
                <span class="form-check">
                    <input type="checkbox" class="form-check-input" id="hazard-${hazardRisks[i + 1].id}" name="hazard_risk[]" value="${hazardRisks[i + 1].id}" ${selectedIds.includes(hazardRisks[i + 1].id) ? 'checked' : ''}>
                    <label class="form-check-label" for="hazard-${hazardRisks[i + 1].id}">${hazardRisks[i + 1].title}</label>
                </span>
            </td>`;
                    } else {
                        // If there is no second hazard, add an empty cell to maintain the layout
                        row += '<td></td>';
                    }

                    // Close the row
                    row += '</tr>';

                    // Append the row to the tbody
                    tbody.append(row);
                }
            }

            function protectionToolPivot(protectionTools, selectedProtectionToolIds) {
                var container = $('.protection-tool-pivot');
                container.empty();

                var selectedIds = selectedProtectionToolIds.map(function(item) {
                    return item.protection_tool_id; // Adjust based on your data structure
                });

                // Loop through each protection tool and render them
                for (let i = 0; i < protectionTools.length; i += 2) {
                    // Create a new row
                    let row = '<div class="row mb-3">';

                    // Add the first protection tool in the pair
                    row += createProtectionToolHtml(protectionTools[i], selectedIds);

                    // Check if there is a second protection tool in the pair and add it if available
                    if (i + 1 < protectionTools.length) {
                        row += createProtectionToolHtml(protectionTools[i + 1], selectedIds);
                    } else {
                        row += '<div class="col-lg-6 col-sm-12"></div>';
                    }

                    // Close the row
                    row += '</div>';

                    // Append the row to the container
                    container.append(row);
                }
            }

            // Helper function to create the HTML for a protection tool
            function createProtectionToolHtml(protectionTool, selectedIds) {
                var isChecked = selectedIds.includes(protectionTool.id) ? 'checked' : '';
                var baseUrl = window.location.origin;
                var imageUrl = `${baseUrl}/${protectionTool.image}`;
                return `
                    <div class="col-lg-6 px-4 col-sm-12 mb-3">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="protection-${protectionTool.id}" name="protection_tool[]" value="${protectionTool.id}" ${isChecked}>
                            <label class="form-check-label" for="protection-${protectionTool.id}">
                                <div class="d-flex align-items-center gap-2">
                                    <div>                       
                                        <img src="${imageUrl}" alt="${protectionTool.title}" class="img-thumbnail img-fluid rounded-2" style="max-width:80px; max-height:80px;">
                                    </div>
                                
                                    <span>${protectionTool.title}</span>
                                </div>
                            </label>
                        </div>
                    </div>`;
            }

            function renderQuestionsAndAnswers(questions, answers) {
                var container = $('.swms-questions-answer'); // Assuming this is where you want to append the questions
                container.empty();

                questions.forEach(function(question) {
                    // Fetch the answer by question ID, if available
                    var answer = answers[question.id] ? answers[question.id].answer : '';

                    // Create HTML for each question with a text input for the answer
                    let questionHtml = `
                        <div class="mb-3">
                            <h6><strong style="color:black">Question:</strong>${question.question}</h6>
                            <p><strong style="color:black">Decription:</strong>${question.description || ''}</p>
                            <input type="text" class="form-control" id="answer-${question.id}" name="answers[${question.id}]" value="${answer}" placeholder="Write your answer here">
                        </div>
                    `;

                    container.append(questionHtml);
                });
            }



            function _submit() {
                loader(true);

                var _FormData = new FormData();

                _FormData.append("swms_report_id", '{{ request()->swms_report_id }}');

                // hazards
                var selectedHazards = [];
                $('input[name="hazard_risk[]"]:checked').each(function() {
                    selectedHazards.push($(this).val());
                });
                _FormData.append("selectedHazards",
                    selectedHazards);

                // protections
                var selectedPivots = [];
                $('input[name="protection_tool[]"]:checked').each(function() {
                    selectedPivots.push($(this).val());
                });
                _FormData.append("selectedPivots", selectedPivots);
                // answers questions
                // Collect answers to questions
                var inputAnswers = {};
                $('input[name^="answers"]').each(function() {
                    var questionId = $(this).attr('name').match(/\d+/)[0];
                    inputAnswers[questionId] = $(this).val();
                });
                _FormData.append("InputAnswers", JSON.stringify(inputAnswers));
                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/swms-report-store-step5') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: _FormData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        loader(false);

                        toastr.success(response.message);
                        setTimeout(function() {
                            window.location.href = "{{ url('/swms-report-list/create/6') }}/" +
                                response
                                .data.swms_report_id;
                        }, 1000);
                    },
                    error: function(response) {
                        loader(false);
                        if (response.status == 500) {
                            toastr.error("Something went wrong");
                        } else {
                            toastr.error(response.responseJSON.message);
                        }
                    }
                });
            }


            function _back() {
                window.location.href =
                    "{{ url('/') }}/swms-report-list/create/4/{{ request()->swms_report_id }}";
            }
        @endif

        @if ($step == 'step6')

            $(document).ready(function() {
                _get();
            });

            function _get() {

                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/swms-report-edit-step6') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        'swms_report_id': '{{ request()->swms_report_id }}'
                    },
                    success: function(response) {
                                if (response.data) {
                            SwmsSignaturepopulateDropdownAndRows(response.data.SwmsSignature, response.data.role);
                            if (response.data.SwmsSafetyPlanningQuestion && response.data.SwmsSafetyPlanningQuestion.length > 0) {
                                
                                $('.swms-safety-planning-questions').show();
                                $('.swms-safety-planning-questions-answer').show();
                                renderSwmsSafetyPlanningAnswers(response.data.SwmsSafetyPlanningQuestion, response.data.SwmsSafetyPlanningAnswers);
                            } else {
                                $('.swms-safety-planning-questions').hide();
                                $('.swms-questions').hide();
                                $('.swms-safety-planning-questions-answer').hide();
                        
                }
               }

                        function renderSwmsSafetyPlanningAnswers(SwmsSafetyPlanningQuestion,
                            SwmsSafetyPlanningAnswers) {
                                var container = $('.swms-safety-planning-questions-answer');
                            container.empty();

                    SwmsSafetyPlanningQuestion.forEach(function(note) {
                        const answerObject = SwmsSafetyPlanningAnswers.find(ans => ans.swms_safety_planning_id === note.id);
                        var answer = answerObject ? answerObject.answer : '';
                        let noteHtml = `
                            <div class="mb-3">
                                <h6><strong style="color:black">Question:</strong> ${note.question}</h6>
                                <p><strong style="color:black">Description:</strong> ${note.description || ''}</p>
                                <input type="text" class="form-control" id="answer-${note.id}" name="answers[${note.id}]" value="${answer}" placeholder="Write your answer here">
                            </div>
                        `;

                        // Append the constructed HTML to the container
                        container.append(noteHtml);
                    });
                        }
                    },
                    error: function(response) {

                        if (response.status == 500) {
                            toastr.error("Something went wrong")
                        } else {
                            toastr.error(response.responseJSON.message)
                        }
                    }
                });

            }

            function _submit() {
                loader(true);

                var _FormData = new FormData();
                var recordIds = [];
                _FormData.append("swms_report_id", '{{ request()->swms_report_id }}');

                $('.column-tier-signature-wrapper .column-tier-signature-row').each(function(index) {
                    var recordId = $(this).find('.delete-signature-row').data('id') || 0;
                    recordIds.push(recordId);

                    var accessRoleId = $(this).find('.column_task_details_tier_id').val();
                    _FormData.append("access_role_ids[" + index + "]", accessRoleId);

                    var jobDescription = $(this).find('.column_tier_signature_job_desription').val();
                    _FormData.append("job_descriptions[" + index + "]", jobDescription);

                    var inductanceDate = $(this).find('.column_tier_signature_inductance_date').val();
                    _FormData.append("inductance_dates[" + index + "]", inductanceDate);

                    _FormData.append("record_ids[" + index + "]", recordId);
                });


                var inputAnswers = {};
                $('input[name^="answers"]').each(function() {
                    var questionId = $(this).attr('name').match(/\d+/)[0];
                    inputAnswers[questionId] = $(this).val();
                });
                _FormData.append("InputAnswers", JSON.stringify(inputAnswers));
                $.ajax({
                    type: "POST",
                    url: "{{ url('/api/swms-report-store-step6') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: _FormData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        console.log('response:', response)
                        loader(false);
                        toastr.success(response.message);
                      
                        setTimeout(function() {
                            window.location.href =
                             window.location.href = "{{ url('/swms-report-list') }}"
                                    // "{{ url('/swms-report-list/create/7') }}/" + response.data
                                    // .swms_report_id;
                           
                        }, 1000);
                    },
                    error: function(response) {
                        loader(false);
                        if (response.status == 500) {
                            toastr.error("Something went wrong");
                        } else {
                            toastr.error(response.responseJSON.message);
                        }
                    }
                });
            }


            function SwmsSignaturepopulateDropdownAndRows(signatureData, authorisedByList) {
              var _html = `<option value="" data-id="" data-title="">--Select Role--</option>`;

                    // Generate options for access role titles
                    // for (var i = 0; i < authorisedByList.length; i++) {
                    //     var personalDetails = authorisedByList[i].emp_personal_details || {};
                    //     var accessRole = authorisedByList[i].access_role || {};

                    //     var emp_id = personalDetails.emp_id ?? '';
                    //     var first_name = personalDetails.first_name ?? '';
                    //     var last_name = personalDetails.last_name ?? '';
                    //     var middle_name = personalDetails.middle_name ?? '';

                    //     var accessRoleId = accessRole.id ?? '';  
                    //     var accessRoleTitle = accessRole.title ?? ''; 

                    //     _html += `
                    //         <option value="${accessRoleId}" data-id="${accessRoleId}" data-title="${accessRoleTitle}">
                    //             ${accessRoleTitle}
                    //         </option>`;
                    // }
                    for (var i = 0; i < authorisedByList.length; i++) {
                      

                        var accessRoleId = authorisedByList[i].id ?? '';  
                        var accessRoleTitle = authorisedByList[i].title ?? ''; 
                         var accessRolecode = authorisedByList[i].code ?? ''; 
                        _html += `
                            <option value="${accessRoleId}" data-id="${accessRoleId}" data-title="${accessRoleTitle}">
                                ${accessRoleTitle}
                            </option>`;
                    }

                $('.column-tier-signature-wrapper').empty();

                if (signatureData && signatureData.length > 0) {
                    for (var i = 0; i < signatureData.length; i++) {
                        var signature = signatureData[i];
                        addSignatureRow(signature, _html);
                    }
                } else {
                    addSignatureRow({}, _html);
                }

                function addSignatureRow(signature = {}, _html) {
                    var tierId = signature.tier_id || '';
                    var jobDescription = signature.job_desription || '';
                    var inductanceDate = signature.inductance_date || '';

                    var newRow = `
                        <div class="row column-tier-signature-row align-items-center">
                            <div class="col-lg-3 col-sm-12 mb-3">
                                <label class="text-dark">Access Role</label>
                                <select class="form-select mt-1 column_task_details_tier_id" name="access_role_ids[]">
                                    ${_html}
                                </select>
                            </div>
                            <div class="col-lg-5 col-sm-6 mb-3">
                                <label>Job Description</label>
                                <input type="text" class="form-control column_tier_signature_job_desription" name="job_descriptions[]" value="${jobDescription}" placeholder="Enter Job Description">
                            </div>
                            <div class="col-lg-3 col-sm-6 mb-3">
                                <label>Inductance Date</label>
                                <input type="date" class="form-control column_tier_signature_inductance_date" name="inductance_dates[]" value="${inductanceDate}">
                            </div>
                            <div class="col-lg-1 col-sm-6 mb-3 d-flex align-items-end">
                                <button type="button" class="btn btn-danger mt-4 btn-sm delete-signature-row" data-id="${signature.id || ''}">Delete</button>
                            </div>
                        </div>`;

                    // Append the new row to the wrapper
                    $('.column-tier-signature-wrapper').append(newRow);
                
                    $('.column-tier-signature-wrapper .column-tier-signature-row').last().find(
                        '.column_task_details_tier_id').val(tierId);

                    // Add delete button functionality
                    $('.delete-signature-row').last().on('click', function() {
                        const signatureId = $(this).data('id');
                        const rowToDelete = $(this).closest('.column-tier-signature-row');
                        if (signatureId) {
                            $.ajax({
                                url: `{{ url('/api/swms-report-delete-signature-step6/${signatureId}') }}`,
                                type: 'DELETE',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                                },
                                success: function(result) {
                                    rowToDelete.remove();
                                    toastr.success(result.message);
                                },
                                error: function(err) {
                                    toastr.error('Error deleting signature.');
                                }
                            });
                        } else {
                            rowToDelete.remove();
                        }
                    });
                }
            }


            function SignatureaddMoreRow() {
                $.ajax({
                    type: "GET",
                    url: "{{ url('/api/role-list') }}",
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    data: {
                        'swms_report_id': '{{ request()->swms_report_id }}'
                    },
                    success: function(response) {
                      var authorisedByList = response.data.role;
                
                // Generate options for access role titles
                var _html = `<option value="" data-id="" data-title="">--Select Role--</option>`;
                for (var i = 0; i < authorisedByList.length; i++) {
                    var accessRoleId = authorisedByList[i].id ?? '';  
                    var accessRoleTitle = authorisedByList[i].title ?? ''; 
                    _html += `
                        <option value="${accessRoleId}" data-id="${accessRoleId}" data-title="${accessRoleTitle}">
                            ${accessRoleTitle}
                        </option>`;
                }
                        // Create the new row with dropdown, job description input, and inductance date input
                        var newRow = `
                <div class="row column-tier-signature-row align-items-center">
                    <div class="col-lg-3 col-sm-12 mb-3">
                        <label class="text-dark">Access Role</label>
                        <select class="form-select mt-1 column_task_details_tier_id" name="access_role_ids[]">
                            ${_html}
                        </select>
                    </div>
                    <div class="col-lg-5 col-sm-6 mb-3">
                        <label>Job Description</label>
                        <input type="text" class="form-control column_tier_signature_job_desription" name="job_descriptions[]" placeholder="Enter Job Description">
                    </div>
                    <div class="col-lg-3 col-sm-6 mb-3">
                        <label>Inductance Date</label>
                        <input type="date" class="form-control column_tier_signature_inductance_date" name="inductance_dates[]">
                    </div>
                    <div class="col-lg-1 col-sm-6 mb-3 d-flex align-items-end">
                        <button type="button" class="btn btn-danger mt-4 btn-sm delete-row-button">Delete</button>
                    </div>
                </div>`;

                        // Append the new row to the specified wrapper
                        $('.column-tier-signature-wrapper').append(newRow);
                        $('.delete-row-button').last().on('click', function() {
                            if ($('.column-tier-signature-row').length > 1) {
                                $(this).closest('.column-tier-signature-row').remove();
                            } else {
                                alert('You cannot delete the first row.');
                            }
                        });
                    },
                    error: function(xhr, status, error) {
                        console.error('Error fetching options:', error);
                        toastr.error(xhr.responseJSON.message);
                    }
                });
            }

            function _back() {
                window.location.href =
                    "{{ url('/') }}/swms-report-list/create/5/{{ request()->swms_report_id }}";
            }
        @endif

        @if ($step == 'step7')
            $(document).ready(function() {
              
            });
            function _submit() {
                        loader(true);
                        var _FormData = new FormData();
                        _FormData.append("whs_report_id", '{{ request()->swms_report_id }}');
                       
                        $.ajax({
                            type: "POST",
                            url: "{{ url('/api/swms-report-store-step7') }}",
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}'
                            },
                            data: _FormData,
                        
                            processData: false,
                            contentType: false,
                            success: function(response) {
                                // console.log(response.message);
                                toastr.success(response.message);
                                setTimeout(
                                    function() {
                                     window.location.href = "{{ url('/swms-report-list') }}"
                                    },
                                    1000);
                                loader(false);
                            },
                            error: function(response) {
                                loader(false);
                                if (response.status == 501) {
                                    toastr.error(response.responseJSON.message)
                                }
                                if (response.status == 500) {
                                    toastr.error("Something went wrong")
                                } else {
                                    toastr.error(response.responseJSON.message)
                                }
                            }
                        });

                    }
            function _back() {
                window.location.href =
                "{{ url('/') }}/swms-report-list/create/6/{{ request()->swms_report_id }}";
            }
        @endif
    </script>
@endsection