@extends('index')

@section('content')
<style>
    .carousel-item img {
        border-radius: 20px;
        width: 100%;
        height: 150px;
        object-fit: cover;
    }

    .carousel-indicators {
        bottom: -40px;
    }

    .carousel-indicators [data-bs-target] {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #d3d3d3;
        margin: 0 5px;
        transition: background-color 0.3s;
    }

    .carousel-indicators .active {
        background-color: #f6a623; /* Warna oranye seperti pada gambar */
        width: 14px;
        border-radius: 20% !important;
    }

    .carousel {
        max-width: 600px;
        margin: 50px auto;
    }

    .menu-item {
        background: linear-gradient(to bottom, #f6a623,rgb(128, 73, 5));
        color: white;
        text-align: center;
        border-radius: 16px;
        padding: 24px 20px;
        transition: transform 0.2s ease;
        margin-bottom: 8px;
    }

    .menu-item:hover {
        transform: translateY(-4px);
    }

    .menu-icon {
        font-size: 14px;
    }

    .menu-text {
        font-size: 9px;
        color: #333;
        margin-bottom: 10px;
        line-height: 1.3;
        text-align: center;
    }
</style>

<div class="container" style="margin-top: -100px">
    <div id="customCarousel" class="carousel slide" data-bs-ride="carousel">
        <!-- Indicators -->
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#customCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#customCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#customCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
    
      <!-- Slides -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="{{ asset('media/jakarta.jpg') }}" alt="Slide 1">
            </div>
            <div class="carousel-item">
                <img src="{{ asset('media/jakarta.jpg') }}" alt="Slide 2">
            </div>
            <div class="carousel-item">
                <img src="{{ asset('media/jakarta.jpg') }}" alt="Slide 3">
            </div>
        </div>
    </div>
</div>

<div class="container" style="margin-top: -20px">
    <div class="row">
        <div class="col-3">
            <div class="menu-item">
                <div class="menu-icon"><i class="fas fa-users"></i></div>
            </div>
            <div class="menu-text">List of Participants</div>
        </div>
        <div class="col-3">
            <div class="menu-item">
                <div class="menu-icon"><i class="fas fa-hammer"></i></div>
            </div>
            <div class="menu-text">Work Plan &<br>Competition Schedule<br>(WAG & MAG)</div>
        </div>
        <div class="col-3">
            <div class="menu-item">
                <div class="menu-icon"><i class="fas fa-calendar-alt"></i></div>
            </div>
            <div class="menu-text">Training Schedule</div>
        </div>
        <div class="col-3">
            <div class="menu-item">
                <div class="menu-icon"><i class="fas fa-list-ol"></i></div>
            </div>
            <div class="menu-text">Result & Start lists</div>
        </div>
        <div class="col-3">
            <div class="menu-item">
                <div class="menu-icon"><i class="fas fa-user-check"></i></div>
            </div>
            <div class="menu-text">Judges Assignments</div>
        </div>
        <div class="col-3">
            <div class="menu-item">
                <div class="menu-icon"><i class="fas fa-shield-alt"></i></div>
            </div>
            <div class="menu-text">Medical Coverage</div>
        </div>
        <div class="col-3">
            <div class="menu-item">
                <div class="menu-icon"><i class="fas fa-file-alt"></i></div>
            </div>
            <div class="menu-text">Insurance</div>
        </div>
        <div class="col-3">
            <div class="menu-item">
                <div class="menu-icon"><i class="fas fa-video"></i></div>
            </div>
            <div class="menu-text">Live Result</div>
        </div>
    </div>
</div>

@if($schedules->count())
<div class="container mt-4">
    <div class="d-flex justify-content-between align-items-center mt-2">
        <h6 class="text-dark">General Information</h6>
        <a href="{{ route('schedules') }}"  class="text-dark text-decoration-none"><h6>See All</h6></a>
    </div>
</div>
@endif
<div class="scroll-container d-flex">
    @forelse ($generalInformations as $generalInformation)
    <div class="col-4 ms-3 me-2 d-flex">
        <a href="{{ empty($generalInformation->link) ? route('general-information.show', $generalInformation->id) : $generalInformation->link  }}" class="card flex-grow-1 d-flex flex-column" style="text-decoration: none;">
            <img src="{{ $generalInformation->UrlThumbnail }}" class="card-thumbnail-info" alt="...">
            <!-- <div class="card-body p-3">
            </div> -->
        </a>
    </div>
    @empty
    
    @endforelse
</div>

<div class="container">
    @if($schedules->count())
    <div class="d-flex justify-content-between align-items-center mt-2">
        <h6 class="text-dark">LOC Info</h6>
        <a href="{{ route('schedules') }}"  class="text-dark text-decoration-none"><h6>See All</h6></a>
    </div>
    @endif

    @forelse ($schedules as $schedule)
    <a href="{{ route('schedule.show', $schedule->slug) }}" class="card mb-3" style="text-decoration: none;">
        <div class="card-body p-3">
            <div class="d-flex">
                <img src="{{ $schedule->UrlCover }}" class="card-thumbnail-schedule">

                <div class="ms-3">
                    <h5 class="mb-0" style="font-size: 16px;">{{ $schedule->title }}</h5>
                    <h5 class="mb-3" style="font-size: 16px;">{{ $schedule->date->format("d F Y") }}</h5>

                    <p class="text-muted mb-0" style="font-size: 12px;">{{ $schedule->location }}</p>
                </div>
            </div>
        </div>
    </a>
    @empty
    <div class="card">
        <div class="card-body text-center">
            <img src="{{ asset('media/logo-persani.png') }}" class="w-75">
            <h5 class="mt-5">No information yet</h5>
        </div>
    </div>
    @endforelse
</div>
@endsection

@push('modal')
<div class="modal fade" id="countdownModal" tabindex="-1" aria-labelledby="countdownModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <h6>Countdown Event</h6>
                <div class="countdown">
                    <div>
                        <span id="days">00</span>
                        <span class="label">Hari</span>
                    </div>
                    <div>
                        <span id="hours">00</span>
                        <span class="label">Jam</span>
                    </div>
                    <div>
                        <span id="minutes">00</span>
                        <span class="label">Menit</span>
                    </div>
                    <div>
                        <span id="seconds">00</span>
                        <span class="label">Detik</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endpush

@push('scripts')
<script>
    const countDownDate = new Date("Oct 19, 2025 00:00:00").getTime();

    const x = setInterval(function() {
        // Get the current date and time
        const now = new Date().getTime();

        // Calculate the difference between the countdown date and now
        const distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds
        const days = Math.floor(distance / (1000 * 60 * 60 * 24));
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);

        // Display the result in the corresponding HTML elements
        document.getElementById("days").innerHTML = days < 0 ? "00" : (days < 10 ? "0" + days : days);
        document.getElementById("hours").innerHTML = hours < 0 ? "00" : (hours < 10 ? "0" + hours : hours);
        document.getElementById("minutes").innerHTML = minutes < 0 ? "00" : (minutes < 10 ? "0" + minutes : minutes);
        document.getElementById("seconds").innerHTML = seconds < 0 ? "00" : (seconds < 10 ? "0" + seconds : seconds);

        // When the page is loaded, show the modal
        window.onload = function() {
            const myModal = new bootstrap.Modal(document.getElementById('countdownModal'));
            // myModal.show();
        };
    })
</script>
@endpush