@extends('out.auth_master')

@section('styles')
<style>
  .payment-details-container {
    padding: 15px;
    margin-bottom: 60px;
  }

  .payment-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 20px;
  }

  .payment-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
  }

  .payment-header h2 {
    font-size: 1.4rem;
    color: #333;
    margin: 0;
  }

  .info-section {
    margin-bottom: 25px;
  }

  .info-section h3 {
    font-size: 1.1rem;
    color: #f58025;
    margin-bottom: 15px;
    font-weight: 600;
  }

  .info-item {
    display: flex;
    border-bottom: 1px solid #f0f0f0;
    padding: 10px 0;
  }

  .info-label {
    width: 40%;
    font-weight: 500;
    color: #555;
  }

  .info-value {
    width: 60%;
    color: #333;
  }

  .back-link {
    display: flex;
    align-items: center;
    color: #f58025;
    text-decoration: none;
    margin-bottom: 15px;
    font-weight: 500;
  }

  .back-link i {
    margin-right: 5px;
  }

  @media (min-width: 768px) {
    .payment-details-container {
      max-width: 600px;
      margin: 0 auto;
      margin-bottom: 60px;
    }
  }
</style>
@endsection

@section('content')
<main class="main">
  <div class="payment-details-container">
    <a href="javascript:history.back()" class="back-link">
      <i class="w-icon-long-arrow-left"></i> Back
    </a>

    <div class="payment-card">
      <div class="payment-header">
        <h2>Affiliate Payment Details</h2>
      </div>

      <div class="info-section">
        <h3>Affiliate Information</h3>
        <div class="info-item">
          <div class="info-label">Name:</div>
          <div class="info-value">{{ $affiliate->first_name }} {{ $affiliate->last_name }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">Email:</div>
          <div class="info-value">{{ $affiliate->email }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">Phone:</div>
          <div class="info-value">{{ $affiliate->mobile }}</div>
        </div>
      </div>

      <div class="info-section">
        <h3>Bank Details</h3>
        <div class="info-item">
          <div class="info-label">Bank Name:</div>
          <div class="info-value">{{ $affiliate->bank_name ?? 'Not provided' }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">Account Number:</div>
          <div class="info-value">{{ $affiliate->account_number ?? 'Not provided' }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">Account Name:</div>
          <div class="info-value">{{ $affiliate->account_name ?? 'Not provided' }}</div>
        </div>
      </div>
    </div>
  </div>
</main>
@include('out.other_footer')
@endsection