{% extends 'base.html.twig' %}
{% set titleName = "Jumia Orders To Dolibarr" %}
{% 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">
                                        <label for="admin_create_account_firstname">Shipper</label>
                                        <input type="text" id="shipper" name="shipper" required="required"
                                               placeholder="Type a shipper" class="form-control" >
                                    </div>
                                    {% if jumiaOrders|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 orders : {{ jumiaOrders|length }}</span>
                                            <a class="selectAllSpan btn" id="selectAllSpan">
                                                Select all <input type="checkbox" id="selectAll"  />
                                            </a>
                                        </label>
                                        <div id="orderList">
                                            {% for order in jumiaOrders %}
                                                <div id="orderItem-{{ order['OrderId'] }}" class="custom-control custom-checkbox orderItem">
                                                    <input class="custom-control-input orderItemCheckbox" type="checkbox" value="{{ order['OrderId'] }}" id="order-{{ order['OrderId'] }}" data-id="{{ order['OrderId'] }}" name="orderList[]" >
                                                    <label class="custom-control-label" for="order-{{ order['OrderId'] }}">
                                                        <span> OrderNumber : {{ order['OrderNumber'] }}</span>
                                                        <span> ItemsCount : {{ order['ItemsCount'] }}</span>
                                                        {# <span> ID : {{ order['OrderId'] }}</span> #}
                                                        <span> {{ order['CustomerFirstName']~' '~order['CustomerLastName'] }}</span>
                                                        <span class="float-right"> Price : {{ order['Price'] }}</span>
                                                    </label>
                                                    {#
                                                    <div>
                                                        {% for items in listOfOrderItemsFromApi[order['OrderId']] %}
                                                        <span>{{ items['Sku'] }}, </span>
                                                        {% endfor %}

                                                    </div>
                                                    #}
                                                </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 order is available at the moment</h3>
                                        </div>

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

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


    <style>
        .textSpan{
            margin-left: 10px;
            margin-right: 10px;
        }
        .orderItem 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.orderItem {
            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(){
                $('.orderItemCheckbox').each(function(){
                    this.checked = true;
                });

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

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


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

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

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