{% extends 'base_admin.html.twig' %}
{% block body %}
    <div class="breadcrumb-holder">
        <div class="container-fluid">
            <ul class="breadcrumb">

                <li class="breadcrumb-item active">{{ title }}</li>
            </ul>
        </div>
    </div>
    <br/>
    <div class="container-fluid">
        {% for message in app.flashes('notice') %}
            <div class="alert alert-success" role="alert">
                {{ message }}
            </div>
        {% endfor %}
        {% for message in app.flashes('error') %}
            <div class="alert alert-danger" role="alert">
                {{ message }}
            </div>
        {% endfor %}
        {% if is_granted('product_new') %}
        <a href="{{ path('product_new') }}" class="btn btn-primary"><span class="fa fa-plus"></span> Add product</a>
        {% endif %}
        <a class="btn btn-primary" style="color: white" id="btnExportProduct"><span class="fa fa-file-excel"></span> Export Products</a>
        {% if is_granted('product_import_locations') %}
        <a href="{{ path('product_import_locations') }}" class="btn btn-primary"><span class="fa fa-file-excel"></span> Import locations</a>
        {% endif %}
        <br/>
        <br/>
        <div class="row">
            <div class="col-md-4">
                <form action="" method="get">
                    <div class="input-group mb-3">
                        <input type="text" name="search_product" class="form-control" value="{{ searchString }}" placeholder="Enter a search string..." aria-label="Enter a search string..." aria-describedby="basic-addon2">
                        <div class="input-group-append">
                            <input type="submit"  class="btn btn-outline-secondary" value="Search">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="table-responsive">
                    <table class="table table-hover table-bordered">
                        <thead>
                        <tr>
                            <th>Imported?</th>
                            <th><span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('seller') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Seller', 'seller') }}</th>
                            <th><span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('sku') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Sku', 'sku') }}</th>
                            <th><span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('fnSku') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Fn Sku', 'fnSku') }}</th>
                            <th><span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('name') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Name', 'name') }}</th>
                            <th><span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('cost') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Cost', 'cost') }}</th>
                            <th><span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('weight') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Weight', 'weight') }}</th>
                            <th><span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('barcode') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Barcode', 'barcode') }}</th>
                            <th><span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('stock') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Stock', 'stock') }}</th>
                            <th><span class="sort fa fa-sort{{ pagination.getDirection() and pagination.isSorted('isBaseProduct') ? '-'~pagination.getDirection() : '' }}"></span>{{ knp_pagination_sortable(pagination, 'Basic product?', 'isBaseProduct') }}</th>
                            <th class="text-center">Actions</th>
                        </tr>
                        </thead>
                        {% if pagination|length > 0 %}
                            {% for product in pagination %}
                                <tr class="productId" data-id="{{ product.id }}">
                                    {% if product.importHistory %}
                                        <td>Yes</td>
                                    {% else %}
                                        <td>No</td>
                                    {% endif %}
                                    <td>{{ product.seller.company }}</td>
                                    <td>{{ product.sku }}</td>
                                    <td>{{ product.fnSku }}</td>
                                    <td>{{ product.name }}</td>
                                    <td>{{ product.cost }}</td>
                                    <td>{{ product.weight }}</td>
                                    <td>{{ product.barcode }}</td>
                                    <td>{{ product.stock }}</td>
                                    <td class="text-center"><span class="fa {{ product.isBaseProduct ? 'fa-check text-success' : 'fa-times text-danger' }}"></span></td>
                                    <td class="text-center">
                                        {% if is_granted('product_view') %}
                                            <a href="{{ path('product_view', {'id':product.id}) }}" class="fa fa-eye fa-lg text-info" data-toggle="tooltip" data-placement="top" title="View product"></a>
                                        {% endif %}
                                        {% if is_granted('product_update') %}
                                        <a href="{{ path('product_update', {'id':product.id, 'referer': 'product_list_not_imported'}) }}" class="fa fa-pencil-alt fa-lg" data-toggle="tooltip" data-placement="top" title="Edit product"></a>
                                        {% endif %}
                                        {% if is_granted('product_delete') %}
                                        <a href="#" class="fa fa-trash text-danger fa-lg" data-toggle="tooltip" data-placement="top" title="Delete product" onclick="deleteConfirmProduct('{{ product.name }}', '{{ product.id }}');"></a></td>
                                        {% endif %}
                                </tr>
                            {% endfor %}
                        {% else %}
                            <tr>
                                <td colspan="9">No products found</td>
                            </tr>
                        {% endif %}
                    </table>
                </div>
                <div class="navigation">
                    {{ knp_pagination_render(pagination) }}
                </div>
            </div>
        </div>
    </div>
    <form method="post" id="deleteFormProduct" action="{{ path('product_delete') }}">
        <input type="hidden" name="id" id="id_product_product"/>
    </form>
    <div class="modal fade" id="exportProductModal" tabindex="-1" role="dialog" aria-labelledby="exportProductModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exportProductModalLabel">Export Products</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="exportProductModalContainer">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group" style="margin-bottom: 1px;">
                                    <select class="form-control form-control-sm" id="sellerSelect">
                                        <option value="">Select seller</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group" style="margin-bottom: 1px;">
                                    <select class="form-control form-control-sm" id="reportType">
                                        <option value="">Select report</option>
                                        <option value="all">All</option>
                                        <option value="sku_location">Location</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success" id="btnConfirm">Confirm</button>
                </div>
            </div>
        </div>
    </div>
    <div class="js-routes" data-seller-list-route="{{ path('seller_list') }}" data-export-product-route="{{ path('export_product_data') }}">
{% endblock %}
{% block javascripts %}
    <script>
        $(document).ready(function () {
            loadSellers();
        });
        function deleteConfirmProduct(product, id) {
            var r = confirm("Are you sure to delete <" + product + ">?");
            if (r == true) {
                $("#id_product_product").val(id);
                $("#deleteFormProduct").submit();
            }
        }
        function loadSellers() {
            $.ajax({
                url: $(".js-routes").data().sellerListRoute,
                type: "GET",
                success: function (data) {
                    debugger
                    var sellers = data
                    let sellerSelect = document.querySelector("#sellerSelect");
                    sellers.forEach(seller => {
                            let option = document.createElement("option");
                            option.textContent = seller.id + "-" + seller.company;
                            option.setAttribute('value', seller.id)
                            sellerSelect.append(option);
                        }
                    )
                }
            })
        }
        $('body').on("click", "#btnExportProduct", function () {
            $('#exportProductModal').modal({backdrop: "static", keyboard: false});
        })

        $('body').on("click", "#btnConfirm", function () {
             let seller = $('#sellerSelect').val();
             let reportTypeSelected = $('#reportType').val();
             let exportRoute = $(".js-routes").data("export-product-route") + "?seller=" + seller + "&reportType=" + reportTypeSelected;
             location.href = exportRoute;
        })
    </script>
{% endblock %}