{% include 'header.twig' %}

<div class="top-padding"></div>

<!-- Centered Info Box -->
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8 col-12">
      <div style="
            background-color: #f3f4f6; 
            border-radius: 12px; 
            padding: 20px; 
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
            text-align: center;
            margin-bottom: 30px;
            font-size: 16px;
            font-weight: 600;
            color: #111827;">
        Refund details are available for the past 90 days.
      </div>
    </div>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">

      <!-- Page Header -->
      <div class="row">
        <div class="col-md-12">
          <div class="page-header-lgin">
            <div class="contpghdr">
              <span class="bdghdr threedblue">Boost Bayan PH</span>
              <h2>REFUNDS <span>OVERVIEW</span></h2>
              <p>Check your refund status anytime with our simple and user-friendly UI.</p>
            </div>
            <img src="https://cdn.mypanel.link/edeed4/8j3kx1dr8qo726yp.png" alt="Refunds" class="img-fluid">
          </div>
        </div>
      </div>

      <!-- Refunds Table -->
      <div class="col-12 mt-4">
        <div class="table-responsive">
          <table class="table table-hover table-striped">
            <thead class="thead-light">
              <tr>
                <th>Refund ID</th>
                <th>Date</th>
                <th>Order ID</th>
                <th>Refunded Amount</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody>
              {% if refunds is not empty %}
                {% for refund in refunds %}
                <tr>
                  <td>
                    <span id="refund-{{ refund.order_id }}">{{ refund.order_id }}</span>
                    <a>
                      <span
                        data-clip="true"
                        title="Refund ID copied"
                        data-clipboard-action="copy"
                        data-clipboard-target="#refund-{{ refund.order_id }}"
                        class="fas fa-clone"></span>
                    </a>
                  </td>
                  <td>{{ refund.date }}</td>
                  <td>
                    <a href="orders?search={{ refund.order_id }}">{{ refund.order_id }}</a>
                  </td>
                  <td>+{{ refund.refund_amount|number_format(6, '.', ',') }}</td>
                  <td>
                    {% if refund.order_status == 'partial' %}
                      <span class="btn btn-info btn-sm">Partial</span>
                    {% elseif refund.order_status == 'canceled' %}
                      <span class="btn btn-danger btn-sm">Canceled</span>
                    {% elseif refund.order_status == 'completed' %}
                      <span class="btn btn-success btn-sm">Completed</span>
                    {% else %}
                      <span class="btn btn-secondary btn-sm">{{ refund.order_status|capitalize }}</span>
                    {% endif %}
                  </td>
                </tr>
                {% endfor %}
              {% else %}
                <tr>
                  <td colspan="5" class="text-center text-muted">No refunds found</td>
                </tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      </div>

    </div>
  </div>
</div>

<!-- Clipboard.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script>
var clipboard = new ClipboardJS('[data-clipboard-action="copy"]');
clipboard.on('success', function(e) {
  alert(e.trigger.getAttribute('title'));
  e.clearSelection();
});
</script>

{% include 'footer.twig' %}