@extends('layouts.app')

@section('content')
<section class="section">
  <div class="container">
    <h1 class="page-title">Checkout</h1>
    <div class="checkout-layout">
      <form id="checkout-form" class="checkout-form">
        <div class="form-section">
          <h2>Informasi Pelanggan</h2>
          <div class="form-group">
            <label for="name">Nama Lengkap *</label>
            <input type="text" id="name" required placeholder="Masukkan nama lengkap">
          </div>
          <div class="form-group">
            <label for="email">Email *</label>
            <input type="email" id="email" required placeholder="Masukkan email">
          </div>
          <div class="form-group">
            <label for="phone">Nomor Telepon *</label>
            <input type="tel" id="phone" required placeholder="Contoh: 08123456789">
          </div>
          <div class="form-group">
            <label for="notes">Catatan (Opsional)</label>
            <textarea id="notes" rows="3" placeholder="Catatan untuk pesanan Anda..."></textarea>
          </div>
        </div>

        <div class="form-section">
          <h2>Metode Pembayaran *</h2>
          <div class="payment-options">
            <label class="payment-option">
              <input type="radio" name="paymentMethod" value="cash" checked>
              <div class="payment-card">
                <div class="payment-icon">💵</div>
                <div class="payment-info">
                  <h3>Cash / Tunai</h3>
                  <p>Bayar langsung saat pesanan diambil</p>
                </div>
              </div>
            </label>
            <label class="payment-option">
              <input type="radio" name="paymentMethod" value="transfer">
              <div class="payment-card">
                <div class="payment-icon">🏦</div>
                <div class="payment-info">
                  <h3>Transfer Bank</h3>
                  <p>Transfer ke rekening bank kami</p>
                </div>
              </div>
            </label>
          </div>
          <div id="bank-info" class="bank-info" style="display: none;">
            <h4>Rekening Tujuan:</h4>
            <p><strong>BCA:</strong> 1234567890 a.n. Toko Kue</p>
            <p><strong>Mandiri:</strong> 0987654321 a.n. Toko Kue</p>
            <p><strong>BRI:</strong> 1122334455 a.n. Toko Kue</p>
            <p class="note">Silakan transfer sesuai total pesanan. Konfirmasi akan dikirim melalui email.</p>
          </div>
        </div>

        <div class="form-section">
          <h2>Ringkasan Pesanan</h2>
          <div class="order-items" id="order-items">
          </div>
          <div class="order-total">
            <span>Total</span>
            <span id="order-total">-</span>
          </div>
        </div>

        <button type="submit" class="btn btn-primary btn-block btn-lg" id="submit-btn">
          Buat Pesanan
        </button>
      </form>
    </div>
  </div>
</section>

<style>
.payment-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.payment-option {
  cursor: pointer;
}

.payment-option input[type="radio"] {
  display: none;
}

.payment-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  transition: var(--transition);
}

.payment-option input[type="radio"]:checked + .payment-card {
  border-color: var(--primary);
  background: var(--primary-light);
}

.payment-icon {
  font-size: 2rem;
}

.payment-info h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.payment-info p {
  font-size: 0.85rem;
  color: var(--text-light);
}

.bank-info {
  margin-top: 16px;
  padding: 16px;
  background: #f0f9ff;
  border-radius: var(--radius-sm);
  border: 1px solid #bae6fd;
}

.bank-info h4 {
  font-size: 0.95rem;
  margin-bottom: 8px;
  color: var(--text);
}

.bank-info p {
  font-size: 0.9rem;
  margin-bottom: 4px;
  color: var(--text-light);
}

.bank-info .note {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--warning);
  font-style: italic;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const items = Cart.getItems();

  if (items.length === 0) {
    window.location.href = '/cart';
    return;
  }

  const total = Cart.getTotal();

  document.getElementById('order-items').innerHTML = items.map(item => `
    <div class="order-item">
      <span>${item.name} x ${item.quantity}</span>
      <span>${formatPrice(item.price * item.quantity)}</span>
    </div>
  `).join('');

  document.getElementById('order-total').textContent = formatPrice(total);

  // Show/hide bank info based on payment method
  const paymentMethods = document.querySelectorAll('input[name="paymentMethod"]');
  paymentMethods.forEach(method => {
    method.addEventListener('change', function() {
      const bankInfo = document.getElementById('bank-info');
      if (this.value === 'transfer') {
        bankInfo.style.display = 'block';
      } else {
        bankInfo.style.display = 'none';
      }
    });
  });

  document.getElementById('checkout-form').addEventListener('submit', async function(e) {
    e.preventDefault();
    await submitOrder();
  });
});

async function submitOrder() {
  const btn = document.getElementById('submit-btn');
  btn.disabled = true;
  btn.textContent = 'Memproses...';

  try {
    const items = Cart.getItems();
    const paymentMethod = document.querySelector('input[name="paymentMethod"]:checked').value;

    const orderData = {
      customerName: document.getElementById('name').value,
      customerEmail: document.getElementById('email').value,
      customerPhone: document.getElementById('phone').value,
      notes: document.getElementById('notes').value,
      paymentMethod: paymentMethod,
      items: items.map(i => ({ productId: String(i.id), quantity: i.quantity })),
    };

    const res = await api.createOrder(orderData);

    if (res.success) {
      Cart.clear();
      window.location.href = '/order/' + res.data.order_id;
    } else {
      alert('Gagal membuat pesanan: ' + res.message);
      btn.disabled = false;
      btn.textContent = 'Buat Pesanan';
    }
  } catch (error) {
    alert('Error: ' + error.message);
    btn.disabled = false;
    btn.textContent = 'Buat Pesanan';
  }
}
</script>
@endsection