@extends('dining.layouts.dining-member')

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

@section('content')
  <div class="container px-4 py-5">
    <div class="row justify-content-center mt-5">
      <div class="col-12 col-md-10 col-lg-8">
        <!-- Back Button -->
        <div class="mb-4">
          <a href="{{ route('dining.dashboard') }}" class="btn btn-link text-decoration-none" 
            style="color: #666; font-size: 0.95rem;">
            <i class="fas fa-arrow-left me-2"></i>Back to Dashboard
          </a>
        </div>

        <!-- Payment Card -->
        <div class="card border-0" style="box-shadow: 0 4px 20px rgba(0,0,0,0.1); border-radius: 12px;">
          <div class="card-header border-0 text-center p-4" 
            style="background-color: #1a1a1a; border-radius: 12px 12px 0 0;">
            <div style="color: #fff;">
              <i class="fas fa-utensils mb-3" style="font-size: 3rem; color: #c6aa76;"></i>
              <h2 class="mb-1" style="font-weight: 600;">Complete Your Payment</h2>
              <h5 class="mb-0" style="font-weight: 400; opacity: 0.9;">The LaLiT Dining Program Membership</h5>
            </div>
          </div>

          <div class="card-body p-4 p-md-5">
            <!-- Payment Amount Display -->
            <div class="mb-4"
              style="background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%); padding: 1.5rem; border-radius: 8px; border-left: 4px solid #c6aa76;">
              <div class="d-flex align-items-center gap-3">
                <div
                  style="background: #c6aa76; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                  <i class="fas fa-info-circle" style="color: #1a1a1a; font-size: 18px;"></i>
                </div>
                <div class="flex-grow-1">
                  <div style="color: #c6aa76; font-size: 0.9rem; font-weight: 500; margin-bottom: 0.25rem;">Membership Fee
                  </div>
                  <div style="color: #fff; font-size: 1.5rem; font-weight: 700;">Rs. 9440 <span
                      style="font-size: 0.9rem; font-weight: 500; color: #ccc;">(inclusive of taxes)</span></div>
                </div>
              </div>
            </div>

            <!-- Benefits Overview -->
            <div class="mb-4 p-4" style="background-color: #f8f9fa; border-radius: 8px; border: 1px solid #e0e0e0;">
              <h5 class="mb-3" style="color: #1a1a1a; font-weight: 600;">
                <i class="fas fa-gift me-2" style="color: #c6aa76;"></i>Membership Benefits
              </h5>
              <ul class="list-unstyled mb-0" style="line-height: 2; color: #333;">
                <li><i class="fas fa-check-circle me-2" style="color: #c6aa76;"></i>Complimentary dining vouchers</li>
                <li><i class="fas fa-check-circle me-2" style="color: #c6aa76;"></i>Exclusive discount vouchers</li>
                <li><i class="fas fa-check-circle me-2" style="color: #c6aa76;"></i>Access to all participating restaurants</li>
                <li><i class="fas fa-check-circle me-2" style="color: #c6aa76;"></i>Priority reservations</li>
                <li><i class="fas fa-check-circle me-2" style="color: #c6aa76;"></i>Special member-only offers</li>
              </ul>
            </div>

            <!-- Error Display Area -->
            @if ($errors->any())
              <div class="alert alert-danger mb-4" role="alert">
                <i class="fas fa-exclamation-circle me-2"></i>
                <strong>Validation Error:</strong>
                <ul class="mb-0 mt-2">
                  @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                  @endforeach
                </ul>
              </div>
            @endif
            
            <div id="paymentErrorAlert" class="alert alert-danger d-none mb-4" role="alert">
              <i class="fas fa-exclamation-circle me-2"></i>
              <span id="paymentErrorMessage">Please fix the errors below.</span>
            </div>

            <!-- Loading Overlay -->
            <div id="paymentLoadingOverlay" class="position-absolute top-0 start-0 w-100 h-100 d-none"
              style="background: rgba(255,255,255,0.9); z-index: 10; border-radius: 0 0 12px 12px;">
              <div class="d-flex align-items-center justify-content-center h-100">
                <div class="text-center">
                  <div class="spinner-border text-primary mb-2" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                  <div class="text-muted">Processing payment...</div>
                </div>
              </div>
            </div>

            <!-- Payment Form -->
            <form id="subscriptionPaymentForm" action="{{ url('/ccavenue/pay') }}" method="POST" class="d-flex flex-column gap-3">
              @csrf
              <!-- Hidden fields for user data -->
              <input type="hidden" name="first_name" id="payment_first_name" value="{{ $membershipUser['first_name'] ?? '' }}">
              <input type="hidden" name="last_name" id="payment_last_name" value="{{ $membershipUser['last_name'] ?? '' }}">
              <input type="hidden" name="email" id="payment_email" value="{{ $membershipUser['email'] ?? '' }}">
              @php
                // Clean mobile number: remove +91, spaces, dashes, and keep only last 10 digits
                $mobile = $membershipUser['mobile'] ?? '';
                $cleanMobile = preg_replace('/[^0-9]/', '', $mobile);
                $cleanMobile = substr($cleanMobile, -10); // Get last 10 digits
              @endphp
              <input type="hidden" name="mobile" id="payment_mobile" value="{{ $cleanMobile }}">
              <input type="hidden" name="amount" value="9440">

              <!-- Member Information Display -->
              <div class="mb-3 p-3" style="background-color: #f8f9fa; border-radius: 8px;">
                <h6 class="mb-3" style="color: #333; font-weight: 600;">Payment Details</h6>
                <div class="row">
                  <div class="col-md-6 mb-2">
                    <small class="text-muted">Name</small>
                    <div style="color: #333; font-weight: 500;">{{ $membershipUser['name'] ?? 'N/A' }}</div>
                  </div>
                  <div class="col-md-6 mb-2">
                    <small class="text-muted">Email</small>
                    <div style="color: #333; font-weight: 500;">{{ $membershipUser['email'] ?? 'N/A' }}</div>
                  </div>
                  <div class="col-md-6 mb-2">
                    <small class="text-muted">Mobile</small>
                    <div style="color: #333; font-weight: 500;">{{ $membershipUser['mobile'] ?? 'N/A' }}</div>
                  </div>
                  <div class="col-md-6 mb-2">
                    <small class="text-muted">Membership Number</small>
                    <div style="color: #333; font-weight: 500;">{{ $membershipUser['membership_number'] ?? 'N/A' }}</div>
                  </div>
                </div>
              </div>

              <!-- Pay Button -->
              <div class="mb-3">
                <button type="submit" class="btn w-100" id="subscriptionPaymentSubmitBtn"
                  style="background-color: #c6aa76; border: none; color: #000; padding: 1rem; font-size: 1.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)';">
                  <span class="payment-btn-text"><i class="fas fa-lock me-2"></i>Pay Rs. 9440 Now</span>
                  <span class="payment-btn-loading d-none">
                    <i class="fas fa-spinner fa-spin me-2"></i>Processing...
                  </span>
                </button>
              </div>

              <!-- Security Notice -->
              <div class="text-center">
                <small class="text-muted">
                  <i class="fas fa-shield-alt me-1"></i>
                  Your payment information is secure and encrypted
                </small>
              </div>
            </form>
          </div>
        </div>

        <!-- Additional Information -->
        <div class="mt-4 text-center">
          <p class="text-muted mb-2">
            <i class="fas fa-question-circle me-1"></i>
            Need help? <a href="{{ route('contact') }}" style="color: #c6aa76; text-decoration: none; font-weight: 500;">Contact Support</a>
          </p>
        </div>
      </div>
    </div>
  </div>

  @push('scripts')
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('subscriptionPaymentForm');
        const submitBtn = document.getElementById('subscriptionPaymentSubmitBtn');
        
        if (form && submitBtn) {
          const btnText = submitBtn.querySelector('.payment-btn-text');
          const btnLoading = submitBtn.querySelector('.payment-btn-loading');
          const loadingOverlay = document.getElementById('paymentLoadingOverlay');

          form.addEventListener('submit', function(e) {
            // Show loading state but allow form to submit
            if (btnText) btnText.classList.add('d-none');
            if (btnLoading) btnLoading.classList.remove('d-none');
            submitBtn.disabled = true;
            if (loadingOverlay) loadingOverlay.classList.remove('d-none');
            
            // Form will submit normally to action URL
            return true;
          });
        }
      });
    </script>
  @endpush
@endsection