{% extends "pos/base.html" %}
{% block title %}Workshop Reports{% endblock %}
{% block stylesheets %}
<style>
:root{--c-bg:#f2f2f7;--c-card:#fff;--c-border:#d1d1d6;--c-accent:#007aff;
  --c-text:#1c1c1e;--c-sub:#6e6e73;--r-card:14px;--shadow:0 2px 14px rgba(0,0,0,.08);}
body{background:var(--c-bg)!important;}
.sf-page-hd{background:linear-gradient(135deg,#eef4ff,#e0eaff);border-radius:var(--r-card);
  padding:1rem 1.5rem;margin-bottom:1.2rem;box-shadow:var(--shadow);border:1px solid #c5d8ff;}
.rpt-card{background:var(--c-card);border-radius:var(--r-card);box-shadow:var(--shadow);
  padding:1.1rem 1.2rem;cursor:pointer;transition:all .2s;border-left:4px solid transparent;
  height:100%;text-decoration:none;display:block;color:var(--c-text);}
.rpt-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.13);transform:translateY(-3px);color:var(--c-text);}
.rpt-card .icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:1.2rem;color:#fff;margin-bottom:.75rem;flex-shrink:0;}
.rpt-card .title{font-weight:700;font-size:.92rem;margin-bottom:3px;}
.rpt-card .desc{font-size:.76rem;color:var(--c-sub);line-height:1.4;}

.inv-card{background:linear-gradient(135deg,#1a1a2e,#0f3460);border-radius:var(--r-card);
  padding:1.2rem 1.5rem;color:#fff;box-shadow:0 4px 20px rgba(0,0,0,.3);
  display:block;text-decoration:none;transition:all .2s;}
.inv-card:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.35);color:#fff;}

.section-label{font-size:.72rem;font-weight:700;color:var(--c-sub);letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:.7rem;margin-top:.5rem;}
</style>
{% endblock %}
{% block content %}
<div class="container-fluid px-4 py-3">
  <div class="sf-page-hd d-flex justify-content-between align-items-center">
    <div>
      <h4 class="mb-0 fw-bold" style="color:#1a1a2e;">
        <i class="bi bi-bar-chart-line me-2" style="color:var(--c-accent);"></i>
        Workshop Reports
      </h4>
      <small class="text-muted">All reports with PDF &amp; Excel export</small>
    </div>
    <a href="{% url 'workshop:workshop_reports:invoice_prints' %}" class="inv-card px-3 py-2" style="border-radius:10px;font-size:.88rem;font-weight:700;">
      <i class="bi bi-printer me-2"></i>Invoice Reprints
    </a>
  </div>

  <div class="section-label">Available Reports</div>
  <div class="row g-3">
    {% for r in reports %}
    <div class="col-6 col-md-4 col-lg-3">
      <a href="{% url 'workshop:workshop_reports:'|add:r.slug %}?date_from={{ today }}&date_to={{ today }}"
         class="rpt-card" style="border-left-color:{{ r.color }};">
        <div class="d-flex align-items-center gap-3">
          <div class="icon" style="background:{{ r.color }};">
            <i class="bi {{ r.icon }}"></i>
          </div>
          <div>
            <div class="title">{{ r.title }}</div>
            <div class="desc">{{ r.desc }}</div>
          </div>
        </div>
      </a>
    </div>
    {% endfor %}
  </div>
</div>
{% endblock %}