<!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>

    <!-- Fragment styles -->
    <th:block th:replace="~{fragments/header :: headerStyles}"></th:block>

    <!-- Page styles (override header after fragment import) -->
    <style>
        /* Force the fragment header to be flat (no rounding) and stick to the very top */
        .site-header{
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 1000;            /* ensure it floats above content */
            border-radius: 0;          /* remove rounding */
            background: #ffffff;       /* solid white background */
            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 (page content, not the site-header fragment) */
        .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; }

        .row-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
        .btn { padding:8px 12px; 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); }
        .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; }

        @media (max-width: 992px) { .row-top { flex-direction:column; gap:10px; align-items:flex-start; } }
    </style>
</head>
<body>
<!-- Fragment header -->
<th:block th:replace="~{fragments/header :: siteHeader(${null})}"></th:block>

<div class="container">
    <!-- Page header -->
    <div class="header">
        <div class="header-content">
            <h1>Листа на набавки</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 Orders List Card -->
    <div class="card">
        <div class="card-header">Листа на набавки</div>
        <div class="card-body">
            <div class="row-top">
                <div class="muted">Прикажани се сите досега креирани набавки.</div>
                <a class="btn" th:href="@{/pharmacist/supply-orders/new}">+ Нова набавка</a>
            </div>

            <table>
                <thead>
                <tr>
                    <th>#</th>
                    <th>Аптека</th>
                    <th>Објект</th>
                    <th>Дистрибутер</th>
                    <th>Датум</th>
                    <th>Испорака</th>
                    <th>Статус</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="o : ${orders}">
                    <td th:text="${o.id}">1</td>
                    <td th:text="${o.pharmacy.company.companyName}">Аптека</td>
                    <td th:text="${o.facility.facilityName}">Објект</td>
                    <td th:text="${o.distributor.company.companyName}">Дистрибутер</td>
                    <td th:text="${o.orderDate}">2025-09-03</td>
                    <td th:text="${o.expectedArrivalDate}">2025-09-10</td>
                    <td th:text="${o.status}">во тек</td>
                    <td><a class="btn" th:href="@{|/pharmacist/supply-orders/${o.id}|}">Преглед</a></td>
                </tr>
                <tr th:if="${#lists.isEmpty(orders)}">
                    <td colspan="8" class="muted">Нема креирани набавки.</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

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