@extends('layouts.app')

@section('content')
<section class="section">
  <div class="container">
    <h1 class="page-title">Lacak Pesanan</h1>
    <div class="track-form">
      <form onsubmit="trackOrder(event)">
        <div class="form-group">
          <label for="track-id">ID Pesanan</label>
          <input type="text" id="track-id" value="{{ request('id', '') }}" placeholder="Masukkan ID pesanan (contoh: ORD-...)" required>
        </div>
        <button type="submit" class="btn btn-primary">Cari Pesanan</button>
      </form>
    </div>
    <div id="track-result"></div>
  </div>
</section>

<script>
let currentOrderId = null;
let pollInterval = null;

function stopPolling() {
  if (pollInterval) {
    clearInterval(pollInterval);
    pollInterval = null;
  }
}

function startPolling(orderId) {
  stopPolling();
  currentOrderId = orderId;
  pollInterval = setInterval(async () => {
    try {
      const res = await api.getOrder(orderId);
      if (res.success) {
        renderTrackResult(res.data);
      }
    } catch (error) {
      console.error('Polling error:', error);
    }
  }, 5000);
}

async function trackOrder(e) {
  if (e.preventDefault) e.preventDefault();
  const id = document.getElementById('track-id').value;
  const resultDiv = document.getElementById('track-result');
  resultDiv.innerHTML = '<div class="loading">Mencari...</div>';

  try {
    const res = await api.getOrder(id);

    if (!res.success) {
      resultDiv.innerHTML = '<div class="error"><p>Pesanan dengan ID "' + id + '" tidak ditemukan.</p></div>';
      stopPolling();
      return;
    }

    renderTrackResult(res.data);
    startPolling(id);
  } catch (error) {
    resultDiv.innerHTML = '<div class="error"><p>Error: ' + error.message + '</p></div>';
  }
}

function renderTrackResult(order) {
  const resultDiv = document.getElementById('track-result');
  const steps = [
    { key: 'pending', icon: '⏳', label: 'Menunggu', desc: 'Pesanan sedang menunggu konfirmasi' },
    { key: 'confirmed', icon: '✅', label: 'Dikonfirmasi', desc: 'Pesanan telah dikonfirmasi oleh toko' },
    { key: 'preparing', icon: '👨‍🍳', label: 'Disiapkan', desc: 'Kue sedang disiapkan untuk Anda' },
    { key: 'ready', icon: '📦', label: 'Siap Diambil', desc: 'Pesanan siap untuk diambil' },
    { key: 'delivered', icon: '🎉', label: 'Selesai', desc: 'Pesanan telah selesai' },
  ];
  const currentIdx = steps.findIndex(s => s.key === order.status);
  const currentStep = steps[currentIdx] || steps[0];

  resultDiv.innerHTML = `
    <div class="track-result">
      <div class="order-detail-card">
        <div class="order-header">
          <h3>Pesanan ${order.order_id}</h3>
          <span class="status-badge status-${order.status}">${currentStep.icon} ${currentStep.label}</span>
        </div>
        <div class="track-steps">
          ${steps.map((step, i) => `
            <div class="track-step ${i <= currentIdx ? 'active' : ''} ${i === currentIdx ? 'current' : ''}">
              <div class="step-dot">${step.icon}</div>
              <div class="step-label">${step.label}</div>
              ${i === currentIdx ? `<div class="step-desc">${step.desc}</div>` : ''}
            </div>
          `).join('')}
        </div>
        <div class="order-info">
          <div class="info-row">
            <span class="info-label">Pelanggan</span>
            <span class="info-value">${order.customer_name}</span>
          </div>
          <div class="info-row">
            <span class="info-label">Metode Pembayaran</span>
            <span class="info-value">${order.payment_method === 'cash' ? 'Tunai' : 'Transfer'}</span>
          </div>
          ${order.notes ? `
          <div class="info-row">
            <span class="info-label">Catatan</span>
            <span class="info-value">${order.notes}</span>
          </div>
          ` : ''}
        </div>
          <div class="order-items">
            <h4>Item Pesanan</h4>
            ${order.items.map(item => `
              <div class="order-item">
                <div class="order-item-image">
                  <img src="${item.image || '/images/placeholder.svg'}" alt="${item.product_name}" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2260%22 height=%2260%22><rect fill=%22%23f0f0f0%22 width=%2260%22 height=%2260%22/><text fill=%22%23999%22 x=%2250%25%22 y=%2250%25%22 text-anchor=%22middle%22 dy=%22.3em%22 font-size=%2212%22>🍞</text></svg>'">
                </div>
                <div class="order-item-info">
                  <span class="order-item-name">${item.product_name}</span>
                  <span class="order-item-qty">x ${item.quantity}</span>
                </div>
                <span class="order-item-price">${formatPrice(item.price * item.quantity)}</span>
              </div>
            `).join('')}
          </div>
        <div class="order-total">
          <span>Total</span>
          <span>${formatPrice(order.total_amount)}</span>
        </div>
        ${order.status !== 'delivered' && order.status !== 'cancelled' ? `
        <div class="order-actions">
          ${order.status !== 'cancelled' ? `
          <button class="btn btn-danger btn-sm" onclick="cancelOrder('${order.order_id}')">
            ✕ Batalkan Pesanan
          </button>
          ` : ''}
          ${currentIdx < steps.length - 1 ? `
          <button class="btn btn-primary btn-sm" onclick="advanceOrder('${order.order_id}', '${steps[currentIdx + 1].key}')">
            ${steps[currentIdx + 1].icon} ${steps[currentIdx + 1].label}
          </button>
          ` : ''}
        </div>
        ` : ''}
      </div>
    </div>
  `;
}

async function advanceOrder(orderId, nextStatus) {
  if (!confirm('Yakin ingin mengubah status pesanan?')) return;

  try {
    const res = await api.updateOrderStatus(orderId, nextStatus);
    if (res.success) {
      App.showToast('Status pesanan berhasil diperbarui!');
      const orderRes = await api.getOrder(orderId);
      if (orderRes.success) renderTrackResult(orderRes.data);
    } else {
      App.showToast('Gagal memperbarui status: ' + (res.message || 'Unknown error'));
    }
  } catch (error) {
    App.showToast('Error: ' + error.message);
  }
}

async function cancelOrder(orderId) {
  if (!confirm('Yakin ingin membatalkan pesanan ini? Stok akan dikembalikan.')) return;

  try {
    const res = await api.updateOrderStatus(orderId, 'cancelled');
    if (res.success) {
      App.showToast('Pesanan berhasil dibatalkan!');
      const orderRes = await api.getOrder(orderId);
      if (orderRes.success) renderTrackResult(orderRes.data);
    } else {
      App.showToast('Gagal membatalkan pesanan: ' + (res.message || 'Unknown error'));
    }
  } catch (error) {
    App.showToast('Error: ' + error.message);
  }
}

window.addEventListener('beforeunload', stopPolling);
</script>
@endsection