@extends('layouts.app')

@section('title')
    Registrasi Pendakian Gunung Prau | PRAU
@endsection

@section('content')
    <!-- Jumbo Tron -->
    {{-- <header class="text-center">
        <h1>
            Pusing Mikirin SKRIPSI
            <br />
            Yang Tak Kunjung Selesai?
        </h1>
        <p class="mt-3">
            Kami ada solusinya!
            <br />
            registrasi online Gunung Prau, YUKK!
        </p>
        <a href="#popular" class="btn btn-get-started px-4 mt-4"> Explore </a>
    </header> --}}

    <!-- Cover Page -->
    <div class="carousel-inner">
        <div class="carousel-item active jumbotron-slide position-relative">
            <img src="{{ asset('frontend/images/prau-cover3.png') }}"
                class="img-fluid w-100 h-100 object-fit-cover position-absolute top-0 start-0 jumbotron-image" alt="Prau">
            <div class="overlay"></div>

            <!-- Cuaca Info -->
            <div class="weather-info-box position-absolute z-3 d-flex flex-column align-items-center">
                <div id="weatherInfo" class="weather-info">
                    <div class="location d-flex justify-content-center align-items-center mt-2">
                        <i class="fa-solid fa-location-dot mr-2 location-icon"></i>
                        <h4 class="locationText m-0">Wonosobo</h4>
                    </div>
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center me-3">
                            <img id="weatherIcon" src="" alt="Icon Cuaca" class="weather-icon me-2">
                            <span id="weatherTemp">--°C</span>
                        </div>

                        <div class="forecast d-flex gap-3">
                            <div class="forecast-day text-center">
                                <img id="day1Icon" src="" alt="Icon" width="30">
                                <div id="day1Name">--</div>
                            </div>
                            <div class="forecast-day text-center">
                                <img id="day2Icon" src="" alt="Icon" width="30">
                                <div id="day2Name">--</div>
                            </div>
                            <div class="forecast-day text-center">
                                <img id="day3Icon" src="" alt="Icon" width="30">
                                <div id="day3Name">--</div>
                            </div>
                        </div>
                        {{-- <div id="weatherDesc" class="weather-description">Memuat cuaca...</div> --}}

                        {{-- <div id="forecastText" class="weather-next">Memuat prakiraan cuaca...</div> --}}
                    </div>
                </div>
            </div>

            <div class="container h-100 d-flex flex-column flex-md-row align-items-center justify-content-between">
                <!-- Teks Jumbotron (Kiri) -->
                <div class="text-white jumbotron-content-left me-md-4 mb-4 mb-md-0">
                    <h1 class="display-1 fw-bold">PRAU</h1>
                    <p class="lead">Gunung Prau, Mahkota Dieng yang Menyentuh Langit!<br>Terletak di jantung Pulau Jawa,
                        Gunung Prau menawarkan<br>keindahan alam dan petualangan tiada tara.</p>
                    <a href="#" class="btn btn-get-started mt-3 px-4 py-2">Daftar Pendakian</a>
                    <a href="#track" class="btn btn-show-track mt-3 px-4 py-2">Lihat Jalur</a>
                </div>

                <!-- Gallery Cards (Right Side) -->
                <div class="jumbotron-card d-flex justify-content-end">
                    <div>
                        <!-- Title -->
                        <div class="text-start mb-3">
                            <h5 id="galleryTitle" class="text-white mb-1 gallery-title">Gallery</h5>
                            <div id="galleryLine" class="gallery-line"></div>
                        </div>

                        <!-- Card Wrapper with overflow hidden -->
                        <div id="cardContainerWrapper" style="overflow: hidden; visibility: hidden;">
                            <div id="cardContainer" class="d-flex">
                                @foreach ($galleries as $index => $gallery)
                                    <div class="card border-1 shadow-sm gallery-card"
                                        style="border-radius: 12px; width: 160px; flex: 0 0 auto;">
                                        <div class="testimonial-content">
                                            <div class="image-gallery" style="height: 200px; overflow: hidden;">
                                                <img src="{{ asset('storage/' . $gallery->image_path) }}"
                                                    class="img-fluid rounded-3 w-100 h-100 object-fit-cover"
                                                    alt="Gallery Image">
                                            </div>
                                        </div>

                                        <!-- Judul overlay -->
                                        <div class="gallery-card-title mb-3 ml-2">
                                            {{ $gallery->title }}
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        <!-- Navigation Dots -->
                        <div id="navDots" class="d-flex justify-content-center gap-2 mt-3">
                            {{-- Dots akan di-generate lewat JavaScript --}}
                        </div>
                    </div>
                </div>
                {{-- End Gallery Cards (Right Side) --}}
            </div>
        </div>
    </div>
    <!-- End Cover Page -->
    <!-- End Jumbo Tron -->

    <!-- Content -->
    <main>

        <div class="container">
            <section class="section-stats row justify-content-center" id="stats">
                <div class="col-3 col-md-3 stats-detail">
                    <h2>{{ $track_mount }}</h2>
                    <p>Jalur</p>
                </div>
                <div class="col-3 col-md-3 stats-detail">
                    <h2>{{ $total_news }}</h2>
                    <p>Berita</p>
                </div>
                <div class="col-3 col-md-3 stats-detail">
                    <h2>{{ $user }}</h2>
                    <p>Pendaki</p>
                </div>
                {{-- <div class="col-3 col-md-2 stats-detail">
                    <h2>{{ $total_transaksi }}</h2>
                    <p>Transaksi</p>
                </div> --}}
            </section>
        </div>

        <section class="section-popular" id="track">
            <div class="container">
                <div class="row">
                    <div class="col text-center section-popular-heading">
                        <h2>Jalur Pendakian</h2>
                        <p>
                            Jalur Pendakian
                            <br />
                            yang ada di Gunung Prau
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section class="section-popular-content" id="popularContent">
            <div class="container">
                <div class="section-popular-travel row justify-content-center">

                    @foreach ($items as $item)
                        <div class="col-12 col-sm-8 col-md-6 col-lg-4">
                            <div class="card-travel text-center d-flex flex-column" {{-- style="background-image: url('{{ $item->galleries->count() ? asset('storage/' . $item->galleries->first()->image) : '' }}');" --}}>
                                <div class="image-container-track">
                                    <img src="{{ $item->galleries->count() ? asset('storage/' . $item->galleries->first()->image) : '' }}"
                                        alt="" class="img-fluid">
                                    <div class="overlay">
                                        <div class="travel-country"><i class="fa-solid fa-location-dot"></i>
                                            {{ $item->location }}
                                        </div>
                                        <div class="travel-location">{{ $item->title }}</div>
                                    </div>
                                </div>
                                <div class="custom-border">
                                    <p class="text-track">
                                        {{ \Illuminate\Support\Str::words($item->about, 20, '...') }}
                                    </p>
                                </div>
                                <div class="travel-button mt-auto d-flex justify-content-between align-items-center">
                                    <a href="{{ route('detail', $item->slug) }}" class="btn btn-travel-details px-4">
                                        Lihat Detail
                                    </a>
                                    <div class="price-container text-right">
                                        <span class="price">Rp30.000</span><br>
                                        <span class="registration">/registrasi</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        <!-- Step (Opsional) -->
        <section class="section-explore" id="networks">
            <div class="container">

                <div class="row align-items-center">
                    <div class="col-md-12 col-lg-4">
                        <div class="explore-content">
                            <h2 class="explore-heading">Explore Gunung Prau</h2>
                            <p class="explore-text">
                                Selamat datang di Gunung Prau, destinasi yang menawarkan keindahan alam yang memukau.
                                Nikmati pemandangan spektakuler dari puncak yang menakjubkan ini, yang menawarkan
                                matahari terbit yang mempesona dan awan yang berarak di langit biru. Temukan
                                petualangan seru di tengah udara segar dan hijaunya alam Gunung Prau.
                            </p>
                        </div>
                    </div>
                    <div class="col-md-12 col-lg-8 text-center">
                        <img src="{{ url('frontend/images/explore_prau.jpg') }}" class="img-partner"
                            alt="Partner Image">
                    </div>
                </div>
            </div>
        </section>


        {{-- <section class="section-explore" id="networks">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <h2>Explore</h2><br />
                        <h2>Gunung Prau</h2>
                        <p>
                            Selamat datang di Gunung Prau,<br />
                            destinasi yang menawarkan<br />
                            keindahan alam yang memukau.<br />
                            Nikmati pemandangan spektakuler<br />
                            dari puncak yang menakjubkan ini,<br />
                            yang menawarkan matahari <br />
                            terbit yang mempesona dan <br />
                            awan yang berarak di langit biru.<br />
                            Temukan petualangan seru di <br>
                            tengah udara segar dan hijaunya <br>
                            alam Gunung Prau. <br>
                        </p>

                    </div>
                    <div class="col-md-8 text-center">
                        <img src="frontend/images/partner.png" class="img-patner" />
                    </div>
                </div>
            </div>
        </section> --}}
        <!-- End Step (Opsional) -->

        <!-- Berita -->
        <section class="section-testimonials-heading" id="beritaHeading">
            <div class="container">
                <div class="row">
                    <div class="col text-center">
                        <h2>Berita</h2>
                        <p>
                            Berita terbaru seputar
                            <br />
                            Daerah Wonosobo
                        </p>
                    </div>
                </div>
                <div class="col ml-3 mt-2 text-right">
                    <span class="see-all-news">
                        <a href="{{ route('news') }}">Lihat Semua
                        </a>
                    </span>
                </div>
            </div>
        </section>

        <section class="section-testimonials-content" id="testimonialsContent">
            <div class="container">
                <div class="section-popular-travel row justify-content-center match-height">

                    @foreach ($news as $newsItem)
                        <div class="col-sm-8 col-md-6 col-lg-4">
                            <div class="card card-testimonial text-center">
                                <div class="testimonial-content">
                                    @if (optional($newsItem->news_galleries->first())->image)
                                        <!-- Menggunakan CSS untuk mengatur ukuran gambar menjadi kotak -->
                                        <div class="image-container">
                                            <img src="{{ asset('storage/' . $newsItem->news_galleries->first()->image) }}"
                                                alt="" class="mb-4 rounded-square img-fluid" />
                                        </div>
                                    @endif
                                    <p class="date-news">
                                        <span class="source">
                                            {{ $newsItem->sumber }}
                                        </span> •
                                        @if ($newsItem->created_at->diffInHours() >= 72)
                                            {{ \Carbon\Carbon::parse($newsItem->created_at)->locale('id')->isoFormat('D MMMM YYYY') }}
                                        @else
                                            {{ \Carbon\Carbon::parse($newsItem->created_at)->locale('id')->diffForHumans() }}
                                        @endif
                                    </p>
                                    <!-- Headline dengan panjang minimum yang biasa digunakan oleh media berita -->

                                    <h3 class="mb-4">
                                        <a class="link-news" href="{{ route('detailnews', $newsItem->slug) }}">
                                            {{ Str::limit($newsItem->title, 68, '...') }}
                                        </a>
                                    </h3>

                                    <p class="testimonials">
                                        <!-- deskripsi berita -->
                                        @php
                                            $description = strip_tags($newsItem->about);
                                            $description = preg_replace('/\s+/', ' ', $description);
                                            $description = substr($description, 0, 100);
                                            $description = rtrim($description, '.,! ');
                                            echo $description . '...';
                                        @endphp
                                    </p>
                                </div>
                                {{-- 
                                <hr />
                                <a href="{{ route('news', $newsItem->slug) }}" class="trip-to mt-2">Lihat
                                    Selengkapnya
                                </a> --}}

                            </div>
                        </div>
                    @endforeach

                </div>
                <div class="row">
                    <div class="col-12 text-center">
                        <a href="#" class="btn btn-get-started px-4 mt-4 mx-1">
                            Register
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Berita -->

    </main>
    <!-- End Content -->
@endsection

{{-- Animation of Card Explore --}}
@push('addon-script')
    <script>
        const img = document.querySelector('.img-partner');

        // Suara efek saat hover (optional, bisa diganti sesuai preferensi)
        const hoverSound = new Audio('{{ asset('frontend/sounds/hover.mp3') }}');
        hoverSound.volume = 0.3;

        img.addEventListener('mouseenter', () => {
            img.classList.remove('mouse-leave', 'bounce');
            img.classList.add('glow', 'scale-up');

            hoverSound.currentTime = 0;
            hoverSound.play();

            // Setelah delay → geser kiri
            setTimeout(() => {
                img.classList.add('translate-left');

                // Setelah translate selesai → bounce effect
                setTimeout(() => {
                    img.classList.add('bounce');

                    setTimeout(() => {
                        img.classList.remove('bounce');
                    }, 500);
                }, 400);
            }, 200);
        });

        img.addEventListener('mouseleave', () => {
            img.classList.remove('scale-up', 'translate-left', 'bounce', 'glow');
            img.classList.add('mouse-leave');

            setTimeout(() => {
                img.classList.remove('mouse-leave');
            }, 600);
        });
    </script>
@endpush

{{-- Animation Top of Cards Right Side --}}
@push('addon-script')
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const galleryLine = document.getElementById('galleryLine');
            const galleryTitle = document.getElementById('galleryTitle');
            const cards = document.querySelectorAll('#cardContainer .gallery-card');
            const cardContainer = document.getElementById('cardContainer');
            const wrapper = document.getElementById('cardContainerWrapper');
            const navDotsContainer = document.getElementById('navDots');

            let cardWidth = 160,
                cardGap = 16,
                currentSlide = 0;
            let cardsPerSlide = 3,
                interval, isDragging = false;
            let startX, currentOffset = 0,
                isAutoSliding = true;

            function calculateCardsPerSlide() {
                const w = window.innerWidth;
                if (w <= 576) return 1;
                if (w <= 768) return 2;
                return 3;
            }

            function generateNavDots() {
                navDotsContainer.innerHTML = '';
                const total = Math.ceil(cards.length / cardsPerSlide);
                for (let i = 0; i < total; i++) {
                    const dot = document.createElement('span');
                    dot.className = 'nav-dot' + (i === currentSlide ? ' active' : '');
                    dot.dataset.index = i;
                    navDotsContainer.appendChild(dot);
                }
            }

            function setSlide(idx) {
                currentSlide = idx;
                const slideW = (cardWidth + cardGap) * cardsPerSlide;
                wrapper.style.width = slideW + 'px';
                cardContainer.style.transform = `translateX(-${idx * slideW}px)`;
                document.querySelectorAll('#navDots .nav-dot').forEach((d, i) => {
                    d.classList.toggle('active', i === idx);
                });
                cards.forEach((c, i) => {
                    c.classList.toggle('active', i >= idx * cardsPerSlide && i < (idx + 1) * cardsPerSlide);
                });
                currentOffset = -idx * slideW;
            }

            function autoSlide() {
                if (!isAutoSliding) return;
                clearInterval(interval);
                const total = Math.ceil(cards.length / cardsPerSlide);
                interval = setInterval(() => {
                    setSlide((currentSlide + 1) % total);
                }, 5000);
            }

            function init() {
                cardsPerSlide = calculateCardsPerSlide();
                generateNavDots();

                // hide wrapper, set initial slide then show
                galleryTitle.classList.remove('visible');
                galleryLine.classList.remove('visible');
                wrapper.style.visibility = 'hidden';
                cardContainer.style.transition = 'none';
                requestAnimationFrame(() => {
                    setSlide(0);
                    setTimeout(() => {
                        wrapper.style.visibility = 'visible';
                        cardContainer.style.transition = 'transform 0.8s ease';

                        galleryTitle.classList.add('visible');
                        galleryLine.classList.add('visible');
                    }, 50);
                });

                document.querySelectorAll('#navDots .nav-dot').forEach(dot => {
                    dot.onclick = () => {
                        clearInterval(interval);
                        setSlide(+dot.dataset.index);
                        autoSlide();
                    };
                });

                autoSlide();
            }

            /* // Drag support
            function onDragStart(e) {
                isDragging = true;
                isAutoSliding = false;
                startX = e.pageX;
                cardContainer.style.transition = 'none';
            }

            function onDragMove(e) {
                if (!isDragging) return;
                let moveX = e.pageX - startX;
                let slideW = (cardWidth + cardGap) * cardsPerSlide;
                let newOffset = currentOffset + moveX;
                const max = -(Math.ceil(cards.length / cardsPerSlide) - 1) * slideW;
                newOffset = Math.min(0, Math.max(newOffset, max));
                cardContainer.style.transform = `translateX(${newOffset}px)`;
            }

            function onDragEnd(e) {
                if (!isDragging) return;
                isDragging = false;
                isAutoSliding = true;
                let slideW = (cardWidth + cardGap) * cardsPerSlide;
                let moved = e.pageX - startX;
                let change = Math.round(-moved / slideW);
                let total = Math.ceil(cards.length / cardsPerSlide);
                let idx = Math.max(0, Math.min(currentSlide + change, total - 1));
                setSlide(idx);
                cardContainer.style.transition = 'transform 0.8s ease';
                autoSlide();
            }

            cardContainer.addEventListener('mousedown', onDragStart);
            cardContainer.addEventListener('mousemove', onDragMove);
            cardContainer.addEventListener('mouseup', onDragEnd);
            cardContainer.addEventListener('mouseleave', onDragEnd); */

            window.addEventListener('resize', init);

            init();
        });
    </script>

    <!-- Weather -->
    <script>
        const API_KEY = 'c5c72d2ae7ec9fe7983c8309d813d8ea';
        const LAT = -7.186944;
        const LON = 109.922778;

        const dayNames = ['Min', 'Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab'];

        // 1) Ambil cuaca sekarang
        async function fetchWeather() {
            const box = document.querySelector(".weather-info-box");
            try {
                const res = await fetch(
                    `https://api.openweathermap.org/data/2.5/weather?lat=${LAT}&lon=${LON}&units=metric&lang=id&appid=${API_KEY}`
                );
                const data = await res.json();
                const iconCode = data.weather[0].icon;
                const temp = Math.round(data.main.temp);
                const desc = data.weather[0].description;
                const date = new Date(data.dt * 1000); // konversi dari detik ke ms
                const hours = date.getHours(); // jam lokal

                let timeOfDay = '';
                if (hours >= 4 && hours < 11) timeOfDay = 'Pagi';
                else if (hours >= 11 && hours < 15) timeOfDay = 'Siang';
                else if (hours >= 15 && hours < 18) timeOfDay = 'Sore';
                else timeOfDay = 'Malam';

                // deteksi siang/malam dari iconCode
                const isDay = iconCode.endsWith('d');
                const timeLabel = isDay ? " (Siang)" : " (Malam)";

                document.getElementById("weatherIcon").src =
                    `https://openweathermap.org/img/wn/${iconCode}@2x.png`;
                document.getElementById("weatherTemp").innerText = `${temp}°C`;
                /* document.getElementById("weatherDesc").innerText =
                    `${desc.charAt(0).toUpperCase() + desc.slice(1)} (${timeOfDay})`; */

                box.classList.add("show");
            } catch (e) {
                console.error("Gagal mengambil data cuaca:", e);
                /* document.getElementById("weatherDesc").innerText = "Cuaca tidak tersedia"; */
                box.classList.add("show");
            }
        }

        // 2) Ambil prakiraan beberapa jam ke depan (forecast 3-hourly)
        /* async function fetchNextHours() {
            const el = document.getElementById('forecastText');
            try {
                const res = await fetch(
                    `https://api.openweathermap.org/data/2.5/forecast` +
                    `?lat=${LAT}&lon=${LON}&units=metric&lang=id&appid=${API_KEY}`
                );
                if (!res.ok) throw new Error(`HTTP ${res.status}`);
                const data = await res.json();
                const now = Date.now();

                const nextItem = data.list.find(item => item.dt * 1000 > now);
                if (!nextItem) throw new Error('Tidak ada data prakiraan selanjutnya');

                const desc = nextItem.weather[0].description;
                const diffMs = nextItem.dt * 1000 - now;
                let hours = Math.round(diffMs / (1000 * 60 * 60));
                if (hours < 1) hours = 1;

                el.innerText = `Diperkirakan akan ${desc} dalam ${hours} jam ke depan.`;

            } catch (err) {
                console.error('Gagal fetch prakiraan:', err);
                el.innerText = 'Prakiraan cuaca tidak tersedia.';
            }
        } */

        async function fetchForecast() {
            try {
                const res = await fetch(
                    `https://api.openweathermap.org/data/2.5/forecast?lat=${LAT}&lon=${LON}&units=metric&lang=id&appid=${API_KEY}`
                );
                const data = await res.json();

                const today = new Date();
                let forecastCount = 0;
                const addedDates = [];

                for (let item of data.list) {
                    const date = new Date(item.dt * 1000);
                    const dateOnly = date.toDateString();

                    if (
                        date.getHours() >= 11 && date.getHours() <= 13 &&
                        date.getDate() !== today.getDate() &&
                        !addedDates.includes(dateOnly)
                    ) {
                        addedDates.push(dateOnly);

                        const iconCode = item.weather[0].icon;
                        const iconUrl = `https://openweathermap.org/img/wn/${iconCode}@2x.png`;
                        const dayIndex = date.getDay();
                        const dayLabel = dayNames[dayIndex];

                        // Debug log
                        console.log(`Menambahkan data hari: ${dayLabel}, jam: ${date.getHours()}`);

                        // Update elemen HTML
                        document.getElementById(`day${forecastCount + 1}Icon`).src = iconUrl;
                        document.getElementById(`day${forecastCount + 1}Name`).innerText = dayLabel;

                        forecastCount++;
                        if (forecastCount === 3) break;
                    }
                }
            } catch (e) {
                console.error("Gagal fetch forecast:", e);
            }
        }

        // 3) Saat DOM ready, panggil keduanya
        document.addEventListener("DOMContentLoaded", () => {
            fetchWeather();
            /* fetchNextHours(); */
            fetchForecast();
        });
    </script>
@endpush