{% extends 'base.html.twig' %}
{% set titleName = "Jumia Ropport 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 : {{ count }}</span>
                {% if 1< 0 %}
                <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="getLastRapportProducts" 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 Rapport
                </button>
                {% endif %}
            </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 class="text-center" >Id</th>
                        <th class="text-center" >Action</th>
                        <th class="text-center" >Status</th>
                        <th class="text-center" >Item Existed</th>
                        <th class="text-center" >Item Founded</th>
                        <th class="text-center" >Item Imported</th>
                        <th class="text-center" >Created At</th>
                        <th class="text-center" >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.status == true? '<span class="badge badge-success">Created</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.createdAt is not null ? plan.createdAt|date }}</td>
                            <td class="text-center">
                                {% if 1 < 0 %}
                                {% 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 %}
                            </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>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>



{% endblock %}
 {% block script %}

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

 {% endblock %}