<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<link rel="icon" type="image/png" href="../img/logo.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Artikel hinzufügen</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="../css/article_form.css">
    <script>
        function validateForm() {
            var articleFields = document.querySelectorAll('.article-field');
            var excelFile = document.getElementById('excel_file').files[0];

            // Überprüfe, ob eine Excel-Datei hochgeladen wurde
            if (excelFile) {
                return true; // Erlaube das Hochladen der Excel-Datei ohne weitere Überprüfung
            }

            // Überprüfe, ob mindestens ein Artikel-Feld ausgefüllt ist
            for (var i = 0; i < articleFields.length; i++) {
                if (articleFields[i].value.trim() !== '') {
                    return true; // Erlaube das Absenden des Formulars
                }
            }

            // Wenn weder eine Excel-Datei hochgeladen wurde noch Artikel-Felder ausgefüllt sind, zeige eine Warnung an
            alert('Bitte füllen Sie entweder die Felder aus oder laden Sie eine Excel-Datei hoch.');
            return false; // Verhindere das Absenden des Formulars
        }
    </script>
</head>
<body>
    <div class="container">
        <h2>Neuen Artikel hinzufügen</h2>
        <form action="../includes/add_article.php" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
            <div class="form-group">
                <label for="manufacturer">Hersteller:</label>
                <input type="text" class="article-field" id="manufacturer" name="manufacturer">
            </div>
            <div class="form-group">
                <label for="set_name">Set Bezeichnung:</label>
                <input type="text" class="article-field" id="set_name" name="set_name">
            </div>
            <div class="form-group">
                <label for="article_number">Artikelnummer:</label>
                <input type="text" class="article-field" id="article_number" name="article_number">
            </div>
            <div class="form-group">
                <label for="ean_barcode">Set EAN:</label>
                <input type="text" class="article-field" id="ean_barcode" name="ean_barcode">
            </div>
            <!-- Separate Box für die restlichen Felder -->
            <div class="form-group">
                <h3>Einzelteile</h3>
                <div class="form-group">
                    <label for="part1">Backofen:</label>
                    <input type="text" class="article-field" id="part1" name="part1">
                </div>
                <div class="form-group">
                    <label for="part1_ean">Backofen EAN:</label>
                    <input type="text" class="article-field" id="part1_ean" name="part1_ean">
                </div>
                <div class="form-group">
                    <label for="part2">Ceranfeld:</label>
                    <input type="text" class="article-field" id="part2" name="part2">
                </div>
                <div class="form-group">
                    <label for="part2_ean">Ceranfeld EAN:</label>
                    <input type="text" class="article-field" id="part2_ean" name="part2_ean">
                </div>
                <div class="form-group">
                    <label for="part3">Auszug:</label>
                    <input type="text" class="article-field" id="part3" name="part3">
                </div>
                <div class="form-group">
                    <label for="part3_ean">Auszug EAN:</label>
                    <input type="text" class="article-field" id="part3_ean" name="part3_ean">
                </div>
                <div class="form-group">
                    <label for="part4">Backblech:</label>
                    <input type="text" class="article-field" id="part4" name="part4">
                </div>
                <div class="form-group">
                    <label for="part4_ean">Backblech EAN:</label>
                    <input type="text" class="article-field" id="part4_ean" name="part4_ean">
                </div>
                <!-- Anzeige des gezählten Pakets -->
                <div class="form-group">
                    <label for="quantity">Pakete:</label>
                    <input type="text" class="article-field" id="quantity" name="quantity" readonly>
                </div>
            </div>
            <!-- Upload-Button für Excel-Datei -->
            <div class="form-group">
                <label for="excel_file">Import Excel-Datei:</label>
                <input type="file" id="excel_file" name="excel_file" accept=".xls,.xlsx">
            </div>
            <div class="button-group">
                <input type="submit" value="Add Article">
            </div>
        </form>
    </div>
    <script>
        // Zähle die Anzahl der Teile und aktualisiere das Feld "Pakete"
        function countPackages() {
            var part1 = document.getElementById('part1').value.trim();
            var part2 = document.getElementById('part2').value.trim();
            var part3 = document.getElementById('part3').value.trim();
            var part4 = document.getElementById('part4').value.trim();
            var quantityField = document.getElementById('quantity');

            var packageCount = 0;
            if (part1 !== '') packageCount++;
            if (part2 !== '') packageCount++;
            if (part3 !== '') packageCount++;
            if (part4 !== '') packageCount++;

            quantityField.value = packageCount;
        }

        // Rufe die Funktion zur Paketzählung auf, wenn sich der Wert in einem der Teilfelder ändert
        document.querySelectorAll('.article-field').forEach(item => {
            item.addEventListener('change', countPackages);
        });
    </script>
</body>
</html>
