{% extends 'backend/partial/base.html.twig' %}
{% block content %}
    <link href="{{ asset('backend_assets/assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ asset('backend_assets/assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />

    <link href="{{ asset('backend_assets/assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet"
          type="text/css" />
    <link href="{{ asset('backend_assets/assets/libs/toastr/toastr.min.css') }}" rel="stylesheet" type="text/css" />
    <div class="page-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">Products</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="javascript: void(0);">Products & Category
                                    </a></li>
                                <li class="breadcrumb-item active">Products</li>
                            </ol>
                        </div>

                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">

                            <h4 class="card-title">Products</h4>

                            <table id="datatable-buttons" class="table table-bordered dt-responsive nowrap w-100">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Category Name</th>
                                    <th>Supplier Name</th>
                                    <th>Price</th>
                                    <th>Action</th>
                                </tr>
                                </thead>


                                <tbody>
                                {% for product in products %}
                                    {# @var product \App\Entity\Products #}
                                <tr>
                                    <td>{{ product.id }}</td>
                                    <td>{{ product.name }}</td>
                                    <td>{{ product.category.name }}</td>
                                    <td>{{ product.supplierName }}</td>
                                    <td>{{ product.price }}$</td>
                                    <td><a class="btnremove btn" data-url="{{ path('app_admin_delete_product',{'id': product.id }) }}"
                                           data-csrf="{{ csrf_token('productdel') }}"><i
                                                    class="mdi mdi-trash-can font-size-16 text-danger me-1"></i>
                                            Delete</a></td>
                                </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
{% block javascript %}
{{ parent() }}
<script src="{{ asset('backend_assets/assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('backend_assets/assets/libs/datatables.net-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('backend_assets/assets/libs/datatables.net-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('backend_assets/assets/libs/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('backend_assets/assets/libs/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('backend_assets/assets/libs/pdfmake/build/pdfmake.min.js') }}"></script>
<script src="{{ asset('backend_assets/assets/libs/pdfmake/build/vfs_fonts.js') }}"></script>
<script src="{{ asset('backend_assets/assets/libs/datatables.net-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('backend_assets/assets/libs/datatables.net-buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('backend_assets/assets/libs/datatables.net-buttons/js/buttons.colVis.min.js') }}"></script>

<script src="{{ asset('backend_assets/assets/libs/datatables.net-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('backend_assets/assets/libs/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') }}"></script>
  <script src="{{ asset('backend_assets/assets/libs/toastr/toastr.js') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
      $('body').on('click', '.btnremove', function (event) {
                event.preventDefault();
                  event.stopImmediatePropagation();
                  if (confirm('Are you sure you want to delete this product?')){
                var csrf = $(event.target).data('csrf');
                var url = $(event.target).data('url');
                $.ajax({
                    type: 'GET',
                    url: url,
                    dataType: 'json',
                    headers: {"X-CSRF-TOKEN": csrf},
                    cache: false,
                    success: function (response) {

                        if (response.status === true) {
                            toastr["success"](response.message, "Success!")
                            toastr.options = {
                                "closeButton": false,
                                "debug": false,
                                "newestOnTop": true,
                                "progressBar": false,
                                "positionClass": "toast-top-right",
                                "preventDuplicates": true,
                                "onclick": null,
                                "showDuration": 300,
                                "hideDuration": 1000,
                                "timeOut": 1000,
                                "extendedTimeOut": 1000,
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            }
                      window.setTimeout(function () {
                                window.location.reload();
                            }, 1500);
                        } else if (response.status === false) {
                            toastr["error"](response.message, "Error!")
                            toastr.options = {
                                "closeButton": false,
                                "debug": false,
                                "newestOnTop": true,
                                "progressBar": false,
                                "positionClass": "toast-top-right",
                                "preventDuplicates": true,
                                "onclick": null,
                                "showDuration": 300,
                                "hideDuration": 1000,
                                "timeOut": 1000,
                                "extendedTimeOut": 1000,
                                "showEasing": "swing",
                                "hideEasing": "linear",
                                "showMethod": "fadeIn",
                                "hideMethod": "fadeOut"
                            }
                            window.setTimeout(function () {
                                window.location.reload();
                            }, 1500);
                        }
                    }
                });
                  }

            });
    var table = $('#datatable-buttons').DataTable({
        lengthChange: false,
        bDestroy: true,
        buttons: ['copy', 'excel', 'pdf', 'colvis']
    });

    table.buttons().container()
        .appendTo('#datatable-buttons_wrapper .col-md-6:eq(0)');

    $(".dataTables_length select").addClass('form-select form-select-sm');
});
</script>
{% endblock %}



{% endblock %}