@extends('layout.guest')

@section('styles')
    <style>
        #self-check-container p,
        #self-check-container ul {
            font-size: 18px !important;
        }

        #self-check-container .select2 span {
            font-size: 18px !important;
        }

        #certificate_requirement p,
        #certificate_requirement ul {
            font-size: 18px !important;
        }

        /* temp styling fix for double scrollbar */
        html, body {
            overflow-x: hidden;
            overflow-y: auto;
            height: auto;
        }
    </style>
@endsection

@section('content')
    <x-container title="Type 2: Registering Green Products / Green Services under MyHIJAU Mark">
        <div class="px-20" id="self-check-container">
            <div class="bg-light-gray p-4 rounded-3 mb-4">
                <div class="mb-4">
                    <p class="mb-4">
                        {{ __('Thank you for your interest in registering for MyHIJAU Mark Products or MyHIJAU Mark Services. Below is the information to guide you through the registration process.') }}
                    </p>
                    <p class="mb-4">
                        <strong>{{ __('What is MyHIJAU Mark?') }}</strong><br>
                        {{ __('MyHIJAU Mark is Malaysia’s official green recognition endorsed by the Government of Malaysia. It brings together certified green products and services that meet local and international environmental standards under a single mark.') }}
                    </p>

                    <p class="mb-4">
                        <strong>{{ __('These are two (2) types of applications for MyHIJAU Mark:') }}</strong>
                    </p>

                    <ul>
                        <li><strong>{{ __('MyHIJAU Mark Products') }}</strong>
                            {{ __('– This application is for companies that manufacture, distribute, or resell green products such as solar panels, energy-efficient chillers, eco-friendly paper, etc.') }}
                            <br>
                            <a target="_blank" href="{{ asset('assets/pdf/REC-MYH-001-GUIDELINES-REGISTRATION-OF-MyHIJAU-MARK-PRODUCT.pdf') }}" class="btn btn-download rounded-pill my-3">Download Guideline</a>
                        </li>
                        <li><strong>{{ __('MyHIJAU Mark Services') }}</strong>
                            {{ __('– This application is for a company providing green services such as the installation of solar panels, energy audits, training services, and others.') }}
                            <br>
                            <a target="_blank" href="{{ asset('assets/pdf/REC-MYH-002-GUIDELINES-REGISTRATION-OF-MyHIJAU-MARK-SERVICES.pdf') }}" class="btn btn-download rounded-pill my-3">Download Guideline</a>
                        </li>
                    </ul>

                    <p class="mb-4">
                        {{ __('To proceed, please select the Category of your product or service from the drop-down list:') }}
                    </p>

                    <div class="d-flex align-items-center mb-4">
                        <select id="category" class="form-select select2 me-4" data-placeholder="Select your Category" data-theme="bootstrap-5" style="width: 300px;">
                            <option value="" disabled selected>{{ __('Select Category') }}</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div id="subcategory-container" class="d-flex align-items-center mb-4" style="display:none;">
                        <select id="subcategory" class="form-select select2 me-4" data-placeholder="Select your Sub Category" data-theme="bootstrap-5" style="width: 300px;">
                            <option value="" disabled selected>{{ __('Select Sub Category') }}</option>
                        </select>
                    </div>

                    <div id="productgroup-container" class="d-flex align-items-center mb-4" style="display:none;">
                        <select id="product_group" class="form-select select2 me-4" data-placeholder="Select your Product Group" data-theme="bootstrap-5" style="width: 300px;">
                            <option value="" disabled selected>{{ __('Select Product Group') }}</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div id="certificate_requirement" class="px-20" style="display:none;">
            <div class="bg-light-gray p-4 rounded-3 mb-4">
                <div class="mb-4">
                    <p id="certificate-info" class="mb-4">
                        <strong>(product)</strong><br>
                        Kindly choose either 1 of below Certification Scheme on which of your product already been certified.
                    </p>
                    <div id="qualification-section"></div>
                </div>
                {{-- <a href="{{ route('self-check.recaptcha') }}" id="submit_btn" class="btn btn-success btn-sm w-75px">Proceed</a> --}}
                <div class="alert alert-warning" id="no-cert-warning" style="display: none;">
                    Since there are no Certification for this product registered in our database yet, kindly email to <a href="mailto:admin@myhijau.my">admin@myhijau.my</a> to get assitants. We are glad to help.
                </div>
                <div class="alert alert-danger" id="cert-required" style="display: none;">
                    Selection Required! Please ensure you selected at least 1 option to proceed.
                </div>
                <button id="submit_btn" class="btn btn-success rounded-pill mt-3">Proceed</button>
                <input type="hidden" id="selected_product_group_id">
            </div>
        </div>
    </x-container>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        function updateProceedButton() {
            $('input[name="certifications"]').on('change', function(e) {
                if (this.checked) {
                    $('input[name="certifications"]').not(this).prop('checked', false);
                }
            });

            let isChecked = document.querySelectorAll('input[name="certifications"]:checked').length > 0;
            document.getElementById('submit_btn').disabled = !isChecked;
        }

        function showSuccessMessage(event) {
            event.preventDefault();
            let productGroupId = $('#selected_product_group_id').val();

            $.ajax({
                url: `/self-check/get-certification-details/${productGroupId}`,
                type: 'GET',
                success: function(data) {
                    let isService = data.productGroup.is_service === 1;

                    if (!isService) {
                        let selectedCertificates = Array.from(document.querySelectorAll(
                                'input[name="certifications"]:checked'))
                            .map(el => el.value);

                        if (selectedCertificates.length > 0) {
                            let params = new URLSearchParams();
                            selectedCertificates.forEach(cert => params.append('certifications[]', cert));

                            $('#cert-required').hide();
                            window.location.href = `/self-check/type2/${isService ? 'service' : 'product'}/${productGroupId}?${params.toString()}`;

                        } else {
                            $('#cert-required').show();
                        }
                    } else {
                        // let cert1Checked = document.getElementById("cert1").checked;
                        // let cert2Checked = document.getElementById("cert2").checked;
                        let policyChecked = document.getElementById("policy_checkbox").checked;
                        let sopChecked = document.getElementById("sop_checkbox").checked;

                        let selectedCertificates = [];
                        document.querySelectorAll('input[name="competency_certificates"]:checked').forEach((
                            el) => {
                            selectedCertificates.push(el.value);
                        });

                        let params = new URLSearchParams();
                        selectedCertificates.forEach(cert => params.append('competency_certificates[]',
                            cert));

                        let nextUrl =
                            `/self-check/type2/${isService ? 'service' : 'product'}/${productGroupId}?` +
                            params
                            .toString();

                        window.location.href = nextUrl;
                    }
                },
                error: function(xhr, status, error) {
                    console.error("AJAX Error:", error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        html: `<p>Failed to load product/service information.</p>`,
                        confirmButtonText: 'OK',
                    });
                }
            });
        }

        $(document).ready(function() {
            $('.select2').select2();
            document.getElementById('submit_btn').disabled = true;

            document.getElementById('submit_btn').addEventListener('click', showSuccessMessage);

            const loadDropdown = (url, element, placeholder) => {
                element.empty().append(`<option value="" disabled selected>${placeholder}</option>`).prop(
                    'disabled', false);
                $.ajax({
                    url: url,
                    type: 'GET',
                    success: function(data) {
                        if (data.length > 0) {
                            data.forEach(item => {
                                element.append(
                                    `<option value="${item.id}">${item.name}</option>`);
                            });
                        } else {
                            element.prop('disabled', true);
                        }
                    },
                    error: function() {
                        alert('Failed to load data.');
                    }
                });
            };

            // Handle category change
            $('#category').change(function() {
                const categoryId = $(this).val();
                $('#certificate-info').html(`<span>The selected product is:</span><br><strong class="mb-4">Category: </strong>Loading...`);
                loadDropdown(`/self-check/get-subcategories/${categoryId}`, $('#subcategory'),
                    'Loading subcategories...');
                $('#productgroup-container').hide();
                $('#certificate-info').html('');
            });

            // Handle subcategory change
            $('#subcategory').change(function() {
                const subcategoryId = $(this).val();
                const selectedCategory = $('#category option:selected').text();
                $('#certificate-info').html(
                    `<p>The selected product is:</p>
                    <p><strong>Category: </strong>${selectedCategory}</p>
                    <p><strong>Subcategory: </strong>Loading...</p>`
                );
                loadDropdown(`/self-check/get-product-groups/${subcategoryId}`, $('#product_group'),
                    'Loading product groups...');
                $('#productgroup-container').show();
            });

            // Handle product group change
            $('#product_group').change(function() {
                const productGroupId = $(this).val();
                const selectedCategory = $('#category option:selected').text();
                const selectedSubcategory = $('#subcategory option:selected').text();
                const selectedProductGroup = $(this).find('option:selected').text();
                $('#selected_product_group_id').val(productGroupId);

                $('#certificate-info').html(
                    `<p>The selected product is:</p>
                    <p><strong>Category: </strong>${selectedCategory}</p>
                    <p><strong>Subcategory: </strong>${selectedSubcategory}</p>
                    <p><strong>Product Group: </strong>${selectedProductGroup}</p>
                    <p>Kindly choose either 1 of below Certification Scheme on which of your product already been certified.</p>`);
                $('#certificate_requirement').show();

                $.ajax({
                    url: `/self-check/get-certification-details/${productGroupId}`,
                    type: 'GET',
                    success: function(data) {
                        let htmlContent = '';
                        console.log(data);
                        if (data.productGroup.is_service === 1) {
                            htmlContent += `<p>Below are the documents required for a ${selectedProductGroup} to register under the MyHIJAU Mark Service.
                                Kindly tick the documents your service already possesses or has obtained.</p>

                                <ol>
                                    <li><strong>Company/Organization Policy:</strong></li>
                                    <ul>
                                            <div class="form-check form-check-custom form-check-xs form-check-success mb-4">
                                                <input class="form-check-input" type="checkbox" name="documents" id="policy_checkbox" value="Company Policy">
                                                <label class="form-check-label" for="policy_checkbox">
                                                    A documented policy outlining green initiatives implemented at your premises and/or office such as 3R practices, the use of LED Lighting, energy-efficient equipment, and other environmentally-friendly activities.
                                                </label>
                                            </div>
                                    </ul>

                                    <li><strong>Certificate of Competency:</strong></li>
                                    <p>Relevant document related to the products applied, recognized by MGTC. (e.g., certificate, reports, and test reports)</p>`;


                            htmlContent += `<ul id="competency-certificates">`;
                            if (data.competency.length > 0) {
                                data.competency.forEach(certification => {
                                    htmlContent += ` <div class="form-check form-check-custom form-check-xs form-check-success mb-4">
                                    <input class="form-check-input" type="checkbox" name="competency_certificates" id="cert_${certification.id}" value="${certification.id}">
                                    <label class="form-check-label" for="cert_${certification.id}">
                                        ${certification.name}
                                        ${certification.description ? `<span class="text-muted">(${certification.description})</span>` : ''}
                                    </label>
                                </div>`;
                                });
                            } else {
                                htmlContent +=
                                    `<li>Not eligible for this service.</li>`;
                            }
                            htmlContent += `</ul>`;

                            htmlContent += `<li><strong>Standard Operating Procedure (SOP):</strong></li>
                                    <ul>

                                            <div class="form-check form-check-custom form-check-xs form-check-success mb-4">
                                                <input class="form-check-input" type="checkbox" name="documents" id="sop_checkbox" value="SOP">
                                                <label class="form-check-label" for="sop_checkbox">
                                                    A documented SOP detailing the processes involved in delivering your services from start to completion, emphasizing environmental considerations (e.g., cleaning services or green landscaping).
                                                </label>
                                            </div>

                                    </ul>
                                </ol>`;
                            document.getElementById('submit_btn').disabled = false;
                        } else {
                            if (data.qualificationTypes && data.qualificationTypes.length > 0) {
                                var hasCert = false;
                                data.qualificationTypes.forEach(qualification => {
                                    htmlContent +=
                                        `<div class="qualification-block"><strong>${qualification.name}</strong><ul>`;
                                    const relatedCertifications = data
                                        .productCertificationGroup.filter(
                                            certification =>
                                            certification.qualification_type_id ===
                                            qualification.id);
                                    if (relatedCertifications.length > 0) {
                                        hasCert = true;
                                        relatedCertifications.forEach(certification => {
                                            htmlContent += ` <div class="form-check form-check-custom form-check-xs form-check-success mb-4">
            <input class="form-check-input" type="checkbox" name="certifications" id="cert_${certification.id}" value="${certification.id}" onchange="updateProceedButton()">
            <label class="form-check-label" for="cert_${certification.id}">
                ${certification.name}
                ${certification.description ? `<span class="text-muted">(${certification.description})</span>` : ''}
            </label>
        </div>`;
                                        });
                                    } else {
                                        htmlContent +=
                                            `<li>Not eligible for this product.</li>`;
                                    }
                                    htmlContent += `</ul></div>`;
                                });
                                if (hasCert == false) {
                                    $('#no-cert-warning').show();
                                    document.getElementById('submit_btn').disabled = true;
                                } else {
                                    $('#no-cert-warning').hide();
                                    document.getElementById('submit_btn').disabled = false;
                                }
                            } else {
                                htmlContent = '<p>No qualifications available.</p>';
                            }
                        }
                        $('#qualification-section').html(htmlContent);
                    },
                    error: function() {
                        alert('Failed to load certification details.');
                    }
                });
            });
        });
    </script>
@endsection