@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/Cyber/cyber-security.webp') }}">
                        <div class="container">
                            <div class="hero-wrapper">
                                <h1 class="title">Cybersecurity Solutions
                                    <span> for a Digital Future</span>
                                </h1>
                                <p class="subtitle marB42">Comprehensive support through labs, consulting, and
                                    response teams.Equipping businesses to thrive securely in the digital age.

                                </p>
                                <div class="custom-btn-group mb-2">
                                    <a href="javascript:void(0)" class="bs-btn typ-fill" onclick="openPopupTC()">Get a Quote Now</a>
                                </div>
                                <!-- <div class="custom-btn-group down">
                                    <a href="#" class="bs-btn typ-fill typ-hover" onclick="openPopupEvt()">Upcoming
                                        batches</a>

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

    <section class="lyt-section bs-leaders typ-leaders">
        <div class="container">

            <div class="row d-flex justify-content-center">
                <div class="col-lg-8 col-12 text-center">
                    <div class="bs-sub-heading typBlack text-uppercase">Our Trusted Cybersecurity <span
                            class="ms-1">Partners</span>
                    </div>
                    <h2 class="bs-heading typBlack" data-aos="fade" data-aos-delay="400">
                        Collaborating with Industry Leaders to Safeguard Your Digital Future
                    </h2>
                </div>

            </div>
            <div class="row g-4 rwo-line">
                <!-- GlobalLogic Card -->
                <div class="col-md-6 leader-margin">
                    <div class="service-card">
                        <img src="{{ asset('assets/images/Cyber/Global-logic.svg') }}" alt="GlobalLogic Logo" class="mb-3"
                            style="max-width: 180px;">
                        <h5>GlobalLogic - Innovation-Led Cybersecurity Services</h5>
                        <p>Partnering with IRQs, GlobalLogic brings cutting-edge digital engineering to strengthen
                            your security posture. Benefit from scalable, AI-powered solutions tailored for complex
                            enterprise needs.</p>
                        <a href="#">Explore Services</a>
                    </div>
                </div>
                <!-- 360 Total Security Card -->
                <div class="col-md-6 leader-margin">
                    <div class="service-card">
                        <img src="{{ asset('assets/images/Cyber/Total-360.svg') }}" alt="360 Total Security Logo" class="mb-3"
                            style="max-width: 180px;">
                        <h5>Comprehensive Protection for Evolving Cyber Threats</h5>
                        <p>360 Total Security delivers all-in-one cybersecurity for individuals and businesses. It
                            features powerful antivirus engines and real-time threat detection. System optimization
                            tools ensure comprehensive endpoint protection.</p>
                        <a href="#">Explore Services</a>
                    </div>
                </div>
            </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="{{ asset('assets/images/blue-bg-line.svg') }}" class="img-fluid" alt="line-img">
                        </div>
                        <div class="bs-sub-heading typWhite text-uppercase">Key <span class="ms-1">benefits</span>
                        </div>
                    </div>
                    <h2 class="bs-heading typWhite" data-aos="fade" data-aos-delay="400">
                        Empowering Your Digital Transformation Journey
                    </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">Audits Handled by Industry Experts</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">Solutions Tailored to Your Needs</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">Powered by the Latest Technology</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">Always-On Support You Can Trust</div>
                    </div>
                </div>

            </div>
        </div>
    </section>
    <section class="lyt-section bs-events set-bg typ-detained-pro"
        data-img="{{ asset('assets/images/certification/isotrop.webp') }}">
        <div class="container typ-abt-events">

            <div class="row align-items-start">
                <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">Take a Closer Look at Our Cybersecurity Services</div>

                </div>
                <div class="col-md-6">

                    <h2 class="bs-heading mb-5" data-aos="fade" data-aos-delay="400">
                        Explore Advanced Cybersecurity Solutions
                    </h2>
                    <div class="event-desc bs-para mb-5">
                        Looking to protect your digital infrastructure from evolving cyber threats? Our
                        comprehensive cybersecurity services are designed to secure your business across IT and OT
                        environments. From threat detection and risk assessment to compliance support and real-time
                        monitoring, ISSPL helps you stay ahead in the digital age.
                    </div>
                    @if(\App\Models\CyberSecurityBrochure::getActive())
                        <div class="custom-btn-group mb-2">
                            <button type="button" 
                                    onclick="downloadBrochure('{{ route('cyber-security-service.brochure.download') }}', this)"
                                    class="bs-btn typ-fill">Download Brochure</button>
                        </div>
                    @endif
                </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="maxw400">
                        <h2 class="bs-heading mb-4" data-aos="fade" data-aos-delay="200">
                            Let's get you certified-Start your journey <span>today!</span>
                        </h2>
                        <p class="bs-para mb-4" data-aos="fade" data-aos-delay="300">
                            Connect with our experts for a seamless and hassle-free certification process.
                        </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>
    <div class="sticky-btn">
        <a href="">
            <img src="{{ asset('assets/images/btn.svg') }}" class="img-fluid" alt="button">
        </a>
    </div>
</main>

<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);
    }
</script>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

{{-- Include enquiry form modal for Cyber Security page --}}
@include('components.enquiry-form-wrapper', ['pageSource' => 'cyber-security', 'formType' => 'enquiry'])

@endsection