@extends('index')

@section('content')
<div class="scroll-container d-flex h-m-100"></div>

<div class="container mb-5">
    <div class="card">
        <div class="card-body px-2 py-3 d-flex align-items-center">
            <div class="d-flex flex-fill flex-column align-items-center justify-content-center gap-1">
                <span id="days" class="fw-bold fs-3">00</span>
                <span class="fs-5">Hari</span>
            </div>
            <div class="d-flex flex-fill flex-column align-items-center justify-content-center gap-1">
                <span id="hours" class="fw-bold fs-3">00</span>
                <span class="fs-5">Jam</span>
            </div>
            <div class="d-flex flex-fill flex-column align-items-center justify-content-center gap-1">
                <span id="minutes" class="fw-bold fs-3">00</span>
                <span class="fs-5">Menit</span>
            </div>
            <div class="d-flex flex-fill flex-column align-items-center justify-content-center gap-1">
                <span id="seconds" class="fw-bold fs-3">00</span>
                <span class="fs-5">Detik</span>
            </div>
        </div>
    </div>
    
    <div class="card mt-3">
        <div class="card-body">
            <div class="d-flex justify-content-between">
                <div class="d-flex gap-1 align-items-center">
                    <span class="bg-light-secondary p-2 rounded">
                        <i class="bx bxs-calendar icon"></i>
                    </span>
                    <span class="">{{ $schedule->date->format("d F Y") }}</span>
                </div>
                <div class="d-flex gap-1 align-items-center">
                    <span class="bg-light-secondary p-2 rounded">
                        <i class="bx bxs-map icon"></i>
                    </span>
                    <span class="">{{ $schedule->location }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="card mt-3">
        <div class="card-body">
            {!! $schedule->content !!}
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    const rawCountDownDate = new Date("{{ $schedule->date }}")
    const countDownDate = rawCountDownDate.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);
    })
</script>
@endpush