{% extends 'base.html.twig' %}
{% set titleName = "Jumia Orders" %}
{% 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>
                <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 Plan
                </button>
                <button type="button" id="getLastOrders" 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 Orders (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 %}
                    <tr {{ plan.status == true? 'style="  background: lightgreen;   "': '' }} 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">{{ plan.status == true? '<span class="badge badge-success">Imported</span>': '<span class="badge badge-warning">Not Yet</span>' }}</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.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 %}




                        </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>




{% endblock %}
 {% block script %}

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