@extends('layouts.app')

@section('title')
@endsection

@section('content')

@foreach (['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'] as $msg)
@if(Session::has('alert-'.$msg))
<div class="alert alert-{{ $msg }} alert-dismissible fade show" role="alert">
  {{ Session::get('alert-'. $msg) }}
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
@endforeach


<div class="mf_logo" style="padding: 20px;">
  <div class="myfo">myfo</div>
  <div class="crypto">CRYPTO</div>
</div>
<div class="container" style="min-height: 86vh;">
  <div class="row mb-4 mt-5 justify-content-center">
    <div class="mf_txt_title">Payment</div>
  </div>
  <div class="mf_line mb-5"></div>
  <div style="text-align: center;">
    <p>Please pay for the last three profitable arbitrages in order to have access to new arbitrage.</p>
    <p>Amount : <span id="amount" style="font-weight: 900;font-size: 20px;">{{$payment->amount}}</span> USDT</p>
    <div>
      <p>Choose your payment method :</p>
      <div class="row justify-content-center">
        <div class="col-lg-3 col-md-6 col-sm-12 mt-3" style="text-align: center;display: flex;align-items: center;align-content: center;justify-content: center;">
          <a class="mf_btn_outline" href="{{ route('stripe.pay') }}" style="padding: 10px;height: 50px;min-width: 200px;">
            <img src="{{ url('ressources/Payment/Stripe-logo-blanc.png') }}" alt="Payment 100% secured by Stripe" style="height: 100%;" />
          </a>
        </div>
        <div class="col-lg-3 col-md-6 col-sm-12 mt-3" style="text-align: center;display: flex;align-items: center;align-content: center;justify-content: center;">
          <a class="mf_btn_outline" href="{{ route('binance.pay') }}" style="padding: 10px;height: 50px;min-width: 200px;">
            <img src="{{ url('ressources/Payment/Binance-Logo blanc.png') }}" alt="Payment 100% secured by BinancePay" style="height: 100%;" />
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection