<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="mk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SynergyMed – Набавка</title>
  <th:block th:replace="~{fragments/header :: headerStyles}"></th:block>
  <style>
    /* Page-level override for the fragment header */
    .site-header{
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      z-index: 1000;
      border-radius: 0;
      background: #ffffff;
      box-shadow: 0 2px 10px rgba(0,0,0,.10);
    }

    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background:linear-gradient(135deg,#a4ecba 0%, #f7f7f8 100%);
      min-height:100vh;
      color:#1f2937;
    }

    /* Header & Nav-bar */
    .header { background:white; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1); margin-bottom:30px; overflow:hidden; }
    .header-content { background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white; padding:30px; text-align:center; }
    .header-content h1 { font-size:2.5rem; font-weight:300; margin-bottom:10px; }
    .header-content p { font-size:1.1rem; opacity:.9; }

    .nav-bar { background:white; border-radius:15px; box-shadow:0 5px 15px rgba(0,0,0,.1); margin-bottom:30px; padding:20px 30px; }
    .nav-links { display:flex; gap:20px; align-items:center; }
    .nav-link { color:#20b2aa; text-decoration:none; padding:10px 20px; border-radius:25px; transition:all .3s ease; font-weight:500; }
    .nav-link:hover, .nav-link.active { background:linear-gradient(135deg,#20b2aa,#48d1cc); color:white; }
    .back-btn { margin-left:auto; background:linear-gradient(135deg,#6c757d,#495057); color:white; }

    .container { max-width:1200px; margin:0 auto; padding:20px; }
    .card { background:#fff; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.1); overflow:hidden; margin-bottom:30px; }
    .card-header { background:linear-gradient(135deg,#20b2aa,#48d1cc); color:#fff; padding:22px 28px; font-size:1.25rem; font-weight:600; }
    .card-body { padding:26px; }

    .muted { color:#6b7280; }
    table { width:100%; border-collapse:collapse; margin-top:12px; }
    th, td { padding:12px 10px; border-bottom:1px solid #eef2f7; text-align:left; }

    .actions { display:flex; gap:10px; margin-top:16px; }
    .btn { padding:10px 16px; border-radius:12px; border:2px solid #20b2aa; background:#fff; color:#20b2aa; text-decoration:none; font-weight:600; cursor:pointer; transition:.2s; }
    .btn:hover { box-shadow:0 6px 14px rgba(32,178,170,.18); }
    .btn-primary { background:linear-gradient(135deg,#20b2aa,#48d1cc); color:#fff; border:none; }
  </style>
</head>
<body>
<th:block th:replace="~{fragments/header :: siteHeader(${null})}"></th:block>

<div class="container">
  <!-- Header -->
  <div class="header">
    <div class="header-content">
      <h1>Набавка #<span th:text="${order.id}">1</span></h1>
      <p>Детали за нарачката</p>
    </div>
  </div>

  <!-- Navigation -->
  <div class="nav-bar">
    <div class="nav-links">
      <a th:href="@{/pharmacist/health-profile/create}" class="nav-link">Здравствени профили</a>
      <a th:href="@{/pharmacist/verification}" class="nav-link">Верификација на профили</a>
      <a th:href="@{/pharmacist/supply-orders}" class="nav-link active">Нарачка на роба</a>
      <a th:href="@{/pharmacist/medicine/interactions}" class="nav-link">Интеракции на лекови</a>
      <a th:href="@{/profile}" class="nav-link back-btn">Назад кон профилот</a>
    </div>
  </div>

  <!-- Supply Order Details Card -->
  <div class="card">
    <div class="card-header">Набавка #<span th:text="${order.id}">1</span></div>
    <div class="card-body">
      <div class="muted">
        Аптека: <strong th:text="${order.pharmacy.company.companyName}">Аптека</strong> •
        Објект: <strong th:text="${order.facility.facilityName}">Објект</strong> •
        Дистрибутер: <strong th:text="${order.distributor.company.companyName}">Дистрибутер</strong>
      </div>
      <div class="muted" style="margin-top:6px;">
        Датум: <strong th:text="${order.orderDate}">2025-09-03</strong> •
        Очекувана испорака: <strong th:text="${order.expectedArrivalDate}">2025-09-10</strong> •
        Статус: <strong th:text="${order.status}">во тек</strong>
      </div>

      <table>
        <thead>
        <tr>
          <th>Брендиран лек</th>
          <th>Форма/јачина</th>
          <th style="width:120px;">Количина</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="ln : ${lines}">
          <td th:text="${ln.brandedMedicine.name}">Лек</td>
          <td>
            <span th:text="${ln.brandedMedicine.dosageForm}">табл.</span>
            <span class="muted" th:if="${ln.brandedMedicine.strength != null}" th:text="' • ' + ${ln.brandedMedicine.strength}"> • 500mg</span>
          </td>
          <td th:text="${ln.quantity}">1</td>
        </tr>
        <tr th:if="${#lists.isEmpty(lines)}">
          <td colspan="3" class="muted">Нема ставки.</td>
        </tr>
        </tbody>
      </table>

      <div class="actions">
        <a class="btn" th:href="@{/pharmacist/supply-orders}">Сите набавки</a>
        <a class="btn" th:href="@{/pharmacist/supply-orders/new}">Нова набавка</a>
      </div>
    </div>
  </div>
</div>

<th:block th:replace="~{fragments/header :: headerScripts}"></th:block>
</body>
</html>
