@extends('dining.layouts.public')

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

@section('styles')
<style>
  .response-section {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }
  .response-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;
  }
  .response-header {
    padding: 2rem;
    text-align: center;
    color: white;
  }
  .response-header.success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  }
  .response-header.failure {
    background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
  }
  .response-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
  }
  .response-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="response-section">
  <div style="width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem;">
    <div class="response-card">
      @php
        $isSuccess = isset($response['order_status']) && $response['order_status'] === 'Success';
      @endphp
      
      <div class="response-header {{ $isSuccess ? 'success' : 'failure' }}">
        <div class="response-icon">
          @if($isSuccess)
            <i class="fas fa-check-circle"></i>
          @else
            <i class="fas fa-times-circle"></i>
          @endif
        </div>
        <h2>{{ $isSuccess ? 'Payment Successful!' : 'Payment Failed' }}</h2>
        <p class="mb-0">
          {{ $isSuccess ? 'Your payment has been processed successfully' : 'Your payment could not be processed' }}
        </p>
      </div>

      <div class="response-body">
        <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['payment_mode']))
        <div class="detail-row">
          <span class="detail-label">Payment Mode:</span>
          <span class="detail-value">{{ $response['payment_mode'] }}</span>
        </div>
        @endif

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

        @if(isset($response['trans_date']))
        <div class="detail-row">
          <span class="detail-label">Transaction Date:</span>
          <span class="detail-value">{{ $response['trans_date'] }}</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

        @if($isSuccess)
        <div class="mt-4">
          @if(isset($passwordExists) && $passwordExists)
            <!-- User already has password, show dashboard link -->
            <a href="{{ route('dining.dashboard') }}" class="btn w-100"
              style="background-color: #c6aa76; border: none; color: #000; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; border-radius: 8px; box-shadow: 0 4px 12px rgba(198, 170, 118, 0.3); transition: all 0.3s ease; text-decoration: none;"
              onmouseover="this.style.backgroundColor='#b39a66'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 16px rgba(198, 170, 118, 0.4)';"
              onmouseout="this.style.backgroundColor='#c6aa76'; this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(198, 170, 118, 0.3)';">
              <i class="fas fa-tachometer-alt me-2"></i>Go to Dining Dashboard
            </a>
            <small class="d-block text-center text-muted mt-2">
              Your payment was successful. Access your member dashboard now.
            </small>
          @else
            <!-- User needs to complete registration -->
            <button type="button" class="btn w-100" id="completeRegistrationBtn"
              style="background-color: #c6aa76; border: none; color: #000; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; border-radius: 8px; box-shadow: 0 4px 12px rgba(198, 170, 118, 0.3); transition: all 0.3s ease;"
              onmouseover="this.style.backgroundColor='#b39a66'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 16px rgba(198, 170, 118, 0.4)';"
              onmouseout="this.style.backgroundColor='#c6aa76'; this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 12px rgba(198, 170, 118, 0.3)';">
              <i class="fas fa-user-plus me-2"></i>Complete Your Registration
            </button>
            <small class="d-block text-center text-muted mt-2">
              Please complete your account setup to access member benefits
            </small>
          @endif
        </div>
        @else
        <div class="mt-4">
          <a href="{{ url('/dining') }}" class="btn btn-secondary w-100">
            <i class="fas fa-home me-2"></i>Back to Home
          </a>
        </div>
        @endif

        <!-- Full Response Debug (You can remove this in production) -->
        <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>
      </div>
    </div>
  </div>
</section>
@endsection

@section('scripts')
<script>
  // Store payment response data
  const paymentResponse = @json($response);
  
  // Complete Registration Button Handler
  document.addEventListener('DOMContentLoaded', function() {
    const completeRegBtn = document.getElementById('completeRegistrationBtn');
    
    if (completeRegBtn) {
      completeRegBtn.addEventListener('click', function() {
        // Get user details from localStorage (set during payment form submission)
        const userDetails = JSON.parse(localStorage.getItem('userDetails') || '{}');
        
        // Open signup modal
        const signupModal = new bootstrap.Modal(document.getElementById('signupModal'));
        signupModal.show();
        
        // Wait for modal to be shown, then switch to Step 2
        document.getElementById('signupModal').addEventListener('shown.bs.modal', function() {
          // Hide Step 1 and show Step 2
          document.getElementById('signupStep1').classList.add('d-none');
          document.getElementById('signupStep2').classList.remove('d-none');
          
          // Populate hidden fields with user data
          if (userDetails.email) {
            document.getElementById('member_email').value = userDetails.email;
          }
          if (paymentResponse.billing_email) {
            document.getElementById('member_email').value = paymentResponse.billing_email;
          }
          
          // Populate member_id from payment response
          if (paymentResponse.member_number) {
            document.getElementById('member_id').value = paymentResponse.member_number;
          }
          
          // You can also pre-populate other fields if needed
          console.log('User Details:', userDetails);
          console.log('Payment Response:', paymentResponse);
          console.log('Member Number:', paymentResponse.member_number);
        }, { once: true });
      });
    }
  });
</script>
@endsection