@extends('layouts.frontend')

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

@section('content')
<div class="container py-5">
  <h2 class="text-uppercase mb-4">Order Details</h2>
  
  @if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
      {{ session('success') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif

  @if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      {{ session('error') }}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  @endif
  
  <div class="row">
    <div class="col-md-8">
      <div class="card mb-4">
        <div class="card-header">
          <h5>Order #{{ $order->order_number }}</h5>
        </div>
        <div class="card-body">
          <p><strong>Status:</strong> <span class="badge bg-{{ $order->status == 'delivered' ? 'success' : ($order->status == 'pending' ? 'warning' : 'info') }}">{{ ucfirst($order->status) }}</span></p>
          <p><strong>Order Date:</strong> {{ $order->created_at->format('F d, Y h:i A') }}</p>
          
          <h6 class="mt-4">Order Items:</h6>
          <table class="table">
            <thead>
              <tr>
                <th>Product</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Subtotal</th>
              </tr>
            </thead>
            <tbody>
              @foreach($order->items as $item)
              <tr>
                <td>{{ $item->product->name }}</td>
                <td>{{ $item->quantity }}</td>
                <td>${{ number_format($item->price, 2) }}</td>
                <td>${{ number_format($item->subtotal, 2) }}</td>
              </tr>
              @endforeach
            </tbody>
            <tfoot>
              <tr>
                <th colspan="3">Total:</th>
                <th>${{ number_format($order->total_amount, 2) }}</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        <div class="card-header">
          <h5>Shipping Address</h5>
        </div>
        <div class="card-body">
          <p>{{ $order->shipping_address }}</p>
        </div>
      </div>
      <div class="card mt-3">
        <div class="card-header">
          <h5>Billing Address</h5>
        </div>
        <div class="card-body">
          <p>{{ $order->billing_address }}</p>
        </div>
      </div>
      
      <!-- Payment Section -->
      <div class="card mt-3">
        <div class="card-header">
          <h5><i class="bi bi-credit-card"></i> Payment Status</h5>
        </div>
        <div class="card-body">
          @if(!$order->payment_receipt_path)
            <div class="alert alert-warning d-flex align-items-center mb-3" role="alert">
              <i class="bi bi-exclamation-triangle me-2 fs-4"></i>
              <div>
                <strong>Payment Required:</strong> Please upload your payment receipt to complete your order.
              </div>
            </div>
            <button type="button" class="btn btn-warning w-100" data-bs-toggle="modal" data-bs-target="#paymentModal">
              <i class="bi bi-upload"></i> Upload Payment Receipt
            </button>
          @else
            <div class="mb-3">
              <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="mb-3">
              <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>
                <button type="button" class="btn btn-sm btn-warning mt-2 w-100" data-bs-toggle="modal" data-bs-target="#paymentModal">
                  <i class="bi bi-upload"></i> Re-upload Receipt
                </button>
              @endif
            </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 btn-sm">
                    <i class="bi bi-eye"></i> View Receipt
                  </a>
                </div>
              </div>
            @endif
          @endif
        </div>
      </div>
      
      <a href="{{ route('orders.tracking', $order->id) }}" class="btn btn-primary w-100 mt-3">Track Order</a>
    </div>
  </div>
</div>

@if(!$order->payment_receipt_path || $order->payment_status === 'rejected')
<!-- Payment Upload Modal -->
<div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="paymentModalLabel">
          <i class="bi bi-credit-card"></i> Upload Payment Receipt - Order #{{ $order->order_number }}
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <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>
      </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>
@endif
@endsection