<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dashboard</title>
    <link rel="stylesheet" href="/css/style.css">
     <style>
        /* Keeping your exact styles */
        body { font-family: "Sony Sketch EF", sans-serif;}
    </style>
    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#272737">
    <link rel="apple-touch-icon" href="/images/icon-192.png">
</head>
<body>
    <nav>
         <div><img alt="" src="/images/Quadexwhitefontlogo.png" style="height: 125px;" /></div>
        <div class="nav-links">
             
             
             <a href="/logout" class="btn-logout">Logout</a>
        </div>
    </nav>

    <div class="container">
        <div class="controls">
            <form action="/dashboard" method="GET" class="search-form">
                <input type="text" name="search" placeholder="Search code or description..." value="<%= search %>">
                <button type="submit">Search</button>
                <% if(search) { %> <a href="/dashboard" class="clear-btn">Clear</a> <% } %>
            </form>
            <button onclick="openModal('addModal')" class="btn-add">+ Add New</button>
        </div>

        <table>
            <thead>
                <tr>
                    <th style="width: 20%;">Code</th>
                    <th style="width: 65%;">Description</th>
                    <th style="width: 15%;">Actions</th>
                </tr>
            </thead>
            <tbody>
                <% materials.forEach(item => { %>
                <tr>
                    <td><%= item.code %></td>
                    <td><%= item.description %></td>
                    <td>
                        <button onclick='openEdit(<%- JSON.stringify(item) %>)' class="btn-edit">Edit</button>
                    </td>
                </tr>
                <% }) %>
            </tbody>
        </table>
    </div>

    <div id="addModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('addModal')">&times;</span>
            <h2>Add Material</h2>
            <form action="/add" method="POST">
                <input type="text" name="code" placeholder="Material Code" required>
                <textarea name="description" placeholder="Description" rows="4" required></textarea>
                <button type="submit">Save</button>
            </form>
        </div>
    </div>

    <div id="editModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('editModal')">&times;</span>
            <h2>Edit Material</h2>
            <form action="/edit" method="POST">
                <input type="hidden" name="id" id="edit-id">
                <input type="text" name="code" id="edit-code" required>
                <textarea name="description" id="edit-description" rows="4" required></textarea>
                <button type="submit">Update</button>
            </form>
        </div>
    </div>

    <div id="importModal" class="modal">
        <div class="modal-content">
            <span class="close" onclick="closeModal('importModal')">&times;</span>
            <h2>Import CSV</h2>
            <p style="font-size:0.8rem; color: #aaa;">CSV must have headers: <strong>code, description</strong></p>
            <form action="/import" method="POST" enctype="multipart/form-data">
                <input type="file" name="csvfile" accept=".csv" required>
                <button type="submit">Upload & Import</button>
            </form>
        </div>
    </div>

    <script>
        function openModal(id) { document.getElementById(id).style.display = 'block'; }
        function closeModal(id) { document.getElementById(id).style.display = 'none'; }
        
        function openEdit(item) {
            document.getElementById('edit-id').value = item.id;
            document.getElementById('edit-code').value = item.code;
            document.getElementById('edit-description').value = item.description;
            openModal('editModal');
        }
        window.onclick = function(e) { if (e.target.classList.contains('modal')) e.target.style.display = "none"; }
        
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
              navigator.serviceWorker.register('/sw.js');
            });
        }
    </script>
</body>
</html>