<?php
require 'config.php';
require_login();

$user_id = $_SESSION['user_id'];

// Get orders with subcategory info
$stmt = $pdo->prepare("
SELECT o.*, s.name AS service_name, sc.name AS subcat_name 
FROM orders o
LEFT JOIN services s ON s.id = o.service_id
LEFT JOIN subcategories sc ON sc.id = o.subcategory_id
WHERE o.user_id = ?
ORDER BY o.id DESC
");
$stmt->execute([$user_id]);
$orders = $stmt->fetchAll(PDO::FETCH_ASSOC);

require_once 'header.php';
?>

<style>
:root {
  --primary-color: #230133; /* আপনার দেওয়া নতুন কালার */
  --accent-gold: #ffd700;
  --bg-light: #f4f0f7;
  --text-dark: #230133;
}

body {
  background: var(--bg-light);
  font-family: 'Hind Siliguri', sans-serif;
}

/* Page Title Style */
.page-title {
  color: var(--primary-color);
  font-weight: 700;
  border-bottom: 3px solid var(--primary-color);
  display: inline-block;
  padding-bottom: 5px;
  margin-bottom: 25px;
}

/* Modern Card Style */
.order-card {
  border: none;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(35, 1, 51, 0.1);
  transition: all 0.3s ease;
  border-top: 5px solid var(--primary-color); 
  height: 100%;
}

.order-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(35, 1, 51, 0.2);
}

/* Status Badges */
.status-badge {
  font-size: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
}

.badge-pending {
  background: #fff3cd;
  color: #856404;
}

.badge-received {
  background: #e9dcfc;
  color: var(--primary-color);
}

.badge-completed {
  background: #d1fae5;
  color: #065f46;
}

.badge-cancelled {
  background: #fee2e2;
  color: #991b1b;
}

/* Delivery Section */
.delivery-box {
  background: #fdfaff;
  border: 1px dashed var(--primary-color);
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
}

.delivery-text {
  font-size: 0.9rem;
  color: #333;
  word-break: break-all;
  font-family: monospace;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
}

/* Buttons */
.btn-copy {
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-weight: 600;
  width: 100%;
  transition: 0.3s;
}

.btn-copy:hover {
  background: #3b0354;
  color: #fff;
  box-shadow: 0 4px 10px rgba(35, 1, 51, 0.3);
}

.btn-download {
  background: #dc3545;
  color: #fff;
  border-radius: 8px;
  padding: 10px;
  font-weight: 600;
  width: 100%;
  display: block;
  text-align: center;
  text-decoration: none;
}

.btn-download:hover {
  background: #a71d2a;
  color: #fff;
}

.order-info p {
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: #444;
}

.order-info strong {
  color: var(--primary-color);
}

.id-badge {
  background: var(--primary-color);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.85rem;
}

@media (max-width: 768px) {
  .page-title { font-size: 1.4rem; }
}
</style>

<div class="container my-5">
  <div class="d-flex align-items-center mb-4">
    <div class="p-2 rounded-circle me-3" style="background: var(--primary-color);">
        <i class="bi bi-clock-history text-white fs-4"></i>
    </div>
    <h3 class="page-title m-0">আপনার অর্ডার ইতিহাস</h3>
  </div>

  <?php if (empty($orders)): ?>
    <div class="text-center p-5 bg-white rounded-4 shadow-sm border-0">
      <i class="bi bi-cart-x fs-1" style="color: var(--primary-color);"></i>
      <h5 class="mt-3 fw-bold">আপনি এখনো কোনো অর্ডার করেননি।</h5>
      <p class="text-muted">আমাদের সার্ভিসগুলো দেখতে নিচের বাটনে ক্লিক করুন।</p>
      <a href="index.php" class="btn btn-lg text-white mt-3 px-5" style="background: var(--primary-color); border-radius: 30px;">অর্ডার করতে এখানে যান</a>
    </div>
  <?php else: ?>
    <div class="row g-4">
      <?php foreach ($orders as $o): ?>
        <?php 
          $s = strtolower($o['status']);
          $status_class = 'badge-pending';
          $status_text = 'অপেক্ষমান';

          if($s == 'completed'){
            $status_class = 'badge-completed'; $status_text = 'সম্পন্ন';
          } elseif($s == 'cancelled'){
            $status_class = 'badge-cancelled'; $status_text = 'বাতিল';
          } elseif($s == 'received'){
            $status_class = 'badge-received'; $status_text = 'গৃহীত';
          }
        ?>
        <div class="col-12 col-md-6 col-lg-4">
          <div class="order-card p-4 d-flex flex-column justify-content-between">
            <div>
              <div class="d-flex justify-content-between align-items-start mb-3">
                <span class="id-badge">ID: #<?php echo $o['id']; ?></span>
                <span class="status-badge <?php echo $status_class; ?>">
                   <i class="bi bi-patch-check-fill me-1"></i> <?php echo $status_text; ?>
                </span>
              </div>
              
              <div class="order-info">
                <p><strong><i class="bi bi-grid-fill me-2"></i>ক্যাটাগরি:</strong> <span><?php echo h($o['subcat_name'] ?? 'N/A'); ?></span></p>
                <p><strong><i class="bi bi-gear-wide-connected me-2"></i>সার্ভিস:</strong> <?php echo h($o['service_name'] ?? ''); ?></p>
                <p><strong><i class="bi bi-currency-bangladeshi me-2"></i>মূল্য:</strong> ৳<?php echo number_format($o['price'], 2); ?></p>
                <p class="text-truncate"><strong><i class="bi bi-info-circle me-2"></i>তথ্য:</strong> <?php echo h($o['id_number']); ?></p>
              </div>
            </div>

            <?php if ($s == 'completed'): ?>
              <div class="delivery-box">
                <p class="fw-bold mb-2 text-dark" style="font-size: 0.85rem;"><i class="bi bi-send-check text-success"></i> ডেলিভারি তথ্য:</p>
                
                <?php if ($o['delivery_type'] == 'text' && !empty($o['delivery_text'])): ?>
                  <div class="delivery-text" id="delivery-<?php echo $o['id']; ?>"><?php echo h($o['delivery_text']); ?></div>
                  <button class="btn-copy" onclick="copyDelivery(<?php echo $o['id']; ?>, this)">
                    <i class="bi bi-clipboard"></i> কপি করুন
                  </button>
                <?php elseif ($o['delivery_type'] == 'file' && !empty($o['delivery_file'])): ?>
                  <a href="uploads/<?php echo h($o['delivery_file']); ?>" class="btn-download" download>
                    <i class="bi bi-cloud-arrow-down"></i> ডাউনলোড করুন
                  </a>
                <?php else: ?>
                  <p class="text-muted small mb-0">অটোমেটিক ডেলিভারি হচ্ছে...</p>
                <?php endif; ?>
              </div>
            <?php elseif ($s == 'pending' || $s == 'received'): ?>
              <div class="mt-3 py-3 text-center border-top">
                 <div class="spinner-border spinner-border-sm" role="status" style="color: var(--primary-color);"></div>
                 <small class="text-muted d-block mt-2">আপনার অর্ডারটি প্রসেসিং হচ্ছে...</small>
              </div>
            <?php endif; ?>
          </div>
        </div>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>
</div>

<script>
function copyDelivery(id, btn){
  const el = document.getElementById("delivery-"+id);
  if(!el) return;
  const text = el.innerText;
  
  navigator.clipboard.writeText(text).then(() => {
    const originalHTML = btn.innerHTML;
    
    btn.innerHTML = "<i class='bi bi-check2-all'></i> কপি হয়েছে!";
    btn.style.background = "#28a745"; 
    el.style.background = "#d1fae5"; 

    setTimeout(() => {
      btn.innerHTML = originalHTML;
      btn.style.background = "var(--primary-color)";
      el.style.background = "#fff";
    }, 2500);
  }).catch(err => {
    console.error('Copy failed', err);
  });
}
</script>

<?php require_once 'footer.php'; ?>