<?php
/* partials/report_header.php
   Include at top of every report view.
   Screen: dark #0f172a hero (matches all pages)
   Print:  clean A4 professional layout (matching screenshot)
*/
$shopName    = setting('shop_name',    'MJPOS System');
$shopAddress = setting('shop_address', '');
$shopPhone   = setting('shop_phone',   '');
$shopEmail   = setting('shop_email',   '');
$currency    = setting('currency_symbol', 'Rs.');
$genBy       = Auth::name();
$genAt       = date('d M Y, H:i');
$period      = (isset($from, $to) && $from && $to)
    ? fDate($from, 'd M Y') . ' – ' . fDate($to, 'd M Y') : '';
?>
<style>
/* ══════════════════════════════════════════════
   SCREEN STYLES
   ══════════════════════════════════════════════ */
.rpt-hero{
  background:#0f172a;border-radius:14px;padding:20px 26px;color:#fff;
  margin-bottom:18px;border:1px solid #1e293b;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
}
.rpt-hero h4{font-size:1.25rem;font-weight:800;margin:0;
  display:flex;align-items:center;gap:10px}
.rpt-hero .sub{font-size:.78rem;color:#94a3b8;margin-top:5px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rpt-hero .sub .sep{color:#334155}
.rpt-hero .print-btn{border-radius:10px;font-weight:700;font-size:.82rem;
  padding:8px 18px;background:#3b82f6;color:#fff;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;transition:background .15s;white-space:nowrap}
.rpt-hero .print-btn:hover{background:#2563eb}

.rpt-btn-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.print-only{display:none}

/* ══════════════════════════════════════════════
   PRINT / PDF STYLES  — matches screenshot
   ══════════════════════════════════════════════ */
@media print {
  /* ── Page setup ── */
  @page{
    size:A4 portrait;
    margin:12mm 10mm 14mm 10mm;
  }

  /* ── Hide screen chrome ── */
  .no-print,.rpt-hero,.rpt-btn-bar,
  .sidebar,#sidebar,.topbar,nav,header,
  .btn,form.filter-form,.pagination,
  .dropdown-menu,.alert:not(.alert-print),
  .kpi-tile,.date-btn,.hero-btn,.hero-back,
  .prog-bar,.prog-fill,canvas,
  [class*="no-print"]{display:none!important}

  /* ── Reset layout ── */
  .main-content,.content-wrapper,.container-fluid,
  .col-md-9,.col-lg-10,main,#main{
    margin:0!important;padding:0!important;
    width:100%!important;max-width:100%!important;
  }
  html,body{background:#fff!important;font-size:9pt;color:#111;font-family:Arial,sans-serif}

  /* ── Show print elements ── */
  .print-only{display:block!important}
  .print-header-block{display:block!important;margin-bottom:8pt}

  /* ── Cards ── */
  .card{border:1px solid #ccc!important;box-shadow:none!important;
    break-inside:avoid;margin-bottom:7pt!important;border-radius:4px!important}
  .card-header{background:#1e3a8a!important;color:#fff!important;
    border-bottom:1px solid #ccc!important;padding:4pt 8pt!important;
    font-size:8.5pt!important;font-weight:700!important;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .card-body{padding:4pt 6pt!important}

  /* ── Tables ── */
  .table{font-size:8pt!important;border-collapse:collapse!important;width:100%!important}
  .table th,.table td{
    border:0.5pt solid #ddd!important;padding:3.5pt 5pt!important;
    vertical-align:middle!important}
  .table thead th{
    background:#0f2557!important;color:#fff!important;
    font-weight:700!important;font-size:7.5pt!important;
    text-transform:uppercase!important;letter-spacing:.3px!important;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .table tfoot td{
    background:#e8edf5!important;font-weight:700!important;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .table-secondary,.table-dark{
    background:#e8edf5!important;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .table-responsive,.card-body,[style*="overflow"],[style*="max-height"]{
    overflow:visible!important;max-height:none!important;height:auto!important}
  .table{width:100%!important;table-layout:auto!important}

  /* ── Row highlights ── */
  .table-danger.bg-opacity-5{background:#fef2f2!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .table-warning.bg-opacity-5{background:#fffbeb!important;print-color-adjust:exact;-webkit-print-color-adjust:exact}

  /* ── Badges ── */
  .badge{border:1px solid #999!important;padding:1pt 4pt!important;
    font-size:7pt!important;border-radius:3px!important;
    print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .bg-success{background:#166534!important;color:#fff!important}
  .bg-danger {background:#991b1b!important;color:#fff!important}
  .bg-warning{background:#92400e!important;color:#fff!important}
  .bg-primary{background:#1e40af!important;color:#fff!important}
  .bg-secondary{background:#374151!important;color:#fff!important}
  .bg-info{background:#155e75!important;color:#fff!important}

  /* ── Text colours ── */
  .text-success{color:#166534!important}
  .text-danger {color:#991b1b!important}
  .text-primary{color:#1e40af!important}
  .text-warning{color:#92400e!important}
  .text-info   {color:#155e75!important}
  .text-muted  {color:#6b7280!important}
  .fw-bold,.fw-semibold{font-weight:700!important}

  /* ── KPI boxes ── */
  .kpi-row{display:flex!important;gap:5pt!important;margin-bottom:8pt!important}
  .kpi-box{flex:1;border:1pt solid #ccc!important;padding:5pt 7pt!important;
    text-align:center!important;border-radius:3px!important;break-inside:avoid!important}
  .kpi-box .kpi-value{font-size:11pt!important;font-weight:800!important}
  .kpi-box .kpi-label{font-size:7pt!important;color:#6b7280}

  /* ── Grid ── */
  .row{display:flex!important;flex-wrap:wrap!important;gap:0!important}
  .col-6   {width:50%!important;flex:0 0 50%!important}
  .col-md-2{width:16.66%!important;flex:0 0 16.66%!important}
  .col-md-3{width:25%!important;flex:0 0 25%!important}
  .col-md-4{width:33.33%!important;flex:0 0 33.33%!important}
  .col-md-5{width:41.66%!important;flex:0 0 41.66%!important}
  .col-md-6{width:50%!important;flex:0 0 50%!important}
  .col-md-7{width:58.33%!important;flex:0 0 58.33%!important}
  .col-md-8{width:66.66%!important;flex:0 0 66.66%!important}
  .col-12  {width:100%!important;flex:0 0 100%!important}

  /* ── Misc ── */
  a{color:inherit!important;text-decoration:none!important}
  .shadow-sm,.shadow{box-shadow:none!important}
  .d-flex{display:flex!important}
  .gap-2{gap:5pt!important}
  .text-end{text-align:right!important}
  .text-center{text-align:center!important}
  .small,small{font-size:7.5pt!important}

  /* ── Page breaks ── */
  .page-break{page-break-after:always!important;break-after:always!important}
  .no-break{break-inside:avoid!important;page-break-inside:avoid!important}
}

.print-header-block{display:none}
@media print{.print-header-block{display:block!important;margin-bottom:8pt}}
</style>

<!-- ══════════════════════════════════════
     SCREEN HERO (hidden in print)
     ══════════════════════════════════════ -->
<div class="rpt-hero no-print">
  <div>
    <h4>
      <i class="bi bi-file-earmark-bar-graph" style="color:#3b82f6"></i>
      <?= e($pageTitle) ?>
    </h4>
    <div class="sub">
      <i class="bi bi-building" style="font-size:.7rem"></i><?= e($shopName) ?>
      <?php if ($period): ?>
      <span class="sep">·</span>
      <i class="bi bi-calendar3" style="font-size:.7rem"></i><?= $period ?>
      <?php endif; ?>
      <span class="sep">·</span>
      <i class="bi bi-person" style="font-size:.7rem"></i><?= e($genBy) ?>
      <span class="sep">·</span>
      <?= $genAt ?>
    </div>
  </div>
  <button onclick="window.print()" class="print-btn">
    <i class="bi bi-printer"></i>Print / PDF
  </button>
</div>

<!-- ══════════════════════════════════════
     PRINT-ONLY HEADER (matches screenshot)
     ══════════════════════════════════════ -->
<div class="print-header-block">
  <table width="100%" cellpadding="0" cellspacing="0"
         style="padding-bottom:6pt;margin-bottom:4pt">
    <tr>
      <td style="width:55%;vertical-align:top">
        <div style="font-size:15pt;font-weight:900;color:#0f2557;line-height:1.1">
          <?= e($shopName) ?>
        </div>
        <?php if ($shopAddress): ?>
        <div style="font-size:8pt;color:#475569;margin-top:2pt"><?= e($shopAddress) ?></div>
        <?php endif; ?>
        <?php if ($shopPhone || $shopEmail): ?>
        <div style="font-size:8pt;color:#475569;margin-top:1pt">
          <?php if($shopPhone): ?>Tel: <?= e($shopPhone) ?><?php endif; ?>
          <?php if($shopPhone && $shopEmail): ?> &nbsp;|&nbsp; <?php endif; ?>
          <?php if($shopEmail): ?><?= e($shopEmail) ?><?php endif; ?>
        </div>
        <?php endif; ?>
      </td>
      <td style="width:45%;text-align:right;vertical-align:top">
        <div style="font-size:14pt;font-weight:900;color:#0f2557;text-transform:uppercase;letter-spacing:.02em">
          <?= e($pageTitle) ?>
          <?php if($period): ?>
          <span style="font-size:9pt;font-weight:700"> &mdash; <?= $period ?></span>
          <?php endif; ?>
        </div>
        <div style="font-size:7.5pt;color:#64748b;margin-top:3pt">
          Generated by: <strong><?= e($genBy) ?></strong>
          &nbsp;&nbsp;|&nbsp;&nbsp;
          Date: <?= $genAt ?>
        </div>
      </td>
    </tr>
  </table>
  <!-- Colour bar — blue gradient matching screenshot -->
  <div style="height:3pt;background:linear-gradient(90deg,#0f2557 0%,#1d4ed8 50%,#60a5fa 100%);
              margin-bottom:8pt;print-color-adjust:exact;-webkit-print-color-adjust:exact"></div>
</div>