@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: 6rem 0px 2rem 0;
    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;
  }
  .custom-btn-reg {
    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;  
  }
</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">
        
        @if($isSuccess)
            <div class="mt-4 otp_form">
              @if(isset($passwordExists) && $passwordExists)
                <!-- User already has password, show dashboard link -->
                <a href="{{ route('dining.dashboard', ['city' => $city]) }}" class="btn w-100 custom-btn-reg"
                  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
              <form id="signupForm" action="#" method="POST">
                @csrf
                    <div id="signupStep2">
                        <input type="hidden" id="member_id" value="{{ $response['member_number'] }}" name="member_id">
                        <input type="hidden" id="member_email" value="{{ $response['billing_email'] }}" name="member_email">

                      <!-- Back Button -->
                      <div class="mb-4">
                        <button type="button" class="btn btn-outline-secondary" id="signupBackBtn">
                          <i class="fas fa-arrow-left me-2"></i>BACK
                        </button>
                      </div>

                      <!-- Info Message -->
                      <div class="alert alert-info mb-4">
                        <i class="fas fa-info-circle me-2"></i>
                        <span>An OTP has been sent to your registered mobile number during registration. Please enter it below
                          along with your desired password to complete your registration.</span>
                      </div>

                      <!-- OTP Field -->
                      <div class="mb-4">
                        <label for="signup_otp" class="block text-sm font-medium mb-2 text-orange-600">Enter OTP
                          <span class="text-red-500">*</span></label>
                        <input type="text"
                          class="form-control w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                          id="signup_otp" name="otp" placeholder="Enter 6-digit OTP" maxlength="6" pattern="[0-9]{6}">
                        <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
                      </div>

                      <!-- Password Field -->
                      <div class="mb-4">
                        <label for="signup_password" class="block text-sm font-medium mb-2 text-orange-600">Password
                          <span class="text-red-500">*</span></label>
                        <input type="password"
                          class="form-control w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                          id="signup_password" name="password" placeholder="Enter your password" minlength="8">
                        <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
<!--                        <small class="text-gray-500 text-xs">Password must contain at least 8 characters with one uppercase
                          alphabet and one numeric character.</small>-->
                        <ul id="passwordRules" class="mt-2 text-sm list-unstyled p-0">
                            <li id="rule-length" class="text-danger">
                                ❌ Minimum 8 characters
                            </li>
                            <li id="rule-uppercase" class="text-danger">
                                ❌ At least 1 uppercase letter
                            </li>
                            <li id="rule-number" class="text-danger">
                                ❌ At least 1 numeric character
                            </li>
                        </ul>
                      </div>

                      <!-- Confirm Password Field -->
                      <div class="mb-4">
                        <label for="signup_confirm_password" class="block text-sm font-medium mb-2 text-orange-600">Confirm
                          Password
                          <span class="text-red-500">*</span></label>
                        <input type="password"
                          class="form-control w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200"
                          id="signup_confirm_password" name="confirm_password" placeholder="Confirm your password" minlength="8">
                        <div class="invalid-feedback text-red-500 text-sm mt-1"></div>
                      </div>

                      <!-- Complete Registration Button -->
                      <div class="mb-4">
                        <button type="submit" disabled class="btn w-100 signupSubmit custom-btn-reg" id="signupSubmitBtn2"
                          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="signup-btn-text"><i class="fas fa-user-plus me-2"></i>Complete Your Registration</span>
                          <span class="signup-btn-loading d-none">
                            <i class="fas fa-spinner fa-spin me-2"></i>Verifying...
                          </span>
                        </button>
                      </div>
                      <div id="signupErrorAlert" class="alert alert-danger d-none mb-4" role="alert">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        <span id="signupErrorMessage">Please fix the errors below.</span>
                      </div>

                      <!-- Success Display Area -->
                      <div id="signupSuccessAlert" class="alert alert-success d-none mb-4" role="alert">
                        <i class="fas fa-check-circle me-2"></i>
                        <span id="signupSuccessMessage">Registration successful! Please check your email.</span>
                      </div>
                    </div>
                   </form>
<!--                <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
          <button type="button" id="toggleTransactionBtn" class="btn btn-primary mb-3 w-100">
              View Transaction Details
          </button>
          <div class="transaction-details d-none" id="transactionDetails">
            <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
          </div>
        @if($isSuccess)
        <div class="mt-4">
          @if(isset($passwordExists) && $passwordExists)
            <!-- User already has password, show dashboard link -->
            <a href="{{ route('dining.dashboard', ['city' => $city]) }}" class="btn w-100 custom-btn-reg"
              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
            
          @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 });
      });
    }
    
    // validate inputs and then enable submit button
    const otp = document.getElementById('signup_otp');
    const password = document.getElementById('signup_password');
    const confirmPassword = document.getElementById('signup_confirm_password');
    const submitBtn = document.getElementById('signupSubmitBtn2');

    // Password rule elements
    const ruleLength = document.getElementById('rule-length');
    const ruleUppercase = document.getElementById('rule-uppercase');
    const ruleNumber = document.getElementById('rule-number');

    function validateForm() {
        const otpValue = otp.value.trim();
        const passwordValue = password.value.trim();
        const confirmPasswordValue = confirmPassword.value.trim();

        // OTP validation (6 digits)
        const isOtpValid = /^[0-9]{6}$/.test(otpValue);

        // Password checks
        const hasMinLength = passwordValue.length >= 8;
        const hasUppercase = /[A-Z]/.test(passwordValue);
        const hasNumber = /\d/.test(passwordValue);

        // Update password rule UI
        updateRule(ruleLength, hasMinLength, 'Minimum 8 characters');
        updateRule(ruleUppercase, hasUppercase, 'At least 1 uppercase letter');
        updateRule(ruleNumber, hasNumber, 'At least 1 numeric character');

        // Final password validation
        const isPasswordValid =
            hasMinLength &&
            hasUppercase &&
            hasNumber;

        // Confirm password match
        const isConfirmPasswordValid =
            passwordValue === confirmPasswordValue &&
            confirmPasswordValue !== '';

        // Enable/Disable button
        submitBtn.disabled = !(
            isOtpValid &&
            isPasswordValid &&
            isConfirmPasswordValid
        );
    }

    // Function to update validation color
    function updateRule(element, isValid, text) {
        element.classList.remove('text-success', 'text-danger');

        if (isValid) {
            element.classList.add('text-success');
            element.innerHTML = `✅ ${text}`;
        } else {
            element.classList.add('text-danger');
            element.innerHTML = `❌ ${text}`;
        }
    }

    // Listen to input changes
    otp.addEventListener('input', validateForm);
    password.addEventListener('input', validateForm);
    confirmPassword.addEventListener('input', validateForm);
    
    const toggleBtn = document.getElementById('toggleTransactionBtn');
    const transactionDetails = document.getElementById('transactionDetails');

    toggleBtn.addEventListener('click', function () {

        transactionDetails.classList.toggle('d-none');

        // Change button text
        if (transactionDetails.classList.contains('d-none')) {
            toggleBtn.textContent = 'View Transaction Details';
        } else {
            toggleBtn.textContent = 'Hide Transaction Details';
        }
    });
  });
  
  
    // Signup Submit Button Handler - Step 2: Complete Registration (Verify OTP and Set Password)
  const signupForm = document.getElementById('signupForm');
  const signupSubmitBtn = document.getElementById('signupSubmitBtn2');
  if (signupSubmitBtn && signupForm) {
    signupSubmitBtn.addEventListener('click', async function (e) {
      e.preventDefault();

      const errorAlert = document.getElementById('signupErrorAlert');
      const successAlert = document.getElementById('signupSuccessAlert');
      const loadingOverlay = document.getElementById('signupLoadingOverlay');
      const btnText = this.querySelector('.signup-btn-text');
      const btnLoading = this.querySelector('.signup-btn-loading');

      // Clear previous errors
      errorAlert.classList.add('d-none');
      successAlert.classList.add('d-none');
      signupForm.querySelectorAll('#signupStep2 .form-control').forEach(field => {
        field.classList.remove('is-invalid');
        const feedback = field.nextElementSibling;
        if (feedback && feedback.classList.contains('invalid-feedback')) {
          feedback.textContent = '';
        }
      });

      // Validate Step 2 fields
      const otp = document.getElementById('signup_otp').value.trim();
      const password = document.getElementById('signup_password').value;
      const confirmPassword = document.getElementById('signup_confirm_password').value;
      const memberId = document.getElementById('member_id').value;

      if (!otp || !password || !confirmPassword) {
        const errorMsg = document.getElementById('signupErrorMessage');
        errorMsg.textContent = 'Please fill in all required fields.';
        errorAlert.classList.remove('d-none');
        return;
      }

      if (password !== confirmPassword) {
        const confirmField = document.getElementById('signup_confirm_password');
        confirmField.classList.add('is-invalid');
        const feedback = confirmField.nextElementSibling;
        if (feedback && feedback.classList.contains('invalid-feedback')) {
          feedback.textContent = 'Passwords do not match.';
        }
        return;
      }

      if (password.length < 8) {
        const passwordField = document.getElementById('signup_password');
        passwordField.classList.add('is-invalid');
        const feedback = passwordField.nextElementSibling;
        if (feedback && feedback.classList.contains('invalid-feedback')) {
          feedback.textContent = 'Password must be at least 8 characters.';
        }
        return;
      }

      // check password is alphanumeric with at least one uppercase letter
      const passwordPattern = /^(?=.*[A-Z])(?=.*\d).+$/;
      if (!passwordPattern.test(password)) {
        const passwordField = document.getElementById('signup_password');
        passwordField.classList.add('is-invalid');
        const feedback = passwordField.nextElementSibling;
        if (feedback && feedback.classList.contains('invalid-feedback')) {
          feedback.textContent = 'Password is not valid. Please check again.';
        }
        return;
      }

      // Show loading
      loadingOverlay.classList.remove('d-none');
      this.disabled = true;
      btnText.classList.add('d-none');
      btnLoading.classList.remove('d-none');

      try {
        // Step 1: Validate Registration OTP
        const otpResponse = await fetch('/membership/validate-registration-otp', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'X-Requested-With': 'XMLHttpRequest'
          },
          body: JSON.stringify({
            member_id: memberId,
            otp: otp
          })
        });

        const otpData = await otpResponse.json();

        if (!otpData.success) {
          // Hide loading
          loadingOverlay.classList.add('d-none');
          signupSubmitBtn.disabled = false;
          btnText.classList.remove('d-none');
          btnLoading.classList.add('d-none');

          // Show error
          const errorMsg = document.getElementById('signupErrorMessage');
          errorMsg.textContent = otpData.message || 'Invalid OTP. Please try again.';
          errorAlert.classList.remove('d-none');

          // Highlight OTP field
          const otpField = document.getElementById('signup_otp');
          otpField.classList.add('is-invalid');
          const feedback = otpField.nextElementSibling;
          if (feedback && feedback.classList.contains('invalid-feedback')) {
            feedback.textContent = 'Invalid OTP. Please check and try again.';
          }
          return;
        }

        // Step 2: Set Password using new API
        const passwordResponse = await fetch('/membership/set-password-registration', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            'X-Requested-With': 'XMLHttpRequest'
          },
          body: JSON.stringify({
            password: password
          })
        });

        const data = await passwordResponse.json();

        // Hide loading
        loadingOverlay.classList.add('d-none');
        signupSubmitBtn.disabled = false;
        btnText.classList.remove('d-none');
        btnLoading.classList.add('d-none');

        if (data.success) {
          // Show success message with member ID
          const successMsg = document.getElementById('signupSuccessMessage');
          successMsg.innerHTML = `<strong>Registration Successful!</strong><br>Your Member ID: <strong>${memberId}</strong><br>Redirecting to dashboard...`;
          successAlert.classList.remove('d-none');

          // Reset form
          signupForm.reset();
          document.getElementById('signupStep1').classList.remove('d-none');
          document.getElementById('signupStep2').classList.add('d-none');

          // Redirect to dashboard after 2 seconds
          setTimeout(() => {
            window.location.href = "{{ route('dining.dashboard', ['city' => $city]) }}";
          }, 2000);
        } else {
          // Show error
          const errorMsg = document.getElementById('signupErrorMessage');
          
          // Handle different message formats
          let errorMessage = 'Failed to verify OTP. Please try again.';
          
          if (data.message) {
            if (Array.isArray(data.message)) {
              // Message is an array of error objects
              const errorMessages = [];
              data.message.forEach(error => {
                if (error.message) {
                  // Remove brackets and quotes if present: "['error']" -> "error"
                  let cleanMessage = error.message.replace(/^\[\'(.+)\'\]$/, '$1');
                  errorMessages.push(cleanMessage);
                }
              });
              
              if (errorMessages.length > 0) {
                errorMessage = errorMessages.join('<br>');
              }
            } else if (typeof data.message === 'string') {
              errorMessage = data.message;
            } else if (typeof data.message === 'object') {
              // Handle field-specific errors
              const fieldErrors = [];
              for (const [field, errors] of Object.entries(data.message)) {
                if (Array.isArray(errors)) {
                  fieldErrors.push(...errors);
                } else {
                  fieldErrors.push(errors);
                }
              }
              if (fieldErrors.length > 0) {
                errorMessage = fieldErrors.join('<br>');
              }
            }
          }
          
          errorMsg.innerHTML = errorMessage;
          errorAlert.classList.remove('d-none');
        }

      } catch (error) {
        console.error('Registration error:', error);

        // Hide loading
        loadingOverlay.classList.add('d-none');
        signupSubmitBtn.disabled = false;
        btnText.classList.remove('d-none');
        btnLoading.classList.add('d-none');

        // Show error
        const errorMsg = document.getElementById('signupErrorMessage');
        errorMsg.textContent = 'An error occurred during registration. Please try again.';
        errorAlert.classList.remove('d-none');
      }
    });
  }
</script>
@endsection