<!-- templates/orders.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>SynergyMed – Orders</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <th:block th:replace="fragments/header :: headerStyles"></th:block>

    <style>
        :root {
            --teal-1:#20b2aa; --teal-2:#48d1cc;
            --bg:#fefeff; --card:#ffffff;
            --muted:#6c757d; --text:#1f2937;
            --shadow:0 20px 40px rgba(0,0,0,0.10);
            --shadow-sm:0 6px 18px rgba(0,0,0,0.08);
            --green:#16a34a; --yellow:#ca8a04;
            --green-bg:rgba(22,163,74,.12); --yellow-bg:rgba(202,138,4,.12);
        }
        *{margin:0;padding:0;box-sizing:border-box}
        body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;min-height:100vh;background:linear-gradient(135deg,#a4ecba 0%,#fefeff 100%);color:var(--text)}
        .site-header{position:sticky;top:0;left:0;right:0;width:100%;border-radius:0;margin:0;z-index:1000;background:white !important;box-shadow:0 2px 10px rgba(0,0,0,.1)}
        .page{width:100%; max-width:1200px; padding:28px; margin:0 auto}
        .card{background:var(--card);border-radius:18px;box-shadow:var(--shadow);margin-bottom:28px;overflow:hidden}
        .card-header{background:linear-gradient(135deg,var(--teal-1),var(--teal-2));color:#fff;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;font-size:1.3rem;font-weight:600}
        .card-body{padding:22px}
        .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
        .company-card{background:var(--card);border-radius:18px;box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column}
        .content{padding:16px 18px}
        .title{font-weight:700;margin:6px 0 2px}
        .muted{color:var(--muted);font-size:.92rem}
        .badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.80rem;font-weight:700}
        .badge-green{background:var(--green-bg);color:var(--green)}
        .badge-yellow{background:var(--yellow-bg);color:var(--yellow)}
        .row{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
        .clickable{cursor:pointer}
        @media (max-width:560px){.page{padding:16px}}
    </style>
</head>
<body>

<th:block th:replace="fragments/header :: siteHeader('orders')"></th:block>

<div class="page">
    <div class="card">
        <div class="card-header">
            <span>Orders</span>
        </div>
        <div class="card-body">

            <!-- Empty state -->
            <div th:if="${#lists.isEmpty(orders)}" class="muted">You have not made any orders.</div>

            <!-- Orders grid -->
            <div class="grid" th:if="${!#lists.isEmpty(orders)}">
                <div class="company-card clickable"
                     th:each="o : ${orders}"
                     th:attr="data-href=@{/orders/{oid}(oid=${o.id})}">
                    <div class="content">
                        <div class="title" th:text="${'Order • ' + o.orderDate}">Order • 2025-08-30</div>
                        <div class="muted" th:text="${'Total: ' + o.totalPrice + ' ден.'}">Total</div>

                        <div style="margin-top:8px;">
                          <span class="badge"
                                th:text="${o.status}"
                                th:classappend="${o.status == 'испорачана'} ? ' badge-green' : (${o.status == 'во тек'} ? ' badge-yellow' : '')">
                            Status
                          </span>
                        </div>

                        <div class="row">
                            <div class="muted" th:text="${'Expected: ' + o.expectedArrivalDate}">Expected</div>
                        </div>
                    </div>
                </div>
            </div>

            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    document.querySelectorAll('.company-card.clickable').forEach(function (card) {
                        const href = card.getAttribute('data-href');
                        if (!href) return;
                        card.addEventListener('click', function () { window.location.assign(href); });
                        card.querySelectorAll('a, button, input, select, textarea, label, form')
                            .forEach(function (el) { el.addEventListener('click', function (e) { e.stopPropagation(); }); });
                    });
                });
            </script>
        </div>
    </div>
</div>

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