@extends('dining.layouts.public')

@section('title', 'Payment Cancelled - The LaLiT Dining Program')

@section('styles')
<style>
  .cancel-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  .cancel-card {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    max-width: 600px;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
  }
  .cancel-header {
    padding: 2rem;
    text-align: center;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
  }
  .cancel-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
  }
  .cancel-body {
    padding: 2rem;
  }
  .detail-row {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
  }
  .detail-label {
    font-weight: 600;
    color: #495057;
  }
  .detail-value {
    color: #212529;
    text-align: right;
  }
</style>
@endsection

@section('content')
<section class="cancel-section">
  <div style="width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem;">
    <div class="cancel-card">
      <div class="cancel-header">
        <div class="cancel-icon">
          <i class="fas fa-ban"></i>
        </div>
        <h2>Payment Cancelled</h2>
        <p class="mb-0">You have cancelled the payment transaction</p>
      </div>

      <div class="cancel-body">
        @if(!empty($response))
          <h5 class="mb-3">Transaction Details</h5>
          
          @if(isset($response['order_id']))
          <div class="detail-row">
            <span class="detail-label">Order ID:</span>
            <span class="detail-value">{{ $response['order_id'] }}</span>
          </div>
          @endif

          @if(isset($response['tracking_id']))
          <div class="detail-row">
            <span class="detail-label">Tracking ID:</span>
            <span class="detail-value">{{ $response['tracking_id'] }}</span>
          </div>
          @endif

          @if(isset($response['order_status']))
          <div class="detail-row">
            <span class="detail-label">Status:</span>
            <span class="detail-value"><strong>{{ $response['order_status'] }}</strong></span>
          </div>
          @endif

          @if(isset($response['amount']))
          <div class="detail-row">
            <span class="detail-label">Amount:</span>
            <span class="detail-value">₹{{ number_format($response['amount'], 2) }}</span>
          </div>
          @endif

          @if(isset($response['status_message']))
          <div class="detail-row">
            <span class="detail-label">Message:</span>
            <span class="detail-value">{{ $response['status_message'] }}</span>
          </div>
          @endif
        @else
          <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle me-2"></i>
            The transaction was cancelled before completion.
          </div>
        @endif

        <div class="mt-4">
          <p class="text-muted text-center mb-3">
            <i class="fas fa-info-circle me-1"></i>
            You can try again or contact support if you need assistance.
          </p>
          <a href="{{ url('/dining') }}" class="btn btn-primary w-100 mb-2">
            <i class="fas fa-redo me-2"></i>Try Again
          </a>
          <a href="{{ url('/dining/contact') }}" class="btn btn-outline-secondary w-100">
            <i class="fas fa-envelope me-2"></i>Contact Support
          </a>
        </div>

        <!-- Full Response Debug (You can remove this in production) -->
        @if(!empty($response))
        <div class="mt-4">
          <details>
            <summary class="text-muted" style="cursor: pointer;">View Full Response (Debug)</summary>
            <pre class="mt-2 p-3 bg-light border rounded" style="font-size: 0.85rem; max-height: 300px; overflow-y: auto;">{{ print_r($response, true) }}</pre>
          </details>
        </div>
        @endif
      </div>
    </div>
  </div>
</section>
@endsection