@extends('layouts.frontend')

@section('title', 'Order Confirmation')

@section('content')
<div class="container py-5 text-center">
  <div class="card">
    <div class="card-body py-5">
      <svg width="80" height="80" viewBox="0 0 24 24" class="text-success mb-4">
        <use xlink:href="#check"></use>
      </svg>
      <h2 class="text-uppercase mb-4">Thank You for Your Order!</h2>
      <p class="fs-5 mb-4">Your order has been placed successfully.</p>
      <p class="mb-4"><strong>Order Number:</strong> {{ $order->order_number }}</p>
      <p class="mb-4">We've sent a confirmation email to your registered email address.</p>
      
      <div class="row mt-5">
        <div class="col-md-6">
          <h5>Order Summary</h5>
          <table class="table">
            @foreach($order->items as $item)
            <tr>
              <td>{{ $item->product->name }} x{{ $item->quantity }}</td>
              <td>${{ number_format($item->subtotal, 2) }}</td>
            </tr>
            @endforeach
            <tr>
              <th>Total:</th>
              <th>${{ number_format($order->total_amount, 2) }}</th>
            </tr>
          </table>
        </div>
        <div class="col-md-6">
          <h5>Shipping Address</h5>
          <p>{{ $order->shipping_address }}</p>
        </div>
      </div>

      <!-- Payment Section -->
      <div class="row mt-5">
        <div class="col-12">
          <div class="card shadow-sm border-0">
            <div class="card-header bg-gradient bg-primary text-white py-3">
              <h5 class="mb-0">
                <i class="bi bi-credit-card"></i> Payment Instructions
              </h5>
            </div>
            <div class="card-body p-4">
              @if(!$order->payment_receipt_path)
                <div class="alert alert-info d-flex align-items-center mb-4" role="alert">
                  <i class="bi bi-info-circle me-2 fs-4"></i>
                  <div>
                    <strong>Payment Required:</strong> Please transfer <strong class="fs-5">${{ number_format($order->total_amount, 2) }}</strong> using one of the payment methods below, then upload your receipt.
                  </div>
                </div>
                
                <form action="{{ route('orders.payment.upload', $order->id) }}" method="POST" enctype="multipart/form-data" id="paymentUploadForm">
                  @csrf
                  
                  <!-- Single Payment Method Dropdown -->
                  <div class="mb-4">
                    <label for="paymentMethodSelect" class="form-label fw-bold mb-3">
                      <i class="bi bi-credit-card"></i> Select Payment Method <span class="text-danger">*</span>
                    </label>
                    <select class="form-select form-select-lg" id="paymentMethodSelect" name="payment_method" required onchange="showAccountDetails(this)">
                      <option value="">-- Choose Payment Method --</option>
                      <option value="easypaisa" data-account="{{ $paymentAccounts['easypaisa']['account_number'] }}" data-title="{{ $paymentAccounts['easypaisa']['account_title'] }}">EasyPaisa</option>
                      <option value="jazzcash" data-account="{{ $paymentAccounts['jazzcash']['account_number'] }}" data-title="{{ $paymentAccounts['jazzcash']['account_title'] }}">JazzCash</option>
                      <option value="mcb" data-account="{{ $paymentAccounts['mcb']['account_number'] }}" data-title="{{ $paymentAccounts['mcb']['account_title'] }}">MCB IBAN</option>
                    </select>
                    @error('payment_method')
                      <div class="text-danger small mt-1">{{ $message }}</div>
                    @enderror
                  </div>

                  <!-- Account Details (shown when method is selected) -->
                  <div id="accountDetails" class="card border-success shadow-sm mb-4" style="display: none;">
                      <div class="card-body text-center">
                        <div class="mb-3">
                        <i class="bi bi-bank text-success" style="font-size: 2.5rem;"></i>
                        </div>
                      <h5 class="card-title text-success mb-3" id="methodName"></h5>
                      <p class="text-muted small mb-3">Transfer the payment amount to the following account:</p>
                      
                      <div id="accountTitle" class="mb-3" style="display: none;">
                        <small class="text-muted d-block mb-1">Account Title</small>
                        <div class="p-2 bg-light rounded border">
                          <code class="fw-bold text-dark" id="accountTitleValue"></code>
                        </div>
                      </div>
                      
                        <div class="mb-3">
                        <small class="text-muted d-block mb-1">Account Number / IBAN</small>
                        <div class="p-3 bg-light rounded border">
                          <code class="fs-5 fw-bold text-dark" id="accountNumber"></code>
                        </div>
                      </div>
                      
                      <button type="button" class="btn btn-sm btn-success mt-2" onclick="copyAccountNumber()">
                        <i class="bi bi-clipboard"></i> Copy Account Number
                      </button>
                  </div>
                </div>

                <hr class="my-4">

                  <!-- Receipt Upload -->
                  <div class="mb-3">
                          <label for="receipt" class="form-label fw-bold">
                      <i class="bi bi-upload"></i> Upload Payment Receipt <span class="text-danger">*</span>
                          </label>
                          <input type="file" class="form-control form-control-lg" id="receipt" name="receipt" accept="image/*,.pdf" required onchange="previewReceipt(this)">
                          <small class="form-text text-muted">
                            <i class="bi bi-file-earmark-image"></i> Accepted: JPG, PNG, PDF (Max: 5MB)
                          </small>
                          @error('receipt')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                          @enderror
                          <div id="receiptPreview" class="mt-2" style="display: none;">
                            <img id="previewImage" src="" alt="Receipt Preview" class="img-thumbnail" style="max-width: 200px; max-height: 200px;">
                          </div>
                        </div>
                  
                  <div class="mt-4">
                    <button type="submit" class="btn btn-primary btn-lg w-100">
                      <i class="bi bi-cloud-upload"></i> Submit Payment Receipt
                        </button>
                      </div>
                    </form>
              @else
                <div class="alert alert-{{ $order->payment_status === 'confirmed' ? 'success' : ($order->payment_status === 'rejected' ? 'danger' : 'warning') }} d-flex align-items-start" role="alert">
                  <i class="bi bi-{{ $order->payment_status === 'confirmed' ? 'check-circle' : ($order->payment_status === 'rejected' ? 'x-circle' : 'clock') }}-fill me-3 fs-4"></i>
                  <div class="flex-grow-1">
                    <h6 class="alert-heading mb-2">
                      Payment Receipt {{ $order->payment_status === 'confirmed' ? 'Confirmed' : ($order->payment_status === 'rejected' ? 'Rejected' : 'Uploaded') }}
                    </h6>
                    <div class="row">
                      <div class="col-md-6 mb-2">
                        <strong>Payment Method:</strong> 
                        <span class="badge bg-{{ $order->payment_method === 'easypaisa' ? 'success' : ($order->payment_method === 'mcb' ? 'info' : 'primary') }} ms-2">
                          {{ $order->payment_method === 'mcb' ? 'MCB IBAN' : ucfirst($order->payment_method) }}
                        </span>
                      </div>
                      <div class="col-md-6 mb-2">
                        <strong>Status:</strong> 
                        @if($order->payment_status === 'pending')
                          <span class="badge bg-warning ms-2">Pending Confirmation</span>
                        @elseif($order->payment_status === 'confirmed')
                          <span class="badge bg-success ms-2">Confirmed</span>
                        @elseif($order->payment_status === 'rejected')
                          <span class="badge bg-danger ms-2">Rejected</span>
                        @endif
                      </div>
                    </div>
                    @if($order->payment_receipt_path)
                      <div class="mt-3">
                        <strong>Receipt:</strong>
                        <div class="mt-2">
                          <a href="{{ asset('storage/' . $order->payment_receipt_path) }}" target="_blank" class="btn btn-outline-primary">
                            <i class="bi bi-eye"></i> View Full Receipt
                          </a>
                          <img src="{{ asset('storage/' . $order->payment_receipt_path) }}" alt="Payment Receipt" class="img-thumbnail ms-2" style="max-width: 150px; max-height: 150px;" onerror="this.style.display='none'">
                        </div>
                      </div>
                    @endif
                    <hr class="my-2">
                    <p class="mb-0">
                      @if($order->payment_status === 'pending')
                        <i class="bi bi-hourglass-split"></i> Your payment is being reviewed. You will be notified once it's confirmed.
                      @elseif($order->payment_status === 'confirmed')
                        <i class="bi bi-check-circle"></i> Your payment has been confirmed. Your order will be processed shortly.
                      @else
                        <i class="bi bi-exclamation-triangle"></i> Your payment receipt was rejected. Please contact support or upload a new receipt.
                      @endif
                    </p>
                  </div>
                </div>
              @endif
            </div>
          </div>
        </div>
      </div>

      <script>
        function showAccountDetails(select) {
          const selectedOption = select.options[select.selectedIndex];
          const accountDetails = document.getElementById('accountDetails');
          const methodName = document.getElementById('methodName');
          const accountNumber = document.getElementById('accountNumber');
          const accountTitle = document.getElementById('accountTitle');
          const accountTitleValue = document.getElementById('accountTitleValue');
          
          if (select.value) {
            const account = selectedOption.getAttribute('data-account');
            const title = selectedOption.getAttribute('data-title');
            const methodText = selectedOption.text;
            
            methodName.textContent = methodText;
            accountNumber.textContent = account || 'Not configured';
            
            if (title && title.trim() !== '') {
              accountTitleValue.textContent = title;
              accountTitle.style.display = 'block';
            } else {
              accountTitle.style.display = 'none';
            }
            
            accountDetails.style.display = 'block';
          } else {
            accountDetails.style.display = 'none';
          }
        }

        function copyAccountNumber() {
          const accountNumber = document.getElementById('accountNumber');
          const text = accountNumber.textContent.trim();
          
          if (!text || text === 'Not configured') {
            alert('Account number not available');
            return;
          }
          
          navigator.clipboard.writeText(text).then(function() {
            const btn = event.target.closest('button');
            const originalText = btn.innerHTML;
            btn.innerHTML = '<i class="bi bi-check"></i> Copied!';
            btn.classList.add('btn-success');
            btn.classList.remove('btn-success');
            setTimeout(() => {
              btn.innerHTML = originalText;
            }, 2000);
          }, function() {
            // Fallback for older browsers
            const textarea = document.createElement('textarea');
            textarea.value = text;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            alert('Account number copied to clipboard!');
          });
        }

        function previewReceipt(input) {
          const preview = document.getElementById('receiptPreview');
          const previewImage = document.getElementById('previewImage');
          
          if (input.files && input.files[0]) {
            const file = input.files[0];
            if (file.type.startsWith('image/')) {
              const reader = new FileReader();
              reader.onload = function(e) {
                previewImage.src = e.target.result;
                preview.style.display = 'block';
              };
              reader.readAsDataURL(file);
            } else {
              preview.style.display = 'none';
            }
          } else {
            preview.style.display = 'none';
          }
        }
      </script>
      
      <div class="mt-4">
        <a href="{{ route('orders.tracking', $order->id) }}" class="btn btn-primary me-2">Track Order</a>
        <a href="{{ route('orders.index') }}" class="btn btn-secondary me-2">View All Orders</a>
        <a href="{{ route('products.index') }}" class="btn btn-outline-primary">Continue Shopping</a>
      </div>
    </div>
  </div>
</div>
@endsection