{% extends 'base.html.twig' %}
{% set titleName = "Products From Dolibarr To Magento" %}
{% block title %} POWER DATA | {{titleName}} {% endblock %}
{% block page %}{{titleName}}{% endblock %}
{% block breadcrumb %} {% if titleName != "Home" %} {{titleName}} {% endif %} {% endblock %}
 {% block css %}
     <!-- Select2 -->
     <link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css' ) }} ">
 {% endblock %}
{% block content %}
    <style>

        .blockEdit{
            pointer-events: none;
            background: rgb(213, 217, 221);
        }
        #item-category-{{ rootCategory }}  .list-group-item {
            padding: 0.35rem 1.25rem ;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 31px;
            right: 6px;
        }
        .select2-container--default .select2-selection--single {
            border: 1px solid #ced4da;
            padding: 0.46875rem 0.75rem;
            height: calc(2.25rem + 2px);
        }
        .select2-container--default .select2-dropdown.select2-dropdown--below {
            border-top: 0;
        }


    </style>
    <section class="content">
        <div class="container-fluid">
            {% for message in app.flashes('success') %}
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ message }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
            {% for message in app.flashes('error') %}
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <strong>{{ message }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            {% endfor %}
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="container-fluid">
            <div class="row">

                <div class="col-md-3" id="item-category-{{ rootCategory }}">
                    <div class="list-group panel">
                        {% for item in dataCategories["id-" ~ rootCategory]["childrenArray"] %}
                            {% if item["childrenArray"]|length > 0  %}
                                <a style="  background: #a57def; color: var(--white);"    href="#item-category-{{ item["id"] }}" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#item-category-{{ rootCategory }}"> {{ item["id"] }} : {{ item["name"] }}  <i class="fa fa-caret-down"></i></a>
                                <div class="collapse" id="item-category-{{ item["id"] }}">
                                         {% for levelTwo in item["childrenArray"] %}
                                             {% if levelTwo["childrenArray"]|length > 0  %}
                                                 <a style="  background: #d3bbff;color: var(--gray);"  href="#item-category-{{ levelTwo["id"] }}" class="list-group-item" data-toggle="collapse" data-parent="#item-category-{{ levelTwo["id"] }}">{{ levelTwo["id"] }} : {{ levelTwo["name"] }} <i class="fa fa-caret-down"></i></a>
                                                 <div class="collapse list-group-submenu" id="item-category-{{ levelTwo["id"] }}">

                                                     {% for levelThree in levelTwo["childrenArray"] %}
                                                         {% if levelThree["childrenArray"]|length > 0  %}
                                                             <a href="#item-category-{{ levelThree["id"] }}" class="list-group-item" data-toggle="collapse" data-parent="#item-category-{{ levelThree["id"] }}">{{ levelThree["id"] }} : {{ levelThree["name"] }} <i class="fa fa-caret-down"></i></a>
                                                             <div class="collapse list-group-submenu list-group-submenu-1" id="item-category-{{ levelThree["id"] }}">
                                                                 <a href="#" class="list-group-item" data-parent="#item-category-{{ levelThree["id"] }}">Sub sub item 1</a>
                                                                 <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 2</a>
                                                             </div>
                                                         {% else %}
                                                             <a href="javascript:;" class="list-group-item" data-parent="#item-category-{{ levelThree["id"] }}"> {{ levelThree["id"] }} : {{ levelThree["name"] }}</a>
                                                         {% endif %}
                                                     {% endfor %}
                                                 </div>
                                             {% else %}
                                                 <a style="  background: #d3bbff;color: var(--gray);"  href="javascript:;" class="list-group-item" data-parent="#item-category-{{ levelTwo["id"] }}"> {{ levelTwo["id"] }} : {{ levelTwo["name"] }}</a>
                                             {% endif %}

                                         {% endfor %}
                                </div>
                            {% else %}
                                <a style="  background:  #a57def; color: var(--white);"  href="javascript:;" class="list-group-item" data-parent="#item-category-{{ rootCategory }}"> {{ item["id"] }} : {{ item["name"] }}</a>
                            {% endif %}
                        {% endfor %}

                       <!--
                            <a href="#demo4" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 4</a>
                            <div class="collapse" id="demo4">
                                <a href="" class="list-group-item">Subitem 1</a>
                                <a href="" class="list-group-item">Subitem 2</a>
                                <a href="" class="list-group-item">Subitem 3</a>
                            </div>
                            <a href="#demo5" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 5</a>
                            <div class="collapse" id="demo5">
                                <a href="#" class="list-group-item">Subitem 1</a>
                                <a href="" class="list-group-item">Subitem 2</a>
                                <a href="" class="list-group-item">Subitem 3</a>
                            </div>
                        -->
                    </div>
                </div>

                <div class="col-md-9 ">

                    <div class="row">
                        <div class="col-md-9">
                            <div class="input-group ">
                                <input type="search" class="form-control " placeholder="Type your SellerSku" id="sellerSkuSearchInJumia">
                                <div class="input-group-append">
                                    <button id="searchFromJumia" type="submit" class="btn btn btn-default">
                                        <i class="fa fa-search"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        {% if marqueOptions is not null %}
                        <div class="col-md-3">
                            <div class="form-group">
                                <select class="form-control select2" style="width: 100%;" id="marqueSelect">
                                    {% for marque in marqueOptions %}
                                        <option value="{{ marque["value"] }}">{{marque["value"]~ " : " ~ marque["label"] }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        {% endif %}
                        <!-- /.col -->
                    </div>
                        <div class=" mt-3" id="productsDetails">
                            <div class="col-md-12 " id="productsDetailsContentsJumia">
                            </div>
                        </div>
                </div>

                {#


                <div class="col-md-2 ">
                    <div id="MainMenu">
                        <div class="list-group panel">
                            <a href="#demo3" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Item 3</a>
                            <div class="collapse" id="demo3">
                                <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Subitem 1 <i class="fa fa-caret-down"></i></a>
                                <div class="collapse list-group-submenu" id="SubMenu1">
                                    <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 1 a</a>
                                    <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 2 b</a>
                                    <a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1">Subitem 3 c <i class="fa fa-caret-down"></i></a>
                                    <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1">
                                        <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 1</a>
                                        <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 2</a>
                                    </div>
                                    <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 4 d</a>
                                </div>
                                <a href="javascript:;" class="list-group-item">Subitem 2</a>
                                <a href="javascript:;" class="list-group-item">Subitem 3</a>
                            </div>
                            <a href="#demo4" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 4</a>
                            <div class="collapse" id="demo4">
                                <a href="" class="list-group-item">Subitem 1</a>
                                <a href="" class="list-group-item">Subitem 2</a>
                                <a href="" class="list-group-item">Subitem 3</a>
                            </div>
                            <a href="#demo5" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 5</a>
                            <div class="collapse" id="demo5">
                                <a href="#" class="list-group-item">Subitem 1</a>
                                <a href="" class="list-group-item">Subitem 2</a>
                                <a href="" class="list-group-item">Subitem 3</a>
                            </div>
                        </div>
                    </div>
                </div>
                #}
            </div>


        </div>
    </section>





{% endblock %}


{% block script %}
    <!-- Select2 -->
    <script src="{{ asset('assets/plugins/select2/js/select2.full.min.js' ) }} "></script>
    <script>
        $('.select2 option:first-child').html('Please choice one');
    </script>

    <script>
        $(function () {
            $('.select2').select2()
        });
    </script>


    <script>
        $(document).on('click', '#searchFromJumia', function(event){
            var sellerSku =  $('#sellerSkuSearchInJumia').val().replace(' ','').trim();
            $('#sellerSkuSearchInJumia').val(sellerSku);
            if (sellerSku.length < 15){
                toastr.error('Please check your Seller SKU');
                return null ;
            }
               // $('#sellerSkuSearchInJumia').val('');
                $("#marqueSelect").val('').trigger('change') ;
                $('#productsDetailsContentsJumia').html('<h2 class="text-center"> Data is loading  <i class="fas fa-spinner fa-spin mr-2 " ></i> </h2>');

                $.ajax({
                    url: '/get/product/from/dolibarr/by/seller_sku/json',
                    type: "POST",
                    data: {'sellerSku' : sellerSku},
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        // console.log(data);
                        if (data.success) {
                            $('#productsDetailsContentsJumia').html(data.template);
                        } else {

                            $('#productsDetailsContentsJumia').html('<h2 class="text-center"> SellerSku Not Found ! </h2>');
                            if (data.message == 404){
                                toastr.error(data.message);
                                $(location).attr('href','/login');
                            }
                        }


                    },
                    error: function (data) {
                        $('#productsDetailsContentsJumia').html('');
                         toastr.error('An error has occurred when getting This Product');
                    }
                });

        });

        $(document).on('keypress submit', '#sellerSkuSearchInJumia', function(event){
            console.log('Code Enter Search'+event.keyCode);
            var sellerSku =  $('#sellerSkuSearchInJumia').val().replace(' ','').trim();
            $('#sellerSkuSearchInJumia').val(sellerSku);
            $("#marqueSelect").val('').trigger('change') ;

            if(event.keyCode === 13 ){
                if (  sellerSku.length < 15){
                    toastr.error('Please check your Seller SKU');
                    return null ;
                }
                //$('#sellerSkuSearchInJumia').val('');
                $('#productsDetailsContentsJumia').html('<h2 class="text-center"> Data is loading  <i class="fas fa-spinner fa-spin mr-2 " ></i> </h2>');

                $.ajax({
                    url: '/get/product/from/dolibarr/by/seller_sku/json',
                    type: "POST",
                    data: {'sellerSku' : sellerSku},
                    dataType: "json",
                    async: true,
                    success: function (data) {
                        if (data.success) {
                            $('#productsDetailsContentsJumia').html(data.template);
                        } else {

                            $('#productsDetailsContentsJumia').html('<h2 class="text-center"> SellerSku Not Found ! </h2>');
                            if (data.message == 404){
                                toastr.error(data.message);
                                $(location).attr('href','/login');
                            }
                        }


                    },
                    error: function (data) {

                        $('#productsDetailsContentsJumia').html('');
                         toastr.error('An error has occurred when getting This Product');
                    }
                });



            }

        });


        $(document).on('click', '#btn-add-to-magento', function(event){
            var sellerSku = $('#btn-add-to-magento').attr('data-seller-sku') ;
            var price =  $('#priceInput').val().replace(' ','').trim();
          //  var salePrice =  $('#salePriceInput').val().replace(' ','').trim();
            var categories =  $('#categoriesInput').val().replace(' ','').trim();
            var marque =  $('#marqueInput').val();
            if (categories.length < 1 || price.length < 1){
                toastr.error('Please check your data input');
                return null ;
            }



            $('#btn-add-to-magento').html('<i class="fas fa-spinner fa-spin mr-2 " ></i> Product creation processing ');
            $.ajax({
                url: '/magento/products/process/create',
                type: "POST",
                data: {'sellerSku' : sellerSku,
                    'price' : price,
                    //'salePrice' : salePrice,
                    'categories' : categories ,
                    'marque' : marque ,
                    'dataCategoriesIds' : {{ dataCategoriesIds|json_encode }}
                },
                dataType: "json",
                async: true,
                success: function (data) {
                    if (data.success) {
                        $("#marqueSelect").val('').trigger('change') ;
                        toastr.success(data.message);
                        $('#productsDetailsContentsJumia').html('');

                    } else {

                        $("#marqueSelect").val('').trigger('change') ;
                        toastr.error(data.message);
                        $('#productsDetailsContentsJumia').html('');
                        if (data.message == 404){
                            toastr.error(data.message);
                            $(location).attr('href','/login');
                        }
                    }


                },
                error: function (data) {
                    $("#marqueSelect").val('').trigger('change') ;
                    $('#productsDetailsContentsJumia').html('');
                    toastr.error('An error has occurred when getting This Product');
                }
            });

        });
    </script>

    <script>
        $(document).on('click','.product-image-thumb', function () {
                 console.log(4250);
                var $image_element = $(this).find('img')
                $('.product-image').prop('src', $image_element.attr('src'))
                $('.product-image-thumb.active').removeClass('active')
                $(this).addClass('active')
            });
    </script>


    <script>
        $(document).on('change','#marqueSelect', function () {
            var   marqueValue = $('#marqueSelect').find('option:selected').val();
            $('#marqueInput').val(marqueValue);
        });
    </script>

{% endblock %}