@extends('layouts.frontend')

@section('title', 'My Orders')

@section('content')
<div class="container py-4 py-md-5">
  <h2 class="text-uppercase mb-3 mb-md-4">My Orders</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
  
  @if($orders->count() > 0)
    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>Order Number</th>
            <th>Date</th>
            <th>Total</th>
            <th>Status</th>
            <th>Payment</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          @foreach($orders as $order)
          <tr>
            <td>{{ $order->order_number }}</td>
            <td>{{ $order->created_at->format('M d, Y') }}</td>
            <td>${{ number_format($order->total_amount, 2) }}</td>
            <td>
              <span class="badge bg-{{ $order->status == 'delivered' ? 'success' : ($order->status == 'pending' ? 'warning' : 'info') }}">
                {{ ucfirst($order->status) }}
              </span>
            </td>
            <td>
              @if(!$order->payment_receipt_path)
                <span class="badge bg-danger">Payment Required</span>
                <button type="button" class="btn btn-sm btn-warning mt-1" data-bs-toggle="modal" data-bs-target="#paymentModal{{ $order->id }}">
                  <i class="bi bi-upload"></i> Upload Receipt
                </button>
              @else
                @if($order->payment_status === 'confirmed')
                  <span class="badge bg-success">Confirmed</span>
                @elseif($order->payment_status === 'rejected')
                  <span class="badge bg-danger">Rejected</span>
                  <button type="button" class="btn btn-sm btn-warning mt-1" data-bs-toggle="modal" data-bs-target="#paymentModal{{ $order->id }}">
                    <i class="bi bi-upload"></i> Re-upload
                  </button>
                @else
                  <span class="badge bg-warning">Pending</span>
                @endif
              @endif
            </td>
            <td>
              <a href="{{ route('orders.show', $order->id) }}" class="btn btn-sm btn-primary">View</a>
              <a href="{{ route('orders.tracking', $order->id) }}" class="btn btn-sm btn-secondary">Track</a>
            </td>
          </tr>
          @endforeach
        </tbody>
      </table>
    </div>
    <div class="mt-4">
      {{ $orders->links() }}
    </div>
  @else
    <div class="text-center py-5">
      <p class="fs-4">You have no orders yet</p>
      <p class="text-muted mb-3">Start shopping for premium stitched and unstitched garments for men, women, and children at Rathore Collection.</p>
      <a href="{{ route('products.index') }}" class="btn btn-primary">Start Shopping</a>
    </div>
  @endif
</div>

@foreach($orders as $order)
@if(!$order->payment_receipt_path || $order->payment_status === 'rejected')
<!-- Payment Upload Modal for Order {{ $order->id }} -->
<div class="modal fade" id="paymentModal{{ $order->id }}" tabindex="-1" aria-labelledby="paymentModalLabel{{ $order->id }}" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="paymentModalLabel{{ $order->id }}">
          <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-primary 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 the amount <strong class="fs-5">${{ number_format($order->total_amount, 2) }}</strong> to complete your order.
          </div>
        </div>
        
        <div class="mb-4">
          <label for="paymentMethodSelect{{ $order->id }}" class="form-label fw-bold mb-3">
            <i class="bi bi-credit-card"></i> Select Payment Method
          </label>
          <select class="form-select form-select-lg" id="paymentMethodSelect{{ $order->id }}" onchange="showAccountDetails(this, {{ $order->id }})">
            <option value="">-- Select 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>
        </div>

        <div id="accountDetails{{ $order->id }}" class="card border-primary shadow-sm mb-4" style="display: none;">
          <div class="card-body text-center">
            <div class="mb-3">
              <i class="bi bi-bank text-primary" style="font-size: 3rem;"></i>
            </div>
            <h5 class="card-title text-primary mb-3" id="methodName{{ $order->id }}"></h5>
            <div id="accountTitle{{ $order->id }}" class="mb-2" style="display: none;">
              <small class="text-muted">Account Title</small>
              <div class="p-2 bg-light rounded mt-1">
                <code class="fw-bold text-dark" id="accountTitleValue{{ $order->id }}"></code>
              </div>
            </div>
            <div class="mb-2">
              <small class="text-muted">Account Number / IBAN</small>
            </div>
            <div class="p-3 bg-light rounded">
              <code class="fs-4 fw-bold text-dark" id="accountNumber{{ $order->id }}"></code>
            </div>
            <button type="button" class="btn btn-sm btn-outline-primary mt-3" onclick="copyAccountNumber({{ $order->id }})">
              <i class="bi bi-clipboard"></i> Copy Account Number
            </button>
          </div>
        </div>

        <hr class="my-4">

        <div class="card bg-light border-0">
          <div class="card-body">
            <h6 class="mb-3">
              <i class="bi bi-upload"></i> Upload Payment Receipt
            </h6>
            <form action="{{ route('orders.payment.upload', $order->id) }}" method="POST" enctype="multipart/form-data" id="paymentUploadForm{{ $order->id }}">
              @csrf
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label for="payment_method{{ $order->id }}" class="form-label fw-bold">
                    Payment Method <span class="text-danger">*</span>
                  </label>
                  <select class="form-select form-select-lg" id="payment_method{{ $order->id }}" name="payment_method" required>
                    <option value="">Select Payment Method</option>
                    <option value="easypaisa" {{ old('payment_method') == 'easypaisa' ? 'selected' : '' }}>EasyPaisa</option>
                    <option value="jazzcash" {{ old('payment_method') == 'jazzcash' ? 'selected' : '' }}>JazzCash</option>
                    <option value="mcb" {{ old('payment_method') == 'mcb' ? 'selected' : '' }}>MCB IBAN</option>
                  </select>
                  @error('payment_method')
                    <div class="text-danger small mt-1">{{ $message }}</div>
                  @enderror
                </div>
                <div class="col-md-6 mb-3">
                  <label for="receipt{{ $order->id }}" class="form-label fw-bold">
                    Payment Receipt <span class="text-danger">*</span>
                  </label>
                  <input type="file" class="form-control form-control-lg" id="receipt{{ $order->id }}" name="receipt" accept="image/*,.pdf" required onchange="previewReceipt(this, '{{ $order->id }}')">
                  <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{{ $order->id }}" class="mt-2" style="display: none;">
                    <img id="previewImage{{ $order->id }}" src="" alt="Receipt Preview" class="img-thumbnail" style="max-width: 200px; max-height: 200px;">
                  </div>
                </div>
              </div>
              <div class="mt-3">
                <button type="submit" class="btn btn-primary btn-lg">
                  <i class="bi bi-cloud-upload"></i> Upload Receipt
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endif
@endforeach

<script>
  function showAccountDetails(select, orderId) {
    const selectedOption = select.options[select.selectedIndex];
    const accountDetails = document.getElementById('accountDetails' + orderId);
    const methodName = document.getElementById('methodName' + orderId);
    const accountNumber = document.getElementById('accountNumber' + orderId);
    const accountTitle = document.getElementById('accountTitle' + orderId);
    const accountTitleValue = document.getElementById('accountTitleValue' + orderId);
    
    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(orderId) {
    const accountNumber = document.getElementById('accountNumber' + orderId);
    const text = accountNumber.textContent;
    
    if (!text || text === 'Not configured') {
      alert('Account number not available');
      return;
    }
    
    navigator.clipboard.writeText(text).then(function() {
      alert('Account number copied to clipboard!');
    }, 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, orderId) {
    const preview = document.getElementById('receiptPreview' + orderId);
    const previewImage = document.getElementById('previewImage' + orderId);
    
    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>
@endsection