@extends('layouts.website')

@section('content')
    @php
        $categoryList = collect($trainingCategories ?? [])->values();
        $trainingsByCategory = collect($trainingsByCategory ?? []);
        $allTrainings = $trainingsByCategory->flatten(1);
        $initialLimit = 6;
    @endphp
    <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-list/training-list-baner.webp') }}">
                            <div class="container">
                                <div class="hero-wrapper">
                                    
                                    <h1 class="title" data-aos="fade" data-aos-delay="500">Advance Your Skills 
                                        <br><span>with Industry-Recognized Training </span>
                                    </h1>
                                   
                                    <p class="subtitle marB42" data-aos="fade" data-aos-delay="500">Stay ahead with
                                        industry-recognized training in ISO
                                        standards, sustainability, quality, and compliance.</p>
                                    <div class="custom-btn-group mb-2" data-aos="fade" data-aos-delay="500">
                                        <a href="javascript:void(0)" class="bs-btn typ-fill" onclick="openPopupTC()"
                                            data-page-source="training">Get a Quote Now </a>
                                    </div>
                                    <div class="custom-btn-group down" data-aos="fade" data-aos-delay="500">
                                        <a href="#" class="bs-btn typ-fill" onclick="openPopupEvt()">Download
                                            Brochure</a>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section
            class="lyt-section typBlack background-wrapper set-bg typ-training-list-counter typ-counter-img typ-section"
            data-img="{{ asset('assets/images/training-list/img-train.webp') }}"
            style="background-repeat: no-repeat; background-position: center; background-size: cover;">
            <div class="container">
                <div class="common-heading" data-aos="fade" data-aos-delay="300">
                    <div class="line">
                        <img src="{{ asset('assets/images/blue-bg-line.svg') }}" class="img-fluid" alt="line-img">
                    </div>
                    <div class="bs-sub-heading typWhite text-uppercase">IRQS TRAINING ACADEMY<span class="ms-1"></span>
                    </div>
                </div>
                <div class="row mb-4 mb-30">
                    <div class="col-lg-6 col-12">
                        <h2 class="bs-heading typWhite" data-aos="fade" data-aos-delay="400">
                           Professional Training for Global Compliance Success
                        </h2>
                    </div>

                </div>

                <div class="row countermainBox trainig-box-list">
                    <div class="col-lg-5 col-12 mt-lg-0 mt-4">
                        <div class="content p-0" data-aos="fade" data-aos-delay="400">
                            <p class="bs-para typWhite mb-3 fs-20">
                              IRQS delivers expert-led Lead Auditor, Internal Auditor, Awareness and Implementation trainings designed to build strong competency across ISO and sustainability standards. Our CQI–IRCA accredited Lead Auditor courses and practical, scenario-based modules help professionals strengthen audit skills, deepen understanding and confidently meet evolving compliance and certification expectations.
                            </p>
                        </div>
                    </div>

                    <div class="col-lg-2 col-12">
                        <div class="box-img counter-img" data-aos="fade" data-aos-delay="500">
                            <img src="{{ asset('assets/images/training-list/acadamy.webp') }}" class="img-fluid"
                                alt="about-img ">
                        </div>
                    </div>
                    <div class="col-lg-5 col-12">
                        <div class="rightBox h-100" data-aos="fade" data-aos-delay="500">
                            <div class="content-wrapper h-100 ms-lg-5 ps-0">
                                <div class="bs-counter">
                                    <div class="box typ-tl-count">
                                        <div class="number"><span>30</span>+</div>
                                        <div class="content text-uppercase">Proven Legacy</div>
                                    </div>
                                    <div class="box typ-tl-count">
                                        <div class="number"><span>100000</span>+</div>
                                        <div class="content text-uppercase">Career Transformed</div>
                                    </div>

                                </div>
                                <div class="bs-counter">
                                    <div class="box typ-tl-count">
                                        <div class="number"><span>25</span>+</div>
                                        <div class="content text-uppercase">Training Programs
</div>
                                    </div>
                                    <div class="box typ-tl-count">
                                        <div class="number"><span>50</span>+</div>
                                        <div class="content text-uppercase">Countries Served</div>
                                    </div>

                                </div>
                                <div class="bs-counter">
                                    <div class="box typ-tl-count">
                                        <div class="number"><span>97</span>%</div>
                                        <div class="content text-uppercase">CLIENTS</div>
                                    </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 typ-explore-cert typ-space">
            <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">Training Programs <span class="ms-1"></span>
                                </div>
                            </div>
                            <h2 class="bs-heading mb-3" data-aos="fade" data-aos-delay="400">
                                Build Skills. Boost Confidence. <br>Stay Compliant.
                            </h2>

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

            <div class="container mt-4 explore-our-cert">
                <div class="tab-wrapper">
                    <div class="prev circle-arrow"><span class="icon icon-drop-icon arr-prev"></span></div>
                    <div class="swiper mySwiperOE">
                        <div class="swiper-wrapper">
                            @foreach ($categoryList as $category)
                                @php
                                    $categorySlug = \Illuminate\Support\Str::slug($category);
                                @endphp
                                <div class="swiper-slide" data-aos="fade" data-aos-delay="500">
                                    <button type="button" class="tab-btn" data-training-category="{{ $categorySlug }}">
                                        <span class="tab-dot">•</span><span>{{ $category }}</span>
                                    </button>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="circle-arrow next"><span class="icon icon-drop-icon arr-next"></span></div>
                </div>
                <div class="mt-4 mt-70">
                    <div id="trainings-panel" class="tab-content-box active" data-initial-limit="6">
                        <!-- <div id="trainingsGrid" class="row g-0">
                                @forelse ($allTrainings as $training)
                                    @php
                                        $trainingCategory = $training['category'] ?? 'Others';
                                        $trainingTitle = $training['title'] ?? 'Training Program';
                                        $trainingImage = $training['image'] ?? 'assets/images/training-list/auditor1.webp';
                                        $trainingAlt = $training['alt'] ?? $trainingTitle;
                                        $slug = $training['slug'] ?? null;
                                        $trainingQuery = $training['training_query'] ?? $trainingTitle;
                                        $trainingCategorySlug = \Illuminate\Support\Str::slug($trainingCategory);
                                        $cardClasses = 'col-12 col-md-4';
                                        if ($loop->index >= $initialLimit) {
                                            $cardClasses .= ' d-none initial-limit-hidden';
                                        }
                                        $registerUrl = route('training.calendar.index') . '?training=' . urlencode($trainingQuery);
                                    @endphp
                                    <div class="{{ $cardClasses }}" data-training-card="{{ $trainingCategorySlug }}">
                                        <div class="team-card" data-aos="fade" data-aos-delay="500">
                                            <div class="image-container">
                                                <img src="{{ asset($trainingImage) }}" alt="{{ $trainingAlt }}" class="team-img" />
                                                <div class="online-evt">
                                                    <p class="bs-para">{{ $trainingCategory }}</p>
                                                </div>
                                            </div>
                                            <div class="team-content">
                                                <div>
                                                    <h5 class="pb-3 tl-sec3">{{ $trainingTitle }}</h5>
                                                    <div class="team-role pb-2">
                                                        <div class="d-flex align-items-center justify-content-between">
                                                            <a href="{{ $registerUrl }}" class="event-reg">Register</a>
                                                            <img src="{{ asset('assets/images/training-list/line-arrow1.svg') }}" alt="line arrow" class="team-img" />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="col-12 text-center">
                                        <p class="bs-para text-white mb-0">Training data will be available shortly.</p>
                                    </div>
                                @endforelse
                            </div> -->

                        <div id="trainingsGrid" class="row g-0">

                            @php
                                $trainingCategoryIndex = []; // Track index per category
                            @endphp

                            @forelse ($allTrainings as $training)

                                @php
                                    $trainingCategory = $training['category'] ?? 'Others';
                                    $trainingTitle = $training['title'] ?? 'Training Program';
                                    $trainingImage = $training['image'] ?? 'assets/images/training-list/auditor1.webp';
                                    $trainingAlt = $training['alt'] ?? $trainingTitle;
                                    $slug = $training['slug'] ?? null;
                                    $trainingQuery = $training['training_query'] ?? $trainingTitle;

                                    $trainingCategorySlug = \Illuminate\Support\Str::slug($trainingCategory);

                                    // Column classes
                                    $cardClasses = 'col-12 col-md-4';
                                    if ($loop->index >= $initialLimit) {
                                        $cardClasses .= ' d-none initial-limit-hidden';
                                    }

                                    // Register URL
                                    $registerUrl = route('training.calendar.index') . '?training=' . urlencode($trainingQuery);

                                    /**
                                     * 👉 Middle card logic per category
                                     * Create category index if missing
                                     */
                                    if (!isset($trainingCategoryIndex[$trainingCategorySlug])) {
                                        $trainingCategoryIndex[$trainingCategorySlug] = 0;
                                    }

                                    $currentIndex = $trainingCategoryIndex[$trainingCategorySlug];

                                    // Define card class
                                    $teamCardClass = 'team-card';
                                    if ($currentIndex % 3 === 1) {
                                        $teamCardClass .= ' middle-col';
                                    }

                                    // Increment for that category
                                    $trainingCategoryIndex[$trainingCategorySlug]++;
                                @endphp

                                <div class="{{ $cardClasses }}" data-training-card="{{ $trainingCategorySlug }}">
                                    <div class="{{ $teamCardClass }}" data-aos="fade" data-aos-delay="500">
                                        <div class="image-container">
                                            <img src="{{ asset($trainingImage) }}" alt="{{ $trainingAlt }}" class="team-img" />
                                            <div class="online-evt">
                                                <p class="bs-para">{{ $trainingCategory }}</p>
                                            </div>
                                        </div>

                                        <div class="team-content">
                                            <div>
                                                <h5 class="pb-3 tl-sec3">{{ $trainingTitle }}</h5>

                                                <div class="team-role pb-2">
                                                    <div class="d-flex align-items-center justify-content-between">
                                                        <a href="{{ $registerUrl }}" class="event-reg">Register</a>
                                                        <img src="{{ asset('assets/images/training-list/line-arrow1.svg') }}"
                                                            alt="line arrow" class="team-img" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            @empty
                                <div class="col-12 text-center">
                                    <p class="bs-para text-white mb-0">Training data will be available shortly.</p>
                                </div>
                            @endforelse
                        </div>

                        <div class="row mt-4 d-none" id="trainingEmptyState">
                            <div class="col-12 text-center">
                                <p class="bs-para text-white mb-0">No training programs available under this category.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="custom-btn-group d-flex justify-content-center mt-4" data-aos="fade" data-aos-delay="500">
                    <button type="button" class="bs-btn my-3" id="viewAllTrainings" aria-expanded="false">
                        View all
                    </button>
                </div>
            </div>
        </section>
        <section class="lyt-section typUpskill p-0 typBlack typ-accre-recog typ-flex typ-flex-2">
            <div class="container">
                <div class="row flexsetion">
                    <div class="col-lg-4">
                        <div class="row mb-lg-5 mb-4" data-aos="fade" data-aos-delay="400">
                            <div class="col-12">
                                <h2 class="bs-heading typWhite maxw600" data-aos="fade" data-aos-delay="500">
                           Flexible Learning, Tailored for You
                                </h2>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 d-flex align-items-center">
                        <p class="bs-para pb-2" style="color:#fff;" data-aos="fade" data-aos-delay="500">Our training solutions provide flexible, expert-led programs designed to support diverse learning needs across industries.
                        </p>
                    </div>
                </div>
                <div class="row g-4">
                    <div class="col-md-4">
                        <div class="training-card" data-aos="fade" data-aos-delay="500"
                            style="background-image: url('{{ asset('assets/images/training-list/Live Online Training.webp') }}');">
                            <div class="card-overlay" data-aos="fade" data-aos-delay="500">
                                <h5>Live online training</h5>
                                <p>  Learn from expert trainers in engaging sessions delivered live online.</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="training-card" data-aos="fade" data-aos-delay="500"
                            style="background-image: url('{{ asset('assets/images/training-list/On-site at your premises.webp') }}');">
                            <div class="card-overlay">
                                <h5>On-Site At Your Premises</h5>
                                <p>  Our trainers deliver customised, hands-on programs directly at your premises.</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="training-card" data-aos="fade" data-aos-delay="500"
                            style="background-image: url('{{ asset('assets/images/training-list/Classroom Training.webp') }}');">
                            <div class="card-overlay">
                                <h5>Classroom Training</h5>
                                <p>  Attend structured, instructor-led sessions designed to build practical skills effectively.</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            </div>
        </section>
        <section class="typUpskill p-0 typ-accre-recog typ-certificate-list typ-certi-li-acc  "
            style="background: #01090F;">
            <div class="container-fluid">
                <div class="bs-grid-box">
                    <div class="leftBox container-padding-left-create">
                        <div class="common-heading pt-5" data-aos="fade" data-aos-delay="300">
                            <div class="line">
                                <img src="{{ asset('assets/images/blue-bg-line.svg') }}" class="img-fluid image-skills "
                                    alt="line-img">
                            </div>
                            <div class="bs-sub-heading typWhite text-uppercase">Your Training Journey</div>
                        </div>
                        <div class="row mb-lg-5 mb-4" data-aos="fade" data-aos-delay="400">
                            <div class="col-12">
                                <h2 class="bs-heading typWhite maxw600">
                                  Your path to skills and certification—step by step
                                </h2>
                            </div>
                        </div>
                        <div class="bs-tabs typ-cert-tab typ-borderNone" data-aos="fade" data-aos-delay="500">
                            <ul class="nav nav-pills mb-3 flex-column" id="pills-tab" role="tablist">
                                <li class="nav-item position-relative d-flex flex-column" role="presentation">
                                    <div class="d-flex align-items-center w-100">
                                        <button class="nav-link active w-100 text-start" id="pills-Quality-tab"
                                            data-bs-toggle="pill" data-bs-target="#pills-Quality" type="button" role="tab"
                                            aria-controls="pills-Quality" aria-selected="true">Step 1 –
                                            Choose the Training
                                            Program</button>
                                        <!-- <span
                                                class="icon icon-next-arrow position-absolute end-0 translate-middle-y me-3"></span> -->

                                    </div>
                                    <div class="tab-inner-detail tab-inner-detail-tl w-100"
                                        style="display: block; color: #FFFFFFB2; margin-left: 15px; margin-bottom: 10px;">
                                    Select the ISO course aligned with your industry, system maturity, and competency goals.
                                    </div>
                                </li>
                                <li class="nav-item position-relative d-flex flex-column" role="presentation">
                                    <div class="d-flex align-items-center w-100">
                                        <button class="nav-link w-100 text-start" id="pills-Environmental-tab"
                                            data-bs-toggle="pill" data-bs-target="#pills-Environmental" type="button"
                                            role="tab" aria-controls="pills-Environmental" aria-selected="false">Step
                                            2 –
                                             Attend the Training Your Way</button>
                                        <!-- <span
                                                class="icon icon-next-arrow position-absolute end-0 translate-middle-y me-3"></span> -->
                                    </div>
                                    <div class="tab-inner-detail tab-inner-detail-tl w-100"
                                        style="display: none; color: #FFFFFFB2; margin-left: 15px; margin-bottom: 10px;">
                                      Join live online, on-site, or classroom sessions delivered by qualified lead auditors.</div>
                                </li>
                                <li class="nav-item position-relative d-flex flex-column" role="presentation">
                                    <div class="d-flex align-items-center w-100">
                                        <button class="nav-link w-100 text-start" id="pills-Health-tab"
                                            data-bs-toggle="pill" data-bs-target="#pills-Health" type="button" role="tab"
                                            aria-controls="pills-Health" aria-selected="false">Step 3 –
                                            Schedule Your
                                            Exam</button>
                                        <!-- <span
                                                class="icon icon-next-arrow position-absolute end-0 translate-middle-y me-3"></span> -->
                                    </div>
                                    <div class="tab-inner-detail tab-inner-detail-tl w-100"
                                        style="display: none; color: #FFFFFFB2; margin-left: 15px; margin-bottom: 10px;">
                                      Book your evaluation slot and complete the required assessments for qualification.</div>
                                </li>
                                <li class="nav-item position-relative d-flex flex-column" role="presentation">
                                    <div class="d-flex align-items-center w-100">
                                        <button class="nav-link w-100 text-start" id="pills-Security-tab"
                                            data-bs-toggle="pill" data-bs-target="#pills-Security" type="button" role="tab"
                                            aria-controls="pills-Security" aria-selected="false">Step 4 –
                                            Get
                                            Certified</button>
                                        <!-- <span
                                                class="icon icon-next-arrow position-absolute end-0 translate-middle-y me-3"></span> -->
                                    </div>
                                    <div class="tab-inner-detail tab-inner-detail-tl w-100"
                                        style="display: none; color: #FFFFFFB2; margin-left: 15px; margin-bottom: 10px;">
                                     Pass the exam, meet the criteria, and receive your accredited certification.</div>
                                </li>


                            </ul>
                        </div>

                    </div>
                    <div class="rightBox" data-aos="fade" data-aos-delay="500">
                        <div class="bs-tabs typ-img-skills  typ-tl-cp">
                            <div class="tab-content" id="pills-tabContent">
                                <div class="tab-pane fade show active" id="pills-Quality" role="tabpanel"
                                    aria-labelledby="pills-Quality-tab">
                                    <div class="bg-img">
                                        <img src="{{ asset('assets/images/training-list/Choose the Training Program.webp') }}"
                                            class="img-fluid image-skills" alt="big-img ">
                                    </div>
                                    <div class="mainContent">
                                        <!-- <div class="box-img">
                                                    <img src="{{ asset('assets/images/training-list/training-list1.webp') }}"
                                                        class="img-fluid" alt="small-img">
                                                </div> -->
                                        <!-- <div class="bs-para"><strong>Step 1: Application</strong><br>
                                                    Begin your certification journey by submitting a comprehensive application.
                                                    Our team will review your organization's readiness and provide guidance on
                                                    the certification process requirements.
                                                </div> -->
                                        <!-- <a href="{{ route('training.calendar.index') }}?training=" class="bs-btn typ-borderNone">Learn More</a> -->
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-Environmental" role="tabpanel"
                                    aria-labelledby="pills-Environmental-tab">
                                    <div class="bg-img">
                                        <img src="{{ asset('assets/images/training-list/Attend the Training Your Way.webp') }}"
                                            class="img-fluid image-skills" alt="big-img">
                                    </div>
                                    <div class="mainContent">
                                        <!-- <div class="box-img">
                                                    <img src="{{ asset('assets/images/certificate-list/acc1.webp') }}"
                                                        class="img-fluid" alt="small-img">
                                                </div> -->
                                        <!-- <div class="bs-para"><strong>Step 2: Stage 1 Audit</strong><br>
                                                    This initial audit focuses on reviewing your documentation and management
                                                    system preparation. Our auditors will assess your readiness for the
                                                    comprehensive Stage 2 audit.
                                                </div> -->
                                        <!-- <a href="{{ route('training.calendar.index') }}?training=" class="bs-btn typ-borderNone">Learn More</a> -->
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-Health" role="tabpanel"
                                    aria-labelledby="pills-Health-tab">
                                    <div class="bg-img">
                                        <img src="{{ asset('assets/images/training-list/Schedule Your Exam.webp') }}"
                                            class="img-fluid image-skills" alt="big-img">
                                    </div>
                                    <div class="mainContent">
                                        <!-- <div class="box-img">
                                                    <img src="{{ asset('assets/images/certificate-list/acc1.webp') }}"
                                                        class="img-fluid" alt="small-img">
                                                </div>
                                                <div class="bs-para"><strong>Step 3: Stage 2 Audit</strong><br>
                                                    This is the second and more in-depth stage of the audit process.
                                                    Our auditors will conduct a comprehensive evaluation of your management
                                                    system implementation and effectiveness.
                                                </div>
                                                <a href="{{ route('training.calendar.index') }}?training=" class="bs-btn typ-borderNone">Learn More</a> -->
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="pills-Security" role="tabpanel"
                                    aria-labelledby="pills-Security-tab">
                                    <div class="bg-img">
                                        <img src="{{ asset('assets/images/training-list/Get Certified.webp') }}"
                                            class="img-fluid image-skills" alt="big-img">
                                    </div>
                                    <div class="mainContent">
                                        <!-- <div class="box-img">
                                                    <img src="{{ asset('assets/images/certificate-list/acc1.webp') }}"
                                                        class="img-fluid" alt="small-img">
                                                </div>
                                                <div class="bs-para"><strong>Step 4: Certification</strong><br>
                                                    Upon successful completion of the audit process, your organization will
                                                    receive ISO certification. This demonstrates your commitment to quality,
                                                    environmental responsibility, and continuous improvement.
                                                </div>
                                                <a href="{{ route('training.calendar.index') }}?training=" class="bs-btn typ-borderNone">Learn More</a> -->
                                    </div>
                                </div>
                                <!-- <div class="tab-pane fade" id="pills-Surveillance" role="tabpanel"
                                            aria-labelledby="pills-Surveillance-tab">
                                            <div class="bg-img">
                                                <img src="{{ asset('assets/images/certificate-list/acc1.webp') }}"
                                                    class="img-fluid" alt="big-img">
                                            </div>
                                            <div class="mainContent">
                                                <div class="box-img">
                                                    <img src="{{ asset('assets/images/certificate-list/acc1.webp') }}"
                                                        class="img-fluid" alt="small-img">
                                                </div>
                                                <div class="bs-para"><strong>Step 5: Surveillance</strong><br>
                                                    Regular surveillance audits ensure your management system continues to
                                                    meet certification requirements. These audits help maintain compliance
                                                    and identify opportunities for improvement.
                                                </div>
                                                <a href="{{ route('training.calendar.index') }}?training=" class="bs-btn typ-borderNone">Learn More</a>
                                            </div>
                                        </div> -->
                                <!-- <div class="tab-pane fade" id="pills-Recertification" role="tabpanel"
                                            aria-labelledby="pills-Recertification-tab">
                                            <div class="bg-img">
                                                <img src="{{ asset('assets/images/certificate-list/acc1.webp') }}"
                                                    class="img-fluid" alt="big-img">
                                            </div>
                                            <div class="mainContent">
                                                <div class="box-img">
                                                    <img src="{{ asset('assets/images/certificate-list/acc1.webp') }}"
                                                        class="img-fluid" alt="small-img">
                                                </div>
                                                <div class="bs-para"><strong>Step 6: Recertification</strong><br>
                                                    Every three years, your organization will undergo a recertification audit
                                                    to renew your ISO certification. This ensures continued compliance and
                                                    demonstrates ongoing commitment to excellence.
                                                </div>
                                                <a href="{{ route('training.calendar.index') }}?training=" class="bs-btn typ-borderNone">Learn More</a>
                                            </div>
                                        </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </div>
            </div>
        </section>


        <!-- <section class="lyt-section typ-trainning typ-blog">
                    <div class="container-padding-left-create">
                        <div class="training-wrapper typ-blog-wrapper">
                            <div class="leftBox" data-aos="fade" data-aos-delay="400">
                                <div>
                                    <div class="common-heading">
                                        <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">Career-Boosting Courses</div>
                                    </div>
                                    <div class="row mb-lg-5 mb-4">
                                        <div class="col-12">
                                            <h2 class="bs-heading">
                                                Top Courses for Career Growth & Industry Demand
                                            </h2>
                                        </div>
                                    </div>
                                </div>
                                <div class="custom-display-mob">
                                    <div
                                        class="d-flex align-items-center justify-content-lg-end justify-content-md-end justify-content-end gap-4 mb-4">
                                        <div class="bs-swipper-icons">
                                            <div class="swiper-button-prev blog-prev">
                                                <span class="icon typ-black icon-link-arrow"></span>
                                            </div>
                                            <div class="swiper-button-next blog-next">
                                                <span class="icon typ-black icon-link-arrow"></span>
                                            </div>
                                        </div>
                                        <div>
                                            <a href="{{ route('training.calendar.index') }}?training=" class="bs-btn typBlack">View All</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="rightBox" data-aos="fade" data-aos-delay="400">
                                <div class="container-right-space-target custom-display">
                                    <div
                                        class="d-flex align-items-center justify-content-lg-end justify-content-md-end justify-content-end gap-4 mb-4 pe-lg-5">
                                        <div class="bs-swipper-icons">
                                            <div class="swiper-button-prev blog-prev">
                                                <span class="icon typ-black icon-link-arrow"></span>
                                            </div>
                                            <div class="swiper-button-next blog-next">
                                                <span class="icon typ-black icon-link-arrow"></span>
                                            </div>
                                        </div>
                                        <div>
                                            <a href="{{ route('training.calendar.index') }}?training=" class="bs-btn typBlack">View All</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper blog-swiper">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <div class="bs-training-box typ-blog-box">
                                                <div class="box-img">
                                                    <img src="{{ asset('assets/images/blog/1.jpg') }}" class="img-fluid" alt="training-1">
                                                </div>
                                                <div class="tag">In-Demand</div>
                                                <div class="content">
                                                    <div class="heading">ISO 14001:2015 EMS Courses</div>
                                                    <div class="team-role mt-4">
                                                        <a type="button" class="date text-decoration-underline event-reg1"
                                                            onclick="window.location.href='{{ route('training.calendar.index') }}'">Register</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="bs-training-box typ-blog-box">
                                                <div class="box-img">
                                                    <img src="{{ asset('assets/images/blog/2.jpg') }}" class="img-fluid" alt="training-1">
                                                </div>
                                                <div class="tag">Trending Course</div>
                                                <div class="content">
                                                    <div class="heading">ISO 45001:2018 OHSMS Courses</div>
                                                    <div class="team-role mt-4">
                                                        <a type="button" class="date text-decoration-underline event-reg"
                                                            onclick="window.location.href='{{ route('training.calendar.index') }}'">Register</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="bs-training-box typ-blog-box">
                                                <div class="box-img">
                                                    <img src="{{ asset('assets/images/blog/3.jpg') }}" class="img-fluid" alt="training-1">
                                                </div>
                                                <div class="tag">Trending</div>
                                                <div class="content">
                                                    <div class="heading">ISO 27001: 2022 ISMS Courses</div>
                                                    <div class="team-role mt-4">
                                                        <a type="button" class="date text-decoration-underline event-reg"
                                                            onclick="window.location.href='{{ route('training.calendar.index') }}'">Register</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="bs-training-box typ-blog-box">
                                                <div class="box-img">
                                                    <img src="{{ asset('assets/images/blog/1.jpg') }}" class="img-fluid" alt="training-1">
                                                </div>
                                                <div class="tag">In-Demand</div>
                                                <div class="content">
                                                    <div class="heading">FSSC 22000 Internal Auditor Training: A Comprehensive
                                                        Guide</div>
                                                    <div class="team-role mt-4">
                                                        <a type="button" class="date text-decoration-underline event-reg"
                                                            onclick="window.location.href='{{ route('training.calendar.index') }}'">Register</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="set-blog-bg" data-aos="fade" data-aos-delay="300">
                            <img src="{{ asset('assets/images/blog-bg.jpg') }}" class="img-fluid" alt="blogs-bg-img">
                        </div>
                    </div>
                </section> -->

        <!-- <section class="lyt-section typ-trainning typ-blog">
                    <div class="container-padding-left-create">
                        <div class="training-wrapper typ-blog-wrapper">
                            <div class="leftBox" data-aos="fade" data-aos-delay="400">
                                <div>
                                    <div class="common-heading">
                                        <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">Career-Boosting Courses</div>
                                    </div>
                                    <div class="row mb-lg-5 mb-4">
                                        <div class="col-12">
                                            <h2 class="bs-heading">
                                                Top Courses for Career Growth & Industry Demand
                                            </h2>
                                        </div>
                                    </div>
                                </div>
                                <div class="custom-display-mob">
                                    <div
                                        class="d-flex align-items-center justify-content-lg-end justify-content-md-end justify-content-end gap-4 mb-4">
                                        <div class="bs-swipper-icons">
                                            <div class="swiper-button-prev blog-prev">
                                                <span class="icon typ-black icon-link-arrow"></span>
                                            </div>
                                            <div class="swiper-button-next blog-next">
                                                <span class="icon typ-black icon-link-arrow"></span>
                                            </div>
                                        </div>
                                        <div>
                                            <a href="#" class="bs-btn typBlack">View All</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="rightBox" data-aos="fade" data-aos-delay="400">
                                <div class="container-right-space-target custom-display">
                                    <div
                                        class="d-flex align-items-center justify-content-lg-end justify-content-md-end justify-content-end gap-4 mb-4 pe-lg-5">
                                        <div class="bs-swipper-icons">
                                            <div class="swiper-button-prev blog-prev">
                                                <span class="icon typ-black icon-link-arrow"></span>
                                            </div>
                                            <div class="swiper-button-next blog-next">
                                                <span class="icon typ-black icon-link-arrow"></span>
                                            </div>
                                        </div>
                                        <div>
                                            <a href="#" class="bs-btn typBlack">View All</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="swiper blog-swiper">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide">
                                            <div class="bs-training-box typ-blog-box">
                                                <div class="box-img">
                                                    <img src="{{ asset('assets/images/blog/1.jpg') }}" class="img-fluid"
                                                        alt="training-1">
                                                </div>
                                                <div class="tag">In-Demand</div>
                                                <div class="content">
                                                    <div class="heading">ISO 14001:2015 EMS Courses</div>
                                                    <div class="team-role mt-4">
                                                        <a href="#" class="date text-decoration-underline"
                                                            onclick="openPopupEvt()">Register</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="bs-training-box typ-blog-box">
                                                <div class="box-img">
                                                    <img src="{{ asset('assets/images/blog/2.jpg') }}" class="img-fluid"
                                                        alt="training-1">
                                                </div>
                                                <div class="tag">Trending Course</div>
                                                <div class="content">
                                                    <div class="heading">ISO 45001:2018 OHSMS Courses</div>
                                                    <div class="team-role mt-4">
                                                        <a href="#" class="date text-decoration-underline"
                                                            onclick="openPopupEvt()">Register</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="bs-training-box typ-blog-box">
                                                <div class="box-img">
                                                    <img src="{{ asset('assets/images/blog/3.jpg') }}" class="img-fluid"
                                                        alt="training-1">
                                                </div>
                                                <div class="tag">Trending</div>
                                                <div class="content">
                                                    <div class="heading">ISO 27001: 2022 ISMS Courses</div>
                                                    <div class="team-role mt-4">
                                                        <a href="#" class="date text-decoration-underline"
                                                            onclick="openPopupEvt()">Register</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="swiper-slide">
                                            <div class="bs-training-box typ-blog-box">
                                                <div class="box-img">
                                                    <img src="{{ asset('assets/images/blog/1.jpg') }}" class="img-fluid"
                                                        alt="training-1">
                                                </div>
                                                <div class="tag">In-Demand</div>
                                                <div class="content">
                                                    <div class="heading">FSSC 22000 Internal Auditor Training: A Comprehensive
                                                        Guide</div>
                                                    <div class="team-role mt-4">
                                                        <a href="#" class="date text-decoration-underline"
                                                            onclick="openPopupEvt()">Register</a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="set-blog-bg" data-aos="fade" data-aos-delay="300">
                            <img src="{{ asset('assets/images/blog-bg.jpg') }}" class="img-fluid" alt="blogs-bg-img">
                        </div>
                    </div>
                </section> -->

        <section class="typ-training-list-lst pt-3 background-wrapper set-bg lyt-section"
            data-img="{{ asset('assets/images/training-list/group-bg1.webp') }}">
            <div class="container-padding-left-create">
                <div class="container-fluid">
                    <div class="row g-2">
                        <div class="col-md-6 d-flex align-items-center">
                            <div class="maxw400">
                                <h2 class="bs-heading mb-4" data-aos="fade" data-aos-delay="200">
                                    Advance Your Career with Expert-Led <span>Training</span>

                                </h2>
                                <p class="bs-para mb-4" data-aos="fade" data-aos-delay="300">
                             Learn from industry specialists and gain practical skills that support real professional growth.
                                </p>
                                <a href="{{ route('training.calendar.index') }}?training=" class="bs-btn typ-yellow"
                                    data-aos="fade" data-aos-delay="400">View
                                    Available
                                    Dates</a>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <img src="{{ asset('assets/images/training-list/man-group-1.webp') }}" class="img-fluid"
                                alt="background-img">
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="bs-events">
            <div class="typ-evt-cont">
                <div class="popup-overlay" id="popup" data-aos="fade" data-aos-delay="500">
                    <div class="popup-box">
                        <span class="popup-close" onclick="closePopupEvt()">✖ CLOSE</span>

                        <div class="row g-4 align-items-center">
                            <div class="col-lg-12">

                                <div class="common-heading" data-aos="fade" data-aos-delay="300">
                                    <div class="line">
                                        <img src="{{ asset('assets/images/blue-bg-line.svg') }}" class="img-fluid"
                                            alt="line-img">
                                    </div>
                                    <div class="bs-sub-heading typWhite text-uppercase">
                                        Get in Touch With Us
                                    </div>
                                </div>


                                <div class="row mb-lg-5 mb-1" data-aos="fade" data-aos-delay="400">
                                    <div class="col-12">
                                        <h2 class="bs-heading typWhite maxw600">
                                            Tell us what you need?<br>we’ll take it from here.
                                        </h2>
                                    </div>
                                </div>


                                <form>
                                    <div class="container-fluid">
                                        <div class="row">

                                            <div class="col-lg-9">
                                                <div class="row g-3">
                                                    <div class="col-md-6">
                                                        <input type="text" class="form-control" placeholder="Full Name *"
                                                            required>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="text" class="form-control" placeholder="Last Name *"
                                                            required>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="email" class="form-control" placeholder="Email *"
                                                            required>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="tel" class="form-control" placeholder="Phone Number *"
                                                            required>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="text" class="form-control" placeholder="Location *"
                                                            required>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <input type="text" class="form-control" placeholder="Requirement *"
                                                            required>
                                                    </div>
                                                    <div class="col-md-6 position-relative">
                                                        <select class="form-select" required>
                                                            <option selected disabled>
                                                                Enquiry
                                                            </option>
                                                            <option>Option 1</option>
                                                            <option>Option 2</option>
                                                        </select>
                                                        <span class="dropdown-angle">
                                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                                                stroke="#b0b8c1" stroke-width="2.5" stroke-linecap="round"
                                                                stroke-linejoin="round">
                                                                <polyline points="6 9 12 15 18 9"></polyline>
                                                            </svg>
                                                        </span>
                                                    </div>
                                                    <div class="col-md-6 position-relative">
                                                        <select class="form-select" required>
                                                            <option selected disabled>
                                                                Service Required For*
                                                            </option>
                                                            <option>Option 1</option>
                                                            <option>Option 2</option>
                                                        </select>
                                                        <span class="dropdown-angle">
                                                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
                                                                stroke="#b0b8c1" stroke-width="2.5" stroke-linecap="round"
                                                                stroke-linejoin="round">
                                                                <polyline points="6 9 12 15 18 9"></polyline>
                                                            </svg>
                                                        </span>
                                                    </div>
                                                    <div class="col-12 mt-4">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="checkbox" id="agree">
                                                            <p class="form-check-label typWhite bs-subheading" for="agree">
                                                                I agree to receive marketing information via email from
                                                                IRCLASS and its affiliates...
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="row d-flex align-items-center my-4 gy-3">
                                                    <div class="col-md-6">
                                                        <div class="g-recaptcha"
                                                            data-sitekey="{{ config('services.recaptcha.site_key') }}">
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <button type="submit" class="btn btn-submit">Submit</button>

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


                                            <div class="col-lg-3 text-center">
                                                <div class="orange-frame">
                                                    <img src="{{ asset('assets/images/certified-img.png') }}"
                                                        alt="Event Person" class="img-fluid">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>

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


        <!-- back to top  -->
        <a href="{{ route('training.calendar.index') }}?training=" 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 Training page --}}
    @include('components.enquiry-form-wrapper', ['pageSource' => 'training', 'formType' => 'enquiry'])
    @include('website.partials.include_js')
    <script>
        initTrainingExplorer();
    </script>
@endsection