@extends('layouts.website')

@section('content')
    <main>
        <section class="bs-banner typ-certification">
            <div class="main">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="background-wrapper">
                            <div class="container-fluid pt-5">
                                <div class="row">
                                    <div class="col-lg-12 col-12 mt-lg-0 ">

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="lyt-section bs-events typ-certification-verification">
            <div class="container">
                <div class="content ps-lg-5 p-0 text-center" data-aos="fade" data-aos-delay="400">
                    <div class="common-heading d-flex justify-content-center pt-3" data-aos="fade" data-aos-delay="300">
                        <div class="bs-sub-heading  text-uppercase">Verification <span class="ms-1">Services</span>
                        </div>
                    </div>
                    <h2 class="bs-heading mb-3" data-aos="fade" data-aos-delay="400">
                        Verify IRQS Certifications
                    </h2>
                </div>
                <div class="tab-wrap">
                    <ul class="nav nav-pills" id="pills-tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="student-tab" data-bs-toggle="pill"
                                data-bs-target="#studentTab" type="button" role="tab">
                                Student Certificate
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="org-tab" data-bs-toggle="pill" data-bs-target="#orgTab"
                                type="button" role="tab">
                                Organization Certificate
                            </button>
                        </li>
                    </ul>
                </div>
                <div class="tab-content" id="pills-tabContent">
                    <div class="tab-pane fade show active" id="studentTab" role="tabpanel">
                        <div class="panel">
                            <h4>Fill the Form</h4>
                            <form id="form-student" action="{{ route('certification.student.verify') }}" method="POST">
                                @csrf
                                <div class="">
                                    <label class="form-label" for="student_id">Enter Unique Learner Number :</label>
                                    <input type="text" class="form-control" id="student_id" name="student_id">
                                </div>
                                <div class="form-check">
                                    <!-- <input class="form-check-input" type="checkbox" id="mk1"> -->
                                    <label class="form-check-label" for="mk1">
                                        © Copyright 2019 IRQS
                                    </label>
                                </div>
                                <div class=" d-flex justify-content-between align-items-center flex-wrap">
                                    <div class="mb-3 g-recaptcha"
                                        id="student-recaptcha"
                                        data-sitekey="{{ config('services.recaptcha.site_key') }}"
                                        data-callback="onStudentRecaptchaCallback">
                                    </div>
                                    <div class="btn-certification"> <button class="btn btn-submit" type="submit">●
                                            Submit</button></div>
                                </div>

                            </form>

                            <!-- Verification Result Display -->
                            <div id="student-verification-result" class="mt-4" style="display: none;">
                                <div class="alert" id="student-result-alert">
                                    <div id="student-result-content"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="orgTab" role="tabpanel">

                        <div class="panel">
                            <h4>Fill the Form</h4>
                            <form id="form-org" action="{{ route('certification.verify') }}" method="POST">
                                @csrf
                                <div class="">
                                    <label class="form-label" for="certificate_no">Certification No*</label>
                                    <input type="text" class="form-control" id="certificate_no" name="certificate_no">
                                </div>
                                <div class="">
                                    <label class="form-label" for="account_name">Company Name*</label>
                                    <input type="text" class="form-control" id="account_name" name="account_name">
                                </div>
                                {{-- <div class="form-check my-5">
                                    <input class="form-check-input" type="checkbox" id="mk2">
                                    <label class="form-check-label" for="mk2">
                                        I agree to receive marketing information via email from IRCLASS and its
                                        affiliates relating to their products and services. I may withdraw my consent at
                                        any time with future effect. For further details, refer to the Privacy Notice.
                                    </label>
                                </div> --}}
                                <div class="form-check">
                                    <!-- <input class="form-check-input" type="checkbox" id="mk1"> -->
                                    <label class="form-check-label" for="mk1">
                                        © Copyright 2019 IRQS
                                    </label>
                                </div>
                                <div class=" d-flex justify-content-between align-items-center flex-wrap">
                                    <div class="mb-3 g-recaptcha"
                                        id="org-recaptcha"
                                        data-sitekey="{{ config('services.recaptcha.site_key') }}"
                                        data-callback="onOrgRecaptchaCallback">
                                    </div>
                                    <div class="btn-certification"> <button class="btn btn-submit" type="submit">●
                                            Submit</button></div>
                                </div>




                            </form>

                            <!-- <section class="review-section">
          <h3>Review Your Information</h3>
          <div class="review-box">
            <div class="row">
              <div class="col">
                <p class="label">First Name</p>
                <p class="value">Akshay</p>
              </div>
              <div class="col">
                <p class="label">Last Name</p>
                <p class="value">Bhatt</p>
              </div>
            </div>

            <div class="row">
              <div class="col">
                <p class="label">Student ID</p>
                <p class="value">633018</p>
              </div>
            </div>

            <div class="row">
              <div class="col full">
                <p class="label">Course Name</p>
                <p class="value">PR357: OHSMS ISO 45001:2018 Lead Auditor</p>
              </div>
            </div>

            <div class="row">
              <div class="col">
                <p class="label">Result</p>
                <p class="value pass">PASS</p>
              </div>
            </div>
          </div>
        </section>

        <style>
        .review-section {
          border-top: 2px solid rgba(255, 255, 255, 0.8);
          color: #fff;
          margin-top: 40px;
        }

        .review-section h3 {
          text-align: left;
        font-family: Manrope;
          padding-top: 25px;
          padding-bottom: 10px;
          margin-bottom: 25px;
          font-size: 22px;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
        }

        .review-box .row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 15px;
          flex-wrap: wrap;
        }

        .review-box .col {
          flex: 1;
          min-width: 45%;
        }

        .review-box .col.full {
          min-width: 100%;
        }

        .label {
          font-size: 16px;
          opacity: 0.7;
          margin-bottom: 5px;
        }

        .value {
          font-size: 16px;
          font-weight: 500;
        }

        .value.pass {
          color: rgba(255, 255, 255, 1);
          font-family: Manrope;
          font-size: 16px;
          font-weight: 600;
        }
        </style> -->

                            <!-- Verification Result Display -->
                            <div id="verification-result" class="mt-4" style="display: none;">
                                <div class="alert" id="result-alert">
                                    <div id="result-content"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>


        </section>

        <!-- back to top  -->
        <a href="#" class="back-to-top">
            <span class="icon icon-drop-icon"></span>
            <!-- <p class="back-text">Back to Top</p> -->
        </a>
        @include('components.request-quote-button')
    </main>

    {{-- Include enquiry form modal for Certification Verification page --}}
    @include('components.enquiry-form-wrapper', ['pageSource' => 'certification-verification', 'formType' => 'enquiry'])

    @include('website.partials.include_js')
@endsection

@section('scripts')
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script src="{{ asset('js/certification-verification.js') }}"></script>
    <script src="{{ asset('js/student-certification-verification.js') }}"></script>

    <script>
        (function () {
            'use strict';

            // Global reCAPTCHA widget IDs storage
            window.recaptchaWidgets = {
                student: null,
                organization: null
            };

            // Global reCAPTCHA callback functions
            window.onStudentRecaptchaCallback = function(response) {
                // Clear any existing reCAPTCHA errors
                const studentForm = document.getElementById('form-student');
                if (studentForm) {
                    const recaptchaWidget = studentForm.querySelector('.g-recaptcha');
                    if (recaptchaWidget) {
                        recaptchaWidget.classList.remove('is-invalid');
                        const feedback = recaptchaWidget.querySelector('.invalid-feedback');
                        if (feedback) {
                            feedback.style.display = 'none';
                        }
                    }
                }
            };

            window.onOrgRecaptchaCallback = function(response) {
                // Clear any existing reCAPTCHA errors
                const orgForm = document.getElementById('form-org');
                if (orgForm) {
                    const recaptchaWidget = orgForm.querySelector('.g-recaptcha');
                    if (recaptchaWidget) {
                        recaptchaWidget.classList.remove('is-invalid');
                        const feedback = recaptchaWidget.querySelector('.invalid-feedback');
                        if (feedback) {
                            feedback.style.display = 'none';
                        }
                    }
                }
            };

            document.addEventListener('DOMContentLoaded', function () {
                const studentTab = document.getElementById('student-tab');
                const orgTab = document.getElementById('org-tab');
                const studentForm = document.getElementById('form-student');
                const orgForm = document.getElementById('form-org');
                const studentResultDiv = document.getElementById('student-verification-result');
                const orgResultDiv = document.getElementById('verification-result');

                if (!studentTab || !orgTab || !studentForm || !orgForm) return;

                // Render reCAPTCHA widgets with unique IDs
                function renderRecaptchaWidgets() {
                    if (typeof grecaptcha === 'undefined') {
                        return;
                    }

                    // Render student reCAPTCHA
                    const studentRecaptcha = document.getElementById('student-recaptcha');
                    if (studentRecaptcha && !window.recaptchaWidgets.student) {
                        try {
                            // Check if already auto-rendered
                            if (studentRecaptcha.children.length > 0) {
                                // Auto-rendered, get the widget ID
                                const existingWidgetId = studentRecaptcha.getAttribute('data-widget-id');
                                if (existingWidgetId) {
                                    window.recaptchaWidgets.student = parseInt(existingWidgetId);
                                } else {
                                    // Try to find the widget ID from the rendered element
                                    const iframe = studentRecaptcha.querySelector('iframe');
                                    if (iframe) {
                                        // Auto-rendered widget, use default method
                                        window.recaptchaWidgets.student = 'auto';
                                    }
                                }
                            } else {
                                // Manual render
                                const sitekey = studentRecaptcha.getAttribute('data-sitekey');
                                if (sitekey) {
                                    const studentWidgetId = grecaptcha.render(studentRecaptcha, {
                                        'sitekey': sitekey,
                                        'callback': 'onStudentRecaptchaCallback'
                                    });
                                    window.recaptchaWidgets.student = studentWidgetId;
                                    studentRecaptcha.setAttribute('data-widget-id', studentWidgetId);
                                }
                            }
                        } catch (e) {
                            // Silent fail for reCAPTCHA rendering
                        }
                    }

                    // Render organization reCAPTCHA
                    const orgRecaptcha = document.getElementById('org-recaptcha');
                    if (orgRecaptcha && !window.recaptchaWidgets.organization) {
                        try {
                            // Check if already auto-rendered
                            if (orgRecaptcha.children.length > 0) {
                                // Auto-rendered, get the widget ID
                                const existingWidgetId = orgRecaptcha.getAttribute('data-widget-id');
                                if (existingWidgetId) {
                                    window.recaptchaWidgets.organization = parseInt(existingWidgetId);
                                } else {
                                    // Try to find the widget ID from the rendered element
                                    const iframe = orgRecaptcha.querySelector('iframe');
                                    if (iframe) {
                                        // Auto-rendered widget, use default method
                                        window.recaptchaWidgets.organization = 'auto';
                                    }
                                }
                            } else {
                                // Manual render
                                const sitekey = orgRecaptcha.getAttribute('data-sitekey');
                                if (sitekey) {
                                    const orgWidgetId = grecaptcha.render(orgRecaptcha, {
                                        'sitekey': sitekey,
                                        'callback': 'onOrgRecaptchaCallback'
                                    });
                                    window.recaptchaWidgets.organization = orgWidgetId;
                                    orgRecaptcha.setAttribute('data-widget-id', orgWidgetId);
                                }
                            }
                        } catch (e) {
                            // Silent fail for reCAPTCHA rendering
                        }
                    }
                }

                // Render organization widget when tab is shown (deferred rendering)
                function renderOrgWidgetOnShow() {
                    if (typeof grecaptcha === 'undefined') {
                        return;
                    }

                    const orgRecaptcha = document.getElementById('org-recaptcha');
                    if (orgRecaptcha && !window.recaptchaWidgets.organization) {
                        try {
                            // Clear any existing content
                            orgRecaptcha.innerHTML = '';
                            const sitekey = orgRecaptcha.getAttribute('data-sitekey');
                            if (sitekey) {
                                const orgWidgetId = grecaptcha.render(orgRecaptcha, {
                                    'sitekey': sitekey,
                                    'callback': 'onOrgRecaptchaCallback'
                                });
                                window.recaptchaWidgets.organization = orgWidgetId;
                                orgRecaptcha.setAttribute('data-widget-id', orgWidgetId);
                            }
                        } catch (e) {
                            // Silent fail for reCAPTCHA rendering
                        }
                    }
                }

                // Render reCAPTCHA widgets when page loads (with delay to ensure DOM is ready)
                setTimeout(renderRecaptchaWidgets, 500);

                function clearFormErrors(form) {
                    const inputs = form.querySelectorAll('input, select, textarea, .g-recaptcha');
                    inputs.forEach(input => {
                        input.classList.remove('is-invalid', 'is-valid');
                        const feedback = input.parentNode.querySelector('.invalid-feedback');
                        if (feedback) {
                            feedback.style.display = 'none';
                            feedback.innerHTML = '';
                        }
                    });
                }

                function hideResultDiv(resultDiv) {
                    if (resultDiv) {
                        resultDiv.style.display = 'none';
                    }
                }

                function resetFormAndCaptcha(form) {
                    if (!form) return;

                    form.reset();
                    clearFormErrors(form);

                    // Reset reCAPTCHA for the specific form using global widget IDs
                    if (typeof grecaptcha !== 'undefined') {
                        try {
                            const recaptchaWidget = form.querySelector('.g-recaptcha');
                            if (recaptchaWidget) {
                                // Use global widget ID if available
                                if (form.id === 'form-student' && window.recaptchaWidgets.student !== null) {
                                    grecaptcha.reset(window.recaptchaWidgets.student);
                                } else if (form.id === 'form-org' && window.recaptchaWidgets.organization !== null) {
                                    grecaptcha.reset(window.recaptchaWidgets.organization);
                                } else {
                                    // Fallback to widget ID attribute
                                    const widgetId = recaptchaWidget.getAttribute('data-widget-id');
                                    if (widgetId !== null) {
                                        grecaptcha.reset(parseInt(widgetId));
                                    } else {
                                        grecaptcha.reset();
                                    }
                                }
                            }
                        } catch (e) {
                            // Silent fail for reCAPTCHA reset
                        }
                    }
                }


                studentTab.addEventListener('shown.bs.tab', function () {
                    resetFormAndCaptcha(orgForm);
                    hideResultDiv(orgResultDiv);
                    // Defer organization widget rendering until tab is shown
                    setTimeout(renderOrgWidgetOnShow, 200);
                });

                orgTab.addEventListener('shown.bs.tab', function () {
                    resetFormAndCaptcha(studentForm);
                    hideResultDiv(studentResultDiv);
                    // Ensure organization widget is rendered when tab is shown
                    setTimeout(renderOrgWidgetOnShow, 200);
                });
            });
        })();
    </script>
@endsection