@extends("main")

@section("content")

@include('../navbar')

<style>
    .css-16pvxfk {
    background: linear-gradient(270deg, rgb(211 211 211) -1.95%, rgb(110 7 7) 50.95%) !important;
}

  .css-6qw8qz {
    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%);
}

  .css-6qw8qzz {
    border: 1px solid rgba(203, 203, 203, 0.5);
    background-color:#282828;
}

.p-1	{
    padding: 0.25rem;
}

.rounded-lg	{

border-radius: 0.5rem;
}

.bg-red-500	{
    --tw-bg-opacity: 1;
background-color: rgba(239, 68, 68, var(--tw-bg-opacity));	
}
.bg-red-600	{
    --tw-bg-opacity: 1;
background-color: rgba(220, 38, 38, var(--tw-bg-opacity));	
}
.bg-red-700	{
    --tw-bg-opacity: 1;
background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
}


.hover\:bg-red-700:hover {
     --tw-bg-opacity: 1;
background-color: rgba(185, 28, 28, var(--tw-bg-opacity));
}

.css-138rpjn {
    background: linear-gradient(500deg, rgb(210 4 1) 0%, rgba(112, 127, 235, 0) 100%);
    color:white;
}

.css-138rpjnn:hover {
    background: linear-gradient(500deg, rgb(210 4 1) 0%, rgba(112, 127, 235, 0) 100%);
    color:white;
}
.font-medium {
    font-weight: 500;
}
.text-sm {
    font-size: .875rem;
    line-height: 1.25rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.rounded-3xl {
    border-radius: 1.5rem;
}
.gap-3 {
    gap: 0.75rem;
}
.items-center {
    align-items: center;
}
.flex {
    display: flex;
}
a {
    color: inherit;
    text-decoration: inherit;
}
.list-group1 input[type="radio"]:checked+.list-group-item:after {
position: absolute;
top: 0;
right: 0;
width: 28px;
height: 26px;
content: "";
/*background: url(/assets/thumbnail/verif.png) top/cover; */
text-align: center;
}

.list-group1 input[type="radio"]:checked+.list-group-item:before {
color: inherit; 
}

.list-group1 input[type="radio"]:checked+.list-group-item {
background-color: #adadad43;
color: #fff;
font-size: 12px;
display: block;
-webkit-filter: grayscale(0%);
/* Safari 6.0 - 9.0 */
filter: grayscale(0%);
}

.list-group1 input[type="radio"]+.list-group-item {
text-align: center;
padding: 15px;
cursor: pointer;
color: #fe6c17;

/* background-color: #e8e8e8;
color: #2f2fd5; */
border-color: transparent;
box-shadow: 0 2px 5px 0 #f39200, 0 5px 10px 0 rgba(0, 0, 0, 0.19);
font-size: 12px;
border-radius: 3px;
background: rgb(208, 208, 208);
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}

.list-group1 input[type="radio"]+.list-group-item:hover {
cursor: pointer;
background-color: #c3c9cc;
color: #212529;
border-color: #35322d;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 12px 0 rgba(0, 0, 0, 0.19);
font-size: 12px;
border-radius: 3px;
}

.list-group1 input[type="radio"]:checked+.list-group-item:before {
color: inherit;
}

.list-group1 input[type="radio"]:checked+.list-group-item {
background-color: #ffffff;
color: #F44336;
font-size: 12px;
display: block;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.list-group1 input[type="radio"]+.list-group-item {
text-align: center;
cursor: pointer;
border-color: #f39200;
box-shadow: 0 2px 5px 0 rgb(0 0 0 / 20%), 0 5px 10px 0 rgb(0 0 0 / 19%);
font-size: 12px;
border-radius: 3px;
background: rgb(208, 208, 208);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.ml-12 {
    margin-left: 9.5rem!important;
}
</style>

@if(session('error'))
<div class="alert alert-danger">
    {{ session('error') }}
</div>
@elseif(session('success'))
<div class="alert alert-success">
    {{ session('success') }}
</div>
@endif

<main class="min-h-[50vh]">
 <div class="mx-auto max-w-7xl pb-24 grid grid-cols-12 gap-6 lg:gap-x-16 lg:py-8 lg:px-12 mb-10 md:px-4 px-4">
  <div class="hidden md:block lg:block xl:block col-span-1 lg:col-span-3">
   <aside class="py-6 lg:col-span-3 lg:p-0 sticky top-20">
   <nav class="h-full content-start lg:grid lg:content-between">
                    <div class="space-y-4">
                        <a class="group flex gap-3 items-center rounded-3xl px-3 py-2 text-sm font-medium css-138rpjnn" aria-current="page" href="/user/dashboard">
                            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                <path fill="none" d="M0 0h24v24H0z"></path>
                                <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path>
                            </svg>
                            <span class="truncate hidden lg:block xl:block">Akun</span>
                        </a>
                        <a class="group flex gap-3 items-center rounded-3xl px-3 py-2 text-sm font-medium css-138rpjn css-138rpjnn" aria-current="page" href="/deposit">
                            <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                                <path fill="none" d="M0 0h24v24H0z"></path>
                                <path d="M20 2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h4v5l4-2 4 2v-5h4c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 13H4v-2h16v2zm0-5H4V4h16v6z"></path>
                            </svg>
                            <span class="truncate hidden lg:block xl:block">Deposit</span>
                        </a>
                        
                    </div>
                    <div class="cursor-pointer content-end">
                    </div>
                </nav>
   </aside>
  </div>
  <div class="col-span-12 md:col-span-11 lg:col-span-9 mt-6 sm:mt-6 lg:mt-0 md:mt-6">
   <div class="flex justify-start items-center gap-5 undefined"></div>
   <div class="flex p-4 mt-6 mb-4 text-sm text-blue-700 bg-blue-100 rounded-lg dark:bg-blue-200 dark:text-blue-800" role="alert">
    <svg aria-hidden="true" class="flex-shrink-0 inline w-5 h-5 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
     <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
    </svg>
    <span class="sr-only">Info</span>
    <div>
    Jika Deposit mengalami masalah silahkan Hubungi ke WhatsApp Admin <a href="{{ !$config ? '' : $config->wa_admin }}" target="_blank">(KLIK)</a>
    </div>
   </div>
   <div class="mt-6 flex flex-col gap-6">
    <div class="p-6 rounded-2xl flex flex-col gap-3 css-6qw8qz">
     <div class="mt-2 border-b pb-2 grid-cols-12">
      <h3 class="pb-2 text-lg font-bold leading-6 md:text-xl flex items-center gap-3">
       <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
        <path fill="none" d="M0 0h24v24H0z"></path>
        <path d="M20 2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h4v5l4-2 4 2v-5h4c1.11 0 2-.89 2-2V4c0-1.11-.89-2-2-2zm0 13H4v-2h16v2zm0-5H4V4h16v6z"></path>
       </svg>
       &nbsp; Deposit
      </h3>
     </div>
     <div class="mt-1 space-y-1">
      <div class="grid-cols-2">
                        <form class="form-horizontal mt-3" action="{{ route('deposit.post') }}" method="POST" id="form-topup">
                            @csrf
                                
                                <div class="mb-3 row" id="tempatNominal">
                                    <label class="col-lg-2 col-form-label text-white" for="simpleinput">Jumlah:</label>
                                    <div class="col-lg-12">
                                        <input type="number" class="form-control text-dark @error('jumlah') is-invalid @enderror" placeholder="Masukan Nominal Deposit" value="{{ old('jumlah') }}" name="jumlah" value="">
                                        <p class="mt-2 text-xs text-secondary-foreground">Minimum nominal top up adalah Rp&nbsp;20.000,-</p>
                                        @error('jumlah')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                        @enderror
                                    </div>
                                </div>
                                
           
              
           
                                
                                
                               <div class="child-box payment-drawwer shadow">
                                            <div class="header short-payment-support-info-head"
                                                onclick="openPaymentDrawer(this)">
                                                <div class="left">
                                                    <b><i class="fas fa-wallet" aria-hidden="true"></i>
                                                    Pilih Pembayaran </b>
                                                </div>
                                                @foreach($pay_method->take(1) as $p)
                                                <div class="right glowing-text {{$p->code}} "></div>
                                                @endforeach
                                            </div>

                                            <div class="button-action-payment"
                                                style="display: none; background-color: rgb(50, 50, 62);">
                                                <div class="row row-cols-2 row-cols-md-3 p-1">
                                                    @foreach($pay_method as $p)
                                                    @if($p->tipe == 'tfbank')
                                                    <div class="col-lg-4 p-1">
                                                        <div class="list-group1 h-100">
                                                            <input type="radio" name="pembayaran" id="{{$p->code}}"
                                                                value="{{$p->code}}">
                                                            <label for="{{$p->code}}" class="list-group-item h-100">
                                                                <div class="info-top">
                                                                    <div>
                                                                        <img src="{{$p->images}}" alt="" height="10px">
                                                                    </div>
                                                                    <div class="right {{$p->code}} "></div>
                                                                </div>
                                                                <div
                                                                    class="info-bottom text-sm-left text-dark selected-order">
                                                                    <span class="text-dark meltihhh " id="pembay">

                                                                        {{$p->name}}

                                                                        <div class="bangjeff-dicek">

                                                                            {{$p->keterangan}}

                                                                        </div>

                                                                    </span>

                                                                </div>

                                                            </label>

                                                        </div>

                                                    </div>



                                                    @endif

                                                    @endforeach

                                                </div>

                                            </div>

                                            <div class="short-payment-support-info flex h-8 w-full items-center justify-end overflow-hidden border-t hover:cursor-pointer transition-all duration-300 transform gap-2"
                                                onclick="openPaymentDrawer(this)">

                                                @foreach($pay_method as $p)

                                                @if($p->tipe == 'tfbank')

                                                <img src="{{$p->images}}" class="m-1 bangjeff-pgimg" style="">

                                                @endif

                                                @endforeach

                                                <a class="open-button-action-payment">

                                                    <i class="fas fa-chevron-down" aria-hidden="true"></i>

                                                </a>

                                            </div>

                                        </div> 
                                
                                
                             <!--   <div class="child-box payment-drawwer shadow">
                                            <div class="header short-payment-support-info-head"
                                                onclick="openPaymentDrawer(this)">
                                                <div class="left">
                                                    <b><i class="fas fa-wallet" aria-hidden="true"></i>
                                                    QRIS</b>
                                                </div>
                                                @foreach($pay_method->take(1) as $p)
                                                <div class="right glowing-text {{$p->code}} "></div>
                                                @endforeach
                                            </div>

                                            <div class="button-action-payment"
                                                style="display: none; background-color: rgb(50, 50, 62);">
                                                <div class="row row-cols-2 row-cols-md-3 p-1">
                                                    @foreach($pay_method as $p)
                                                    @if($p->tipe == 'qris')
                                                    <div class="col-lg-4 p-1">
                                                        <div class="list-group1 h-100">
                                                            <input type="radio" name="pembayaran" id="{{$p->code}}"
                                                                value="{{$p->code}}">
                                                            <label for="{{$p->code}}" class="list-group-item h-100">
                                                                <div class="info-top">
                                                                    <div>
                                                                        <img src="{{$p->images}}" alt="" height="10px">
                                                                    </div>
                                                                    <div class="right {{$p->code}} "></div>
                                                                </div>
                                                                <div
                                                                    class="info-bottom text-sm-left text-dark selected-order">
                                                                    <span class="text-dark meltihhh " id="pembay">

                                                                        {{$p->name}}

                                                                        <div class="bangjeff-dicek">

                                                                            {{$p->keterangan}}

                                                                        </div>

                                                                    </span>

                                                                </div>

                                                            </label>

                                                        </div>

                                                    </div>



                                                    @endif

                                                    @endforeach

                                                </div>

                                            </div>

                                            <div class="short-payment-support-info flex h-8 w-full items-center justify-end overflow-hidden border-t hover:cursor-pointer transition-all duration-300 transform gap-2"
                                                onclick="openPaymentDrawer(this)">

                                                @foreach($pay_method as $p)

                                                @if($p->tipe == 'qris')

                                                <img src="{{$p->images}}" class="m-1 bangjeff-pgimg" style="">

                                                @endif

                                                @endforeach

                                                <a class="open-button-action-payment">

                                                    <i class="fas fa-chevron-down" aria-hidden="true"></i>

                                                </a>

                                            </div>

                                        </div>
                                        <div class="child-box payment-drawwer">

                                            <div class="header short-payment-support-info-head"
                                                onclick="openPaymentDrawer(this)">

                                                <div class="left">

                                                    <b><i class="fas fa-wallet" aria-hidden="true"></i>

                                                        E-Wallet</b>

                                                </div>

                                                @foreach($pay_method->take(1) as $p)

                                                <div class="right glowing-text {{$p->code}}"></div>

                                                @endforeach

                                            </div>

                                            <div class="button-action-payment"
                                                style="display: none; background-color: rgb(50, 50, 62);">

                                                <div class="row row-cols-2 row-cols-md-3 p-1">



                                                    @foreach($pay_method as $p)





                                                    @if($p->tipe == 'e-walet')

                                                    <div class="col-lg-4 p-1">

                                                        <div class="list-group1 h-100">

                                                            <input type="radio" name="pembayaran" id="{{$p->code}}"
                                                                value="{{$p->code}}">

                                                            <label for="{{$p->code}}" class="list-group-item h-100">

                                                                <div class="info-top">

                                                                    <div>

                                                                        <img src="{{$p->images}}" alt="" height="10px">

                                                                    </div>

                                                                    <b class="{{$p->code}}"
                                                                        style="font-size: 11px;"></b>

                                                                </div>

                                                                <div
                                                                    class="info-bottom text-sm-left text-dark selected-order">

                                                                    <span class="text-dark meltihhh" id="pembay"
                                                                        data-name="{{$p->name}}"
                                                                        data-keterangan="{{$p->keterangan}}">

                                                                        {{$p->name}}

                                                                        <div class="bangjeff-dicek">

                                                                            {{$p->keterangan}}

                                                                        </div>

                                                                    </span>

                                                                </div>

                                                            </label>

                                                        </div>

                                                    </div>



                                                    @endif

                                                    @endforeach

                                                </div>

                                            </div>

                                            <div class="short-payment-support-info flex h-8 w-full items-center justify-start overflow-hidden  border-t hover:cursor-pointer transition-all duration-300 transform gap-x-2"
                                                onclick="openPaymentDrawer(this)">

                                                @foreach($pay_method as $p)

                                                @if($p->tipe == 'e-walet')

                                                <img src="{{$p->images}}" class="m-1 bangjeff-pgimg" style="">

                                                @endif

                                                @endforeach

                                                <a class="open-button-action-payment">

                                                    <i class="fas fa-chevron-down" aria-hidden="true"></i>

                                                </a>

                                            </div>

                                        </div>
                                        <div class="child-box payment-drawwer">

                                            <div class="header short-payment-support-info-head"
                                                onclick="openPaymentDrawer(this)">

                                                <div class="left">

                                                    <b><i class="fas fa-credit-card" aria-hidden="true"></i> Virtual Account</b>

                                                </div>

                                                @foreach($pay_method->take(1) as $p)

                                                <div class="right glowing-text {{$p->code}}"></div>

                                                @endforeach

                                            </div>

                                            <div class="button-action-payment"
                                                style="display: none; background-color: rgb(50, 50, 62);">

                                                <div class="row row-cols-2 row-cols-md-3 p-1">





                                                    @foreach($pay_method as $p)



                                                    @if($p->tipe == 'virtual-account')



                                                    <div class="col-lg-4 p-1">

                                                        <div class="list-group1 h-100">

                                                            <input type="radio" name="pembayaran" id="{{$p->code}}"
                                                                value="{{$p->code}}">

                                                            <label for="{{$p->code}}" class="list-group-item h-100">

                                                                <div class="info-top">

                                                                    <div>

                                                                        <img src="{{$p->images}}" alt="" height="10px">

                                                                    </div>

                                                                    <b class="{{$p->code}}"
                                                                        style="font-size: 11px;"></b>

                                                                </div>

                                                                <div
                                                                    class="info-bottom text-sm-left text-dark selected-order">

                                                                    <span class="text-dark meltihhh " id="pembay">

                                                                        {{$p->name}}

                                                                        <div class="bangjeff-dicek">

                                                                            {{$p->keterangan}}

                                                                        </div>

                                                                    </span>

                                                                </div>

                                                            </label>

                                                        </div>

                                                    </div>

                                                    @endif

                                                    @endforeach

                                                </div>

                                            </div>
                                            <div class="short-payment-support-info flex h-8 w-full items-center justify-end overflow-x-auto border-t hover:cursor-pointer transition-all duration-300 transform gap-2"
                                                onclick="openPaymentDrawer(this)"
                                                style="border-radius: 0 0 6px 6px; overflow-y: hidden; scroll-snap-type: x mandatory;">
                                                <div class="flex" style="scroll-snap-type: x mandatory;">
                                                    @foreach($pay_method as $p)
                                                    @if($p->tipe == 'virtual-account')
                                                    <div class="payment-method"
                                                        style="scroll-snap-align: start; display: flex; align-items: center;">
                                                        <img src="{{$p->images}}" class="m-1 bangjeff-pgimg" style="">
                                                    </div>
                                                    @endif
                                                    @endforeach
                                                    <a class="open-button-action-payment" style="margin-left: 5px;">
                                                        <i class="fas fa-chevron-down" aria-hidden="true"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="child-box payment-drawwer shadow">

                                            <div class="header short-payment-support-info-head"
                                                onclick="openPaymentDrawer(this)"
                                                data-cf-modified-02988ce5d5669a4190e81d4d-="">

                                                <div class="left">

                                                    <b>

                                                        <i class="fas fa-store" aria-hidden="true"></i>

                                                        Convenience Store

                                                    </b>

                                                </div>

                                                @foreach($pay_method->take(1) as $p)

                                                <div class="right glowing-text {{$p->code}}"></div>

                                                @endforeach

                                            </div>

                                            <div class="button-action-payment"
                                                style="display: none; background-color: rgb(50, 50, 62);">

                                                <div class="row row-cols-2 row-cols-md-3 p-1">

                                                    @foreach($pay_method as $p)

                                                    @if($p->tipe == 'convenience-store')

                                                    <div class="col-lg-4 p-1">

                                                        <div class="list-group1 h-100">

                                                            <input type="radio" name="pembayaran" id="{{$p->code}}"
                                                                value="{{$p->code}}">

                                                            <label for="{{$p->code}}" class="list-group-item h-100">

                                                                <div class="info-top">

                                                                    <div>

                                                                        <img src="{{$p->images}}" alt="" height="10px">

                                                                    </div>

                                                                    <b class="{{$p->code}}"
                                                                        style="font-size: 11px;"></b>

                                                                </div>

                                                                <div
                                                                    class="info-bottom text-sm-left text-dark selected-order">

                                                                    <span class="text-dark meltihhh" id="pembay"
                                                                        data-name="{{$p->name}}"
                                                                        data-keterangan="{{$p->keterangan}}">

                                                                        {{$p->name}}

                                                                        <div class="bangjeff-dicek">

                                                                            {{$p->keterangan}}

                                                                        </div>

                                                                    </span>

                                                                </div>

                                                            </label>

                                                        </div>

                                                    </div>

                                                    @endif

                                                    @endforeach

                                                </div>

                                            </div>

                                            <div class="short-payment-support-info flex h-8 w-full items-center justify-end overflow-hidden border-t hover:cursor-pointer transition-all duration-300 transform gap-2"
                                                onclick="openPaymentDrawer(this)">

                                                @foreach($pay_method as $p)

                                                @if($p->tipe == 'convenience-store')

                                                <img src="{{$p->images}}" class="m-1 bangjeff-pgimg" style="">

                                                @endif

                                                @endforeach

                                                <a class="open-button-action-payment">

                                                    <i class="fas fa-chevron-down" aria-hidden="true"></i>

                                                </a>

                                            </div>

                                        </div>
                                        <div class="child-box payment-drawwer">

                                            <div class="header short-payment-support-info-head"
                                                onclick="openPaymentDrawer(this)">

                                                <div class="left">

                                                    <b><i class="fas fa-mobile" aria-hidden="true"></i>

                                                        Pulsa</b>

                                                </div>

                                                @foreach($pay_method->take(1) as $p)

                                                <div class="right glowing-text {{$p->code}}"></div>

                                                @endforeach

                                            </div>

                                            <div class="button-action-payment"
                                                style="display: none; background-color: rgb(50, 50, 62);">

                                                <div class="row row-cols-2 row-cols-md-3 p-1">



                                                    @foreach($pay_method as $p)





                                                    @if($p->tipe == 'pulsa')

                                                    <div class="col-lg-4 p-1">

                                                        <div class="list-group1 h-100">

                                                            <input type="radio" name="pembayaran" id="{{$p->code}}"
                                                                value="{{$p->code}}">

                                                            <label for="{{$p->code}}" class="list-group-item h-100">

                                                                <div class="info-top">

                                                                    <div>

                                                                        <img src="{{$p->images}}" alt="" height="10px">

                                                                    </div>

                                                                    <b class="{{$p->code}}"
                                                                        style="font-size: 11px;"></b>

                                                                </div>

                                                                <div
                                                                    class="info-bottom text-sm-left text-dark selected-order">

                                                                    <span class="text-dark meltihhh" id="pembay"
                                                                        data-name="{{$p->name}}"
                                                                        data-keterangan="{{$p->keterangan}}">

                                                                        {{$p->name}}

                                                                        <div class="bangjeff-dicek">

                                                                            {{$p->keterangan}}

                                                                        </div>

                                                                    </span>

                                                                </div>

                                                            </label>

                                                        </div>

                                                    </div>



                                                    @endif

                                                    @endforeach

                                                </div>

                                            </div>

                                            <div class="short-payment-support-info flex h-8 w-full items-center justify-start overflow-hidden  border-t hover:cursor-pointer transition-all duration-300 transform gap-x-2"
                                                onclick="openPaymentDrawer(this)">

                                                @foreach($pay_method as $p)

                                                @if($p->tipe == 'pulsa')

                                                <img src="{{$p->images}}" class="m-1 bangjeff-pgimg" style="">

                                                @endif

                                                @endforeach

                                                <a class="open-button-action-payment">

                                                    <i class="fas fa-chevron-down" aria-hidden="true"></i>

                                                </a>

                                            </div>

                                        </div>-->
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </form>                            
                        </div> 
          
          
          
     </div>
    </div>
   
    <div class="p-6 rounded-2xl flex flex-col gap-3 css-6qw8qz">
     <div class="mt-2 border-b pb-2 grid-cols-12">
      <h3 class="pb-2 text-lg font-bold leading-6 md:text-xl flex items-center gap-3">
       <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
        <path
         d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
        ></path>
       </svg>
       &nbsp; Riwayat Deposit
      </h3>
     </div>
     <div class="mt-4 space-y-4">
                        <div class="table-responsive">
                            <table class="table m-o text-white">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Jumlah</th>
                                        <th>Total</th>
                                        <th>Metode</th>
                                        <th>No Pembayaran</th>
                                        <th>Status</th>
                                        <th>Tanggal</th>
                                    </tr>
                                </thead>
                        		@forelse($data as $pesanan)