@extends('layouts.website')

@section('content')
    <main>
        <section class="bs-banner type-overview typ-glob-accre typ-evt-banner typ-cert-banner">
            <div class="swiper main">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="background-wrapper set-bg"
                            data-img="{{ asset('assets/images/training/traning-baner.webp') }}">
                            <div class="container">
                                <div class="hero-wrapper">
                                    <h1 class="title">Find the Right Sustainability Certification for Your <span> Business
                                        </span>
                                    </h1>
                                    <p class="subtitle marB42">Explore a variety of credible environmental, resource and
                                        responsible sourcing certifications to drive sustainability leadership and
                                        compliance.</p>
                                    <div class="custom-btn-group mb-2">
                                        <a href="javascript:void(0)" class="bs-btn typ-fill" onclick="openPopupTC()">Get a
                                            Certification Quote Now</a>

                                    </div>
                                    <!-- <div class="custom-btn-group mb-2">
                                        <a href="javascript:void(0)" class="bs-btn typ-fill" onclick="openPopupTC()">Explore
                                            Other Sustainability Services</a>

                                    </div> -->
                                    <div class="custom-btn-group down">
                                    <a href="#" class="bs-btn typ-fill typ-hover">Explore
                                            Other Sustainability Services</a>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>




        <section
            class="bs-training-calender lyt-section typ-mission-sec5 typ-member-sec3 background-wrapper set-bg typ-contact-sec4 typ-event">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-12 mt-lg-0 mt-4">
                        <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" data-aos="fade" data-aos-delay="300">
                                <div class="bs-sub-heading  text-uppercase">Explore Our Sustainability Certifications</div>
                            </div>
                            <h2 class="bs-heading mb-3" data-aos="fade" data-aos-delay="400">
                                Select a certification that matches your sustainability goals,
                                operational needs or reporting requirements
                            </h2>

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

            <div class="container mt-4 explore-our-cert ">

                <div class="mt-4">
                    <div class="tab-content-box active">
                        <div class="row g-0">
                            <div class="col-12 col-md-4">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/ResponsibleSteel-Certification.webp" alt="Image"
                                            class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">ResponsibleSteel Certification</h5>
                                            <div class="team-role mt-4">
                                                <a href="#" class="event-reg" onclick="openPopupEvt()">Know More</a>
                                            </div>
                                        </div>

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


                            <div class="col-12 col-md-4">
                                <div class="team-card middle-col">
                                    <div class="image-container">
                                        <img src="assets/images/events/Responsible-Fishing-Standard.webp" alt="Image"
                                            class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Responsible Fishing Standard
                                            </h5>
                                            <div class="team-role mt-4">
                                                <a href="#" class="event-reg" onclick="openPopupEvt()">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="col-12 col-md-4">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/Responsible-Plastic-Management.webp" alt="Image"
                                            class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Responsible Plastic Management (RPM)</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.certification.page.show', 'rpm') }}"
                                                    class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="col-12 col-md-4">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/Single-Use-Plastic-Free.webp" alt="Image"
                                            class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Single Use Plastic Free</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.certification.page.show', 'sup') }}"
                                                    class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="col-12 col-md-4">
                                <div class="team-card middle-col">
                                    <div class="image-container">
                                        <img src="assets/images/events/Post-Consumer-Recycled.webp" alt="Image"
                                            class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Post-Consumer Recycled (PCR)</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.certification.page.show', 'pcr') }}"
                                                    class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="col-12 col-md-4">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/Water-Neutrality.webp" alt="Image"
                                            class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Water Neutrality</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.certification.page.show', 'water-neutrality') }}"
                                                    class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/Zero-Waste-to-Landfil.webp" alt="Image"
                                            class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Zero Waste to Landfill (ZWL)</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.certification.page.show', 'zwl') }}"
                                                    class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                            <div class="col-12 col-md-4">
                                <div class="team-card middle-col">
                                    <div class="image-container">
                                        <img src="assets/images/events/Water.png" alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">ISO 14021 Self Declaration Environment Claim</h5>
                                            <div class="team-role mt-4">
                                                <a href="#" class="event-reg" onclick="openPopupEvt()">Know
                                                    More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-md-4">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/Zero-Liquid-Discharge.webp" alt="Image"
                                            class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Zero Liquid Discharge (ZLD)
                                            </h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.certification.page.show', 'zld') }}"
                                                    class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-md-4 certification-card-hidden" style="display: none;">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/ISO-46001-Water-Efficiency-Management.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">ISO 46001 Water Efficiency Management</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.certification.page.show', 'iso-46001') }}"
                                                    class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-md-4 certification-card-hidden" style="display: none;">
                                <div class="team-card middle-col">
                                    <div class="image-container">
                                        <img src="assets/images/events/ISO-14021-Self-Declaration-Environment-Claim.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">ISO 14021 Self Declaration Environment Claim</h5>
                                            <div class="team-role mt-4">
                                                <a href="#" class="event-reg" onclick="openPopupEvt()">Know
                                                    More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-md-4 certification-card-hidden" style="display: none;">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/ISO-14067-Product-Carbon-Footprint-Certificate.webp"
                                            alt="Image" class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">ISO 14067 Product Carbon Footprint Certificate</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.certification.page.show', 'iso-14067') }}"
                                                    class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-md-4 certification-card-hidden" style="display: none;">
                                <div class="team-card">
                                    <div class="image-container">
                                        <img src="assets/images/events/Carbon-Neutrality.webp" alt="Image"
                                            class="team-img">
                                    </div>
                                    <div class="team-content d-flex align-items-end justify-content-between">
                                        <div>
                                            <h5 class="">Carbon Neutrality</h5>
                                            <div class="team-role mt-4">
                                                <a href="{{ route('sustainability.certification.page.show', 'iso-14068') }}"
                                                    class="event-reg">Know More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>

                </div>
                <div class="custom-btn-group d-flex justify-content-center mt-4" id="viewAllBtnContainer">
                    <a href="javascript:void(0)" class="bs-btn my-3" id="viewAllBtn"
                        onclick="expandCertificationCards()">View all</a>
                </div>
            </div>

        </section>


        <section class="bs-certification-listing lyt-section">
            <div class="container py-5">
                <div class="row">
                    <div class="col-lg-8 col-12">
                        <div class="common-heading" data-aos="fade" data-aos-delay="300">
                            <div class="line">
                                <img src="assets/images/blue-bg-line.svg" class="img-fluid" alt="line-img">
                            </div>
                            <div class="bs-sub-heading typWhite"> Why Choose Sustainability Certification from IRQS?
                            </div>
                        </div>
                        <h2 class="bs-heading typWhite" data-aos="fade" data-aos-delay="400">
                            Lead climate action; earn trust with accredited assurance.
                        </h2>
                    </div>
                </div>
                <div class="row g-4 align-items-end mt-5">
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div class="custom-card small-card w-100">
                            <div class="card-tag">01</div>
                            <div class="card-text"> 30+ Years of Experience</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div class="custom-card tall-card w-100">
                            <div class="card-tag">02</div>
                            <div class="card-text">Accredited by Recognized Bodies</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div class="custom-card small-card w-100">
                            <div class="card-tag">03</div>
                            <div class="card-text"> Global Best
                                Practices</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-3 d-flex">
                        <div class="custom-card tall-card w-100">
                            <div class="card-tag">04</div>
                            <div class="card-text">Certification Audits by Sustainability Experts
                            </div>
                        </div>
                    </div>

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



        <section class="lyt-section bs-certification typ-certification typ-step-button">

            <div class="steps-wrapper">
                <div class="container">
                    <div class="row ">
                        <div class="col-md-6">
                            <div class="common-heading" data-aos="fade" data-aos-delay="300">
                                <div class="line">
                                    <img src=" {{ asset('assets/images/white-bg-line.svg') }} " class="img-fluid"
                                        alt="line-img">
                                </div>
                                <div class="bs-sub-heading text-uppercase">Step-by-Step Certification Process</div>

                            </div>

                            <h2 class="bs-heading" data-aos="fade" data-aos-delay="400">
                                Your Pathway to Sustainability Certification

                            </h2>

                        </div>
                        <!-- <div class="col-md-6 d-flex justify-content-end align-items-end navi-method">
                                    <div>
                                        <p class="bs-para">Framework designed to strengthen and optimize learning processes
                                        </p>
                                    </div>
                                </div> -->
                    </div>
                    <div class="row slide-btn">
                        <div class="col-md-6">


                        </div>
                        <div class="col-md-6 d-flex justify-content-end align-items-end navi-method">

                            <div class="swiper-nav d-flex">
                                <div class="swiper-button-custom swiper-button-prev" style="opacity:1;"></div>
                                <div class="swiper-button-custom swiper-button-next" style="opacity:1;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="step">

                                <div class="deliver-desc">
                                    <div class="step-icon"><img
                                            src="  {{ asset('assets/images/certification/Step-1.svg') }} "
                                            alt="icon">
                                    </div>
                                    <div class="deliver-desc-child">
                                        <h5>Step 1 – Application</h5>
                                        <p> Submit a detailed application. Our team guides you through requirements for your
                                            chosen certification.
                                        </p>
                                    </div>

                                </div>

                            </div>
                        </div>
                        <div class="swiper-slide swiper-step">
                            <div class="step">
                                <!-- <div class="step-icon"><img src="assets/images/certification/icon2.svg" alt="icon">
                                                    </div>
                                                    <h5>Step 2 –Audit Planning and preparation</h5>
                                                    <p>Prepare your audit plan with expert guidance to ensure a smooth certification
                                                        process.</p> -->
                                <div class="deliver-desc">
                                    <div class="step-icon"><img
                                            src="{{ asset('assets/images/certification/Step-2.svg') }}" alt="icon">
                                    </div>
                                    <div class="deliver-desc-child">
                                        <h5>Step 2 – Readiness Assessment</h5>
                                        <p> We review your sustainability data, processes and documentation.
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-step">
                            <div class="step">
                                <!-- <div class="step-icon"><img src="assets/images/certification/icon3.svg" alt="icon">
                                                    </div>
                                                    <h5>Step 3 –Assurance Audit</h5>
                                                    <p>Carry out a thorough assurance audit to ensure your processes meet certification
                                                        standards</p> -->
                                <div class="deliver-desc">
                                    <div class="step-icon"><img
                                            src="{{ asset('assets/images/certification/Step-8.svg') }}" alt="icon">
                                    </div>
                                    <div class="deliver-desc-child">
                                        <h5>Step 3 – Certification Audit</h5>
                                        <p> IRQS auditors perform a comprehensive review and on-site assessment (if
                                            required).
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-step">
                            <div class="step">
                                <!-- <div class="step-icon"><img src="assets/images/certification/icon4.svg" alt="icon">
                                                    </div>
                                                    <h5>Step 4 -Report Submission</h5>
                                                    <p>Conduct of Initial Certification audit – (Stage 1 + Stage 2) for new (Fresh) clients
                                                        / Re-Certification audit (For existing clients).</p> -->
                                <div class="deliver-desc">
                                    <div class="step-icon"><img
                                            src="{{ asset('assets/images/certification/Step-4.svg') }}" alt="icon">
                                    </div>
                                    <div class="deliver-desc-child">
                                        <h5>Step 4 – Certification Issuance</h5>
                                        <p>
                                            Receive your internationally recognized certification upon successful
                                            completion.


                                        </p>

                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="swiper-slide swiper-step">
                            <div class="step">
                                <!-- <div class="step-icon"><img src="assets/images/certification/icon1.svg" alt="icon">
                                                    </div>
                                                    <h5>Step 5 –Assurance Audit</h5>
                                                    <p>Carry out a thorough assurance audit to ensure your processes meet certification
                                                        standards</p> -->
                                <div class="deliver-desc">
                                    <div class="step-icon"><img
                                            src="{{ asset('assets/images/certification/Step-5.svg') }}" alt="icon">
                                    </div>
                                    <div class="deliver-desc-child">
                                        <h5>Step 5 – Surveillance & Improvement</h5>
                                        <p> Benefit from periodic reviews to help maintain and advance your sustainability
                                            performance.
                                        </p>
                                    </div>

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





                    </div>
                    <div class="step-line"></div>
                    <div class="progress-line" id="progressLine"></div>
                </div>
            </div>
        </section>








        <section class="lyt-section typ-certified p-0">
            <div class="container-padding-left-create">
                <div class="certified-wrapper">
                    <div class="leftBox lyt-section">
                        <div class="maxw500o">
                            <h2 class="bs-heading mb-4" data-aos="fade" data-aos-delay="200">
                                Ready to Lead in <span>Sustainability?</span>
                            </h2>
                            <p class="bs-para mb-4" data-aos="fade" data-aos-delay="300">
                                Connect with our experts for a hassle-free certification experience tailored to your
                                sustainability vision.
                            </p>
                            <a href="javascript:void(0)" class="bs-btn typ-yellow" data-aos="fade" data-aos-delay="400"
                                onclick="openPopupTC()">Get Certified</a>
                        </div>
                    </div>
                    <div class="rightBox">
                        <div class="box-img" data-aos="fade" data-aos-delay="300">
                            <img src="{{ asset('assets/images/certified-bg.jpg') }}" class="img-fluid"
                                alt="background-img">
                        </div>

                        <div class="middle-img" data-aos="fade" data-aos-delay="500">
                            <img src="{{ asset('assets/images/certified-img.png') }}" class="img-fluid" alt="man-img">
                        </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 page --}}
    @include('components.enquiry-form-wrapper', [
        'pageSource' => 'sustainability-certification',
        'formType' => 'enquiry',
    ])


    <!-- @include('website.partials.include_js') -->

    <script>
        function downloadBrochure(downloadUrl, button) {
            // Store original content
            const originalContent = button.innerHTML;
            const originalText = button.textContent.trim();

            // Show spinner and disable button
            button.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Downloading...';
            button.disabled = true;

            // Create a temporary link for download
            const link = document.createElement('a');
            link.href = downloadUrl;
            link.style.display = 'none';
            document.body.appendChild(link);

            // Trigger download
            link.click();

            // Clean up temporary link
            document.body.removeChild(link);

            // Simulate download completion (since we can't detect actual download completion)
            setTimeout(() => {
                // Update button to show downloaded state
                button.innerHTML = '<i class="fas fa-check me-2"></i>Downloaded';
                button.disabled = true;

                // Reset button after 3 seconds
                setTimeout(() => {
                    button.innerHTML = originalContent;
                    button.disabled = false;
                }, 3000);
            }, 1000);
        }

        function expandCertificationCards() {
            // Get all hidden cards
            const hiddenCards = document.querySelectorAll('.certification-card-hidden');
            const viewAllBtnContainer = document.getElementById('viewAllBtnContainer');

            // Show all hidden cards
            hiddenCards.forEach(card => {
                card.style.display = 'block';
            });

            // Hide the "View all" button container
            // Using both class and inline style for maximum compatibility
            if (viewAllBtnContainer) {
                viewAllBtnContainer.classList.add('d-none');
                viewAllBtnContainer.style.setProperty('display', 'none', 'important');
            }
        }
    </script>
@endsection