@extends("../main")
 
@section("content")

@include('../navbar')
<style>
 .css-scrciq {
   border: 1px solid rgba(203, 203, 203, 0.5);
    background: linear-gradient(163.42deg, rgb(90 90 90) -107%, rgba(255, 255, 255, 0) 105.46%);
 }

</style>


<div class="pt-3 md:pt-16">
<main class="my-4 min-h-[60vh]">
    <div class="mx-auto max-w-7xl px-4 pb-14 sm:px-6 lg:px-14">
        <div class="grow gap-8 pt-4 lg:flex">
             <div>
                <div class="h-full pt-3 lg:w-80">
                    <div class="text-center object-center pb-2 flex flex-col gap-2 justify-between rounded-2xl p-6 shadow-sm css-scrciq">
                        @if($data->status_pembelian == "Pending")
                         <h3 class="text-lg font-bold">Belum Bayar</h3>
                        @elseif($data->status_pembelian == "Batal")
                         <h3 class="text-lg font-bold">Dibatalkan</h3>
                         @elseif($data->status_pembelian == "Process")
                         <h3 class="text-lg font-bold">Process</h3>
                        @elseif($data->status_pembelian == "Success")
                          <h3 class="text-lg font-bold">Pembelian Anda Berhasil</h3>
                        @endif
                        @if($data->status_pembelian == "Pending")
                        <p class="text-[0.92rem]">Selesaikan Pembayaran Sebelum Waktu Habis</p>
                        <span class="h6 rounded-md bg-red-600 px-4 py-2 text-center text-white count-down"><b></b><br>{{ $expired }}</span>
                        @elseif($data->status_pembelian == "Process")
                         <p class="text-[0.92rem]">Pesanan Anda Sedang Kami Proses</p>
                        @elseif($data->status_pembelian == "Batal")
                         <p class="text-[0.92rem]">Pembayaran Dibatalkan</p>
                        @elseif($data->status_pembelian == "Success")
                        <div class="mb-4 flex h-full w-full max-w-xs justify-center">
                      <img class=" " src="/assetss/img/transaction-paid.gif
" alt="transaction success animated">
                       </div>
                        @if(count($rating) == 0)
                        @if($data->status_pembelian == "Sukses" || $data->status_pembelian == "Success")
                        <p class="text-[0.92rem]">TerimaKasih Telah Melakukan Pembelian Layanan Kami.</p>
                        <div id="rating" class="modal" tabindex="-1">
                            <div class="modal-dialog">
                                <div class="modal-content text-dark">
                                    <form id="myForm" action="{{ route('rating', ['order' => $data->id_pembelian]) }}" method="POST">
                                    @csrf
                                    <input type="hidden" name="orderID" value="{{ $data->id_pembelian }}">
                                        <div class="modal-header">
                                            <h5 class="modal-title">Testimoni</h5>
                                        </div>
                                        <div class="modal-body">
                                           
                                            <label>Nilai</label>
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <div class="star-rating">
                                                        <span class="fa fa-star-o" data-rating="1"></span>
                                                        <span class="fa fa-star-o" data-rating="2"></span>
                                                        <span class="fa fa-star-o" data-rating="3"></span>
                                                        <span class="fa fa-star-o" data-rating="4"></span>
                                                        <span class="fa fa-star-o" data-rating="5"></span>
                                                        <input type="hidden" name="bintang" class="rating-value" value="0" />
                                                    </div>
                                                </div>
                                            </div>
                                            <label>Pesan</label>
                                            <div class="form-floating">
                                                <textarea class="w-full rounded-xl bg-input p-6 text-foreground focus:outline-none focus:border-primary-x focus:outline-none focus:ring-1 focus:ring-primary-x" name="comment" placeholder="Ketikan Ulasan Anda" id="floatingTextarea2" style="height: 100px;"></textarea>
                                            </div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="submit" class="inline-flex items-center justify-center rounded-md px-4 py-2 bg-primary-x hover:bg-primary-x/75 text-sm font-medium text-white">Kirim</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        @endif
                        @endif
                       @push('js')
                      <script>
                           var $star_rating = $('.star-rating .fa');
                    
                    var SetRatingStar = function() {
                      return $star_rating.each(function() {
                        if (parseInt($star_rating.siblings('input.rating-value').val()) >= parseInt($(this).data('rating'))) {
                          return $(this).removeClass('fa-star-o').addClass('fa-star');
                        } else {
                          return $(this).removeClass('fa-star').addClass('fa-star-o');
                        }
                      });
                    };
                    
                    $star_rating.on('click', function() {
                      $star_rating.siblings('input.rating-value').val($(this).data('rating'));
                      return SetRatingStar();
                    });
                    
                    SetRatingStar();
                    $(document).ready(function() {
                    
                    });
                    
                    $('#rating').modal('show')
                       </script>
                                            
                    @endpush
                    
                    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
                        <script>
                            const myForm = document.getElementById('myForm');
                            myForm.addEventListener('submit', function(e) {
                                e.preventDefault();
                                myForm.style.display = 'none';
                                const formData = new FormData(myForm);
                                fetch(myForm.action, {
                                    method: 'POST',
                                    body: formData
                                }).then(function(response) {
                                    if (response.ok) {
                                        Swal.fire({
                                            icon: 'success',
                                            text: 'Terima kasih telah memberikan testimoni!',
                                        }).then(function() {
                                            window.location.reload();
                                        });
                                    } else {
                                        Swal.fire({
                                            icon: 'error',
                                            text: 'Gagal menyimpan testimoni (1)',
                                        });
                                    }
                                }).catch(function(error) {
                                    Swal.fire({
                                        icon: 'error',
                                        text: 'Gagal menyimpan testimoni (2)',
                                    });
                                });
                            });
                        </script>
                        @endif
                    </div>
                    
                    @if($data->status_pembelian == "Pending")
                    <div class="col-12">
                                
                    </div>
                    
                    
                     @if($data->status_pembelian == "Pending")
                    
                         @elseif($data->status_pembelian == "Batal")
                          <div class="h-full pt-6 lg:w-80">
                            <img src="/assets/image/transaction-failed.gif" alt="" />
                            <div class="text-center"><h5 class="text-xl font-bold">Lakukan transaksi kembali dengan promo menarik!</h5></div>
                        </div>
                        @elseif($data->status_pembelian == "Success")
                        <div class="h-full pt-6 lg:w-80 ">
                      <img class="text-center"" src="/assetss/img/illustrations/transaction-paid.gif
" alt="transaction success animated">
                       </div>
                        @endif
                    


                    <div class="py-4">
                        <div class="mt-4 mb-4 flex justify-center rounded-lg  text-center py-3 qrCode">
                            <h6>Kode Bayar / Nomor VA / QRIS: <br><br>
                            @php
                            $metode = DB::table('methods')->where('code',$data->metode_pembayaran)->first(); 
                            @endphp
                            @if($metode->tipe == 'qris')
                             <div class="col-lg-12 d-print-none">
                             <a href="{{ $data->no_pembayaran }}" download="">
                             <img src="{{ $data->no_pembayaran }}" alt="qrcode" class="mx-auto relative items-center justify-center overflow-hidden rounded-lg bg-white sm:h-56 sm:w-56" >
                             </a>

                            @elseif(Str::upper($data->metode_pembayaran) == "SHOPEEPAY" || Str::upper($data->metode_pembayaran) == "OVOPUSH" || Str::upper($data->metode_pembayaran) == "DANA_REALTIME" || Str::upper($data->metode_pembayaran) == "ASTRAPAY" || Str::upper($data->metode_pembayaran) == "VIRGO" || Str::upper($data->metode_pembayaran) == "DANA" || Str::upper($data->metode_pembayaran) == "LINKAJA" || Str::upper($data->metode_pembayaran) == "GOPAY")
                            <kbd class="bg-dark" data-toggle="tooltip" data-placement="bottom" id="paycode">
                                <td class="col-bjinv2"><a href="{{ $data->no_pembayaran }}" target="blank" class="btn btn-primary m-1">KLIK UNTUK MELAKUKAN PEMBAYARAN</a></td>
                            </kbd>
                            @elseif(Str::upper($data->metode_pembayaran) == "TELKOMSEL" || Str::upper($data->metode_pembayaran) == "AXIS" || Str::upper($data->metode_pembayaran) == "XL" || Str::upper($data->metode_pembayaran) == "TRI")
                            <kbd class="bg-dark" data-toggle="tooltip" data-placement="bottom" id="paycode">
                                <td class="col-bjinv2"><a href="{{ $data->no_pembayaran }}" target="blank" class="btn btn-primary m-1">KLIK UNTUK MELAKUKAN PEMBAYARAN</a></td>
                            </kbd>
                            @else
                             <kbd class="bg-dark" data-toggle="tooltip" data-placement="bottom" id="paycode" title="Click to copy" style="margin-left: auto;font-size: 30px">{{ $data->no_pembayaran }}
                            </kbd>
                            @endif
                         </h6><br>
                        </div>
                        @if(Str::upper($data->metode_pembayaran) == "QRIS" || Str::upper($data->metode_pembayaran) == "QRISC" || Str::upper($data->metode_pembayaran) == "QRISREALTIME" || Str::upper($data->metode_pembayaran) == "QRIS2" || Str::upper($data->metode_pembayaran) == "QRISOP" || Str::upper($data->metode_pembayaran) == "QRISCOP" )
                        <div class="mb-4 flex justify-center">
                            <button type="button" class="inline-flex items-center rounded-full border border-transparent px-6 py-3 text-sm font-semibold leading-4 shadow-sm focus:outline-none" onclick="window.location.href='{{ $data->no_pembayaran }}'">Unduh kode QR</button>
                        </div>
                        @elseif(Str::upper($data->metode_pembayaran) == "OVO_ADMIN" || Str::upper($data->metode_pembayaran) == "GOPAY_ADMIN")
                        <div class="mb-4 flex justify-center">
                           <button type="button" class="inline-flex items-center rounded-full border border-transparent px-6 py-3 text-sm font-semibold leading-4 shadow-sm focus:outline-none" title="Click to copy" id="paycode" onclick="copyToClipboard()">Click To Copy</button>
                        </div>
                        @endif
                    </div>
                     @endif
                </div>
            </div>
            
            <div class="min-w-0 flex-1 xl:flex">
                <div class="lg:min-w-0 lg:flex-1">
                    <div class="h-full py-6">
                        <div class="flex flex-col lg:flex-row md:flex-row gap-3 lg:gap-0 md:gap-0 justify-between rounded-2xl p-6 shadow-sm css-scrciq">
                            <div>
                                <h5 class="font-medium">Tanggal Pembelian</h5>
                                @php
                                $ymdhis = explode(' ',$data->created_at);
                                $month = [
                                    1 => 'Januari','Februari','Maret','April','Mei','Juni',
                                    'Juli','Agustus','September','Oktober','November','Desember'
                                ];
                                $explode = explode('-', $ymdhis[0]);
                                $formatted = $explode[2].' '.$month[(int)$explode[1]].' '.$explode[0];
                                @endphp
                                <h5 class="font-bold text-sm">{{ $formatted.' '.substr($ymdhis[1],0,5) }}</h5>
                            </div>
                            <div>
                                <h5 class="font-medium">Nomor Pesanan</h5>
                                <h5 class="font-bold text-sm">{{ $data->id_pembelian }}</h5>
                            </div>
                            <div>
                                <h5 class="font-medium">Metode Pembayaran</h5>
                                <h5 class="font-bold text-sm">{{ $data->metode_pembayaran }}</h5>
                            </div>
                            <div>
                                <h5 class="font-medium">Status Pesanan</h5>
                                <h5 class="font-bold text-sm pt-1">
                            <b>
                                @if($data->status_pembelian == "Pending")
                                <span class="text-white/70 rounded-md px-2 py-1 text-sm bg-yellow-500">PENDING</span>
                                @elseif($data->status_pembelian == "Process")
                                <span class="text-white/70 rounded-md px-2 py-1 text-sm bg-sky-600">PROCESS</span>
                                @elseif($data->status_pembelian == "Batal")
                                <span class="text-white/70 rounded-md px-2 py-1 text-sm text-danger">CANCELED</span>
                                @elseif($data->status_pembelian == "Success")
                                <span class="text-white/70 rounded-md px-2 py-1 text-sm bg-green-800">SUCCESS</span>
                                @endif
                            </b>
                                </h5>
                            </div>
                        </div>
                        <div class="mt-4 overflow-hidden rounded-2xl shadow-sm css-scrciq">
                            <div class="flex items-center gap-2 px-4 py-3 sm:px-6">
                            <div class="text-center font-extrabold tracking-tight text-white text-xl ">
                                <div class="relative flex flex-row items-center space-x-4 p-2 rounded-lg">
                                 <img alt="{{$namas}}"  width="100%" height="100%" src="{{ $thumbnails }}" decoding="async" data-nimg="fill" class="aspect-square h-14 w-14 rounded-lg !object-cover !object-center md:h-20 md:w-20 md:rounded-xl">
                                <h1>{{ $kategori->nama }}</h1>
                                </div>
                            </div>
                            
                                <h3 class="text-lg font-bold leading-6"></h3></h3>
                            </div>
                            <div class="border-t border-[#626274]">
                                <dl class="border-b border-[#626274] p-4 pb-8">
                                    <div class="pb-0 sm:grid sm:grid-cols-3 sm:gap-3 sm:py-4"><h1 class="font-bold">Detail</h1></div>
                                   
                                    <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-3 sm:py-2">
                                        <dt class="text-sm font-medium">Item</dt>
                                        <dd class="mt-1 text-sm font-bold sm:col-span-2 sm:mt-0">{{ $data->layanan }}</dd>
                                    </div>
                                    @if($data->tipe_transaksi == "joki")
                                    <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-3 sm:py-2">
                                        <dt class="text-sm font-medium">Email Joki</dt>
                                        <dd class="mt-1 text-sm font-bold sm:col-span-2 sm:mt-">{{ $data_joki->email_joki }}</dd>
                                    </div>
                                    <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-3 sm:py-2">
                                        <dt class="text-sm font-medium">Password Joki</dt>
                                        <dd class="mt-1 text-sm font-bold sm:col-span-2 sm:mt-">{{ $data_joki->password_joki }}</dd>
                                    </div>
                                    <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-3 sm:py-2">
                                        <dt class="text-sm font-medium">Via Login Joki</dt>
                                        <dd class="mt-1 text-sm font-bold sm:col-span-2 sm:mt-">{{ $data_joki->loginvia_joki }}</dd>
                                    </div>
                                    <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-3 sm:py-2">
                                        <dt class="text-sm font-medium">Catatan Joki</dt>
                                        <dd class="mt-1 text-sm font-bold sm:col-span-2 sm:mt-">{{ $data_joki->catatan_joki }}</dd>
                                    </div>
                                    <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-3 sm:py-2">
                                        <dt class="text-sm font-medium">Request Joki</dt>
                                        <dd class="mt-1 text-sm font-bold sm:col-span-2 sm:mt-">{{ $data_joki->request_joki }}</dd>
                                    </div>
                                    <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-3 sm:py-2">
                                        <dt class="text-sm font-medium">Jumlah Joki</dt>
                                        <dd class="mt-1 text-sm font-bold sm:col-span-2 sm:mt-">{{ $data_joki->jumlah_joki }}</dd>
                                    </div>
                                    @elseif($data->tipe_transaksi == "via-login")
                                    <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-3 sm:py-2">
                                        <dt class="text-sm font-medium">Email</dt>
                                        <dd class="mt-1 text-sm font-bold sm:col-span-2 sm:mt-">{{ $data->user_id }}</dd>
                                    </div>
                                    <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-3 sm:py-2">
                                        <dt class="text-sm font-medium">Password</dt>
                                        <dd class="mt-1 text-sm font-bold sm:col-span-2 sm:mt-">{{ $data->zone }}</dd>
                                    </div>
                                    <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-3 sm:py-2">
                                        <dt class="text-sm font-medium">Via Login</dt>
                                        <dd class="mt-1 text-sm font-bold sm:col-span-2 sm:mt-">{{ $data->nickname }}</dd>
                                    </div>
                                    @else
                                    <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-3 sm:py-2">
                                        <dt class="text-sm font-medium">ID User</dt>
                                        <dd class="mt-1 text-sm font-bold sm:col-span-2 sm:mt-">{{ $data->user_id }} {{ $data->zone != null ? "(".$data->zone.")" : ''  }}</dd>
                                    </div>
                                    <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-3 sm:py-2">
                                        <dt class="text-sm font-medium text-decoration-none">SN/Keterangan</dt>
                                        <dd class="mt-1 text-sm font-bold sm:col-span-2 sm:mt- text-decoration-none max-w-full break-all">{{ $data->keterangan }}</dd>
                                    </div>
                                    @endif
                                    <div class="py-2 sm:grid sm:grid-cols-3 sm:gap-3 sm:py-2">
                                        <dt class="text-sm font-medium">Harga</dt>
                                        <dd class="mt-1 text-sm font-bold sm:col-span-2 sm:mt-0">Rp.<span type="button" title="Click to copy"
                                            id="totPriceBayar" onclick="copyToClipboard2(this)">
                                            {{ number_format($data->harga_pembayaran, 0,
                                            ',','.') }}
                                        </span></dd>
                                    </div>
                                </dl>
                                <div class="flex justify-between p-4">
                                    <h5 class="font-bold">Total Pembayaran</h5>
                                    <div class="flex items-center space-x-2">
                                        <h5 class="font-extrabold ">
                                            <td class="right text-right">
                                                <strong class="total">
                                                    Rp.
                                                    <span type="button" title="Click to copy" id="paycode"
                                                        onclick="copyToClipboard()">
                                                        {{ number_format($data->harga_pembayaran, 0,
                                                        ',','.') }}
                                                    </span>
                                                    <i class="fas fa-copy" type="button" title="Click to copy" id="paycode"
                                                        onclick="copyToClipboard()"></i>
                                                </strong>
                                            </td>
                                        </h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @if($method != null)
                            @if(in_array($method->tipe, ["qris"]))
                              <h3 class="text-lg font-medium mt-5">Cara Melakukan Pembayaran Dengan Upload Gambar QRIS Di Semua E-wallet & M-banking</h3>
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Melalui Semua E-wallet & M-banking</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                          1. Download Barcode QRIS diatas.
                                          2. Buka Aplikasi E-Wallet atau&nbsp; M-Banking dan pilih <strong>Scan Barcode</strong> atau <strong>Scan Bayar QRIS</strong>
                                          3. Pilih gambar Barcode QRIS&nbsp;yang sudah di download di dalam Galeri anda
                                          4. Lalu klik Bayar
                                          5. Selesai, Transaksi akan di proses secara otomatis.
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                            @elseif(in_array($method->tipe, ["virtual-account","convenience-store"]))
                                @if($method->tipe == "virtual-account")
                                <h3 class="text-lg font-medium mt-5">Cara Melakukan Pembayaran VA {{ $data->metode_pembayaran }}</h3>
                                @elseif($method->tipe == "convenience-store")
                                <h3 class="text-lg font-medium mt-5">Cara Melakukan Pembayaran {{ $data->metode_pembayaran }}</h3>
                                @endif
                                @if(in_array(Str::upper($data->metode_pembayaran), ["BSIVA","BSI"]))
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih1" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Transfer Melalui ATM</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih1" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1. Pilih Menu Payment/ Pembayaran / Pembelian
                                            2. Pilih Institusi / Akademik / Wakaf
                                            3. Masukkan kode institusi: 1062 disertai no VA pembayaran Anda.
                                            4. Format 1062xxxxxxxxxxxx (1062 = kode institusi, xxxxxxxxxxxx = nomor pembayaran / virtual account) contoh: 1062123456789123
                                            5. Tekan tombol Benar / Selanjutnya
                                            6. Kemudian tampil informasi data transaksi anda, pastikan kembali nama tujuan dan jumlah pembayaran sesuai tagihan Anda
                                            7. Jika data sudah benar pilih BENAR/YA
                                            8. Akan keluar bukti transaksi jika berhasil
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih2" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>M-Banking</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih2" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1. Pilih Menu Payment / Pembayaran
                                            2. Pilih Institusi / Akademik / Wakaf
                                            3. Masukkan kode institusi: 1062
                                            4. Masukkan no VA pembayaran Anda tanpa diikuti kode institusi, lalu klik “setuju”
                                            5. Tekan tombol Selanjutnya, Kemudian tampil informasi data transaksi anda, pastikan kembali nama tujuan dan jumlah
                                            6. pembayaran sesuai tagihan Anda, lalu klik Selanjutnya
                                            7. Masukan PIN
                                            8. Tekan tombol Selanjutnya untuk Submit
                                            9. Akan keluar bukti transaksi jika berhasil
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih3" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Internet Banking</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih3" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1. Pilih Menu Pembayaran
                                            2. Pilih Institusi / Akademik / Wakaf
                                            3. Masukkan kode institusi: 1062
                                            4. Masukkan no VA pembayaran Anda tanpa diikuti kode institusi, lalu klik “setuju”
                                            5. Tekan tombol Selanjutnya, Kemudian tampil informasi data transaksi anda, pastikan kembali nama tujuan dan jumlah
                                            6. pembayaran sesuai tagihan Anda, lalu klik Selanjutnya
                                            7. Masukan PIN
                                            8. Tekan tombol Selanjutnya untuk Submit
                                            9. Akan keluar bukti transaksi jika berhasil
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                @elseif(in_array(Str::upper($data->metode_pembayaran), ["BNIVA","BNI"]))
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih1" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Transfer Melalui ATM</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih1" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1. Masukkan kartu ATM dan tekan PIN Anda
                                            2. Pilih “Other menu”.
                                            3. Pilih “Transfer”.
                                            4. Pilih jenis rekening yang akan Anda gunakan (misalnya “Rekening Tabungan”).
                                            5. Pilih “Virtual Account Billing”.
                                            6. Masukkan nomor Virtual Account Anda.
                                            7. Nominal pembayaran akan ditampilkan pada layar.
                                            8. Jika nominal tagihan sudah benar, lanjutkan transaksi.
                                            9. Selesai
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih2" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>M-Banking</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih2" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1. Buka aplikasi mobile banking BNI di HP Anda, masukkan user ID dan password.
                                            2. Plih menu “Transfer”.
                                            3. Pilih menu “Virtual Account Billing” dan pilih rekening debit.
                                            4. Masukkan nomor Virtual Account dalam menu “input baru”.
                                            5. Nominal pembayaran akan ditampilkan pada layar.
                                            6. Jika nominal tagihan sudah sesuai, lanjutkan transaksi dan masukkan password.
                                            7. Selesai.
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih3" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Internet Banking</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih3" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1. Kunjungi https://ibank.bni.co.id dan klik “Enter”.
                                            2. Masukkan User ID pengguna dan Password.
                                            3. Pilih menu “Transfer”.
                                            4. Pilih “Virtual Account Billing”.
                                            5. Masukkan nomor Virtual Account lalu pilih rekening debit dan klik “continue”.
                                            6. Nominal pembayaran akan ditampilkan pada layar.
                                            7. Masukkan kode otentikasi token Anda.
                                            8. Selesai.
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                @elseif(in_array(Str::upper($data->metode_pembayaran), ["BNCVA","BNC"]))
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih1" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Transfer Melalui ATM Bersama</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih1" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1.Input kartu ATM dan PIN Anda
                                            2.Pilih Menu Pembayaran VA
                                            3.Input Virtual Account Number
                                            4.Pilih Benar dan selesaikan pembayaran
                                            5.Ambil bukti bayar Anda
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih2" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>M-Banking</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih2" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1.Login Mobile Banking
                                            2.Pilih Pembayaran VA
                                            3.Input Nomor Virtual Account
                                            4.Pilih Lanjut dan Input PIN
                                            5.Selanjutnya selesaikan pembayaran
                                            6.Bukti bayar ditampilkan
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih3" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Internet Banking</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih3" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1.Login ke neobank
                                            2.Pilih “VA Payment”
                                            3.Pilih “BNC” sebagai nama bank penerima
                                            4.Masukkan kode VA
                                            5.Masukkan jumlah pembayaran
                                            6.Konfirmasi informasi pembayaran
                                            7.Masukkan PIN kamu
                                            8.Transaksi selesai
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                @elseif(in_array(Str::upper($data->metode_pembayaran), ["PERMATAVA","PERMATA"]))
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih1" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Transfer Melalui ATM</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih1" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1.Pilih "Transaksi Lainya"
                                            2.Pilih "Transaksi Pembayaran"
                                            3.Pilih “Lain - Lain”
                                            4.Pilih "Pembayaran Virtual Account"
                                            5.Masukan 16 digit nomor Virtual Account Bank Permata
                                            6.Pilih "Benar"
                                            7.Pilih rekening yang akan digunakan untuk pembayaran
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih2" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>M-Banking</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih2" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1.Masukan "User ID" dan "Password" kemudian pilih "Login"
                                            2.Pilih "Pembayaran Tagihan"
                                            3.Pilih katergori "Virtual Account"
                                            4.Pilih rekening yang akan digunakan
                                            5.Masukan 16 digit nomor Virtual Account Bank Permata dan nominall jumlah pembayaran
                                            6.Pilih "Benar"
                                            7.Pilih rekening yang akan digunakan untuk pembayaran
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                @elseif(in_array(Str::upper($data->metode_pembayaran), ["BRIVA","BRI"]))
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih1" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Transfer Melalui ATM</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih1" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1.Nasabah melakukan pembayaran melalui ATM Bank BRI
                                            2.Pilih Menu Transaksi Lain
                                            3.Pilih Menu Pembayaran
                                            4.Pilih Menu Lainnya
                                            5.Pilih Menu BRIVA
                                            6.Masukan 16 digit Nomor Virtual Account 121350000xxxx174
                                            7.Proses Pembayaran (Ya/Tidak)
                                            8.Harap Simpan Struk Transaksi yang anda dapatkan
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih2" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>M-Banking</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih2" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1.Nasabah melakukan pembayaran melalui Mobile/SMS Banking BRI
                                            2.Nasabah memilih Menu Pembayaran melalui Menu Mobile/SMS Banking BRI
                                            3.Nasabah memilih Menu BRIVA
                                            4.Masukan 16 digit Nomor Virtual Account 121350000xxxx174
                                            5.Masukan Jumlah Pembayaran sesuai Tagihan
                                            6.Masukan PIN Mobile/SMS Banking BRI
                                            7.Nasabah mendapat Notifikasi Pembayaran
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih3" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Internet Banking</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih3" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1.Nasabah melakukan pembayaran melalui Internet Banking BRI
                                            2.Nasabah memilih Menu Pembayaran
                                            3.Nasabah memilih Menu BRIVA
                                            4.Masukan Kode Bayar dengan 16 digit Nomor Virtual Account 121350000xxxx174
                                            5.Masukan Password Internet Banking BRI
                                            6.Masukan mToken Internet Banking BRI
                                            7.Nasabah mendapat Notifikasi Pembayaran
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                @elseif(in_array(Str::upper($data->metode_pembayaran), ["MANDIRIVA","MANDIRI"]))
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih1" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Transfer Melalui ATM</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih1" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1.Kunjungi ATM Mandiri terdekat.
                                            2.Masukkan kartu ATM dan PIN.
                                            3.Pilih menu “Bayar/Beli” dan kemudian “Multi Payment.”
                                            4.Masukkan Kode Perusahaan dan nomor Virtual Account.
                                            5.Input jumlah tagihan dan konfirmasi transaksi.
                                            6.Simpan struk sebagai bukti pembayaran.
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih2" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>M-Banking</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih2" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1. Masuk Ke Akun Anda
                                            2. Buka aplikasi Livin by Mandiri, masukkan PASSWORD atau lakukan verifikasi wajah
                                            3. Pilih menu "Transfer Rupiah"
                                            4. Pilih "Transfer ke Penerima Baru"
                                            5. Masukkan Virtual Account kamu 8890XXXXXXX
                                            6. Konfirmasi detail VA dan klik "Continue"
                                            7. Masukkan nominal yang ingin dibayarkan jika tidak terisi secara otomatis (Masukan Nominal Sesuai yang ada Di Website)
                                            8. Tinjau dan konfirmasi detail transaksi anda, lalu klik "Continue"
                                            9. Selesaikan transaksi dengan memasukkan PIN anda
                                            10. Transaksi Berhasil
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih3" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Internet Banking</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih3" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1.Buka laman Mandiri Online di browser.
                                            2.Login dengan username dan password.
                                            3.Pilih menu “Pembayaran” dan kemudian “Multi Payment.”
                                            4.Pilih penyedia jasa atau pilih lainnya.
                                            5.Masukkan nomor Virtual Account dan tunggu notifikasi tagihan.
                                            6.Konfirmasi transaksi dengan memasukkan PIN keamanan.
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                @elseif(in_array(Str::upper($data->metode_pembayaran), ["CIMBVA","CIMB"]))
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih1" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Transfer Melalui ATM</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih1" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1.Masukkan Kartu ATM dan PIN CIMB Anda
                                            2.Pilih menu Pembayaran > Lanjut > Virtual Account
                                            3.Masukkan nomor virtual account 217921xxxxxxxxxx
                                            4.Pilih rekening debit
                                            5.Nomor, nama virtual account dan jumlah billing ditampilkan pada layar
                                            6.Pilih OK untuk melakukan pembayaran
                                            7.Konfirmasi pembayaran ditampilkan pada layar
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih2" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>M-Banking</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih2" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1.Login Go Mobile
                                            2.Pilih menu Transfer
                                            3.Pilih menu Transfer ke CIMB Niaga Lain
                                            4.Pilih sumber dana yang akan digunakan
                                            5.Masukkan Nomor Virtual Account ,misal 8625XXXXXXX sebagai No. Virtual Account
                                            6.Masukkan nominal, misal 100000
                                            7.Klik Lanjut
                                            8.Data Virtual Account akan ditampilkan
                                            9.Masukkan PIN Mobile
                                            10.Bukti Bayar akan dikirm melalui SMS
                                            11.Selesai
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih3" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Internet Banking</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih3" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1.Login Internet Banking
                                            2.Pilih Bayar Tagihan
                                            3.Rekening Sumber – Pilih yang akan Anda digunakan
                                            4.Jenis Pembayaran – Pilih Virtual Account
                                            5.Untuk Pembayaran – Pilih Masukkan Nomor Virtual Account, misal 8625XXXXX sebagai No. Virtual Account
                                            6.Isi Remark Jika diperlukan
                                            7.Klik Lanjut
                                            8.Data Virtual Account akan ditampilkan
                                            9.Masukkan mPIN
                                            10.Klik Kirim
                                            11.Bukti Bayar akan ditampilkan
                                            12.Selesai
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                @elseif(in_array(Str::upper($data->metode_pembayaran), ["ALFAMART","ALFAMIDI"]))
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih1" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Melalui Gerai Outlet</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih1" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1. Kunjungi gerai Alfamart/Alfamidi/Lawson/DAN+DAN terdekat sebelum kode pembayaran kedaluwarsa.
                                            2. Sampaikan Ke kasir ingin Melakukan Pembayaran <strong>Linkita</strong>
                                            3. Berikan Kode Pembayaran yang ada di website ke kasir
                                            4. Bayar sesuai jumlah yang diinfokan oleh kasir
                                            5. Simpan struk/bon bukti pembayaran
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                @elseif(in_array(Str::upper($data->metode_pembayaran), ["INDOMARET"]))
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih1" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Melalui Gerai Outlet</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih1" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            1. Datang ke indomaret Terdekat.
                                            2. Sampaikan Ke kasir ingin Melakukan Pembayaran <strong>Linkita</strong>
                                            3. Berikan Kode Pembayaran yang ada di website ke kasir
                                            4. Bayar sesuai jumlah yang diinfokan oleh kasir
                                            5. Simpan struk/bon bukti pembayaran.
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                @elseif(in_array(Str::upper($data->metode_pembayaran), ["OVO","OVOPUSH","DANA","LINKAJA","SHOPEEPAY","GOPAY","ASTRAPAY","VIRGO","DANA_REALTIME","SHOPEEPAY_REALTIME"]))
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih1" aria-expanded="false" aria-controls="CollapseThreee">
                                          <span>Panduan Cara Pembayaran E-Wallet</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih1" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            Klik Link Di atas untuk melanjutkan pembayaran
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                @elseif(in_array(Str::upper($data->metode_pembayaran), ["TELKOMSEL","AXIS","XL","TRI"]))
                                <div class="mt-3 overflow-hidden rounded-lg">
                                  <div class="null bg-gradient-black">
                                    <button class="flex w-full justify-between rounded-lg px-4 py-3 text-left text-md font-semibold !border-b border-[#626274] rounded-[1rem]" data-bs-toggle="collapse" data-bs-target="#meltih1" aria-expanded="false" aria-controls="CollapseThreee">
                                      <span>Panduan Cara Pembayaran Pulsa</span>
                                      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="rotate-180 transform h-5 w-5">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5"></path>
                                      </svg>
                                    </button>
                                    <div class="px-3 pb-3 text-sm collapse" id="meltih1" class="collapse" aria-labelledby="HeadingThreee" data-bs-parent="#Accordione">
                                      <ul>
                                        <li class="whitespace-pre-line">
                                            Klik Link Di atas untuk melanjutkan pembayaran
                                        </li>
                                      </ul>
                                    </div>
                                  </div>
                                </div>
                                @endif
                            @endif
                        @endif
                        <div class="mt-8 text-center">
                       
                            <p class="mx-auto max-w-xl text-sm">
                                Jika Kamu Mengalami Kendala Pembayaran Atau Adanya Keluhan Terkait Pembayaran Anda Dapat Menghubungi Kami Melalui&nbsp;
                                <a href="{{ !$config ? '' : $config->ig_admin }}" class="capitalize text-info" target="_blank" rel="noreferrer">instagram</a> /
                                <a href="{{ !$config ? '' : $config->wa_admin }}" class="capitalize text-info" target="_blank" rel="noreferrer">WhatsApp</a>
                            </p>
                           
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>


<!--// <script>-->
<!--//     setTimeout(function() {-->
<!--//         var statusPembelian = "{{ $data->status_pembelian }}";-->
<!--//         if (statusPembelian !== "Success") {-->
<!--//             location.reload();-->
<!--//         }-->
<!--//     }, 3000);-->
<!--// </script>-->
<!--SC click to copy-->

<!--SC Toogle-->
<script>
function toggleList() {
  var list = document.getElementById("headlessui-menu-items-:r0:");
  var button = document.getElementById("headlessui-menu-button-:R1qd6:");
  var expanded = button.getAttribute("aria-expanded") === "true";

  if (expanded) {
    list.style.display = "none";
    button.setAttribute("aria-expanded", "false");
    button.setAttribute("aria-controls", "");
  } else {
    list.style.display = "block";
    button.setAttribute("aria-expanded", "true");
    button.setAttribute("aria-controls", "headlessui-disclosure-panel-:r15:");
  }
}

</script>

<!-- End SC Toogle-->
<script>
    function copyToClipboard() {
        var paycodeElement = document.getElementById("paycode");
        var textToCopy = paycodeElement.innerText;

        navigator.clipboard.writeText(textToCopy).then(function() {
            alert("Text has been copied: " + textToCopy);
        }, function(error) {
            console.error("Failed to copy text: ", error);
        });
    }
</script>

<script>
    function copyToClipboard2() {
        var paycodeElement = document.getElementById("totpricee");
        var textToCopy = paycodeElement.innerText;

        navigator.clipboard.writeText(textToCopy).then(function() {
            alert("Text has been copied: " + textToCopy);
        }, function(error) {
            console.error("Failed to copy text: ", error);
        });
    }
</script>
<!--end SC click to copy-->
<script>
    $(document).ready(function () {
            $("#paycode").tooltip();
            $("#paycode").click(function () {
                copyToClipboard($(this).text().trim().replace(".", ""), $(this));
            })
            $("#paycode").css('cursor', 'pointer');
        })

        function print_invoice() {
            var printContents = document.getElementById('invoice').innerHTML;
            var originalContents = document.body.innerHTML;
            document.body.innerHTML = printContents;
            window.print();
            document.body.innerHTML = originalContents;
            window.onafterprint = function () {
                location.reload()
            }
        }

        function copyToClipboard2(element) {
            var $temp = $("<input>");
            $("body").append($temp);
            $temp.val($(element).text().trim().replace(".", "")).select();
            document.execCommand("copy");
            $temp.remove();

        }
        
var timer;
var compareDate;

// Cek apakah waktu awal sudah disimpan di localStorage
if (localStorage.getItem("startTime")) {
  // Jika sudah ada, ambil waktu awal dari localStorage
  compareDate = new Date(localStorage.getItem("startTime"));
} else {
  // Jika belum ada, atur waktu awal baru
  compareDate = new Date();
  compareDate.setTime(compareDate.getTime() + (3 * 60 * 60 * 1000)); // 3 jam dari sekarang
  localStorage.setItem("startTime", compareDate); // Simpan waktu awal di localStorage
}

timer = setInterval(function() {
  timeBetweenDates(compareDate);
}, 1000);

function timeBetweenDates(toDate) {
  var dateEntered = toDate;
  var now = new Date();
  var difference = dateEntered.getTime() - now.getTime();

  if (difference <= 0) {
    // Timer selesai
    clearInterval(timer);
    localStorage.removeItem("startTime"); // Hapus waktu awal dari localStorage
  } else {
    var seconds = Math.floor(difference / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);

    hours %= 4;
    minutes = minutes % 60; // Menghitung sisa menit setelah dikurangi jam
    seconds = seconds % 60; // Menghitung sisa detik setelah dikurangi menit

    $("#days").text(days);
    $("#hours").text(hours);
    $("#minutes").text(minutes);
    $("#seconds").text(seconds);
  }
}



</script>

<script type="text/javascript">
            $(document).ready(function() {
                    var date_create =  '';
                    var countDownDate = new Date(date_create).getTime(),
                    countInterval = setInterval(function() {
                        var now = new Date().getTime(),
                            dist = countDownDate - now,
                            hours = Math.floor((dist % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
                            minutes = Math.floor((dist % (1000 * 60 * 60)) / (1000 * 60)),
                            seconds = Math.floor((dist % (1000 * 60)) / 1000),
                            strings = hours + ' hours, ' + minutes + ' minutes, ' + seconds + ' seconds left';
                        $('.count-down').html(dist < 0 ? 'EXPIRED!' : strings);
                        if(dist < 0) clearInterval(countInterval);
                    }, 1000);
                
                });
            </script>  
            <script>
        $(document).ready(function() {
            // Fungsi untuk memeriksa status dan mereload halaman jika 'Lunas'
            function checkStatusAndReload() {
                $.get('/get-status/{{ $data->id_pembelian }}', function(response) {
                    if (response.message === 'Lunas') {
                        location.reload();
                    }
                });
            }

            // Mulai polling hanya jika status_pembelian tidak 'Success'
            if ("{{ $data->status_pembelian }}" !== 'Success') {
                var intervalId = setInterval(function() {
                    $.get('/get-status/{{ $data->id_pembelian }}', function(response) {
                        if (response.message === 'Lunas') {
                            clearInterval(intervalId); // Hentikan polling
                            location.reload(); // Reload halaman
                        }
                    });
                }, 2000); // Polling setiap 2 detik
            }
        });
        </script>

@include('../footer')
@endsection