<!DOCTYPE html>
<html
        xmlns:th="http:/www.thymeleaf.org"
        xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
        lang="en">

<head  th:replace="fragments/header::headerLink">
</head>

<body>
<div>
    <div class="container" th:fragment="table">
        <!-- Begin Page Content -->
        <div class="container-fluid" >
            <div>
                <!-- Page Heading -->

            </div>
            <!-- DataTales Example -->
            <div class="card shadow mb-4">

                <div class="card-body">
                    <p th:text="${message}" th:if="${message ne null}" class="alert alert-primary"></p>
                    <button type="button"  class="btn btn-success" data-toggle="modal" data-target="#myModal" style="margin-bottom: 10px;">
                        <i class="far fa-edit mr-2"></i>
                        Add product
                    </button>
                    <!-- Modal -->
                    <div class="modal fade" id="myModal" role="dialog">
                        <div class="modal-dialog">

                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title">Product</h4>
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>
                                <div class="modal-body">
                                    <form class="user" id="frmProductAdd" th:action="@{/admin/product/add}" th:object="${product}" enctype="multipart/form-data"  method="POST">
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="name" name="name" placeholder="Product..." required pattern="[A-Za-z]">
                                        </div>
                                        <div class="form-group">
                                            <input type="text" class="form-control" id="price" name="price" placeholder="Price"  required pattern="[0-9]+(\.[0-9]{1,2})?%?">
                                        </div>
                                        <select class="form-control" name="color" required>
                                            <option>Black</option>
                                            <option>Red</option>
                                            <option>Green</option>
                                        </select>
                                        <label for="comment"></label>
                                        <div class="custom-file">
                                            <input type="file" class="custom-file-input" id="customFile" name="file">
                                            <label class="custom-file-label" for="customFile">Choose file</label>
                                        </div>
                                        <label for="comment"></label>
                                        <div class="form-group">
                                            <textarea class="form-control" rows="3" id="comment" name="des"></textarea>
                                        </div>
                                        <button class="btn btn-primary" type="submit" onclick="check()">Save</button>
                                    </form>

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Modal -->
                    <div class="table-responsive">
                        <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Price</th>
                                <th>Color</th>
                                <th>Description</th>
                                <th>Image</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Price</th>
                                <th>Color</th>
                                <th>Description</th>
                                <th>Image</th>
                                <th>Action</th>
                            </tr>
                            </tfoot>
                            <tbody>
                            <tr th:each="food:${products}">
                                <td th:text="${food.id}"></td>
                                <td th:text="${food.name}"></td>
                                <td th:text="${food.price}"></td>
                                <td th:text="${food.color}"></td>
                                <td th:text="${food.des}"></td>
                                <td>
                                    <img th:src="'/img/'+${food.img}" alt="" class="img-rounded" style="width: 100px; height: 100px;">
                                </td>
                                <!-- Modal -->
                                <div class="modal fade" th:id="${'my'+food.id}" role="dialog">
                                    <div class="modal-dialog">

                                        <!-- Modal content-->
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h4 class="modal-title">Product</h4>
                                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                            </div>
                                            <div class="modal-body">
                                                <form class="user" id="frmFoodEdit" th:action="@{/admin/product/update}" th:object="${product}" th:method="POST" enctype="multipart/form-data">
                                                    <div class="form-group" th:id="${'food'+food.id}">
                                                        <input type="text" class="form-control" th:value="${food.id}"  id="foodid" name="id"  placeholder="Price">
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" th:value="${food.name}"  id="name" name="name"  placeholder="Price" required >
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control " th:value="${food.price}"  id="price" name="Price" placeholder="Price" required pattern="[0-9]+(\.[0-9]{1,2})?%?">
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="text" class="form-control" th:value="${food.color}"  id="color" name="color" placeholder="Price">
                                                    </div>
                                                    <label for="comment"></label>
                                                    <div class="custom-file" th:id="${'updateFile'+food.id}">
                                                        <input type="file" class="custom-file-input" id="customFile" name="file">
                                                        <label class="custom-file-label" for="customFile">Choose file</label>
                                                    </div>
                                                    <label for="comment"></label>
                                                    <div class="form-group">
                                                        <textarea class="form-control" rows="3" id="comment" name="des" th:value="${food.des}"></textarea>
                                                    <button class="btn btn-primary" type="submit">Update</button>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                                <!-- Modal -->
                                <td>
                                    <button type="button"  class="btn btn-primary" data-toggle="modal"  th:id="${'btn'+ food.id}" th:onclick="'popup('+${food.id}+')'">
                                        <i class="far fa-edit mr-2"></i>
                                        Update
                                    </button>

                                    <button type="button" class="btn btn-danger" th:id="${'btndelete'+ food.id}" th:onclick="'deleteFood('+${food.id}+')'">
                                        <i class="fas fa-trash-alt mr-2"></i>
                                        Delete
                                    </button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
        <!-- /.container-fluid -->
    </div>
    <!-- End of Main Content -->

    <!--    Java Script-->
    <script>
        function popup(id){
            document.getElementById("food"+id).style.display="none";
            var btn=document.getElementById("btn"+id);
            var file=document.getElementById("updateFile"+id);
            btn.dataset.target="#my"+id;

        }
        function deleteFood(id){
            window.location.replace("/admin/product/delete/"+id+"");
        }
    </script>

    <!--    jQuery-->
    <script>
        $(".custom-file-input").on("change", function() {
        var fileName = $(this).val().split("\\").pop();
        $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
        });
    </script>

    <!-- Footer -->
    <div th:replace="fragments/footer::footer"></div>

    <!-- Footer -->
</div>
</body>

</html>
