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

 {% block css %}

     <!-- daterange picker -->
     <link rel="stylesheet" href="{{ asset('assets/plugins/daterangepicker/daterangepicker.css' ) }} ">
     <!-- Select2 -->
     <link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css' ) }} ">
     <link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css' ) }} ">


 {% endblock %}
{% block content %}
    <!-- Main content -->
    <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>
        <!-- Default box -->
        <div class="card card-solid">
            <div class="card-header">
                <span class="h3">Total : {{ count }}</span>
                <a target="_blank" rel="noopener, noreferrer" class="btn  float-right btn-warning btn-sm mr-2 " href="{{ path("app_dolibarr_invoices_borders") }}">
                    <i class="fas fa-external-link-alt"> </i> List Of Borders
                </a>
                <button   type="button" class="btn mr-1 float-right btn-success btn-sm " data-toggle="modal" data-target="#modal-payed-border"> <!-- data-toggle="modal" data-target="#modal-add-order" -->
                    <i class="fas fa-columns"></i> Pay per Border
                </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  class="text-center">Id</th>
                        <th class="text-center">Type</th>
                        <th class="text-center">Lot °</th>
                        <th class="text-center">Number of invoices</th>
                        <th class="text-center">Created At</th>
                        <th class="text-center d-none">UpdatedAt At</th>
                        <th class="text-center">Action</th>
                    </tr>
                    </thead>
                    <tbody id="listOfPlans">
                    {%for invoice in lot %}
                        {% if invoice.action == constant('App\\Entity\\Dolibarr\\DolibarrJumiaInvoice::ACTION_INVOICE_JUMIA_DROPSHIPPING') %}
                            {% set background = 'style=background:#fd7e14ad;' %}
                        {% elseif invoice.action == constant('App\\Entity\\Dolibarr\\DolibarrJumiaInvoice::ACTION_INVOICE_JUMIA_WAREHOUSE') %}
                            {% set background = 'style=background:#17a2b8;' %}
                        {% elseif invoice.action == constant('App\\Entity\\Dolibarr\\DolibarrJumiaInvoice::ACTION_INVOICE_FIRST') %}
                            {% set background = 'style=background:#20c997;' %}
                        {% elseif invoice.action == constant('App\\Entity\\Dolibarr\\DolibarrJumiaInvoice::ACTION_INVOICE_TUNISIA_EXPRESS') %}
                            {% set background = 'style=background:#dc3545;' %}
                        {% elseif invoice.action == constant('App\\Entity\\Dolibarr\\DolibarrJumiaInvoice::ACTION_INVOICE_JAX') %}
                            {% set background = 'style=background:#9377c7;' %}

                        {% endif %}
                        <tr {{ background }} id="planId-{{ invoice.id }}">

                            <td class="text-center">{{ invoice.id }}</td>
                            <td class="text-center">{{ invoice.action }}</td>
                            <td class="text-center">{{ invoice.numberOfLot }}</td>
                            <td class="text-center">{{ invoice.listOfInvoiceIdCreated|length }}</td>
                            <td class="text-center">{{ invoice.createdAt is not null ? invoice.createdAt|date }}</td>
                            <td class="text-center  d-none ">{{ invoice.updatedAt is not null ? invoice.updatedAt|date }}</td>
                            <td class="text-center">
                                <button class="btn btn-default  btn-sm invoicesDetails " data-id="{{ invoice.id }}" data-lot="{{ invoice.numberOfLot }}">  <i class="fas  fa-window-restore"></i>  Details</button>
                                {% if invoice.status  == constant('App\\Entity\\Dolibarr\\DolibarrJumiaInvoice::STATUS_NOT_PAYED') and invoice.listOfInvoiceIdCreated|length > 0 %}
                                <button class="btn btn-secondary  btn-sm payedLot " data-id="{{ invoice.id }}" data-lot="{{ invoice.numberOfLot }}" data-lot-type="{{ invoice.action }}">  <i class="fas  fa-file-signature"></i> Payed</button>
                                {% endif %}
                                {% if invoice.listOfInvoiceIdCreated|length == 0  %}
                                <a class="btn btn-danger btn-sm " href="{{ path('app_dolibarr_invoice_delete',{'id': invoice.id })}} " onclick="return confirm('confirm DELETE');">
                                    <i class="fas fa-trash">
                                    </i>
                                    Delete
                                </a>
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->

    </section>


    <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 Lot : <span id="lot"></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>

    <div class="modal fade " id="modal-payed-lot">
        <div class="modal-dialog modal-m">
            <div class="modal-content">
                <div class="modal-header" id="modal-payed-lot-header">
                    <h4 class="modal-title text-center" id="modalTitleDetails" >Payment Lot : <span id="lot-payment"></span>  </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ path('app_dolibarr_invoice_payed') }}" method="post" id="form-payed-lot" >
                    <div class="card-body">

                        <div class="form-row ">
                            <div class="form-group col-12 ">
                                <label for="bank_account">Bank Account</label>
                                <select class="form-control" name="bank_account" id="bank_account" required>
                                    <option value="">Please choice one</option>
                                    {% for account in dataAccounts %}
                                        <option data-type="{{ account.id }}" value="{{ account.id }}" >{{ account.label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group col-12 ">
                                <label for="payment_type">Payment Type</label>
                                <select class="form-control" name="payment_type" id="payment_type" required>
                                    <option value="">Please choice one</option>
                                    {% for paymentType in dataPaymentTypes %}
                                        <option data-type="{{ paymentType.id }}" value="{{ paymentType.id }}" >{{ paymentType.label }} [ {{ paymentType.code }} ]</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group col-12 ">
                                <label >Source </label>
                                <input type="text"  name="source" class="form-control"  placeholder="(Chèque/Virement N°)" >
                            </div>
                            <div class="form-group col-12 d-none">
                                <input type="text" name="lot_id" id="lot_id" value="5" height=""  >
                            </div>
                        </div>

                    </div>
                    <!-- /.card-body -->
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit" id="payed_lot_action" name="payed_lot_action" class="action-button-previous finish bg-teal float-right btn" style="">Payed this Lot</button>
                    </div>
                </form>


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

    <div class="modal fade " id="modal-payed-border">
        <div class="modal-dialog modal-m">
            <div class="modal-content">
                <div class="modal-header" id="modal-payed-lot-header">
                    <h4 class="modal-title text-center"   >Payment By Border  </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="{{ path('app_dolibarr_invoice_paye_by_border') }}" method="post" id="form-payed-border" >
                    <div class="card-body">

                        <div class="form-row ">
                            <div class="col-12 ">
                                <label>Date interval</label>
                                <div class="input-group">
                                    <div class="input-group-prepend">   <span class="input-group-text">   <i class="far fa-calendar-alt"></i>  </span>  </div>
                                    <input type="text" class="form-control float-right" name="border-date-interval" id="border-date-interval"   required  placeholder="Date range">
                                </div>
                            </div>
                            <div class="form-group col-12 ">
                                <label for="bank_account">Type</label>
                                <select class="form-control" name="border_action_type" id="border_action_type" required>
                                    <option value="">Please choice one</option>
                                    {% for action in arrayOfAction %}
                                        <option   value="{{ action }}" >{{ action }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group col-12 ">
                                <label for="bank_account">Bank Account</label>
                                <select class="form-control" name="border_bank_account" id="border_bank_account" required>
                                    <option value="">Please choice one</option>
                                    {% for account in dataAccounts %}
                                        <option data-type="{{ account.id }}" value="{{ account.id }}" >{{ account.label }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group col-12 ">
                                <label for="payment_type">Payment Type</label>
                                <select class="form-control" name="border_payment_type" id="border_payment_type" required>
                                    <option value="">Please choice one</option>
                                    {% for paymentType in dataPaymentTypes %}
                                        <option data-type="{{ paymentType.id }}" value="{{ paymentType.id }}" >{{ paymentType.label }} [ {{ paymentType.code }} ]</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="form-group col-12 ">
                                <label >Source </label>
                                <input type="text"  name="border_source" class="form-control"  placeholder="(Chèque/Virement N°)" required>
                            </div>
                            <div class="form-group col-12 ">
                                <label for="border_reference_list">Reference List</label>
                                <textarea id="border_reference_list" name="border_reference_list" class="form-control" placeholder="TAT809768012312,TAT809768012312..." required></textarea>

                            </div>
                        </div>

                    </div>
                    <!-- /.card-body -->
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button type="submit"   name="payed_lot_action_border" class="action-button-previous finish bg-teal float-right btn" style="">Payed this list</button>
                    </div>
                </form>


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

{% endblock %}
 {% block script %}    <!-- Select2 -->
     <script src="{{ asset('assets/plugins/select2/js/select2.full.min.js' ) }} "></script>
     <!-- date-range-picker -->
     <script src="{{ asset('assets/plugins/daterangepicker/daterangepicker.js' ) }} "></script>
     <script src="{{ asset('assets/plugins/chart.js/Chart.min.js' ) }} "></script>
     <script>
         $(function () {
             $('.select2').select2()
             /* bug display none Select shipper then option*/
             $(".select2 option[data-status='0']").prop("disabled", true);

             //Initialize Select2 Elements
             $('.select2bs4').select2({
                 theme: 'bootstrap4'
             })

             //Date range picker
             $('#border-date-interval').daterangepicker({
                 autoUpdateInput: false,
                 locale: {
                     format: 'YYYY-MM-DD',
                     cancelLabel: 'Clear'
                 }
             })
             $('#border-date-interval').on('apply.daterangepicker', function(ev, picker) {
                 $(this).val(picker.startDate.format('YYYY-MM-DD') + ' => ' + picker.endDate.format('YYYY-MM-DD'));
             });

             $('#border-date-interval').on('cancel.daterangepicker', function(ev, picker) {
                 $(this).val('');
             });

             $("input[data-bootstrap-switch]").each(function(){
                 $(this).bootstrapSwitch('state', $(this).prop('checked'));
             })
         });
     </script>

     <script>

         $(document).on('click', '.invoicesDetails', function () {
             rowData = $(this);
             var invoiceId = rowData.attr("data-id");
             var lot = rowData.attr("data-lot");
             // $('#modal-details').modal('show');
             //var label = $('#taskLabel-' + orderId).text();
             $.ajax({
                 url: '/dolibarr/invoice/get/details/json',
                 type: "GET",
                 data: {'invoiceId' : invoiceId},
                 dataType: "json",
                 async: true,
                 success: function (data) {
                     if (data.success) {
                         $('#detailsBody').html(data.template);
                         $('#lot').html(lot);
                         $('#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');
                 }
             });


         });

         $(document).on('click', '.payedLot', function () {
             $("#form-payed-lot").trigger("reset");
             rowData = $(this);
             var lotId = rowData.attr("data-id");
             var lotNumber = rowData.attr("data-lot");
             var typeLot = rowData.attr("data-lot-type");
             // $('#modal-details').modal('show');
             //var label = $('#taskLabel-' + orderId).text();
             $('#lot-payment').html(lotNumber);
             $('#lot_id').val(lotId);
             if (typeLot === 'Invoice Dropshipping'){
                 $('#modal-payed-lot-header').css('background','#fd7e14ad');
             }else if (typeLot === 'Invoice Warehouse'){
                 $('#modal-payed-lot-header').css('background','#17a2b8');
             }else if (typeLot === 'Invoice First'){
                 $('#modal-payed-lot-header').css('background','#20c997');
             }
             $('#modal-payed-lot').modal('show');


         });

     </script>

 {% endblock %}