<div class="row">
    <div class="col-md-12 mt-2">
        <form id="materialForm" method="post" action="/manage-material/update" enctype="multipart/form-data" novalidate>
            <div class="card card-info">
                <div class="card-header">
                    <h4 class="card-title">
                        <%= sectionTitle %>
                    </h4>
                </div>

                <div class="card-body">
                    <div class="form-row">

                        <!-- Material Name -->
                        <div class="form-group col-md-6">
                            <label class="required" for="material_name">Materialname</label>
                            <input type="text" id="material_name" name="material_name" class="form-control"
                                placeholder="Materialname" required
                                value="<%= dataInfo ? dataInfo.material_name : '' %>" />
                        </div>

                        <!-- Unit -->
                        <div class="form-group col-md-6">
                            <label class="required" for="unit">Einheit</label>
                            <select id="unit" name="unit" class="form-control" required>
                                <option disabled <%=!dataInfo.unit ? 'selected' : '' %>>Einheit wählen</option>
                                <option value="pcs" <%=dataInfo.unit==='pcs' ? 'selected' : '' %>>Stück</option>
                                <option value="kg" <%=dataInfo.unit==='kg' ? 'selected' : '' %>>Kilogramm</option>
                                <option value="meter" <%=dataInfo.unit==='meter' ? 'selected' : '' %>>Meter</option>
                                <option value="litre" <%=dataInfo.unit==='litre' ? 'selected' : '' %>>Liter</option>
                            </select>
                        </div>

                        <!-- Quantity -->
                        <div class="form-group col-md-6">
                            <label class="required" for="quantity">Menge</label>
                            <input type="number" step="1" min="0" id="quantity" name="quantity" class="form-control"
                                placeholder="Menge" required
                                value="<%= dataInfo ? Number(dataInfo.quantity).toString() : '' %>" />
                        </div>

                        <!-- Material Image -->
                        <div class="form-group col-md-6">
                            <label for="image">Bild hochladen</label>
                            <input type="file" id="image" name="image" class="form-control" accept="image/*"
                                style="padding: 4px 4px">

                            <small class="form-text text-muted">Nur Bilddateien zulässig (jpg, png, jpeg)</small>

                            <div class="mt-2">
                                <p>Vorschau:</p>
                                <img id="imagePreview"
                                    src="<%= dataInfo && dataInfo.image ? '/uploads/manage-material/' + dataInfo.image : '' %>"
                                    alt="Material Image" style="max-width: 100px;object-fit:cover;border-radius:5px;">
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="form-group col-md-6">
                            <label for="description">Beschreibung</label>
                            <textarea id="description" name="description" class="form-control"
                                placeholder="Beschreibung"
                                rows="5"><%- dataInfo && dataInfo.description ? dataInfo.description : '' %></textarea>
                        </div>

                        <!-- Hidden ID -->
                        <input type="hidden" id="id" name="id" value="<%= dataInfo ? dataInfo.id : '' %>" />

                    </div>
                </div>

                <div class="card-footer">
                    <button type="submit" class="btn btn-info">Speichern</button>
                    <button type="button" class="btn btn-default">
                        <a href="/manage-material/list">Zurück</a>
                    </button>
                </div>

            </div>
        </form>
    </div>
</div>

<%- contentFor('pageStyleSection') %>

    <script>
        // Image preview when file is selected
        const imageInput = document.getElementById('image');
        const imagePreview = document.getElementById('imagePreview');

        imageInput.addEventListener('change', function (event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function (e) {
                    imagePreview.src = e.target.result;
                };
                reader.readAsDataURL(file);
            } else {
                // Reset to previous image or empty
                imagePreview.src = "<%= dataInfo && dataInfo.image ? '/uploads/manage-material/' + dataInfo.image : '' %>";
            }
        });
    </script>