@extends('layouts/blankLayout')
@section('title', 'Payment Message')
@section('content')
  <style>
    body {
      margin: 0;
      background: #e6e6e1;
    }

    .screen {
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .card-full {
      width: 100%;
      max-width: 360px;
      border-radius: 20px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
      text-align: center;
    }

    .card-header-curved {
      padding: 36px 20px 50px;
      position: relative;
      color: #fff;
    }

    .card-header-curved::after {
      content: '';
      position: absolute;
      bottom: -22px;
      left: 0;
      width: 100%;
      height: 44px;
      background: #fff;
      border-radius: 50% 50% 0 0;
    }

    .icon-circle {
      width: 60px;
      height: 60px;
      border: 2px solid #fff;
      border-radius: 50%;
      font-size: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 12px;
    }

    .card-body {
      padding: 34px 24px 26px;
    }

    .card-body p {
      color: #6c757d;
      font-size: 15px;
      margin-bottom: 28px;
    }

    .btn-pill {
      border-radius: 50px;
      padding: 10px 18px;
      min-width: 120px;
      font-size: 15px;
    }

    /* Success */
    .success-bg {
      background: #28a745;
    }

    .btn-outline-success-custom {
      border: 1px solid #28a745;
      color: #28a745;
      background: #fff;
    }

    /* Error */
    .error-bg {
      background: #dc3545;
    }

    .btn-outline-error-custom {
      border: 1px solid #dc3545;
      color: #dc3545;
      background: #fff;
    }
  </style>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
  <div class="screen">
    <div class="card-full">

      @php use Illuminate\Support\Facades\Session; @endphp
      @if (Session::get('success'))
        {{-- SUCCESS CARD --}}
        <div class="card-header bg-success text-white text-center fs-5 p-4">
          {{ __('Paystack Payment Message') }}
        </div>
        <div class="card-header-curved success-bg">
          <div class="icon-circle">
            <i class="bi bi-check-lg"></i>
          </div>
          <h3 class="fw-semibold mb-0">Success!</h3>
        </div>
        <div class="card-body">
          @include('_partials.flashMessage')
          <div class="d-flex justify-content-center gap-0">
            <button class="btn  btn-rounded" onclick="continueAction()">
              @if (!empty($txnId))
                <div class="mt-3">
                  <p class="fw-bold text-muted mb-0 fs-3">Transaction ID:</p>
                  <p class="fs-4 text-primary">{{ $txnId }}</p>
                </div>
              @endif
            </button>
          </div>
        </div>
      @else
        {{-- FAILURE CARD --}}
        <div class="card-header bg-danger text-white text-center fs-5 p-4">
          {{ __('Paystack Payment Message') }}
        </div>
        <div class="card-header-curved error-bg">
          <div class="icon-circle">
            <i class="bi bi-exclamation-lg"></i>
          </div>
          <h3 class="fw-semibold mb-0">Whoops!</h3>
        </div>
        <div class="card-body">
          @include('_partials.flashMessage')
          <div class="d-flex justify-content-center gap-0">
            <button class="btn  btn-rounded" onclick="retryPayment()">
              @if (!empty($txnId))
                <div class="mt-3">
                  <p class="fw-bold text-muted mb-0 fs-3">Transaction ID:</p>
                  <p class="fs-4 text-primary">{{ $txnId }}</p>
                </div>
              @endif
            </button>
          </div>
        </div>
      @endif
    </div>
  </div>
@endsection
@section('page-script')
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    function closeWebView() {
      if (window.AndroidInterface?.close) {
        AndroidInterface.close();
        return;
      }
      if (window.webkit?.messageHandlers?.close) {
        window.webkit.messageHandlers.close.postMessage({});
        return;
      }
      window.close();
    }

    function continueAction() {
      // Success continuation
      closeWebView();
    }

    function retryPayment() {
      // Retry payment flow
      closeWebView();
    }
  </script>
@endsection