{{>header}}
<title>Categories</title>
<div class="row p-2" style="margin: 0px !important;">
    <div class="col-md-12">
        <div class="card mt-2">
            <div class="card-header" style="background-color:white; color:#4B0F77;">
                <h4><b>Categories</b></h4>
            </div>
            <div class="card-body p-2">
                <div id="example1_wrapper">
                    <div class="row">
                        <div class="col-sm-12">
                            <ol class="float-sm-right">
                                <button href="" id="" data-bs-toggle="modal" data-bs-target="#addModal"
                                    style="background-color: rgb(0, 0, 0); color:white; border:none; border-radius:5px; width: 180px; height: 40px; "><i
                                        class="fa-solid fa-plus"></i> Add Category</button>
                            </ol>
                        </div>
                        <div class="col-sm-12 table-responsive">
                            <table id="example2" aria-describedby="example1_info">
                                <thead>
                                    <tr>
                                        <th class="sorting" tabindex="0" aria-controls="example1">S.No</th>
                                        <th class="sorting" tabindex="0" aria-controls="example1">Category</th>
                                        <th class="sorting" tabindex="0" aria-controls="example1">Image</th>
                                        <th class="sorting" tabindex="0" aria-controls="example1">Status</th>
                                        <th class="sorting" tabindex="0" aria-controls="example1">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{#each allGroceryCategories}}
                                    <tr class="odd">
                                        <td>{{inc @index}}</td>
                                        <td>{{this.name}}</td>
                                        <td><img class="img-fluid" src="/{{this.picture}}" alt="Category picture"
                                onerror="this.onerror=null;this.src='/admin/images/dummy.png'"></td>
                                        <td>{{this.status}}</td>
                                        <td>
                                            <div class="eye d-flex justify-content-center">
                                                {{!-- <a href="/admin/v1/singlecategory/{{this._id}}"
                                                    class="btn btn-md btn-info m-1">
                                                    <i class="fas fa-eye"></i>
                                                </a> --}}
                                                <a href="javascript:void(0);" data-bs-toggle="modal"
                                                    data-bs-target="#updateModal" class="btn btn-md btn-warning m-1"
                                                    data-id="{{this._id}}" data-name="{{this.name}}"
                                                    data-status="{{this.status}}">
                                                    <i class="fa-solid fa-edit"></i>
                                                </a>
                                                {{!-- <a href="javascript:void(0);" data-bs-toggle="modal"
                                                    data-id="{{this._id}}" data-bs-target="#deleteModal"
                                                    class="btn btn-md btn-danger m-1">
                                                    <i class="fa-solid fa-trash"></i>
                                                </a> --}}
                                            </div>
                                        </td>
                                    </tr>
                                    {{/each}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<div class="modal fade" id="addModal" tabindex="-1" aria-labelledby="addModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 style="color: black; font-weight: bold; font-size: 40px;">Add Category</h5>
            </div>
            <form id="addBanner" action="/admin/v1/addcategory" method="post" enctype="multipart/form-data">
                <div class="modal-body">
                    <label for="name">Category</label><br>
                    <input type="text" class="form-control" name="name" placeholder="Category Name" required
                        minlength="2" maxlength="50" pattern="^(?!\s)(?!.*\s$).{2,50}$" title="Category name must be 2-50 characters and not start or end with spaces.">
                    {{!-- <label for="type">Type</label>
                    <input type="text" readonly class="form-control" name="type" value="grocery"> --}}
                    {{!-- <select name="type" class="form-control" id="typeSelect">
                        <option value="grocery">Grocery</option>
                        <option value="ecommerce">E-commerce</option>
                        <option value="food">Food</option>
                    </select> --}}
                    {{!-- <div id="preferenceDiv">
                        <label for="Preference">Preference</label>
                        <select name="preference" class="form-control">
                            <option value="Inactive">Inactive</option>
                            <option value="Active">Active</option>
                        </select>
                    </div> --}}
                    <label for="picture">Picture</label>
                    <input type="file" class="form-control" id="addCategoryPicture" name="picture" accept=".jpg, .jpeg, .png"
                        required>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Add</button>
                </div>
            </form>
        </div>
    </div>
</div>
{{!--
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const typeSelect = document.getElementById('typeSelect');
        const preferenceDiv = document.getElementById('preferenceDiv');
        function togglePreference() {
            if (typeSelect.value === 'ecommerce') {
                preferenceDiv.style.display = 'block';
            } else {
                preferenceDiv.style.display = 'none';
            }
        }
        togglePreference();
        typeSelect.addEventListener('change', togglePreference);
    });
</script> --}}

{{!-- update --}}
<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 style="color: black; font-weight: bold;">Update Category</h3>
            </div>
            <form id="updateForm" action="/admin/v1/updatecategory/{{this._id}}" method="post"
                enctype="multipart/form-data">
                <div class="modal-body">
                    <label for="Country Name">Category Name</label><br>
                    <input type="text" class="form-control" placeholder="Enter your category" name="name" minlength="2"
                        maxlength="50" pattern="^(?!\s)(?!.*\s$).{2,50}$" title="Category name must be 2-50 characters and not start or end with spaces.">
                    <label for="picture">Picture</label>
                    <input type="file" class="form-control" name="picture" id="updateCategoryPicture" accept=".jpg, .jpeg, .png">
                    <label for="status">Status</label>
                    <select name="status" class="form-control statuses" value="1">
                        <option value="Active">Active</option>
                        <option value="Inactive">Inactive</option>
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success" id="updateButton"
                        style="background-color: rgb(0, 0, 0); color:white">Update</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('#updateModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var modal = $(this);
            var categoryId = button.data('id');
            var name = button.data('name');
            var status = button.data('status');
            modal.find('form').attr('action', '/admin/v1/updatecategory/' + categoryId);
            modal.find('input[name="name"]').val(name);
            $('.statuses').val(status);
        });
    });

</script>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const addPictureInput = document.getElementById("addCategoryPicture");
    const updatePictureInput = document.getElementById("updateCategoryPicture");

    const validImageTypes = ["image/jpeg", "image/png", "image/jpg"];

    function validateFileInput(inputElement) {
      inputElement.addEventListener("change", function () {
        const file = this.files[0];
        if (file && !validImageTypes.includes(file.type)) {
          alert("Only JPG, JPEG, and PNG image formats are allowed.");
          this.value = "";
        }
      });
    }

    if (addPictureInput) {
      validateFileInput(addPictureInput);
    }

    if (updatePictureInput) {
      validateFileInput(updatePictureInput);
    }
  });
</script>

{{!-- delete --}}
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 style="color: black; font-weight: 480;">Are you sure you want to delete this?</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                <a href="/admin/v1/deletecategory/{{this._id}}" type="button" class="btn btn-danger"> yes </a>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('#deleteModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var categoryId = button.data('id');
            var modal = $(this);
            modal.find('a.btn-danger').attr('href', '/admin/v1/deletecategory/' + categoryId);
        });
    });
</script>
{{>footer}}
<script>
    $(document).ready(function () {
        if (!$.fn.DataTable.isDataTable('#example2')) {
            $('#example2').addClass('table table-bordered table-striped').DataTable({
                "paging": true,
            });
        }
    });
</script>

</html>