<!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 (unified style) */
        .page-header {
            background: linear-gradient(135deg,#20b2aa,#48d1cc);
            color: white;
            padding: 25px 20px;
            text-align: center;
            border-radius: 0;      /* remove rounding */
            margin: 0 0 20px 0;    /* spacing below only */
            box-shadow: none;      /* no floating card effect */
        }
        .page-header h1 { font-size:2rem; margin-bottom:6px; font-weight:400; }
        .page-header p { font-size:1rem; opacity:0.85; }
        .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; }

        .grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
        .grid-1 { display:grid; grid-template-columns:1fr; gap:16px; }

        label { font-weight:600; margin-bottom:6px; display:block; color:#374151; }
        select, input[type="number"] { width:100%; padding:12px 12px; border:2px solid #e5e7eb; border-radius:12px; background:#fff; color:#111827; }

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

        .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;  padding:10px 16px; border-radius:12px; text-decoration:none; font-weight:600; cursor:pointer; transition:.2s;  }
        .btn-danger { border-color:#f0caca; color:#b3261e; }
        .muted { color:#6b7280; }
        .actions { display:flex; gap:10px; margin-top:20px; }

        @media (max-width: 992px) { .grid-2 { grid-template-columns:1fr; } }
    </style>
</head>
<body>
<th:block th:replace="~{fragments/header :: siteHeader(${null})}"></th:block>

<div class="container">
    <!-- Header -->
    <div class="page-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 Order Form Card -->
    <div class="card">
        <div class="card-header">Креирај набавка</div>
        <div class="card-body">
            <form th:action="@{/pharmacist/supply-orders}" method="post" id="orderForm">
                <input type="hidden" th:if="${_csrf != null}" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                <div class="grid-2">
                    <div>
                        <label>Аптека</label>
                        <select name="pharmacyId" id="pharmacySel" required>
                            <option value="" disabled selected>Избери аптека</option>
                            <option th:each="p : ${pharmacies}" th:value="${p.id}" th:text="${p.company != null ? p.company.companyName : 'Аптека #' + p.id}"></option>
                        </select>
                    </div>
                    <div>
                        <label>Објект</label>
                        <select name="facilityId" id="facilitySel" required>
                            <option value="" disabled selected>Избери објект</option>
                        </select>
                    </div>
                </div>

                <div class="grid-2" style="margin-top:12px;">
                    <div>
                        <label>Дистрибутер</label>
                        <select name="distributorId" id="distributorSel" required>
                            <option value="" disabled selected>Избери дистрибутер</option>
                            <option th:each="d : ${distributors}" th:value="${d.id}" th:text="${d.company != null ? d.company.companyName : 'Дистрибутер #' + d.id}"></option>
                        </select>
                    </div>
                    <div>
                        <label>Помош</label>
                        <div class="muted">Сите производи мора да бидат од избраниот дистрибутер; листата подолу се полни автоматски.</div>
                    </div>
                </div>

                <div class="grid-1" style="margin-top:16px;">
                    <table id="itemsTable">
                        <thead>
                        <tr>
                            <th style="width:60%;">Брендиран лек</th>
                            <th style="width:20%;">Количина</th>
                            <th style="width:20%;"></th>
                        </tr>
                        </thead>
                        <tbody id="itemsBody">
                        <tr>
                            <td>
                                <select name="medicineIds" class="medicineSel" required>
                                    <option value="" disabled selected>Прво избери дистрибутер</option>
                                </select>
                            </td>
                            <td>
                                <input type="number" name="quantities" min="1" step="1" value="1" required/>
                            </td>
                            <td>
                                <button type="button" class="btn btn-danger removeRow">Отстрани</button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                    <button type="button" class="btn" id="addRowBtn" style="margin-top:10px;">+ Додади ред</button>
                </div>

                <div class="actions">
                    <button type="submit" class="btn-primary">Креирај нарачка</button>
                    <a class="btn" th:href="@{/pharmacist/supply-orders}">Откажи</a>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="optionBanks" style="display:none;">
    <div id="facilityBank">
        <select th:each="p : ${pharmacies}" th:attr="data-pharmacy=${p.id}">
            <option th:each="f : ${facilitiesByPharmacyId[p.id]}"
                    th:value="${f.id}"
                    th:text="${f.facilityName != null ? f.facilityName : 'Објект #' + f.id}"></option>
        </select>
    </div>
    <div id="medicineBank">
        <select th:each="d : ${distributors}" th:attr="data-distributor=${d.id}">
            <option th:each="m : ${medicinesByDistributorId[d.id]}"
                    th:value="${m.id}"
                    th:text="${(m.name != null ? m.name : 'Лек #'+m.id)
                        + (m.strength != null ? ' ' + m.strength : '')
                        + (m.dosageForm != null ? ' • ' + m.dosageForm : '')}"></option>
        </select>
    </div>
</div>

<th:block th:replace="~{fragments/header :: headerScripts}"></th:block>
<script>
    const pharmacySel = document.getElementById('pharmacySel');
    const facilitySel = document.getElementById('facilitySel');
    const distributorSel = document.getElementById('distributorSel');
    const itemsBody = document.getElementById('itemsBody');
    const addRowBtn = document.getElementById('addRowBtn');

    function replaceOptions(targetSelect, sourceSelect, placeholderText, allowId = null, excludeIds = new Set()) {
        const placeholder = document.createElement('option');
        placeholder.value = '';
        placeholder.disabled = true;
        placeholder.selected = !targetSelect.value;
        placeholder.textContent = placeholderText;
        targetSelect.innerHTML = '';
        targetSelect.appendChild(placeholder);

        if (!sourceSelect) return;
        Array.from(sourceSelect.options).forEach(optSrc => {
            const val = optSrc.value;
            if (val && (val === allowId || !excludeIds.has(val))) {
                const opt = document.createElement('option');
                opt.value = val;
                opt.textContent = optSrc.textContent;
                targetSelect.appendChild(opt);
            }
        });

        if (allowId && Array.from(targetSelect.options).some(o => o.value === allowId)) {
            targetSelect.value = allowId;
        } else {
            targetSelect.value = '';
        }
    }

    function populateFacilities(pharmacyId) {
        const bank = document.querySelector(`#facilityBank select[data-pharmacy="${pharmacyId}"]`);
        const ph = document.createElement('option'); ph.value=''; ph.disabled=true; ph.selected=true; ph.textContent='Избери објект';
        facilitySel.innerHTML = ''; facilitySel.appendChild(ph);
        if (bank) Array.from(bank.options).forEach(o => facilitySel.add(new Option(o.textContent, o.value)));
    }

    function getSelectedMedicineIds(exceptSelect = null) {
        const ids = new Set();
        document.querySelectorAll('.medicineSel').forEach(sel => { if (sel !== exceptSelect && sel.value) ids.add(sel.value); });
        return ids;
    }

    function populateMedicinesForAll(distributorId) {
        const bank = document.querySelector(`#medicineBank select[data-distributor="${distributorId}"]`);
        document.querySelectorAll('.medicineSel').forEach(sel => {
            const current = sel.value || null;
            const exclude = getSelectedMedicineIds(sel);
            replaceOptions(sel, bank, 'Избери лек', current, exclude);
        });
    }

    pharmacySel.addEventListener('change', () => { if (pharmacySel.value) populateFacilities(pharmacySel.value); });
    distributorSel.addEventListener('change', () => {
        if (distributorSel.value) populateMedicinesForAll(distributorSel.value);
        document.querySelectorAll('.medicineSel').forEach(sel => { sel.value = ''; });
    });

    itemsBody.addEventListener('change', (e) => {
        if (e.target && e.target.classList.contains('medicineSel') && distributorSel.value) {
            populateMedicinesForAll(distributorSel.value);
        }
    });

    addRowBtn.addEventListener('click', () => {
        const tr = document.createElement('tr');
        tr.innerHTML = `
      <td><select name="medicineIds" class="medicineSel" required>
            <option value="" disabled selected>Прво избери дистрибутер</option>
          </select></td>
      <td><input type="number" name="quantities" min="1" step="1" value="1" required/></td>
      <td><button type="button" class="btn btn-danger removeRow">Отстрани</button></td>`;
        itemsBody.appendChild(tr);
        if (distributorSel.value) populateMedicinesForAll(distributorSel.value);
    });

    itemsBody.addEventListener('click', (e) => {
        if (e.target && e.target.classList.contains('removeRow')) {
            const rows = itemsBody.querySelectorAll('tr');
            if (rows.length > 1) {
                e.target.closest('tr').remove();
                if (distributorSel.value) populateMedicinesForAll(distributorSel.value);
            }
        }
    });
</script>
</body>
</html>
