<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?php echo esc($shop->name) ?> | Shop</title>
  <?= $this->include("admin/layout/partials/styles") ?>
  <style>
    .olx-header {
      background: #002f34;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .olx-brand {
      color: #fff !important;
      font-weight: 700;
      letter-spacing: .3px;
    }
    .olx-header .nav-link {
      color: rgba(255,255,255,.9) !important;
    }
    .location-pill {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 999px;
      padding: 6px 12px;
      height: 44px;
      position: relative;
      flex: 0 0 auto;
      width: auto;
    }
    .location-pill-input {
      border: 0;
      outline: none;
      width: 140px;
      background: transparent;
    }
    .search-pill {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 999px;
      padding: 6px 12px;
      height: 44px;
    }
    .search-pill-input {
      border: 0;
      outline: none;
      width: 100%;
      background: transparent;
    }
    .search-pill-btn {
      height: 44px;
      width: 44px;
      border-radius: 999px;
      border: 0;
      background: #0b74ff;
      color: #fff;
    }
    .search-pill { position: relative; }
    .search-dyn-placeholder {
      position: absolute;
      left: 12px;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: #6c757d;
      pointer-events: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      opacity: .7;
      transition: transform .25s ease, opacity .25s ease;
    }
    .ui-autocomplete {
      z-index: 2000;
      max-height: 280px;
      overflow-y: auto;
      overflow-x: hidden;
      border-radius: 10px;
      border: 1px solid #e9ecef;
      box-shadow: 0 10px 30px rgba(0,0,0,.12);
      background: #fff;
      list-style: none;
      margin: 0;
      padding: 6px 0;
    }
    .ui-autocomplete .ui-menu-item { list-style: none; }
    .ui-menu-item-wrapper {
      padding: 10px 12px;
      font-size: 14px;
    }
    .ui-state-active, .ui-widget-content .ui-state-active {
      background: rgba(0,47,52,.08);
      border: 0;
      color: #002f34;
      margin: 0;
    }
    .city-suggest-dropdown {
      position: absolute;
      top: 48px;
      left: 0;
      width: 100%;
      max-width: 90vw;
      background: #fff;
      border: 1px solid #e9ecef;
      border-radius: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,.12);
      z-index: 2001;
      overflow: hidden;
    }
    .city-suggest-item {
      display: flex;
      align-items: center;
      padding: 10px 12px;
      cursor: pointer;
    }
    .city-suggest-item:hover { background: rgba(0,47,52,.06); }
    .city-suggest-item .icon {
      width: 22px;
      height: 22px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      color: #0b74ff;
    }
    .city-suggest-item .text { color: #002f34; }
    .city-suggest-sub { font-size: 12px; color: #6c757d; }
    .city-suggest-header {
      padding: 8px 12px;
      font-size: 12px;
      color: #6c757d;
      border-top: 1px solid #e9ecef;
    }
    .offer-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 12px;
    }
    .offer-card {
      position: relative;
      background: linear-gradient(135deg, #ff6b6b, #f06595);
      color: #fff;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 8px 20px rgba(0,0,0,.12);
      overflow: hidden;
    }
    .offer-card .offer-icon {
      position: absolute;
      top: 12px;
      left: 12px;
      font-size: 16px;
      opacity: .95;
    }
    .offer-card .offer-action {
      position: absolute;
      top: 12px;
      right: 12px;
      background: #fff;
      color: #d6336c;
      border-radius: 999px;
      padding: 6px 12px;
      font-weight: 600;
      text-decoration: none;
      box-shadow: 0 4px 12px rgba(0,0,0,.12);
    }
    .offer-card .offer-label {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: .3px;
      margin-top: 18px;
    }
    .offer-card .offer-sub {
      font-size: 13px;
      margin-top: 6px;
      opacity: .95;
    }
  </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-1"><?php echo esc($shop->name) ?></h1>
        <div class="text-muted mb-3">
          <?php echo esc($shop->category_name ?? 'Shop') ?>
          <?php if (!empty($shop->city_name)): ?> • <?php echo esc($shop->city_name) ?><?php endif ?>
        </div>

        <div class="card">
          <div class="card-body">
            <h2 class="h6 mb-3">Active Offers</h2>
            <?php if (!empty($discounts)): ?>
              <div class="offer-cards">
                <?php foreach ($discounts as $d): ?>
                  <?php
                    $dtype = (string) ($d->discount_type ?? 'PERCENT');
                    $val = (float) ($d->value ?? 0);
                    $label = $dtype === 'PERCENT' ? (rtrim(rtrim(number_format($val, 2), '0'), '.') . '% off') : ('₹' . number_format($val, 2) . ' off');
                    $scopeLabel = (string) ($d->scope_label ?? '');
                    if ($scopeLabel === '') {
                      $scope = (string) ($d->applies_to ?? 'ALL');
                      $scopeLabel = $scope === 'ALL' ? 'All items/services' : $scope;
                    }
                    $validLabel = '';
                    if (!empty($d->end_at)) {
                      $validLabel = 'valid until ' . date('M j, Y', strtotime($d->end_at));
                    } elseif (!empty($d->start_at)) {
                      $validLabel = 'starts ' . date('M j, Y', strtotime($d->start_at));
                    }
                  ?>
                  <div class="offer-card">
                    <span class="offer-icon"><i class="fas fa-tag"></i></span>
                    <?php
                      $billUrl = url('shop/' . (int) $shop->id . '/bill?discount=' . (int) $d->id);
                    ?>
                    <a class="offer-action" href="<?php echo $billUrl ?>">Use</a>
                    <div class="offer-label"><?php echo esc($label) ?></div>
                    <div class="offer-sub">
                      <?php echo esc($scopeLabel) ?><?php if ($validLabel !== ''): ?>, <?php echo esc($validLabel) ?><?php endif ?>
                    </div>
                  </div>
                <?php endforeach ?>
              </div>
            <?php else: ?>
              <div class="text-muted">No active offers at the moment.</div>
            <?php endif ?>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>
<?= $this->include('frontend/partials/rm_bottom_nav') ?>
<?= $this->include("admin/layout/partials/scripts") ?>
<?= '' ?>
</body>
</html>
