<div id="paint-calculator">
    <form id="calculator-form">
        <!-- Step 1: Select Category -->
        <label for="category-select">Επιλογή Κατηγορίας Χρώματος</label>
        <select id="category-select" required>
            <option value="" disabled selected>Επιλογή Κατηγορίας Χρώματος</option>
            <option value="interiorwalls">Χρώματα τοίχου εσωτερικού χώρου</option>
            <option value="exterior">Χρώματα τοίχου εξωτερικού χώρου</option>
            <option value="monotikaNeroy">Μονωτικά Ταρατσών Νερού</option>
            <option value="xromataksiloy">Χρώματα και Βερνίκια Ξύλου</option>
            <option value="xromametaloy">Χρώματα για Μεταλλικές Επιφάνειες</option>
            <option value="hyperdesmo">Σύστημα υγρομόνωσης ταρατσών Hyperdesmo</option>
            <option value="thermoprosopsi">Σύστημα Εξωτερικής Θερμοπρόσοψης</option>
            <option value="specialpaints">Ειδικά Χρώματα - Πατητές</option>
        </select>

        <!-- Step 2: Select Paint -->
        <div id="paint-selection" class="hidden">
            <label for="paint-select">Προϊόν</label>
            <select id="paint-select" required>
                <option value="" disabled selected>Επιλέξτε Προϊόν</option>
            </select>
        </div>

        <!-- Step 3: Enter Area -->
        <label for="square-meters" class="hidden">Επιφάνεια (m²):</label>
        <input type="number" id="square-meters" class="hidden" placeholder="" required />

        <!-- Step 4: Calculate -->
        <button type="button" id="calculate-button" class="hidden">Υπολογισμός</button>
    </form>

    <!-- Result Section -->
    <div id="result" class="hidden">
        
        <p id="result-output"></p>
    </div>

    <script>
        const categories = {
            interiorwalls: [
                { name: "Vitex Classic", coverage: 9, volumes: [1, 3, 10],units:'lt' },
                { name: "Vitex Classic Eco", coverage: 9, volumes: [1, 3, 10],units:'lt' },
                { name: "Vitex Care ", coverage: 9, volumes: [1, 3, 10],units:'lt' },
                { name: "Vitex Care Eggshell", coverage: 9, volumes: [1, 3, 10],units:'lt' },
                { name: "Vitex Vito Eco", coverage: 8, volumes: [1, 3, 9],units:'lt' },
                { name: "Vitex Vista Υδρόχρωμα", coverage: 6, volumes: [3, 9],units:'lt' },
                { name: "Vitex Kitchen & Bath", coverage: 9, volumes: [1, 3, 10],units:'lt' },
                { name: "Vivechrom Super Neopal", coverage: 6, volumes: [1, 3, 10],units:'lt' },
                { name: "Vivechrom Super Neopal Eco", coverage: 7, volumes: [1, 3, 10],units:'lt' },
                { name: "Vivechrom Neopal Kitchen & Bathroom", coverage: 6, volumes: [1, 3, 10],units:'lt' },
                { name: "Vivechrom Vive Eco", coverage: 5.5, volumes: [1, 3, 9],units:'lt' },
                { name: "Berling Petite Classic Mat", coverage: 8, volumes: [1, 3, 10],units:'lt' },
                { name: "Berling Petite Matt", coverage: 8.5, volumes: [1, 3, 10],units:'lt' },
                { name: "Berling Yes Eco", coverage: 5.4, volumes: [1, 3, 9],units:'lt' },

            ],
            exterior: [
                { name: "Vitex Granikot Refresh", coverage: 9, volumes: [1, 3, 10],units:'lt' },
                { name: "Vitex Acrylan Max", coverage: 9, volumes: [1, 3, 10],units:'lt' },
                { name: "Vitex Acrylan", coverage: 9, volumes: [1, 3, 10],units:'lt' },
                { name: "Vitex Acrylan Elastic", coverage: 7, volumes: [3, 10],units:'lt' },
                { name: "Vitex Acrylan Silicon", coverage: 8, volumes: [ 3, 10],units:'lt' },
                { name: "Vitex Vito Acrylic", coverage: 6, volumes: [1, 3, 9],units:'lt' },
                { name: "Vitex Vito Τσιμεντόχρωμα (Κεραμιδί)", coverage: 6, volumes: [1, 3],units:'lt' },
                { name: "Vitex Cement Paint", coverage: 9, volumes: [1, 3],units:'lt' },
                { name: "Vitex Floorguard", coverage: 12, volumes: [0.75, 3,10],units:'lt' },
                { name: "Vitex Relief", coverage: 1, volumes: [5,15],units:'kg' },
                { name: "Vitex Road Marking Paint", coverage: 3, volumes: [0.75,2.5],units:'lt' },
                { name: "Berling Monostop Vapor Elastic", coverage: 5, volumes: [1, 3,10],units:'lt' },
                { name: "Berling Yes Acrylic ", coverage: 5, volumes: [1, 3,9],units:'lt' },
                { name: "Vivechrom Vivecryl  ", coverage: 6, volumes: [1, 3,10],units:'lt' },
                { name: "Vivecrom Vivecryl Elastic ", coverage: 5.5, volumes: [1, 3,10],units:'lt' },
                { name: "Vive Acrylic ", coverage: 5.5, volumes: [1, 3,9],units:'lt' }
                
            ],
            monotikaNeroy: [
                { name: "Neotex Neoproof PU W", coverage: 1.2, volumes: [5, 13],units:'kg' },
                { name: "Neotex Silatex Super", coverage: 1.3, volumes: [1,5, 12],units:'kg' },
                { name: "Neotex Neoproof PU Fast", coverage: 1.42, volumes: [13],units:'kg' },
                { name: "Hyperdesmo Aqua", coverage: 1.51, volumes: [5, 12],units:'kg' },
            ],
            xromataksiloy:[
            { name: "Vitex Aquavit", coverage: 8, volumes: [0.75, 2.5],units:'lt' },
            { name: "Vitex Platinum PU", coverage: 9, volumes: [0.75, 2.5],units:'lt' },
            { name: "Vitex Velatura Eco", coverage: 7, volumes: [0.75, 2.5],units:'lt' },
            { name: "Vitex Velatura Διαλύτου", coverage: 9, volumes: [0.75, 2.5],units:'lt' },
            { name: "Vitex Lussolac Νεφτιού", coverage: 9, volumes: [0.375],units:'lt' },
            { name: "Vitex Teak Oil", coverage: 8, volumes: [0.75],units:'lt' },
            { name: "Vivechrom Aquaxyl Varnish", coverage: 6, volumes: [0.75,2.5],units:'lt' },
            { name: "Vivechrom Vivexyl 7 Filter ", coverage: 8, volumes: [0.75,2.5],units:'lt' },
            { name: "Vivechrom Vivelack  ", coverage: 8, volumes: [0.75],units:'lt' },
            { name: "Vivechrom Vivexyl 7 Filter ", coverage: 8, volumes: [0.75,2.5],units:'lt' },
            { name: "Vivechrom Vivelux Yacht Varnish ", coverage: 8.5, volumes: [0.75,2.5],units:'lt' },
            { name: "Berling Pergola Opaque", coverage: 6, volumes: [0.75],units:'lt' },
            { name: "Berling Ilma Hybrid PU ", coverage: 9, volumes: [0.75,2.5],units:'lt' },
            { name: "Berling Gel Βερνίκι σε μορφή ζελέ ", coverage: 6, volumes: [0.75,2.5],units:'lt' },
            ],
            xromametaloy:
            [
            { name: "Vitex Heavy Metal Silicon", coverage: 8, volumes: [0.75, 2.5],units:'lt' },
            { name: "Vitex Heavy Metal Silicon Effect", coverage: 5, volumes: [0.75, 2.5],units:'lt' },
            { name: "Vitex Heavy Metal Silicon Varnish", coverage: 8, volumes: [0.75],units:'lt' },
            { name: "Vitex Direct 3-1", coverage: 4, volumes: [0.75],units:'lt' },
            { name: "Vitex Martelite", coverage: 5, volumes: [0.75],units:'lt' },
            { name: "Vitex Verolac", coverage: 8, volumes: [0.180, 0.375, 0.75,2.5],units:'lt' },
            { name: "Vivechrom Neochrom Silicon", coverage: 8, volumes: [0.75],units:'lt' },
            { name: "Vivechrom Vivemetal", coverage: 7.5, volumes: [0.75,2.5],units:'lt' },
            { name: "Vivechrom Radiater Aqua", coverage: 6, volumes: [0.75],units:'lt' },
            { name: "Vivechrom Radiater Νεφτιού", coverage: 5.5, volumes: [0.75],units:'lt' },
            
            

            ],
            hyperdesmo:[
            { name: "Hyperdesmo-LV", coverage: 0.66, volumes: [1,6,25],units:'kg' },
            { name: "Hyperdesmo-CLV", coverage: 0.66, volumes: [25],units:'kg' },
            { name: "Hyperdesmo Classic", coverage: 0.66, volumes: [25],units:'kg' },
            { name: "Hyperdesmo-T", coverage: 2, volumes: [1,20],units:'lt' },
            { name: "Hyperdesmo PB2K", coverage: 0.66, volumes: [40],units:'kg' },
            { name: "Hyperdesmo Microsealer-50", coverage: 10, volumes: [5,10],units:'lt' },
            { name: "Aquadur Αστάρι 2 Συστατικών Βάσης Νερού ", coverage: 100, volumes: [1,4,10],units:'kg' },
            { name: "Primer-T αστάρι για το Hyperdesmo-T", coverage: 2, volumes: [1,4,20],units:'lt' },
            ],
            specialpaints:[
            { name: "Berling Deco Cire Πατητή Τσιμεντοκονία", coverage: 0.5, volumes: [5,15],units:'kg' },
            { name: "Berling Bee Paint Ειδικό Χρώμα για Μελίσσια", coverage: 9, volumes: [0.75],units:'lt' },
            { name: "Berling Blackboard Paint Χρώμα για δημιουργία μαυροπίνακα", coverage: 6, volumes: [0.375,0.75],units:'lt' },
            { name: "Χρώμα κιμωλίας Blatem ", coverage: 8, volumes: [0.5],units:'lt' },
            { name: "Χρώμα κιμωλίας Mercola ", coverage: 8, volumes: [1],units:'lt' },

            
            
            ],
            thermoprosopsi:[
            { name: "Vitex Granikot Acrylic Flat 1.0mm", coverage: 2.2, volumes: [25],units:'kg' },
            { name: "Vitex Granikot Acrylic Flat 1.2mm", coverage: 2.3, volumes: [25],units:'kg' },
            { name: "Vitex Granikot Acrylic Flat 1.5mm", coverage: 2.4, volumes: [25],units:'kg' },
            { name: "Thrakon Clima Plaster DEC 428", coverage: 2, volumes: [25],units:'kg' },
            { name: "Vitex Granikot Acrylic Primer", coverage: 12, volumes: [3,10],units:'lt' },
            ]
        };

        // DOM Elements
        const categorySelect = document.getElementById("category-select");
        const paintSelect = document.getElementById("paint-select");
        const paintSelection = document.getElementById("paint-selection");
        const squareMetersInput = document.getElementById("square-meters");
        const calculateButton = document.getElementById("calculate-button");
        const resultDiv = document.getElementById("result");
        const resultOutput = document.getElementById("result-output");

        // Populate Paints Based on Selected Category
        categorySelect.addEventListener("change", () => {
            const selectedCategory = categorySelect.value;
            const paints = categories[selectedCategory];

            if (!paints) return;

            // Populate paints dropdown
            paintSelect.innerHTML = '<option value="" disabled selected>Επιλέξτε ένα Προϊόν</option>';
            paints.forEach((paint, index) => {
                const option = document.createElement("option");
                option.value = index;
                option.textContent = paint.name;
                paintSelect.appendChild(option);
            });

            // Show Paint Selection
            paintSelection.classList.remove("hidden");
            squareMetersInput.classList.add("hidden");
            calculateButton.classList.add("hidden");
            resultDiv.classList.add("hidden");
        });

        // Show Square Meter Input After Paint Selection
        paintSelect.addEventListener("change", () => {
            squareMetersInput.classList.remove("hidden");
            calculateButton.classList.remove("hidden");
            resultDiv.classList.add("hidden");
        });

        // Calculate Paint Requirement
        calculateButton.addEventListener("click", () => {
            const selectedCategory = categorySelect.value;
            const selectedPaintIndex = paintSelect.value;
            const squareMeters = parseFloat(squareMetersInput.value);

            if (!selectedCategory || selectedPaintIndex === "" || isNaN(squareMeters) || squareMeters <= 0) {
                alert("Συμπληρώστε σωστά όλα τα πεδία.");
                return;
            }

            const selectedPaint = categories[selectedCategory][selectedPaintIndex];
            const {name, coverage, volumes,units } = selectedPaint;

            // Calculate total required paint
            let totalRequired = Math.ceil(squareMeters / coverage);

            // Sort volumes in descending order
            volumes.sort((a, b) => b - a);

            // Distribute totalRequired across bucket volumes
            const bucketCalculations = volumes.map(volume => {
                const bucketsRequired = Math.floor(totalRequired / volume);
                totalRequired %= volume;
                return { volume, bucketsRequired };
            });

            // Filter out buckets that are not needed
            const validBuckets = bucketCalculations.filter(b => b.bucketsRequired > 0);

            // Display Result
            resultDiv.classList.remove("hidden");
            if (validBuckets.length > 0) {
                const breakdown = validBuckets
                    .map(b => `${b.bucketsRequired} δοχείο(α) των ${b.volume} ${units}`)
                    .join("<br> ");
                resultOutput.innerHTML = `
                    Χρειάζεσαι περίπου <strong>${Math.ceil(squareMeters / coverage)} ${units}</strong> ${name}.<br>
                    Αναλυτικά:<br>
                    ${breakdown}
                    <br>
                    <strong>*Οι παραπάνω υπολογισμοί γίνονται με βάση τις προδιαγραφές της εκάστοτε εταιρείας.</strong>
                `;
            } else {
                resultOutput.innerHTML = `
                    You need approximately <strong>${Math.ceil(squareMeters / coverage)} ${units}</strong> of paint.<br>
                    No bucket sizes available for this calculation.
                `;
            }
        });
    </script>

<style>
    /* General Styles */
    body {
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f4f4f4;
        color: #333;
    }

    #paint-calculator {
        max-width: 600px;
        margin: 50px auto;
        padding: 20px;
        border-radius: 12px;
        background: white;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    }

    #paint-calculator h2 {
        text-align: center;
        font-size: 1.8em;
        color: #333;
        margin-bottom: 20px;
    }

    #paint-calculator label {
        font-size: 0.9em;
        margin-bottom: 8px;
        display: block;
        color: #555;
        font-weight: 500;
    }

    #paint-calculator input,
    #paint-calculator select {
        width: 100%;
        padding: 12px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 1em;
        color: #555;
        background-color: #f9f9f9;
        transition: border-color 0.3s ease;
    }

    #paint-calculator input:focus,
    #paint-calculator select:focus {
        border-color: #fe7e2f;
        outline: none;
    }

    #paint-calculator button {
        display: block;
        width: 100%;
        padding: 12px;
        font-size: 1em;
        font-weight: bold;
        color: white;
        background: linear-gradient(135deg, #ff8e42, #fe7e2f);
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    #paint-calculator button:hover {
        background: linear-gradient(135deg, #fe7e2f, #d96b1c);
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* Result Section */
    #result {
        padding: 20px;
        margin-top: 20px;
        border-radius: 8px;
        background: #f9f9f9;
        color: #333;
        border: 1px solid #ddd;
        font-size: 1em;
        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    }

    #result p {
        margin: 0;
        line-height: 1.6;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        #paint-calculator {
            padding: 15px;
            margin: 20px;
        }

        #paint-calculator h2 {
            font-size: 1.5em;
        }

        #paint-calculator input,
        #paint-calculator select,
        #paint-calculator button {
            font-size: 0.9em;
        }
    }
</style>
