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

{% block content %}
    <!-- Main content -->
    <section class="content">

        <!-- Default box -->
        <div class="card card-solid">
            <div class="card-header">
                <span class="h3">Total imported : {{ count }}</span>
                    <span style=" float: right; margin-left: 4px;  border-radius: 3px; border: 1px solid #ced4da;">
                        <input  id="searchData" type="text" class="form-control form-control-sm form-control-sidebar" placeholder="Search by seller sku" style="display: inline !important; width: unset ;border: unset;">
                     <button type="button" id="searchBtn" class="btn   btn-sm  btn-add-search " >  <i class="fas fa-search" ></i> </button>
                    </span>
                <button type="button" id="modalCreate" class="btn   btn-sm  btn-add-plan btn-success float-right"    data-toggle="modal" data-target="#modal-add-plan">
                    Add Plann
                </button>
                <button type="button" id="getLastProducts" class="btn   btn-sm mr-1 btn-add-plan btn-warning float-right"  >
                    <i class="fas fa-download" id="importIcon-last"></i>
                    <i class="fas fa-spinner fa-spin mr-2 " id="loadingIcon-last" style="display: none;"></i>
                    Get Last Products (7 Days)
                </button>
            </div>
            <!-- /.card-header -->
            <div class="card-body table-responsive p-0" style="height: 63vh;">
                <table class="table table-head-fixed table-striped"> <!-- text-nowrap -->
                    <thead>
                    <tr>
                        <th>Id</th>
                        <th>Action</th>
                        <th>Date : After</th>
                        <th>Date : Before</th>
                        <th>Status</th>
                        <th>Item Existed</th>
                        <th>Item Founded</th>
                        <th>Item Imported</th>
                        <th>Last ID</th>
                        <th>Created At</th>
                        <th>Updated At</th>
                        <th>Import</th>
                    </tr>
                    </thead>
                    <tbody id="listOfPlans">
                    {%for plan in plans %}
                        {% if plan.action == 'GetProducts' %}
                            {% set background = 'style=background:lightgreen;"' %}
                        {% elseif plan.action == 'SetStock' %}
                            {% set background = 'style=background:#20c997;"' %}
                        {% elseif plan.action == 'SetPrice' %}
                            {% set background = 'style=background:#c9646e;' %}

                        {% endif %}
                        <tr {{ plan.status == true? background : '' }} id="planId-{{ plan.id }}">

                            <td class="text-center">{{ plan.id }}</td>
                            <td class="text-center">{{ plan.action }}</td>
                            <td class="text-center">{{ plan.createdAfter is not null ? plan.createdAfter|date('Y-m-d') }}</td>
                            <td class="text-center">{{ plan.createdBefore is not null ? plan.createdBefore|date('Y-m-d') }}</td>
                            <td class="text-center">
                                {% if plan.action == 'GetProducts' %}
                                {{ plan.status == true? '<span class="badge badge-success">Imported</span>': '<span class="badge badge-warning">Not Yet</span>' }}
                                {% elseif plan.action == 'SetStock' or plan.action == 'SetPrice' %}
                                    {{ plan.status == true? '<span class="badge badge-primary">Updated</span>': '<span class="badge badge-warning">Not Yet</span>' }}
                                {% endif %}
                            </td>
                            <td class="text-center">{{ plan.existed }}</td>
                            <td class="text-center">{{ plan.founded }}</td>
                            <td class="text-center">{{ plan.qty }}</td>
                            <td class="text-center">{{ plan.lastId }}</td>
                            <td class="text-center">{{ plan.createdAt is not null ? plan.createdAt|date }}</td>
                            <td class="text-center">{{ plan.updatedAt is not null ? plan.updatedAt|date }}</td>
                            <td class="text-center">
                                {% if plan.action != 'SetStock' and plan.action != 'SetPrice'  %}
                                    {% if  plan.status == true and ( plan.existed == plan.founded or  plan.founded == plan.qty or  plan.founded == (plan.qty + plan.existed)  )   %}
                                        <button class="btn btn-info  btn-sm "  >
                                            <i class="fas fa-thumbs-up" id="importIcon-{{ plan.id }}"></i>

                                            Imported</button>
                                    {% else %}
                                        <button class="btn btn-info  btn-sm {{ plan.action }}" data-id="{{ plan.id }}" data-action="{{ plan.action }}">
                                            <i class="fas fa-download" id="importIcon-{{ plan.id }}"></i>
                                            <i class="fas fa-spinner fa-spin mr-2 " id="loadingIcon-{{ plan.id }}" style="display: none;"></i>

                                            Import</button>

                                    {% endif %}
                                {% endif %}
                                {% if plan.action == 'SetStock'   %}

                                    <button class="btn btn-default  btn-sm setStockDetails "  data-id="{{ plan.id }}" >  <i class="fas  fa-window-restore" ></i>  Details</button>

                                {% endif %}




                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->

    </section>


    <div class="modal fade " id="modal-add-plan">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-center" id="modalTitle" >Add  Plan </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                {{ form_start(planForm, { 'enctype': 'multipart/form-data' }) }}
                <div class="modal-body">


                    <div class="form-row">
                        <div class="col-md-4 mb-3">
                            <label for="validationTooltip01">Entity</label>
                            {{ form_widget(planForm.entity) }}
                            <div class="valid-tooltip">
                                Looks good!
                            </div>
                        </div>
                        <div class="col-md-8 mb-3">
                            <label for="validationTooltip01">Action</label>
                            {{ form_widget(planForm.action) }}
                            <div class="valid-tooltip">
                                Looks good!
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col-md-6 mb-3">
                            <label for="validationTooltip01">Date : After</label>
                            {{ form_widget(planForm.createdAfter) }}
                            <div class="valid-tooltip">
                                Looks good!
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="validationTooltip02">Date : Before</label>
                            {{ form_widget(planForm.createdBefore) }}
                            <div class="valid-tooltip">
                                Looks good!
                            </div>
                        </div>
                    </div>



                </div>

                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    {{ form_widget(planForm.submit) }}
                </div>
                {{ form_end(planForm) }}
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <div class="modal fade " id="modal-search">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-center" id="modalTitleSearch" >Search : </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                 <div id="searchBody">

                 </div>





            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


    <div class="modal fade " id="modal-details">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title text-center" id="modalTitleDetails" >More Details for plan : <span id="numberOfPlan"></span>  </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div id="detailsBody" style="height: 500px; overflow: auto;">

                </div>





            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

{% endblock %}
 {% block script %}

     <script src="{{ asset('assets/js/jumia/products/script.js?2022' ) }}"></script>


    <script>

        $(document).on('click', '.setStockDetails', function () {
            rowData = $(this);
            var planId = rowData.attr("data-id");
            // $('#modal-details').modal('show');
            //var label = $('#taskLabel-' + orderId).text();
            $.ajax({
                url: '/jumia/plan/get/details/json',
                type: "GET",
                data: {'planId' : planId},
                dataType: "json",
                async: true,
                success: function (data) {
                    if (data.success) {
                        $('#detailsBody').html(data.template);
                        $('#numberOfPlan').html(planId);
                        $('#modal-details').modal('show');
                    } else {
                        toastr.error('An error has occurred when import data for this plan : ' + data.message);
                        if (data.message == 404){
                            toastr.error(data.message);
                            $(location).attr('href','/login');
                        }
                    }


                },
                error: function () {
                    toastr.error('An error has occurred when import This Plan');
                }
            });


        });

    </script>

{% endblock %}