{% extends 'base.html.twig' %}
{% set titleName = "Jumia Price Manager" %}
{% block title %} POWER DATA | {{ titleName }} {% endblock %}
{% block page %}{{ titleName }}{% endblock %}
{% block breadcrumb %} {% if titleName != "Home" %} {{ titleName }} {% endif %} {% endblock %}

{% block content %}
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <!-- /.card-header -->
                        <div class="card-body">
                            <form name="orerForm" method="post" action="">
                                <div class="form-row ">
                                    <div class="form-group col-12 col-md-6">
                                        <label for="admin_create_account_firstname">Sale Start Date</label>
                                        <input type="date" id="SaleStartDate" name="SaleStartDate" required="required" class="form-control" >
                                    </div>
                                    <div class="form-group col-12 col-md-6">
                                        <label for="admin_create_account_firstname">Sale End Date</label>
                                        <input type="date" id="SaleEndDate" name="SaleEndDate" required="required" class="form-control" >
                                    </div>
                                    {% if products|length > 0 %}
                                        <div class="form-group col-12 ">

                                            <label class=" " for="role">
                                            <span>

                                               <div class="dataTables_length" id="example1_length" style="display: inline">
                                                <label for="">
                                                    <select id="selectLength" name="example1_length" aria-controls="example1" class="custom-select custom-select-sm form-control form-control-sm">
                                                        <option  value="10" selected >10</option>
                                                        <option  value="15" >15</option>
                                                        <option value="20">20</option>
                                                        <option value="25">25</option>
                                                        <option value="30">30</option>
                                                    </select>
                                                </label>
                                                </div>

                                            </span>
                                                <span class="textSpan">List of products : {{ products|length }}</span>
                                                <a class="selectAllSpan btn" id="selectAllSpan">
                                                    Select all <input type="checkbox" id="selectAll"  />
                                                </a>
                                            </label>
                                            <style>
                                                .legend{
                                                    margin-right: 2px;
                                                    padding: 2px 5px;
                                                    color: white;
                                                    border-radius: 7px ;
                                                    font-size: 12px;
                                                }
                                            </style>
                                            <div id="productList">
                                                    <h5>
                                                        <span class="legend" style="width: 10%; text-align: center; background: red;  "> BlackList </span>
                                                        <span class="legend" style="width: 10%; text-align: center ;background: #fd7e14"> Qty = 0 </span>
                                                        <span class="legend" style="width: 10%; text-align: center; background: #6f42c1 "> Emplacement </span>

                                                    </h5>
                                                    <h5 class="headerList">
                                                        <span style="width: 40%;text-align: center;">Name</span>
                                                        <span style="width: 10%; text-align: center;  "> J Price </span>
                                                        <span style="width: 10%"> J Sale Price </span>
                                                        <span style="width: 10%"> D Price </span>
                                                        <span style="width: 20%;text-align: center;"> SKU </span>
                                                    </h5>
                                                {% for id,product in products %}

                                                    <div id="productItem-{{ id }}" class="custom-control custom-checkbox productItem">
                                                        <input class="custom-control-input productItemCheckbox" type="checkbox" value="{{ id }}" id="product-{{ id }}" data-id="{{ id }}" name="productList[]" >
                                                        <label class="custom-control-label" for="product-{{ id }}">
                                                            <span style="width: 40%   {{ (product['dolibarrQty'] == 0 ) ? ';background: #fd7e14  ': ''   }} "> {{ product['name'] }}</span>
                                                            <span style="width: 5% ; text-decoration: line-through {{ product['emplacementBlocked'] ? ';background: #6f42c1 ; color: white ': ''   }} "> {{ product['jumiaPrice'] }}</span>
                                                            <span style="width: 5% {{ product['emplacementBlocked'] ? ';background: #6f42c1 ; color: white ': ''   }} "> {{ product['jumiaSalePrice'] }}</span>
                                                            <span style="width: 5%  {{ product['emplacementBlocked'] ? ';background: #6f42c1 ; color: white ': ''   }}     " > {{ product['dolibarrPrice'] }}    </span>
                                                            <span style="width: 20%   {{ (product['sku'] in blackList) ? ';background: red  ': ''   }}  "    > {{ product['sku'] }}</span>
                                                        </label>
                                                    </div>
                                                {% endfor %}
                                                <nav aria-label="Page Navigation">
                                                    <ul id="paginatorUl" class="pagination justify-content-center pagination-sm">
                                                    </ul>
                                                </nav>

                                            </div>
                                        </div>

                                    {% else %}
                                        <div class="form-group col-12">
                                            <h3>No products is available at the moment</h3>
                                        </div>

                                    {% endif %}
                                </div>
                                {% if products|length > 0 %}
                                    <div class="form-group">
                                        <button type="submit" id="config_submit" name="update" value="update"
                                                class="btn btn-primary btn-block btn">Update
                                        </button>
                                    </div>
                                {% endif %}

                            </form>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>


    <style>
        .headerList{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            background: lightslategray;
            border-radius: 7px;
            color: white;
            padding: 3px 0;
        }
        .productItem label span{

        }
        .textSpan{
            margin-left: 10px;
            margin-right: 10px;
        }
        .productItem label{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .selectAllSpan{
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
            padding: 2px 10px;
        }
        .bgSpan{
            border: 1px solid rgba(24,171,172,1);
            background: rgb(10,129,130);
            background: linear-gradient(90deg, rgba(10,129,130,1) 0%, rgba(24,171,172,1) 10%, rgba(16,221,222,0.908000700280112) 68%);
        }
        #paginatorUl{
            justify-content: unset !important;
            position: relative;
            top: 1rem;
        }
        .custom-control.custom-checkbox.productItem {
            border-top: 1px solid #ced4da;
            border-bottom: 1px solid #ced4da;
            border-radius: 0.25rem;
            margin-bottom: 0.5rem;
        }
    </style>

{% endblock %}

{% block script %}
    <script>
        $(document).ready(function(){
            $('#selectAll').on('click',function(){
                $('.productItemCheckbox').each(function(){
                    this.checked = true;
                });

                if(this.checked){
                    $('#selectAllSpan').addClass('bgSpan');
                    $('.productItem').addClass('bgSpan');
                }else{
                    $('.productItemCheckbox').each(function(){
                        this.checked = false;
                    });
                    $('#selectAllSpan').removeClass('bgSpan');
                    $('.productItem').removeClass('bgSpan');
                }
            });
            $('.productItemCheckbox').on('change',function(){

                if ($(this).is(":checked")) {
                    $('#productItem-' + $(this).attr('data-id')).addClass('bgSpan');
                } else {
                    $('#productItem-' + $(this).attr('data-id')).removeClass('bgSpan');
                }
            });


            $('.productItemCheckbox').on('click',function(){

                if($('.productItemCheckbox:checked').length == $('.productItemCheckbox').length){
                    $('#selectAll').prop('checked',true);
                    $('#selectAllSpan').addClass('bgSpan');
                    $('#productItem-'+$(this).attr('data-id')).addClass('bgSpan');
                }else{
                    $('#selectAll').prop('checked',false);
                    $('#selectAllSpan').removeClass('bgSpan');
                    $('#productItem-'+$(this).attr('data-id')).removeClass('bgSpan');
                }
            });
        });
    </script>

    <script src="{{ asset('assets/js/jumia/products/searchAndPagination.js' ) }} "></script>
{% endblock %}