<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>SynergyMed – Брендирани лекови</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Header styles -->
    <th:block th:replace="fragments/header :: headerStyles"></th:block>

    <!-- Page styles -->
    <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);
            --success:#28a745; --success-bg:#d4edda;
        }
        *{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);
            display:flex;
            flex-direction:column;
            align-items:center;
        }

        .page{
            width:100%;
            max-width:1200px;
            padding:28px;
            margin:0 auto;
        }

        .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,0.1);
        }

        .after-site-header{ height: 16px; }

        .header{
            display:flex;justify-content:space-between;align-items:center;
            margin-bottom:24px;
            background:linear-gradient(135deg,var(--teal-1),var(--teal-2));
            color:#fff;padding:20px 24px;border-radius:20px;box-shadow:var(--shadow);
            gap:10px;
        }

        .header-buttons{
            display:flex;
            gap:12px;
            align-items:center;
        }

        .btn{display:inline-block;border:none;cursor:pointer;text-decoration:none;
            padding:12px 16px;border-radius:12px;font-weight:600;letter-spacing:.5px;transition:.2s ease}
        .btn-primary{background:linear-gradient(135deg,var(--teal-1),var(--teal-2));color:#fff;box-shadow:0 10px 20px rgba(32,178,170,.25)}
        .btn-primary:hover{transform:translateY(-2px)}

        .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}

        .card{
            background:var(--card);
            border-radius:18px;
            overflow:hidden;
            box-shadow:var(--shadow-sm);
            display:flex;
            flex-direction:column;
            min-height:420px; /* Increased card height */
            transition:transform 0.2s ease, box-shadow 0.2s ease;
        }

        .card:hover{
            transform:translateY(-4px);
            box-shadow:0 12px 30px rgba(0,0,0,0.12);
        }

        .thumb{width:100%;height:220px;object-fit:cover;background:#eef2f3;display:block;flex-shrink:0}

        .content{
            padding:16px 18px 20px;
            display:flex;
            flex-direction:column;
            flex-grow:1;
            justify-content:space-between;
        }

        .product-info{
            margin-bottom:16px;
        }

        .title{font-weight:700;margin:6px 0 4px;font-size:1.1rem;line-height:1.3}
        .muted{color:var(--muted);font-size:.92rem;margin-bottom:8px}

        .actions-section{
            margin-top:auto;
        }

        .price{
            font-weight:800;
            font-size:1.1rem;
            color:var(--teal-1);
            margin-bottom:12px;
        }

        .button-group{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
        }

        .btn-outline{
            background:#fff;
            border:2px solid rgba(32,178,170,.25);
            color:#20b2aa;
            padding:10px 14px;
            border-radius:10px;
            text-decoration:none;
            font-weight:600;
            transition:.2s ease;
            font-size:0.9rem;
            flex:1;
            text-align:center;
            min-width:100px;
        }

        .btn-outline:hover{
            border-color:#20b2aa;
            box-shadow:0 6px 14px rgba(32,178,170,.18);
            background:#f8fffe;
        }

        /* Toast Notification Styles */
        .toast-container{
            position:fixed;
            top:80px;
            right:20px;
            z-index:9999;
            display:flex;
            flex-direction:column;
            gap:10px;
        }

        .toast{
            background:linear-gradient(135deg,var(--teal-1),var(--teal-2));
            color:#fff;
            padding:16px 20px;
            border-radius:12px;
            box-shadow:var(--shadow);
            min-width:300px;
            transform:translateX(400px);
            opacity:0;
            transition:all 0.3s ease;
            display:flex;
            align-items:center;
            gap:10px;
        }

        .toast.show{
            transform:translateX(0);
            opacity:1;
        }

        .toast-icon{
            font-size:1.2rem;
            flex-shrink:0;
        }

        .toast-content{
            flex-grow:1;
        }

        .toast-title{
            font-weight:700;
            margin-bottom:2px;
        }

        .toast-message{
            font-size:0.9rem;
            opacity:0.9;
        }

        .toast-close{
            background:none;
            border:none;
            color:#fff;
            font-size:1.2rem;
            cursor:pointer;
            padding:0;
            opacity:0.8;
            transition:opacity 0.2s ease;
        }

        .toast-close:hover{
            opacity:1;
        }

        @media (max-width:560px){
            .page{padding:16px}
            .header{padding:16px;flex-direction:column;gap:12px}
            .header-buttons{gap:10px;flex-wrap:wrap;justify-content:center}
            .grid{grid-template-columns:1fr;gap:20px}
            .button-group{flex-direction:column}
            .btn-outline{flex:none}
            .toast-container{right:10px;left:10px}
            .toast{min-width:auto}
        }
    </style>
</head>
<body>
<!-- Header -->
<th:block th:replace="fragments/header :: siteHeader('Брендирани лекови')"></th:block>
<div class="after-site-header"></div>

<!-- Toast Container -->
<div class="toast-container" id="toastContainer"></div>

<div class="page">
    <div class="header">
        <h2>Брендирани лекови</h2>
        <div class="header-buttons">
            <a class="btn btn-primary" th:href="@{/admin/branded-medicines/new}">Креирај</a>
        </div>
    </div>

    <div class="grid">
        <div class="card" th:each="bm : ${medicines}">
            <img class="thumb" th:src="@{${firstImageById[bm.id]}}" alt="слика на производ">
            <div class="content">
                <div class="product-info">
                    <div class="title" th:text="${bm.name}">Име</div>
                    <div class="muted" th:text="${bm.dosageForm}">Фармацевтска форма</div>
                </div>

                <div class="actions-section">
                    <div class="price"
                         th:text="${#numbers.formatDecimal(bm.price, 1, 'COMMA', 2, 'POINT') + ' ден.'}">0.00 ден.</div>

                    <div class="button-group">
                        <a class="btn-outline" th:href="@{/admin/branded-medicines/{id}/edit(id=${bm.id})}">Уреди</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

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

<script>
    // Toast notification functionality
    function showToast(title, message, type = 'success') {
        const toastContainer = document.getElementById('toastContainer');

        const toast = document.createElement('div');
        toast.className = 'toast';

        const icon = type === 'success' ? '✅' : '❌';

        toast.innerHTML = `
        <div class="toast-icon">${icon}</div>
        <div class="toast-content">
            <div class="toast-title">${title}</div>
            <div class="toast-message">${message}</div>
        </div>
        <button class="toast-close" onclick="removeToast(this.parentElement)">×</button>
    `;

        toastContainer.appendChild(toast);

        // Trigger animation
        setTimeout(() => {
            toast.classList.add('show');
        }, 100);

        // Auto remove after 4 seconds
        setTimeout(() => {
            removeToast(toast);
        }, 4000);
    }

    function removeToast(toast) {
        toast.classList.remove('show');
        setTimeout(() => {
            if (toast && toast.parentElement) {
                toast.parentElement.removeChild(toast);
            }
        }, 300);
    }

    // Handle add to cart button clicks
    document.addEventListener('DOMContentLoaded', function() {
        const addToCartForms = document.querySelectorAll('form[action*="/cart/add/"]');

        addToCartForms.forEach(form => {
            form.addEventListener('submit', function(e) {
                e.preventDefault();

                const button = form.querySelector('.add-to-cart-btn');
                const productName = button.getAttribute('data-name');
                const originalText = button.textContent;

                // Show loading state
                button.textContent = 'Се додава...';
                button.disabled = true;

                // Submit the form via fetch
                fetch(form.action, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    }
                })
                    .then(response => {
                        if (response.ok) {
                            // Show success toast
                            showToast(
                                'Додадено во кошничката!',
                                `${productName} е додаден во кошничката.`,
                                'success'
                            );
                        } else {
                            throw new Error('Failed to add item to cart');
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        showToast(
                            'Грешка',
                            'Неуспешно додавање во кошничката. Обидете се повторно.',
                            'error'
                        );
                    })
                    .finally(() => {
                        // Restore button state
                        button.textContent = originalText;
                        button.disabled = false;
                    });
            });
        });
    });
</script>

</body>
</html>
