@extends('frontend::layouts.app')

@section('content')
<!-- Page title -->
<section id="page-title">
    <div class="container">
        <div class="page-title">
            <h1>Services</h1>
            <!-- <span>{{ $page_description ?? 'Smart Energy and Water Solutions' }}</span> -->
        </div>
        <div class="breadcrumb">
            <ul <li><a href="{{ route('frontend.index') }}">
                    <li class="active"><a href="#">Services</a> </li>
            </ul>
        </div>
    </div>
</section>
<!-- end: Page title -->

<section class="sect-service page-service">
    <div class="container">

        <h2 class="text-center m-t-60 m-b-40 text-color">Our Solutions / โซลูชันของเรา</h2>

        <ul class="list list-service-item">
            <li>

                <div class="col-images">
                    <img src="{{ Module::asset('frontend:images/services/01.jpg') }}" alt="">
                </div>
                <div class="col-detail">
                    <h2 class="htitle">Hybrid Cloud Infra Modernization</h2>
                    <!-- <h5 class="text-muted mb-3">การปรับปรุงโครงสร้างพื้นฐาน Hybrid Cloud</h5> -->
                    <p class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        Lorem
                        Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                        printer took a galley of type and scrambled it to make a type specimen book. It has
                        survived
                        not only five centuries, but also the leap into electronic typesetting, remaining
                        essentially unchanged. It was popularised in the 1960s with the release of Letraset
                        sheets
                        containing Lorem Ipsum passages, and more recently with desktop publishing software like
                        Aldus PageMaker including versions of Lorem Ipsum.</p>
                        <a href="/service-detail" class="btn btn-outline" data-animate="fadeInUp">More detail</a>
                </div>

            </li>
            <li>

                <div class="col-images">
                    <img src="{{ Module::asset('frontend:images/services/02.jpg') }}" alt="">
                </div>
                <div class="col-detail">
                    <h2 class="htitle">Cloud Backup, DR & Security Compliance</h2>
                    <!-- <h5 class="text-muted mb-3">การสำรองข้อมูลบนคลาวด์, DR และการปฏิบัติตามความปลอดภัย</h5> -->
                    <p class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        Lorem
                        Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                        printer took a galley of type and scrambled it to make a type specimen book. It has
                        survived
                        not only five centuries, but also the leap into electronic typesetting, remaining
                        essentially unchanged. It was popularised in the 1960s with the release of Letraset
                        sheets
                        containing Lorem Ipsum passages, and more recently with desktop publishing software like
                        Aldus PageMaker including versions of Lorem Ipsum.</p>
                        <a href="/service-detail" class="btn btn-outline" data-animate="fadeInUp">More detail</a>
                </div>

            </li>
            <li>

                <div class="col-images">
                    <img src="{{ Module::asset('frontend:images/services/03.jpg') }}" alt="">
                </div>
                <div class="col-detail">
                    <h2 class="htitle">Data Warehousing & Analytics</h2>
                    <!-- <h5 class="text-muted mb-3">Data Warehousing & Analytics</h5> -->
                    <p class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        Lorem
                        Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                        printer took a galley of type and scrambled it to make a type specimen book. It has
                        survived
                        not only five centuries, but also the leap into electronic typesetting, remaining
                        essentially unchanged. It was popularised in the 1960s with the release of Letraset
                        sheets
                        containing Lorem Ipsum passages, and more recently with desktop publishing software like
                        Aldus PageMaker including versions of Lorem Ipsum.</p>
                        <a href="/service-detail" class="btn btn-outline" data-animate="fadeInUp">More detail</a>
                </div>

            </li>
            <li>

                <div class="col-images">
                    <img src="{{ Module::asset('frontend:images/services/04.jpg') }}" alt="">
                </div>
                <div class="col-detail">
                    <h2 class="htitle">Run Google Cloud Anywhere</h2>
                    <!-- <h5 class="text-muted mb-3">ใช้งาน Google Cloud ได้ทุกที่</h5> -->
                    <p class="desc">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                        Lorem
                        Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                        printer took a galley of type and scrambled it to make a type specimen book. It has
                        survived
                        not only five centuries, but also the leap into electronic typesetting, remaining
                        essentially unchanged. It was popularised in the 1960s with the release of Letraset
                        sheets
                        containing Lorem Ipsum passages, and more recently with desktop publishing software like
                        Aldus PageMaker including versions of Lorem Ipsum.</p>
                        <a href="/service-detail" class="btn btn-outline" data-animate="fadeInUp">More detail</a>
                </div>

            </li>
        </ul>

    </div>
</section>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Get the slide track elements
        const slideTrack1 = document.querySelector('.slide-track-1');
        const slideTrack2 = document.querySelector('.slide-track-2');
        // Function to pause animation
        function pauseAnimation(element) {
            if (element) {
                element.style.animationPlayState = 'paused';
            }
        }
        // Function to resume animation
        function resumeAnimation(element) {
            if (element) {
                element.style.animationPlayState = 'running';
            }
        }
        // Add event listeners for slide-track-1
        if (slideTrack1) {
            slideTrack1.addEventListener('mouseenter', function() {
                pauseAnimation(this);
            });
            slideTrack1.addEventListener('mouseleave', function() {
                resumeAnimation(this);
            });
        }
        // Add event listeners for slide-track-2 (if it exists)
        if (slideTrack2) {
            slideTrack2.addEventListener('mouseenter', function() {
                pauseAnimation(this);
            });
            slideTrack2.addEventListener('mouseleave', function() {
                resumeAnimation(this);
            });
        }
        // Alternative: Pause/resume on the entire slider container
        const slider = document.querySelector('.slider');
        if (slider) {
            slider.addEventListener('mouseenter', function() {
                const tracks = this.querySelectorAll('.slide-track-1, .slide-track-2');
                tracks.forEach(track => pauseAnimation(track));
            });
            slider.addEventListener('mouseleave', function() {
                const tracks = this.querySelectorAll('.slide-track-1, .slide-track-2');
                tracks.forEach(track => resumeAnimation(track));
            });
        }
    });
</script>
@endpush