@extends('user.layout')
@section('content')
  <style>
    .depositcard.shadow-sm.p-4 {
      max-width: 500px;
      height: auto;
      background: #fff;
      border-radius: 10px;
    }

    .wallet.card {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 90%;
      background: #115544;
      border-radius: 10px;
      color: #fff;
      justify-content: center;
    }

    .wallet.fw-regular {
      font-family: Poppins, sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: 21px;
      letter-spacing: 0.5px;
      text-align: center;
      text-underline-position: from-font;
      text-decoration-skip-ink: none;
    }
  </style>

  <div class="row mb-3">
    <div class="col d-flex justify-content-between">
      <h4 class="page-top-heading">Payout </h4>
      {{-- <a href="{{ route('user.wallet_history') }}" class="btn btn-primary py-2 px-4 ">History</a> --}}
    </div>
  </div>

  <div class="row d-flex justify-content-center">
    <div class="depositcard shadow-sm p-4">

      <!-- Wallet Information Section -->
      <div class="row d-flex justify-content-center">
        <div class="wallet card text-center p-2">
          <div class="col-lg-12 row w-100">
            <div class="col text-center border-end border-white">
              <h3 class="wallet fw-regular">Total Wallet Amount : {{ $total_amount }}</h3>
            </div>
          </div>
        </div>
      </div>
      <div class="row d-flex justify-content-center">
        <div class="bankcard shadow-sm p-4">
          <form action="{{ route('user.payout_post') }}" method="POST" enctype="multipart/form-data" id="payout_form">
            @csrf
            <div class="my-4">
              <label for="accountHolderName" class="form-label fw-bold">Request Amount</label>
              <input type="text" id="accountHolderName" name="amount" class="form-control"
                placeholder="Enter Request Amount" />
            </div>
            <button type="button" class="btn btn-primary w-100 p-3" id="submit_btn">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </div>
  <div class="card p-3 mt-3">
    <div class="table-responsive">
      <table id="walletTable" class="table table-hover table-borderless">
        <thead>
          <tr>
            <th>S/N</th>
            <th>Date</th>
            <th>Amount</th>
            <th>Status</th>
            <th>Remark</th>
          </tr>
        </thead>
        <tbody>
          @foreach ($table_datas as $table_data)
            <tr>
              <td>{{ $loop->iteration }}</td>
              <td>{{ $table_data->created_at }}</td>
              <td>{{ $table_data->amount }}</td>
              <td>{{ $table_data->status }}</td>
              <td class="status-active">{{ $table_data->remark }}</td>
            </tr>
          @endforeach
        </tbody>
      </table>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#submit_btn").click(function() {
        $(this).prop("disabled", true).val("Processing...");
        $("#payout_form").submit();
      });
    });
  </script>
@endsection