<html>
 <head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <title>rechargeLists</title> 
  <link rel="stylesheet" href="/mbtech/layui.css"> 
  <link rel="stylesheet" href="/mbtech/common.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.7/css/layui.min.css">
  <style>
        .layui-layer-page {
            background-color: #FFFFFf;
        }
        .layui-input{background: none}
        .layui-collapse{ border-radius: 15px;}
        .layui-colla-item{ }
        .layui-colla-title{
            font-family: Arial, Arial;
            font-weight: 700;
            font-size: 16px;
            color: #003862;
        }
        .layui-colla-title .success{color: #2BE26C;}
        .layui-colla-title .progress{color: #003862;}
        .layui-colla-title .returned{color: #FFA559;}
        .layui-colla-content,.layui-colla-item {
            border-top: 1px solid #dddddd;
        }
        .layui-colla-item .label {
            color: #003862;
        }
        .layui-colla-item .value {
            font-weight: 700;
            font-size: 16px;
            color: #003862;
            padding-left: 10px;
        }
        .padding{ padding: 10px 0}
        .bottom_order{
            border-bottom: 1px solid #EBEAEA;
        }
  </style> 
 </head> 
 <body class="common_body" style="background-image: url(/mbtech/bill_bg.png);"> 
  <div class="common_header common_header_order"> 
   <a href="javascript:history.back(-1)" class="back position"> 
    <p class="btn"><i class="layui-icon layui-icon-left layui-font-20"></i></p> 
    rechargeLists 
   </a> 
  </div> 
  <div style="margin: 20px"> 
   <div class="common_card " style="background: #FFFFFF;"> 
    <p class="value" style="font-family: Arial, Arial;font-weight: 700;font-size: 18px;color:#333333;line-height: 21px;"> {{price(auth()->user()->balance)}}</p> 
    <p class="label" style="font-family: Arial, Arial;font-weight: 400;font-size: 14px;color: #444444;line-height: 21px;"> Account Balance </p> 
   </div> 
   <div> 
    @foreach(\App\Models\Deposit::where('user_id', auth()->id())->orderByDesc('id')->get() as $element)
    @php
        $statusColor = match($element->status) {
            'approved' => '#2BE26C',
            'progress' => '#003862',
            'rejected' => '#F44336',
            default => '#FF8725'
        };
    @endphp
    <div class="common_card position">
     <a href="" class="flex_space padding bottom_order"> 
      <p class="label">Withdrawal status</p> 
      <p class="value"> 
       <span style="color: {{ $statusColor }}">{{ ucfirst($element->status) }}</span> 
      </p> 
     </a> 
     <a href="" class="flex_space padding bottom_order"> 
      <p class="label">Recharge Amount </p> 
      <p class="value position"> 
       <span class="unit"></span>{{ price($element->amount) }} 
      </p> 
     </a> 
     <a href="" class="flex_space padding bottom_order"> 
      <p class="label">Received Amount</p> 
      <p class="value position"> 
       <span class="unit"></span>{{ price($element->final_amount) }} 
      </p> 
     </a> 
     <a href="" class="flex_space padding bottom_order"> 
      <p class="label">tax amount</p> 
      <p class="value position"> 
       <span class="unit"></span>{{ price($element->charge_amount) }} 
      </p> 
     </a> 
     <a href="" class="flex_space padding bottom_order"> 
      <p class="label">Initiation time</p> 
      <p class="value position"> {{ $element->created_at }} </p> 
     </a> 
    </div>
    @endforeach
   </div> 
  </div> 

   
 </body>
</html>
