@extends('detailpagemaster')

@section('title', 'Home | Orka Sports')

@section('content')
<!-- layout-->
    <div id="layout">
        <section class="inner-banner position-relative">
        <img src="{{ asset('images/bg/hero/Orka-Sports-min.png') }}" alt="MMA Masterclass" class="w-100 banner-img">
    </section>
    <!-- Countdown Section (place this right after the .fade-slider div) -->
    <section id="countdownSection" class="countdown-section py-5 text-center" style="background: #000;">
        <div class="container">
            <div id="countdown" class="d-flex justify-content-center align-items-center gap-3"
                data-target="2026-11-17T15:00:00+04:00">
                <div class="countdown-box">
                    <div class="count-value" id="cd-days">0</div>
                    <div class="count-label">Days</div>
                </div>
                <div class="countdown-box">
                    <div class="count-value" id="cd-hours">00</div>
                    <div class="count-label">Hours</div>
                </div>
                <div class="countdown-box">
                    <div class="count-value" id="cd-minutes">00</div>
                    <div class="count-label">Minutes</div>
                </div>
                <div class="countdown-box">
                    <div class="count-value" id="cd-seconds">00</div>
                    <div class="count-label">Seconds</div>
                </div>
            </div>
            <div id="countdownMessage" class="mt-3" style="display:none;">
                <a href="#" class="btn-theme px-4 py-2">Get Tickets</a>
            </div>
        </div>
    </section>
    <!-- League Section -->
    <section class="league-section py-5 bg-black">
        <div class="container">
            <h2 class="text-center fw-bold" style="color:#fff;">ORKA Physique Universe Championship</h2>
        </div>
    </section>

    <section class="about-section py-5">
        <div class="container">
            <div class="row align-items-center">
            <div class="col-md-6">
                    <div class="about-img">
                        <img src="{{ asset('images/bg/hero/m1-min.png') }}" alt="About Us">
                    </div>
                </div>

                <!-- Right Content -->
                <div class="col-md-6">
                    <div class="about-content p-4">
                        <h5>Welcome to the ORKA Physique Universe Championship — the world’s most innovative international bodybuilding & bikini competition.</h5>
                        <p>Where global athletes transform discipline into art, and the stage becomes a celebration of culture, confidence and world-class physique excellence.</p>
                        <p>With participants from over 50+ countries, Mirror Stage technology, AI symmetry scoring and spectacular bikini showcases, this championship redefines what physique sports can be.
This is not just a competition — <b>it’s a movement</b>.</p>
                        <!--
                        <a href="#" class="btn-theme">Learn More</a>
                        -->
                    </div>
                </div>
            </div>
             <div class="row align-items-center">

                <!-- Left Image -->
                <div class="col-md-6">
                    <!-- <div class="about-img">
                        <img src="{{ asset('images/about-1.jpg') }}" alt="About Us">
                    </div> -->
                    <div class="about-content p-4">
                        <h5>Why ORKA Is Different</h5>
                        <p>ORKA Physique Universe is built for the new generation of athletes: bold, expressive and globally connected. Our format blends elite bodybuilding, artistic bikini presentations, digital voting and unforgettable stage performances. Athletes don’t just compete — they become icons.</p>
                        <p>Whether you're a competitor, fan or fitness brand, ORKA delivers an experience filled with energy, culture and pure human transformation.</p>
                        <!--
                        <a href="#" class="btn-theme">Learn More</a>
                        -->
                    </div>
                </div>

                <!-- Right Content -->
                <div class="col-md-6">
                    <div class="about-img">
                        <img src="{{ asset('images/bg/hero/mma-home-img2.png') }}" alt="About Us">
                    </div>
                </div>

            </div>
        </div>
    </section>
 
    
    <!-- Athletes Section -->
    <!-- Athletes Section (Glide.js) -->
    <section class="athletes-section py-5"
        style="background: linear-gradient(135deg, rgb(17 0 0), rgb(22 4 1) 30%, rgb(0 0 0) 70%, rgb(3 1 0));">
        <div class="container text-center">
            <h2 class="fw-bold mb-4 text-white">Our Athletes</h2>

            <div class="glide" id="athletesGlide">
                <div class="glide__track" data-glide-el="track">
                    <ul class="glide__slides">
                        <li class="glide__slide">
                            <div class="athlete-card bg-white">
                                <img src="{{ asset('user-img/26-min.png') }}" alt="Athlete 1">
                                <h5 class="mt-3 text-dark">Athlete 1</h5>
                                <p class="text-muted m-0">Kabaddi League</p>
                            </div>
                        </li>
                        <li class="glide__slide">
                            <div class="athlete-card bg-white">
                                <img src="{{ asset('user-img/012-min.png' ) }}" alt="Athlete 2">
                                <h5 class="mt-3 text-dark">Athlete 2</h5>
                                <p class="text-muted m-0">Kabaddi League</p>
                            </div>
                        </li>
                        <li class="glide__slide">
                            <div class="athlete-card bg-white">
                                <img src="{{ asset('user-img/013-min.png') }}" alt="Athlete 3">
                                <h5 class="mt-3 text-dark">Athlete 3</h5>
                                <p class="text-muted m-0">Kabaddi League</p>
                            </div>
                        </li>
                        <li class="glide__slide">
                            <div class="athlete-card bg-white">
                                <img src="{{ asset('user-img/016-min.png') }}" alt="Athlete 4">
                                <h5 class="mt-3 text-dark">Athlete 4</h5>
                                <p class="text-muted m-0">Kabaddi League</p>
                            </div>
                        </li>
                        <li class="glide__slide">
                            <div class="athlete-card bg-white">
                                <img src="{{ asset('user-img/015-min.png')}}" alt="Athlete 5">
                                <h5 class="mt-3 text-dark">Athlete 5</h5>
                                <p class="text-muted m-0">Kabaddi League</p>
                            </div>
                        </li>
                        <li class="glide__slide">
                            <div class="athlete-card bg-white">
                                <img src="{{ asset('user-img/016-min.png') }}" alt="Athlete 6">
                                <h5 class="mt-3 text-dark">Athlete 6</h5>
                                <p class="text-muted m-0">Kabaddi League</p>
                            </div>
                        </li>
                        <li class="glide__slide">
                            <div class="athlete-card bg-white">
                                <img src="{{ asset('user-img/athelte1.webp') }}" alt="Athlete 7">
                                <h5 class="mt-3 text-dark">Athlete 7</h5>
                                <p class="text-muted m-0">Kabaddi League</p>
                            </div>
                        </li>
                        <!-- Add more <li class="glide__slide"> ... </li> as needed -->
                    </ul>
                </div>

                <!-- Dots (pagination) -->
                <div class="glide__bullets mt-3" data-glide-el="controls[nav]"></div>
            </div>

            <div class="mt-4">
                <a href="home/athletes" class="btn-theme px-4 py-2">Discover More</a>
            </div>
        </div>
    </section>
    

    <!-- Latest News Section -->
    <!--
    <section class="latest-news-section py-5" style="background-color:#ffffff;">
        <div class="container">
            <h2 class="fw-bold text-center mb-5" style="color:#000;">Latest News</h2>
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card news-card border-0 shadow-sm">
                        <img src="{{ asset('images/all/1.jpg') }}" class="card-img-top" alt="News 1">
                        <div class="card-body">
                            <h5 class="card-title fw-bold" style="color:#2e3f6e;">fdklajsf</h5>
                            <p class="card-text text-muted"></p>
                            <a href="#" class="btn-theme" style="background-color:#2e3f6e; border:none;">Read
                                More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    -->
    <script>
        (function() {
        // Helper: pad number to 2 digits
        function pad2(n){ return n < 10 ? '0' + n : '' + n; }

        // Read element and target
        const countdownEl = document.getElementById('countdown');
        if (!countdownEl) return;

        // Try to get the target datetime from data-target; fallback to a default.
        const targetStr = countdownEl.getAttribute('data-target') || '2025-12-01T08:30:00+04:00';
        const targetDate = new Date(targetStr);

        // If target is invalid, log and exit
        if (isNaN(targetDate.getTime())) {
            console.error('Invalid countdown target date:', targetStr);
            return;
        }

        // Elements to update
        const daysEl = document.getElementById('cd-days');
        const hoursEl = document.getElementById('cd-hours');
        const minutesEl = document.getElementById('cd-minutes');
        const secondsEl = document.getElementById('cd-seconds');
        const messageEl = document.getElementById('countdownMessage');

        function updateCountdown() {
            const now = new Date();
            let diff = targetDate.getTime() - now.getTime(); // milliseconds

            if (diff <= 0) {
                // expired
                daysEl.textContent = '0';
                hoursEl.textContent = '00';
                minutesEl.textContent = '00';
                secondsEl.textContent = '00';
                // Show message / CTA
                if (messageEl) messageEl.style.display = 'block';
                // stop timer
                clearInterval(intervalId);
                return;
            }

            // Calculate time parts
            const sec = 1000;
            const minute = 60 * sec;
            const hour = 60 * minute;
            const day = 24 * hour;

            const days = Math.floor(diff / day);
            diff = diff - (days * day);

            const hours = Math.floor(diff / hour);
            diff = diff - (hours * hour);

            const minutes = Math.floor(diff / minute);
            diff = diff - (minutes * minute);

            const seconds = Math.floor(diff / sec);

            // Update DOM (days can be more than two digits)
            daysEl.textContent = String(days);
            hoursEl.textContent = pad2(hours);
            minutesEl.textContent = pad2(minutes);
            secondsEl.textContent = pad2(seconds);
        }

        // Initial update + interval
        updateCountdown();
        const intervalId = setInterval(updateCountdown, 1000);
    })();
    </script>
@endsection