@extends('web.layout')


@section('content')
    <main id="content" class="site-main">
        <!-- Inner Banner html start-->
        <section class="confirm-inner-page">
            <!-- ***Inner Banner html start form here*** -->
            <div class="inner-banner-wrap">
                <div class="inner-baner-container"
                    style="background-image: url({{ url('landing/assets/images/img7.jpg') }});">
                    <div class="container">
                        <div class="inner-banner-content">
                            <h1 class="page-title">Booking</h1>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ***Inner Banner html end here*** -->
            <div class="confirmation-outer">
                <div class="container">

                    <div class="confirmation-inner">
                        <div class="row">
                            <div class="col-lg-6 right-sidebar">
                                <div class="confirmation-details">
                                    <h3>BOOKING DETAILS</h3>
                                    <table>
                                        <tbody>
                                            <tr>
                                                <td>
                                                    <strong>Kode Booking :</strong>
                                                </td>
                                                <td class="text-right">
                                                    {{ $data->kode_booking }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <strong>tanggal berangkat :</strong>
                                                </td>
                                                <td class="text-right">
                                                    {{ $data->tanggal }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <strong>Ketua Rombongan :</strong>
                                                </td>
                                                <td class="text-right">
                                                    {{ $data->nama }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <strong>Jumlah WNI :</strong>
                                                </td>
                                                <td class="text-right">
                                                    {{ $data->wni }} orang
                                                </td>
                                            </tr>
                                            <tr class="total">
                                                <td>
                                                    <strong>jumlah WNA</strong>
                                                </td>
                                                <td class="text-right">
                                                    {{ $data->wna }} orang
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>
                                                    <strong>No. telp :</strong>
                                                </td>
                                                <td class="text-right">
                                                    {{ $data->whatsapp }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <strong>email :</strong>
                                                </td>
                                                <td class="text-right">
                                                    {{ $data->email }}
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <strong>Total Bayar</strong>
                                                </td>
                                                <td class="text-right">
                                                    <b>Rp. {{ number_format($data->total_bayar, 0, ',', '.') }}</b>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <strong>Status</strong>
                                                </td>
                                                <td class="text-right">
                                                    <b>{{ ucwords($data->status) }}</b>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="col-lg-6">

                                <div class="confirmation-details " style="margin-top: 45px; ">

                                    <div class="widget-bg widget-support-wrap p-4 shadow rounded bg-light text-center">
                                        <div id="countdown" class="mb-3 text-danger fw-bold fs-5">
                                            Memuat timer...
                                        </div>
                                        <div class="qr-code mb-3">
                                            <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ $qr->qr }}"
                                                alt="QR Code">
                                        </div>
                                        <h5 class="mb-1 text-primary">Merchant:</h5>
                                        <h4 class="fw-bold mb-3">{{ $qr->merchant_name }}</h4>

                                        <h5 class="mb-1 text-success">Total Pembayaran:</h5>
                                        <h4 class="fw-bold mb-0">Rp {{ number_format($qr->total_amount, 0, ',', '.') }}
                                        </h4>

{{--                                        <div class="d-flex justify-content-center align-items-center gap-2 mt-2">--}}

{{--                                            <a href="{{ route('web.payment.cek.qr',$data->kode_booking) }}" class="btn btn-primary">--}}
{{--                                                Cek Status--}}
{{--                                            </a>--}}

{{--                                        </div>--}}
                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection
@push('scripts')
    <script>
        @if ($qr['error'] == true)
            Swal.fire({
                icon: "error",
                title: "Terjadi Kesalahan",
                text: '{{ $qr['message'] }}',
            });
        @endif
    </script>
    <script>

        let validUntil = new Date("{{ $qr->validity_period }}");

        // Hitung selisih waktu dari sekarang sampai validUntil
        function updateCountdown() {
            const now = new Date().getTime();
            const distance = validUntil.getTime() - now;
            const countdownEl = document.getElementById("countdown");

            if (distance <= 0) {
                countdownEl.innerText = "Waktu habis!";
                countdownEl.classList.add("text-muted");

                // Redirect ke URL tujuan setelah waktu habis
                window.location.href = "{{ route('web.payment.expired', $data->id) }}"; // GANTI dengan URL yang kamu mau

                return;
            }

            const minutes = Math.floor(distance / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            countdownEl.innerText = `Sisa waktu: ${minutes}m ${seconds}s`;
        }

        // Perbarui setiap 1 detik
        updateCountdown(); // jalankan awal
        let timerInterval = setInterval(() => {
            updateCountdown();
            if (new Date().getTime() >= new Date("{{ $qr->validity_period }}").getTime()) {
                clearInterval(timerInterval); // stop timer saat habis
            }
        }, 1000);


        let paymentCheckInterval = setInterval(async () => {
            try {
                const baseUrl = "https://disporaparbud.probolinggokab.go.id/cek-payment-status";
                const param = { "kode_booking": "{{ $data->kode_booking }}" };

                const url = new URL(baseUrl);
                url.search = new URLSearchParams(param).toString();

                const response = await fetch(url);
                const data = await response.json();

                if (data.status === 'paid') {

                    // HENTIKAN interval pengecekan jika sudah paid
                    clearInterval(paymentCheckInterval);

                    Swal.fire({
                        title: "Berhasil, Pembayaran telah kami terima !",
                        text: "Setelah ini anda akan diarahkan ke halaman e-ticket anda",
                        icon: "success"
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = "{{ route('web.generate.eticket', $data->kode_booking) }}";
                        }
                    });
                }
            } catch (error) {
                console.log('error checking:', error);
            }
        }, 10000);
    </script>
@endpush