<!DOCTYPE html>
<html lang="en">
<head> 
  <meta charset="UTF-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> 
  <title>{{env('APP_NAME')}} | Withdraw Information</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.7/css/layui.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

  <style>
    *{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif;}
    body{background:#f4f7ff;padding-bottom:60px;color:#333;}

    /* Fixed Header */
    .top{
      display:flex;
      align-items:center;
      padding:12px 15px;
      background:#03316C;
      color:#fff;
      font-weight:600;
      font-size:16px;
      position:sticky;
      top:0;
      z-index:100;
      gap:10px;
    }
    .top .topLeft{
      color:#fff;
      font-size:20px;
      display:flex;
      align-items:center;
      justify-content:center;
      width:36px;
      height:36px;
      background:#fff;
      border-radius:50%;
      color:#03316C;
      text-decoration:none;
    }
    .topTit{flex:1;text-align:center;font-weight:700;}

    /* Card Container */
    .card-main{
      margin:20px 15px;
      background:#fff;
      border-radius:16px;
      padding:16px;
      box-shadow:0 4px 12px rgba(0,0,0,0.12);
    }

    /* Tabs */
    .record-tab{
      display:flex;
      margin-bottom:16px;
      background:#dce8ff;
      border-radius:30px;
      overflow:hidden;
    }
    .record-tab a{
      flex:1;
      text-align:center;
      padding:10px 0;
      font-size:14px;
      font-weight:600;
      color:#4a4a4a;
      text-decoration:none;
      transition:.3s;
    }
    .record-tab a.active{
      background:#03316C;
      color:#fff;
      box-shadow:0 3px 10px rgba(0,0,0,0.12);
    }

    /* Form Inputs */
    .card-container label{
      display:block;
      margin-bottom:6px;
      font-weight:600;
    }
    .card-container input,
    .card-container select{
      width:100%;
      padding:10px;
      border-radius:10px;
      border:1px solid #ccc;
      margin-bottom:16px;
      font-size:14px;
    }
    .card-container input:disabled{
      background:#f0f0f0;
      color:#666;
    }

    /* Confirm Button */
    .card-btn{
      display:block;
      width:100%;
      padding:12px 0;
      background:linear-gradient(90deg,#03316C,#0057D9);
      color:#fff;
      font-size:16px;
      font-weight:700;
      border:none;
      border-radius:12px;
      cursor:pointer;
      transition:0.3s;
    }
    .card-btn:hover{
      background:linear-gradient(90deg,#0057D9,#03316C);
      transform:translateY(-2px);
      box-shadow:0 6px 15px rgba(0,0,0,0.2);
    }

  </style>
</head>

<body> 
  <!-- Fixed Header -->
  <div class="top"> 
    <a href="/dashboard" class="topLeft"> 
      <i class="layui-icon layui-icon-left"></i> 
    </a> 
    <div class="topTit">Withdraw Information</div> 
  </div> 

  <!-- Withdraw Form Card -->
  <div class="card-main"> 
    <div class="record-tab"> 
      <a href="javascript:void(0)" class="active" data-tab="bank">Bank Card Information ✦</a> 
    </div> 

    @php
      $user = auth()->user();
    @endphp

    <div class="card-container" id="tab-bank"> 
      <form action="{{ route('setup.gateway.submit') }}" class="layui-form" method="post">
        @csrf
        
        <div class="card-info"> 
          <label>Phone Number</label>
          <input disabled value="{{ $user->phone }}"> 
        </div> 

        <div class="card-info"> 
          <label>Account Holder Name</label>
          <input type="text" name="realname" placeholder="Enter holder name" value="{{ $user->realname }}"> 
        </div> 

        <div class="card-info"> 
          <label>Select Withdraw Method</label>
          <select name="gateway_method" class="layui-input">
            <option value="">-- Please select withdraw method --</option>
            @foreach(\App\Models\BankList::where('status', '1')->get() as $elemenet)
              <option value="{{$elemenet->bank_code}}" @if($user->gateway_method == $elemenet->bank_code) selected @endif>{{$elemenet->name}}</option>
            @endforeach
          </select>
        </div> 

        <div class="card-info"> 
          <label>Withdraw Account Number</label>
          <input type="text" name="gateway_address" placeholder="Enter withdraw account" value="{{ $user->gateway_address }}"> 
        </div> 

        <button type="submit" class="card-btn">Confirm</button> 
      </form>
    </div> 
  </div> 

  @include('alert-message')

  <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.7/layui.all.js"></script>
</body>
</html>
