<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Paid Bills</title>
  <?= $this->include("admin/layout/partials/styles") ?>
  <style>
    .content-card { background: #fff; border: 1px solid #e9ecef; border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.06); }
    .side-card { border: 1px solid #e9ecef; border-radius: 10px; background: #fff; overflow: hidden; }
    .side-head { padding: 12px 14px; font-weight: 700; border-bottom: 1px solid #e9ecef; }
    .side-menu .item { display: block; padding: 12px 14px; border-bottom: 1px solid #f1f3f5; color: #002f34; text-decoration: none; }
    .side-menu .item:hover { background: rgba(0,47,52,.06); }
    .side-menu .item.active { background: #007bff; color: #fff; }
    .order-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
    .order-card { position: relative; border-radius: 14px; background: linear-gradient(135deg, #5b86e5, #36d1dc); color: #fff; padding: 16px; box-shadow: 0 10px 24px rgba(0,0,0,.12); overflow: hidden; }
    .order-card .badge { position: absolute; top: 12px; right: 12px; background: rgba(255,255,255,.15); color: #fff; border-radius: 999px; padding: 4px 10px; font-weight: 700; font-size: 12px; }
    .order-card .icon { position: absolute; left: -10px; top: -10px; font-size: 80px; color: rgba(255,255,255,.12); }
    .order-card .title { font-size: 18px; font-weight: 800; letter-spacing: .3px; margin: 4px 0 6px; }
    .order-card .sub { font-size: 13px; opacity: .95; margin-bottom: 12px; }
    .order-card .total { font-size: 16px; font-weight: 800; background: rgba(255,255,255,.18); display: inline-block; padding: 6px 10px; border-radius: 8px; }
    .order-card .actions { margin-top: 14px; }
    .order-card .btn-view { background: #fff; color: #5b86e5; border: 0; padding: 8px 12px; border-radius: 999px; font-weight: 700; text-decoration: none; display: inline-block; box-shadow: 0 6px 16px rgba(255,255,255,.25); }
    .order-empty { border: 1px solid #e9ecef; background: #fff; border-radius: 10px; padding: 18px; color: #6c757d; text-align: center; }
  </style>
</head>
<body class="hold-transition layout-top-nav">
<div class="wrapper">
  <?= $this->include('frontend/partials/top_navbar') ?>
  <div class="content-wrapper rm-mobile-pad">
    <section class="content">
      <div class="container py-3">
        <h1 class="h4 mb-3">My Paid Bills</h1>
        <div class="row">
          <div class="col-md-3 mb-3">
            <?= $this->include('frontend/user/partials/side_menu') ?>
          </div>
          <div class="col-md-9">
            <div class="order-cards">
              <?php if (!empty($orders)): ?>
                <?php foreach ($orders as $o): ?>
                  <div class="order-card">
                    <span class="icon"><i class="fas fa-receipt"></i></span>
                    <div class="badge">#<?php echo (int) $o->id ?></div>
                    <div class="title"><?php echo esc($o->shop_name) ?></div>
                    <div class="sub"><?php echo !empty($o->created_at) ? date('d M, Y h:i a', strtotime($o->created_at)) : '' ?></div>
                    <div class="total">Total: ₹<?php echo number_format((float) $o->total, 2) ?></div>
                    <div class="actions">
                      <a class="btn-view" href="<?php echo url('user/orders/receipt/' . (int) $o->id) ?>">View</a>
                    </div>
                  </div>
                <?php endforeach ?>
              <?php else: ?>
                <div class="order-empty">No paid bills found.</div>
              <?php endif ?>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
<?= $this->include('frontend/partials/rm_bottom_nav') ?>
<?= $this->include("admin/layout/partials/scripts") ?>
</body>
</html>
