<%- include('partials/header.ejs');%>

    <div class="page-container">
        <div class="content-wrap">
            <%for(let item of foodItem){%>
                <!-- new layout start -->
                <form action="/edit-product/<%=item.id%>?_method=PUT" method="POST" id="edit-form">
                    <div class="row mt-3">
                        <!-- details side -->
                        <div class="col-lg-8 col-12  edit-container">
                            <!-- upper layer -->
                            <div class="row">
                                <div class="col-12 col-sm-4 col-lg-4 order-lg-0 order-1 ">
                                    <img src="/images/<%=item.image%>" alt="" class="item-img align-self-start mx-0">
                                </div>
                                <div class="col-12 col-lg-4 col-sm-4 order-lg-0 order-2 align-self-center d-flex">
                                    <h2 id="editing-header">
                                        Editing <%=item.name%>
                                    </h2>
                                </div>
                                <div class="col-0 col-lg-4">

                                </div>
                            </div>
                            <!-- mid layer -->
                            <div class="row">
                                <div class="col-12 col-lg-6 order-md-0 order-1">
                                    <div class="my-3">
                                        <label for="foodName" class="form-label">Food Name:</label>
                                        <input type="text" class="form-control" id="foodName" value="<%=item.name%>"
                                            onload="setFocusTo('food-name')" name="foodName">
                                    </div>
                                    <div class="mb-3">
                                        <label for="foodQuantity" class="form-label">Food Quantity:</label>
                                        <input type="text" class="form-control" id="foodQuantity"
                                            value="<%=item.quantity%>" name="foodQuantity" readonly>
                                        <div style="text-align: end;" class="mt-4">
                                            <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                                data-bs-target="#quantityUpdate"
                                                onclick="resetUpdateQuantityWizardStepCounter()">
                                                Update Quantity
                                            </button>
                                        </div>
                                    </div>
                                    <div class="mb-3">
                                        <label for="foodComments" class="form-label">Comments:</label>
                                        <textarea class="form-control" id="foodComments" value="<%=item.comments%>"
                                            name="foodComments" rows="4" cols="50"><%=item.comments%></textarea>
                                    </div>
                                </div>
                                <div class="col-12 col-lg-6 mt-5 order-lg-0 order-2">
                                    <div class="row">
                                        <div class="col-6">

                                            <ul class="list-group">
                                                <li class="list-group-item">
                                                    <input class="form-check-input me-1 custom-control-input"
                                                        type="checkbox" value="essential" aria-label="..."
                                                        name="essential" id="essential">
                                                    <label for="essential"
                                                        class="custom-control-label">Essential</label>
                                                </li>
                                                <li class="list-group-item">
                                                    <input class="form-check-input me-1 custom-control-input"
                                                        type="checkbox" value="vegetables" aria-label="..."
                                                        name="vegetables" id="vegetables">
                                                    <label for="vegetables"
                                                        class="custom-control-label">Vegetables</label>

                                                </li>
                                                <li class="list-group-item">
                                                    <input class="form-check-input me-1 custom-control-input"
                                                        type="checkbox" value="fruit" name="fruit" aria-label="..."
                                                        id="fruit">
                                                    <label for="fruit" class="custom-control-label">Fruit</label>

                                                </li>
                                                <li class="list-group-item">
                                                    <input class="form-check-input me-1 custom-control-input"
                                                        type="checkbox" value="meat" name="meat" aria-label="..."
                                                        id="meat">
                                                    <label for="meat" class="custom-control-label">Meat</label>

                                                </li>
                                                <li class="list-group-item">
                                                    <input class="form-check-input me-1 custom-control-input"
                                                        type="checkbox" value="dairy" name="dairy" aria-label="..."
                                                        id="dairy">
                                                    <label for="dairy" class="custom-control-label">Dairy</label>

                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-6">
                                            <ul class="list-group">
                                                <li class="list-group-item">
                                                    <input class="form-check-input me-1 custom-control-input"
                                                        type="checkbox" value="frozen" name="frozen" aria-label="..."
                                                        id="frozen">
                                                    <label for="frozen" class="custom-control-label">Frozen</label>

                                                </li>
                                                <li class="list-group-item">
                                                    <input class="form-check-input me-1 custom-control-input"
                                                        type="checkbox" value="fresh" name="fresh" aria-label="..."
                                                        id="fresh">
                                                    <label for="fresh" class="custom-control-label">Fresh</label>

                                                </li>
                                                <li class="list-group-item">
                                                    <input class="form-check-input me-1 custom-control-input"
                                                        type="checkbox" value="luxury" name="luxury" aria-label="..."
                                                        id="luxury">
                                                    <label for="luxury" class="custom-control-label">Luxury</label>

                                                </li>
                                                <li class="list-group-item">
                                                    <input class="form-check-input me-1 custom-control-input"
                                                        type="checkbox" value="candy" name="candy" aria-label="..."
                                                        id="candy">
                                                    <label for="candy" class="custom-control-label">Candy</label>

                                                </li>
                                                <li class="list-group-item">
                                                    <input class="form-check-input me-1 custom-control-input"
                                                        type="checkbox" value="healthy" name="healthy" aria-label="..."
                                                        id="healthy">
                                                    <label for="healthy" class="custom-control-label">Healthy</label>

                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- lower row - images -->
                            <div class="row">
                                <div class="col-lg-2 col-10 order-lg-0 order-1">
                                    <label for="image-selection" class="mt-2 mb-1">Product Image:</label>

                                </div>
                                <div class="col-lg-10 col-12 d-flex justify-content-center order-2">
                                    <div class="row d-flex-row mb-2 px-0 file-selector-container justify-content-start d-flex-wrap"
                                        id="image-selection">
                                        <% let index=0; for(let file of fileList){%>

                                            <div class="col px-0 image-div">
                                                <%if(file===item.image){%>
                                                    <input type="radio" id="<%=file%>" style="display: none;"
                                                        name="imageChoice" value="<%=file%>" checked />
                                                    <%}else{%>
                                                        <input type="radio" id="<%=file%>" style="display: none;"
                                                            name="imageChoice" value="<%=file%>" />
                                                        <%}%>
                                                            <label for="<%=file%>" class="label-select"><img
                                                                    src="/images/<%=file%>" alt=""
                                                                    class="mini-image"></label>

                                            </div>
                                            <%index++;%>

                                                <%if(index===5){%>
                                                    <!-- wrap to next line -->
                                                    <div class="w-100"></div>
                                                    <%index=0;%>
                                                        <%}%>
                                                            <%}%>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <!-- button side -->
                        <div class="col-lg-3 col-12 order-lg-0 order-2">
                            <div class="row mt-3">
                                <div class="col-12 d-flex justify-content-center align-items-center">
                                    <!-- row upper inner-->
                                    <div class="row">
                                        <div class="col-6 d-flex align-items-center justify-content-center">
                                            <button class="btn btn-danger" onclick="resetURL()" type="button">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"
                                                    fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
                                                    <path
                                                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
                                                </svg>
                                            </button>
                                        </div>
                                        <div class="col-6 d-flex align-items-center justify-content-center">
                                            <button class="btn btn-success ml-1" onclick="submitEditForm()"
                                                type="button">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"
                                                    fill="currentColor" class="bi bi-check-circle-fill"
                                                    viewBox="0 0 16 16">
                                                    <path
                                                        d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-5">
                                <div
                                    class="col-10 col-sm-12 d-flex justify-content-center align-items-center edit-container">
                                    <!-- row lower inner-->
                                    <div class="row">
                                        <div class="col-12">
                                            <p id="expiration-date-title">Expiration Dates</p>
                                            <%if(allPackages.length !=0){%>

                                                <% let index=1; for(let package of allPackages){%>
                                                    <div class="my-3">
                                                        <label for="package<%=index%>" class="form-label">Package
                                                            <%=index%>
                                                                :
                                                        </label>
                                                        <input type="Date" name="packageDates[<%=index%>]"
                                                            id="package-date-<%=index%>"
                                                            value="<%=package.expiration%>">

                                                    </div>
                                                    <% index++;%>
                                                        <%}%>

                                                            <div>
                                                                <input type="text" name="numberOfPackages"
                                                                    id="<%=index%>" value="<%=index%>"
                                                                    style="display: none;">
                                                            </div>


                                                            <%} else{%>
                                                                <p id="noPackagesWarning"> There are no packages for
                                                                    this
                                                                    current
                                                                    Product.
                                                                    Please
                                                                    update
                                                                    the Food Quantity field and try again</p>
                                                                <div>
                                                                    <input type="text" name="numberOfPackages" id="0"
                                                                        value="0" style="display: none;">
                                                                </div>
                                                                <%}%>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </form>
                <!-- new layout end -->



                <%for(let object of tagNameListToBeDisplayed){%>
                    <script>
                        findAndUpdateTagCheckboxes(`<%=object%>`);

                    </script>
                    <%}%>

                        <%}%>

        </div>



        <%- include('partials/quick-actions.ejs');%>
            <%- include('partials/create-new-modal.ejs');%>
                <%- include('partials/update-quantity-modal.ejs');%>
                    <%- include('partials/footer.ejs');%>
    </div>