@extends('index')

@section('content')
<div class="container pb-5">
    <div class="card card-perak mb-3">
        <div class="card-body">
            <h5 class="mb-3" style="font-size: 16px">Secretariat</h5>

            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    Indra
                    <br>
                    08111300073
                </div>
                <a href="https://wa.me/+628111300073" target="_blank" class="btn btn-success btn-sm btn-icon">
                    <i class='bx bxl-whatsapp fs-1'></i>
                </a>
            </div>

            <div class="d-flex justify-content-between align-items-center">
                <div>
                    Mas Didit
                    <br>
                    0811140331
                </div>
                <a href="https://wa.me/+62811140331" target="_blank" class="btn btn-success btn-sm btn-icon">
                    <i class='bx bxl-whatsapp fs-1'></i>
                </a>
            </div>
        </div>
    </div>

    <!--<div class="card my-3">
        <div class="card-body">
            <h5 class="mb-3" style="font-size: 16px">Brand Session</h5>

            <div class="d-flex justify-content-between align-items-center">
                <div>
                    Maria Yovita Agustine
                    <br>
                    085715780269
                </div>
                <a href="https://wa.me/+6285715780269" target="_blank" class="btn btn-success btn-sm btn-icon">
                    <i class='bx bxl-whatsapp fs-1'></i>
                </a>
            </div>
        </div>
    </div>

    <div class="card my-3">
        <div class="card-body">
            <h5 class="mb-3" style="font-size: 16px">Room Arrangement</h5>
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    Faridha Kurnia
                    <br>
                    08119101021
                </div>
                <a href="https://wa.me/+628119101021" target="_blank" class="btn btn-success btn-sm btn-icon">
                    <i class='bx bxl-whatsapp fs-1'></i>
                </a>
            </div>

            <div class="d-flex justify-content-between align-items-center">
                <div>
                    Maria Chanmyati
                    <br>
                    0818940470
                </div>
                <a href="https://wa.me/+62818940470" target="_blank" class="btn btn-success btn-sm btn-icon">
                    <i class='bx bxl-whatsapp fs-1'></i>
                </a>
            </div>
        </div>
    </div>

    <div class="card my-3">
        <div class="card-body">
            <h5 class="mb-3" style="font-size: 16px">Transportation</h5>

            <div class="d-flex justify-content-between align-items-center">
                <div>
                    Hery Kuncoro
                    <br>
                    085692066616
                </div>
                <a href="https://wa.me/+6285692066616" target="_blank" class="btn btn-success btn-sm btn-icon">
                    <i class='bx bxl-whatsapp fs-1'></i>
                </a>
            </div>
        </div>
    </div>

    <div class="card my-3">
        <div class="card-body">
            <h5 class="mb-3" style="font-size: 16px">Medical Assistance</h5>
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    Samuel Sulaiman (Tentrem)
                    <br>
                    081237386927
                </div>
                <a href="https://wa.me/+6281237386927" target="_blank" class="btn btn-success btn-sm btn-icon">
                    <i class='bx bxl-whatsapp fs-1'></i>
                </a>
            </div>

            <div class="d-flex justify-content-between align-items-center">
                <div>
                    Febria Rehinatha (Padma)
                    <br>
                    081398578012
                </div>
                <a href="https://wa.me/+6281398578012" target="_blank" class="btn btn-success btn-sm btn-icon">
                    <i class='bx bxl-whatsapp fs-1'></i>
                </a>
            </div>
        </div>
    </div>

    <div class="card my-3 mb-5">
        <div class="card-body">
            <h5 class="text-center">Please share your feedback and suggestions with Ibu Lulu</h5>
            <img src="{{ asset('image/contact-person-1.png') }}" class="img-fluid">

            <div class="d-flex justify-content-between align-items-center mt-3">
                <div>
                    Luella Quo Luhukay
                    <br>
                    085959060375
                </div>
                <a href="https://wa.me/+6285959060375" target="_blank" class="btn btn-success btn-sm btn-icon">
                    <i class='bx bxl-whatsapp fs-1'></i>
                </a>
            </div>
        </div>
    </div>-->
</div>
@endsection

@push('scripts')
<script>
    const countDownDate = new Date("Jun 28, 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