@extends('web.layout')


@section('content')
    <main id="content" class="site-main">
        <section class="booking-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/img7a.jpg') }});">
                    <div class="container">
                        <div class="inner-banner-content">
                            <h1 class="page-title">Pembayaran</h1>
                        </div>
                    </div>
                </div>
            </div>
            <!-- ***Inner Banner html end here*** -->
            <div class="booking-section">
                <div class="container">
                    <div class="row">
                        <div class="col-cm-12">
                            <div class="price-table-summary">
                                <h4 class="bg-title">Ringkasan Pembayaran</h4>
                                <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>
                                    </tbody>
                                </table>
                            </div>
                            <div class="container">
                                <div class="row align-items-lg-end">
                                    <div class="col-lg-8 offset-lg-2 text-center">
                                        <div class="callback-btn">
                                            <a href="{{ route('generate.pdf',$data->kode_booking) }}" class="btn btn-success btn-lg">Download kode booking</a>
                                            <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#myModal" >Upload Bukti bayar</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <br>
                            <br>
                        </div>
                    </div>
                </div>
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="tab-section">
                                <div class="tab-container">
                                    <div class="responsive-tabs">
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li class="nav-item">
                                                <a id="tab-A" href="#pane-A1" class="nav-link active" data-bs-toggle="tab" role="tab">
                                                    QR
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a id="tab-A" href="#pane-A" class="nav-link" data-bs-toggle="tab" role="tab">
                                                    BANK JATIM
                                                </a>
                                            </li>
{{--                                            <li class="nav-item">--}}
{{--                                                <a id="tab-B" href="#pane-B" class="nav-link" data-bs-toggle="tab" role="tab">--}}
{{--                                                    BCA--}}
{{--                                                </a>--}}
{{--                                            </li>--}}
{{--                                            <li class="nav-item">--}}
{{--                                                <a id="tab-C" href="#pane-C" class="nav-link" data-bs-toggle="tab" role="tab">--}}
{{--                                                    BNI--}}
{{--                                                </a>--}}
{{--                                            </li>--}}
                                        </ul>
                                        <div id="nav-tab-content" class="tab-content" role="tablist">
                                            <div id="pane-A1" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A1">
                                                <div class="card-header" role="tab" id="heading-A1">
                                                    <h5 class="mb-0">
                                                        <a data-bs-toggle="collapse" href="#collapse-A1" aria-expanded="true" aria-controls="collapse-A">
                                                            JOB DESCRIPTION
                                                        </a>
                                                    </h5>
                                                </div>
                                                <div id="collapse-A1" class="collapse show" data-bs-parent="#nav-tab-content" role="tabpanel"
                                                     aria-labelledby="heading-A1">
                                                    <div class="card-body">
                                                        <div class="section justify-content-center">
                                                            <h2>1. Pembayaran melalui QR </h2>
                                                            <img src="{{ url('images/qr_image.jpeg') }}">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="pane-A" class="card tab-pane fade show" role="tabpanel" aria-labelledby="tab-A">
                                                <div class="card-header" role="tab" id="heading-A">
                                                    <h5 class="mb-0">
                                                        <a data-bs-toggle="collapse" href="#collapse-A" aria-expanded="true" aria-controls="collapse-A">
                                                            JOB DESCRIPTION
                                                        </a>
                                                    </h5>
                                                </div>
                                                <div id="collapse-A" class="collapse show" data-bs-parent="#nav-tab-content" role="tabpanel"
                                                     aria-labelledby="heading-A">
                                                    <div class="card-body">
                                                        <div class="section">
                                                            <h2>1. Transfer Melalui ATM Bank Jatim</h2>
                                                            <ul>
                                                                <li>Masukkan kartu ATM dan PIN Anda.</li>
                                                                <li>Pilih menu <strong>Transaksi Lainnya</strong> → <strong>Transfer</strong>.</li>
                                                                <li>Pilih <strong>Antar Rekening Bank Jatim</strong> atau <strong>Antar Bank</strong>.</li>
                                                                <li>Masukkan nomor rekening tujuan atau virtual account.</li>
                                                                <li>Masukkan nominal pembayaran.</li>
                                                                <li>Konfirmasi data → Tekan <strong>Ya</strong> untuk melanjutkan.</li>
                                                            </ul>
                                                        </div>

                                                        <div class="section">
                                                            <h2>2. Melalui Internet Banking Bank Jatim (jatimcode)</h2>
                                                            <ul>
                                                                <li>Kunjungi situs: <a href="https://ibank.bankjatim.co.id" target="_blank">https://ibank.bankjatim.co.id</a>.</li>
                                                                <li>Login menggunakan User ID dan Password.</li>
                                                                <li>Pilih menu <strong>Transfer</strong>.</li>
                                                                <li>Pilih jenis transfer: <strong>Antar Rekening Bank Jatim</strong> atau <strong>Ke Bank Lain</strong>.</li>
                                                                <li>Masukkan nomor rekening / virtual account dan nominal pembayaran.</li>
                                                                <li>Masukkan OTP jika diminta, lalu konfirmasi.</li>
                                                            </ul>
                                                        </div>

                                                        <div class="section">
                                                            <h2>3. Melalui Mobile Banking Bank Jatim (Mobile JConnect)</h2>
                                                            <ul>
                                                                <li>Buka aplikasi <strong>Mobile JConnect</strong> dan login.</li>
                                                                <li>Pilih menu <strong>Transfer</strong>.</li>
                                                                <li>Pilih tujuan: <strong>Rekening Bank Jatim</strong> atau <strong>Bank Lain</strong>.</li>
                                                                <li>Masukkan nomor rekening tujuan / VA dan jumlah pembayaran.</li>
                                                                <li>Konfirmasi data → Masukkan PIN / OTP.</li>
                                                            </ul>
                                                        </div>

                                                        <div class="section">
                                                            <h2>4. Pembayaran Melalui Virtual Account</h2>
                                                            <ul>
                                                                <li>Masukkan nomor <strong>Virtual Account</strong> pada menu transfer.</li>
                                                                <li>Nomor VA biasanya diawali dengan kode perusahaan (contoh: 988+ID).</li>
                                                                <li>Nominal akan muncul otomatis jika sistem terintegrasi.</li>
                                                                <li>Konfirmasi data dan lanjutkan pembayaran.</li>
                                                            </ul>
                                                        </div>

                                                        <div class="section">
                                                            <h2>Catatan Penting</h2>
                                                            <ul>
                                                                <li>Pastikan nomor rekening atau virtual account benar sebelum transaksi.</li>
                                                                <li>Simpan bukti pembayaran.</li>
                                                                <li>Jika mengalami kendala, hubungi <strong>Bank Jatim Call Center: 14044</strong>.</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
                                                <div class="card-header" role="tab" id="heading-B">
                                                    <h5 class="mb-0">
                                                        <a class="collapsed" data-bs-toggle="collapse" href="#collapse-B" aria-expanded="false" aria-controls="collapse-B">
                                                            EXPERIENCE
                                                        </a>
                                                    </h5>
                                                </div>
                                                <div id="collapse-B" class="collapse" data-bs-parent="#nav-tab-content" role="tabpanel"
                                                     aria-labelledby="heading-B">
                                                    <div class="card-body">
                                                        <div class="section">
                                                            <h2>1. Transfer Bank (m-BCA, ATM BCA, KlikBCA)</h2>

                                                            <h3>a. Melalui m-BCA (Mobile Banking)</h3>
                                                            <ul>
                                                                <li>Buka aplikasi <strong>BCA mobile</strong> dan login.</li>
                                                                <li>Pilih menu <strong>m-Transfer</strong>.</li>
                                                                <li>Pilih <strong>Antar Rekening BCA</strong> atau <strong>Antar Bank</strong>.</li>
                                                                <li>Masukkan nomor rekening tujuan / virtual account.</li>
                                                                <li>Masukkan jumlah pembayaran.</li>
                                                                <li>Konfirmasi → Masukkan PIN m-BCA.</li>
                                                            </ul>

                                                            <h3>b. Melalui ATM BCA</h3>
                                                            <ul>
                                                                <li>Masukkan kartu ATM dan PIN Anda.</li>
                                                                <li>Pilih menu <strong>Transaksi Lainnya</strong> → <strong>Transfer</strong>.</li>
                                                                <li>Pilih <strong>Ke Rekening BCA</strong> atau <strong>Ke Rekening Bank Lain</strong>.</li>
                                                                <li>Masukkan nomor rekening / VA dan jumlah pembayaran.</li>
                                                                <li>Konfirmasi → Selesai.</li>
                                                            </ul>

                                                            <h3>c. Melalui KlikBCA (Internet Banking)</h3>
                                                            <ul>
                                                                <li>Login ke <a href="https://ibank.klikbca.com" target="_blank">KlikBCA</a>.</li>
                                                                <li>Pilih menu <strong>Transfer Dana</strong>.</li>
                                                                <li>Pilih <strong>Ke Rekening BCA</strong> atau <strong>Bank Lain</strong>.</li>
                                                                <li>Masukkan data rekening tujuan dan nominal.</li>
                                                                <li>Masukkan respon KeyBCA dan konfirmasi.</li>
                                                            </ul>
                                                        </div>

                                                        <div class="section">
                                                            <h2>2. Pembayaran via Virtual Account BCA</h2>
                                                            <ul>
                                                                <li>Pada ATM / m-BCA, pilih menu <strong>Transfer</strong> → <strong>Virtual Account</strong>.</li>
                                                                <li>Masukkan nomor <strong>BCA Virtual Account</strong> (biasanya diawali kode perusahaan).</li>
                                                                <li>Tagihan akan muncul otomatis, pastikan nominal sesuai.</li>
                                                                <li>Konfirmasi → Masukkan PIN untuk menyelesaikan.</li>
                                                            </ul>
                                                        </div>

                                                        <div class="section">
                                                            <h2>3. Pembayaran via QRIS (BCA mobile)</h2>
                                                            <ul>
                                                                <li>Buka aplikasi <strong>BCA mobile</strong> → pilih <strong>QRIS</strong>.</li>
                                                                <li>Pindai <strong>kode QR</strong> dari merchant atau penyedia jasa.</li>
                                                                <li>Masukkan nominal (jika belum otomatis).</li>
                                                                <li>Konfirmasi → Masukkan PIN m-BCA.</li>
                                                            </ul>
                                                        </div>

                                                        <div class="section">
                                                            <h2>Catatan Penting</h2>
                                                            <ul>
                                                                <li>Pastikan nomor rekening atau VA benar sebelum transaksi.</li>
                                                                <li>Simpan bukti pembayaran untuk referensi.</li>
                                                                <li>Hubungi <strong>Halo BCA 1500888</strong> jika mengalami kendala.</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
                                                <div class="card-header" role="tab" id="heading-C">
                                                    <h5 class="mb-0">
                                                        <a data-bs-toggle="collapse" href="#collapse-C" aria-expanded="true" aria-controls="collapse-C">
                                                            BNI
                                                        </a>
                                                    </h5>
                                                </div>
                                                <div id="collapse-C" class="collapse" data-bs-parent="#nav-tab-content" role="tabpanel"
                                                     aria-labelledby="heading-C">
                                                    <div class="card-body">
                                                        <div class="section">
                                                            <h2>1. Transfer Bank (BNI Mobile, ATM, Internet Banking)</h2>
                                                            <h3>a. Melalui BNI Mobile Banking</h3>
                                                            <ul>
                                                                <li>Buka aplikasi <strong>BNI Mobile Banking</strong> dan login.</li>
                                                                <li>Pilih menu <strong>Transfer</strong>.</li>
                                                                <li>Pilih <strong>Antar Rekening BNI</strong> atau <strong>Antar Bank</strong>.</li>
                                                                <li>Masukkan nomor rekening tujuan / virtual account.</li>
                                                                <li>Masukkan jumlah pembayaran.</li>
                                                                <li>Konfirmasi data → Masukkan password transaksi.</li>
                                                            </ul>
                                                            <h3>b. Melalui ATM BNI</h3>
                                                            <ul>
                                                                <li>Masukkan kartu ATM dan PIN Anda.</li>
                                                                <li>Pilih menu <strong>Transfer</strong>.</li>
                                                                <li>Pilih <strong>Rekening BNI</strong> atau <strong>Bank Lain</strong>.</li>
                                                                <li>Masukkan nomor rekening tujuan / VA.</li>
                                                                <li>Masukkan jumlah pembayaran dan konfirmasi.</li>
                                                            </ul>
                                                        </div>
                                                        <div class="section">
                                                            <h2>2. Pembayaran via Virtual Account BNI</h2>
                                                            <ul>
                                                                <li>Buka aplikasi BNI Mobile / ATM.</li>
                                                                <li>Pilih menu <strong>Pembayaran</strong> → <strong>Virtual Account</strong>.</li>
                                                                <li>Masukkan <strong>kode perusahaan</strong> / <strong>kode VA</strong>.</li>
                                                                <li>Masukkan <strong>nomor Virtual Account</strong> yang diberikan.</li>
                                                                <li>Konfirmasi nama dan jumlah → Masukkan PIN.</li>
                                                            </ul>
                                                        </div>

                                                        <div class="section">
                                                            <h2>3. Pembayaran via QRIS</h2>
                                                            <ul>
                                                                <li>Buka aplikasi <strong>BNI Mobile Banking</strong>.</li>
                                                                <li>Pilih menu <strong>QRIS / QR Payment</strong>.</li>
                                                                <li>Arahkan kamera ke <strong>kode QR</strong>.</li>
                                                                <li>Masukkan nominal (jika belum otomatis).</li>
                                                                <li>Konfirmasi dan masukkan PIN transaksi.</li>
                                                            </ul>
                                                        </div>

                                                        <div class="section">
                                                            <h2>Catatan Penting</h2>
                                                            <ul>
                                                                <li>Pastikan nomor rekening / VA benar sebelum membayar.</li>
                                                                <li>Simpan bukti pembayaran untuk arsip.</li>
                                                                <li>Hubungi <strong>BNI Call 1500046</strong> jika mengalami kendala.</li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <input type="hidden" name="kode_booking" value="{{ $data->kode_booking }}">
            <div class="modal-content">
                <form action="{{ route('web.upload.payment.proof') }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="kode_booking" value="{{ $data->kode_booking }}">
                    <input type="hidden" name="id" value="{{ $data->id }}">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modalLabel">Upload bukti bayar</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <input type="file" name="bukti_bayar" >
                    </div>
                    <div class="modal-footer">
                        <input  type="submit" class="btn btn-primary" value="Simpan"></input>
{{--                        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>--}}
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection