@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>
                                        <h5 class="mb-1 text-primary d-flex align-items-center justify-content-center gap-2">
                                            Nomor Virtual Account:
                                            <button class="btn btn-sm btn-outline-primary" onclick="copyToClipboard('{{ $va->virtual_account_no }}')">
                                                Salin
                                            </button>
                                        </h5>
                                        <h3 class="fw-bold mb-3">{{ $va->virtual_account_no }}</h3>

                                        <h5 class="mb-1 text-primary">Nomor Virtual Name :</h5>
                                        <h3 class="fw-bold mb-3">{{ $va->virtual_account_name }}</h3>

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

{{--                                        <div class="d-flex justify-content-center align-items-center gap-2">--}}
{{--                                            <a href="{{ route('web.payment.cek.va',$data->kode_booking) }}" type="submit" class="btn btn-primary">--}}
{{--                                                Cek Status--}}
{{--                                            </a>--}}
{{--                                            <form action="{{ route('web.payment.cancel', ['booking_id' => $data->kode_booking]) }}" method="POST" class="m-0">--}}
{{--                                                @csrf--}}
{{--                                                @method('DELETE')--}}
{{--                                                <button type="submit" class="btn btn-danger show-alert-delete-box">--}}
{{--                                                    Batal--}}
{{--                                                </button>--}}
{{--                                            </form>--}}
{{--                                        </div>--}}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="container">
                        <div class="card p-4 shadow-sm">
                            <h3 class="mb-3">Panduan Pembayaran Virtual Account Bank Jatim (Real-Time)</h3>
                            <p>Berikut langkah-langkah melakukan pembayaran Virtual Account Bank Jatim:</p>

                            <h5>1. Dari Bank Jatim (JConnect / ATM)</h5>
                            <ol>
                                <li>Buka JConnect Mobile atau ATM Bank Jatim.</li>
                                <li>Pilih menu <strong>Pembayaran → Virtual Account</strong>.</li>
                                <li>Masukkan Nomor VA.</li>
                                <li>Konfirmasi jumlah &amp; nama penerima.</li>
                                <li>Selesaikan transaksi. Posting diterima real-time.</li>
                            </ol>

                            <h5>2. Dari Bank Lain (BCA, BNI, Mandiri, dll.)</h5>
                            <ol>
                                <li>Buka Mobile / Internet Banking bank pengirim.</li>
                                <li>Pilih <strong>Transfer → Antar Bank / Online Transfer / BI-FAST</strong>.</li>
                                <li>Pilih Bank Tujuan: <strong>BANK JATIM (114)</strong>.</li>
                                <li>Masukkan Nomor VA &amp; nominal (jika open amount).</li>
                                <li>Konfirmasi &amp; kirim. Proses biasanya real-time.</li>
                            </ol>
                        </div>
                    </div>
                </div>

            </div>


        </section>
    </main>
@endsection
@push('scripts')
    <script>
        @if ($va['error'] == true)
            Swal.fire({
                icon: "error",
                title: "Terjadi Kesalahan",
                text: '{{ $va['message'] }}',
            });
        @endif
    </script>
    <script>
        let validUntil = new Date("{{ $va->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("{{ $va->validity_period }}").getTime()) {
                clearInterval(timerInterval); // stop timer saat habis
            }
        }, 1000);

        function copyToClipboard(text) {
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(text).then(function () {
                    Swal.fire({
                        icon: 'success',
                        title: 'Disalin!',
                        text: 'Nomor Virtual Account telah disalin.',
                        timer: 1500,
                        showConfirmButton: false
                    });
                }).catch(function (err) {
                    fallbackCopyText(text);
                });
            } else {
                fallbackCopyText(text);
            }
        }

        function fallbackCopyText(text) {
            const textarea = document.createElement("textarea");
            textarea.value = text;
            textarea.setAttribute('readonly', '');
            textarea.style.position = 'absolute';
            textarea.style.left = '-9999px';
            document.body.appendChild(textarea);
            textarea.select();
            try {
                const successful = document.execCommand('copy');
                Swal.fire({
                    icon: 'success',
                    title: 'Disalin!',
                    text: 'Nomor Virtual Account telah disalin.',
                    timer: 1500,
                    showConfirmButton: false
                });
            } catch (err) {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal',
                    text: 'Tidak dapat menyalin teks.',
                });
            }
            document.body.removeChild(textarea);
        }

        $('.show-alert-delete-box').click(function(event) {
            event.preventDefault(); // cegah form submit default

            const form = $(this).closest("form")[0]; // ambil form DOM, bukan jQuery object

            Swal.fire({
                title: 'Apakah anda yakin?',
                text: "Data Pemesanan anda akan di hapus!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Ya, hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit(); // hanya jika user benar2 menekan "Ya, hapus"
                }
            });
        });

        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