@extends('index')

@section('content')
<div class="container pb-5">
    <div class="card card-perak mb-3">
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div class="d-flex aling-items-center">
                    <div class="me-2">
                        <span class="btn btn-light btn-icon btn-sm">
                            <i class='bx bxs-plane-alt icon'></i>
                        </span>
                    </div>

                    <div>
                        <p class="travel-label mb-0">Flight</p>
                        <h5 class="travel-info mb-0">
                            -
                        </h5>
                    </div>
                </div>

                <div>
                    <p class="travel-label mb-0">Booking Code</p>
                    <h5 class="travel-info mb-0">
                        -
                    </h5>
                </div>
            </div>

            <div class="row g-3">
                <div class="col-6">
                    <p class="travel-label mb-0">From</p>
                    <h5 class="travel-info mb-0">
                        -
                    </h5>
                    <p class="travel-label mb-0">
                        -
                    </p>
                </div>

                <div class="col-6">
                    <p class="travel-label mb-0">To</p>
                    <h5 class="travel-info mb-0">
                        -
                    </h5>
                    <p class="travel-label mb-0">
                        -
                    </p>
                </div>

                <div class="col-6" data-bs-toggle="modal" data-bs-target="#modalContactPerson">
                    <p class="travel-label mb-0">Contact Person <i class="bx bxs-user fs-5"></i></p>
                    <h5 class="travel-info mb-0">Travel Escort</h5>
                </div>

                <div class="col-6" id="btnMeetingPoint">
                    <p class="travel-label mb-0">Meeting Point <i class="bx bxs-map fs-5"></i></p>
                    <h5 class="travel-info mb-0">
                        -
                    </h5>
                </div>
            </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