<%- include("../layout/header",{ title: `Settings`}) %>
<div class="propertyadd">
    <div class="row headingsection">
        <div class="col-sm-12"><h1>Settings</h1></div>
    </div>
    <div class="formcontainer">
        <%if(flash && flash != ''){%>
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                 <%=flash%>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        <%}%>
        <h1 class="propertyheadingblue">Website Discount</h1>
        <hr>
        <form id="uploadForm" method="POST" enctype="multipart/form-data">
            <div class="row form-row">
                <div class="form-group col-md-4">
                    <label>Discount:</label>
                    <input type="number" step="any" name="new_discount" id="new_discount" required min="0" max="50"/>
                    <button class="greenbutton" id="upload-button">Save</button>
                </div>
            </div>
        </form>
        <br>
        <br>
        <h1 class="propertyheadingblue">Current Website Discount</h1>
        <hr>
        <div class="row">
            <div class="col-sm-6">
                <div class="propertylist_table">
                    <table class="table">
                        <thead>
                            <tr>
                                <td scope="col">Current Discount</td>
                                <td scope="col"><%=discount%>%</td>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const uploadButton = document.getElementById('upload-button');
        const uploadForm = document.getElementById('uploadForm');
        //const property_id = document.getElementById('property_id');

        uploadButton.addEventListener('click', async () => {
            if (!uploadForm.checkValidity()) {
                uploadForm.reportValidity();
                return;
            }
            try {
                uploadButton.disabled=true;
                const formData = new FormData(uploadForm);
                // Send formData to backend
                const response = await fetch('/admin/updateDiscount', {
                    method: 'POST',
                    body: formData,
                });
                console.log(response);
                console.log("Status: "+response.success);
                if (!response.ok) {
                    console.log('Failed to update Discount:', response.json());
                    uploadButton.disabled=false;
                    throw new Error('Failed to update Discount');
                }

                const result = await response.json();
                if(result.success){
                    window.location.href = `/admin/settings/${result.flash}`;
                }else{
                    alert(result.error);
                    uploadButton.disabled=false;
                }
            } catch (error) {
                console.error('Error saving statement:', error);
                alert('Failed to upload Statement');
            }
        });
    });
</script>
<%- include("../layout/footer") %>