<div class="container">
    <!--row 1-->
    <div class="item">
        <label for="ronpln">Kurs RONPLN:</label>
        <input type="text" id="ronpln" value="0.86" placeholder="Wpisz kurs RONPLN">
        <a href="https://www.google.com/finance/quote/RON-PLN?sa=X&ved=2ahUKEwj1wP-UnuuKAxWuKBAIHaovB9oQmY0JegQIDBAn" target="_blank" class="btn-main">Sprawdź dzisiejszy kurs NBP</a>
    </div>

    <div class="item">
        <label for="vat">Stawka VAT:</label>
        <input type="text" id="vat" placeholder="Wpisz stawkę VAT">
        <div class="vat-buttons">
            <a href="javascript:void(0);" onclick="setVat(0)" class="btn-main">0%</a>
            <a href="javascript:void(0);" onclick="setVat(5)" class="btn-main">5%</a>
            <a href="javascript:void(0);" onclick="setVat(8)" class="btn-main">8%</a>
            <a href="javascript:void(0);" onclick="setVat(9)" class="btn-main">9%</a>
            <a href="javascript:void(0);" onclick="setVat(19)" class="btn-main">19%</a>
            <a href="javascript:void(0);" onclick="setVat(23)" class="btn-main">23%</a>
        </div>
    </div>

    <div class="item info">
        <h3>Informacje VAT</h3>
        <p>Stawki VAT w Polsce: <span class="highlight">0%, 5%, 8%, 23%</span></p>
        <p>Stawki VAT w Rumunii: <span class="highlight">5%, 9%, 19%</span></p>
    </div>

    <!--row 2-->
    <div class="item">
        <label for="logistics">Wybierz logistykę:</label>
        <div class="logistics-buttons">
            <a href="javascript:void(0);" id="emag-courier" onclick="selectLogistics('emag')" class="btn-main">eMAG Courier</a>
            <a href="javascript:void(0);" id="other-logistics" onclick="selectLogistics('other')" class="btn-main">Inna logistyka</a>
        </div>
    </div>

    <div class="item">
        <div id="logistics-name-container" style="display: none;">
            <label for="logistics-name" style="margin-bottom: 5px">Wybrana logistyka:</label>
            <input type="text" id="others" placeholder="Wprowadź nazwę logistyki" readonly>
        </div>
        <div id="logistics-options">
            <span id="logistics-message" class="responsive-message">Wybierz typ logistyki</span>
            <div id="emag-options" style="display: none;">
                <label for="logistics-amount">Kwota logistyka (przeliczona na PLN netto):</label>
                <input type="text" id="logistics-amount" placeholder="Wybierz wartość poniżej" class="bold-orange" readonly>
                <div class="logistics-buttons">
    <a href="javascript:void(0);" onclick="setLogisticsAmount(7, this)" class="btn-main">7 RON</a>
    <a href="javascript:void(0);" onclick="setLogisticsAmount(10, this)" class="btn-main">10 RON</a>
</div>

            </div>
            <div id="other-options" style="display: none;">
                <label for="custom-logistics-amount">Wprowadź kwotę logistyki (PLN netto):</label>
                <input type="text" id="custom-logistics-amount" placeholder="Wprowadź własną kwotę">
            </div>
        </div>
    </div>

    <div class="item info">
        <h3>Inne logistyki:</h3>
        <p>RE, NK, Olza, Paxy, etc.</p>
    </div>

    <!-- row3 -->
    <div class="item">
    <label for="sale-price-ron">Cena sprzedaży produktu (RON brutto):</label>
    <input type="text" id="sale-price-ron" placeholder="Wpisz cenę RON brutto">
</div>
<div class="item">
    <label for="sale-price-pln">Przeliczenie na PLN netto: </label>
    <input type="text" id="pln-netto" placeholder="Automatyczne przeliczenie" class="bold-orange" readonly>
    <div class="error-msg-ronpln" ></div>
    <div class="error-msg-ronbrutto"></div>
    <div class="error-msg-vat"></div>
</div>
<div class="item info">
    <p>Cena sprzedaży produktu zostanie przeliczona z <span class="highlight">RON brutto</span> na <span class="highlight">PLN netto</span></p>
</div>

<!-- row 4 -->
<div class="item merge-cols">
    <label for="product-cost">Koszt zakupu produktu (PLN netto):</label>
    <input type="text" id="product-cost" placeholder="Wpisz koszt w PLN netto" class="width-2col">
</div>
<div class="item info">
    <p>Cena zakupu Twojego produktu w PLN netto.</p>
</div>

<!-- row 5 -->
<div class="item">
    <label for="commission-percentage">Wpisz wysokość prowizji (%):</label>
    <input type="text" id="commission-percentage" placeholder="Wpisz % prowizji">
</div>
<div class="item">
    <label for="commission-calculated">Przeliczenie prowizji (PLN netto):</label>
    <input type="text" id="commission-calculated" placeholder="Automatyczne przeliczenie" class="bold-orange" readonly>
    <div class="error-msg-ronpln"></div>
    <div class="error-msg-ronbrutto"></div>
    <div class="error-msg-vat"></div>
    <div class="error-msg-commision"></div>
</div>
<div class="item info">
    <p>Wysokość prowizji z odpowiedniej kategorii na eMAG - wartość zostanie przeliczona na <span class="highlight">PLN netto</span></p>
</div>

<!-- row6 -->

<div class="item">
    <label for="promotion-percentage">Zagregowany udział kosztów promocji (%):</label>
    <input type="text" id="promotion-percentage" placeholder="Wpisz % kosztów promocji">
</div>
<div class="item">
    <label for="promotion-calculated">Przeliczenie kosztów promocji (PLN netto):</label>
    <input type="text" id="promotion-calculated" placeholder="Automatyczne przeliczenie" class="bold-orange" readonly>
    <div class="error-msg-promotion"></div>
    <div class="error-msg-base-fields"></div>
</div>
<div class="item info">
    <p>Sugerujemy zagregować koszty promocji biorąc pod uwagę średnie CPS oraz wartości zniżek na kampanie (pamiętaj, że biorąc udział w kampanii otrzymujesz również rabat na prowizję).</p>
    <p>Np. 10% kosztu za eMAG ADS i 5% zniżki na kampanię.</p>
</div>

<!-- row 7 -->
<div class="item merge-cols">
    <label for="calculated-genius-cost">Koszt Genius:</label>
    <input type="text" id="calculated-genius-cost" placeholder="Automatyczne przeliczenie" class="width-2col bold-orange" readonly>
    <div class="error-msg-ronbrutto"></div>
</div>
<div class="item info">
    <p class="genius-description">
        <span class="highlight">Koszt Genius</span> jest obliczony na podstawie wartości produktów w zamówieniu. 
        Pamiętaj, że jeśli w zamówieniu jest więcej produktów, koszt ten rozłoży się.
    </p>
</div>

<!-- row 8 -->
<div class="item merge-cols">
    <label for="total-cost">Łączne koszty (PLN netto):</label>
    <input type="text" id="total-cost" placeholder="Automatyczne przeliczenie" class="width-2col bold-orange" readonly>
    <div class="error-msg-base-fields"></div>
</div>
<div class="item info">
    <p class="total-cost-description">
        Łączna kwota <span class="highlight">poniesionych kosztów PLN netto</span>
    </p>
</div>

<!-- row 9 -->
<div class="item">
    <label for="profit-result">Wynik (PLN netto):</label>
    <input type="text" id="profit-result" placeholder="Automatyczne przeliczenie" class="bold-orange" readonly>
</div>
<div class="item">
    <label for="profit-margin">Marża (%):</label>
    <input type="text" id="profit-margin" placeholder="Automatyczne przeliczenie" class="bold-orange" readonly>
</div>
<div class="item info">
    <h3>Wyniki</h3>
        <p>Różnica między <span class="highlight">zyskiem</span> i <span class="highlight">stratą</span> oraz <span class="highlight">marża</span></p>
</div>

</div>
