{% extends 'base.html.twig' %}
{% set titleName = "Shipper " %}
{% block title %} POWER DATA | Shipper : {{ shipper.name }} {% endblock %}
{% block page %} {{ shipper.name }} {% endblock %}
{% block breadcrumb %} {% if titleName != "Home" %} {{ titleName }} / {{ shipper.name }} {% endif %} {% endblock %}


 {% block css %}
     <!-- DataTables -->
     <link rel="stylesheet" href=" {{ asset( 'assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css' ) }} " >
     <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
     <link rel="stylesheet" href="{{ asset('assets/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
     <!-- END DataTables -->
     <style>
         .toolsComment{
             display: none;
         }
         .post:hover .toolsComment{
             display: unset;
         }

         #comments .scrollable-menu{
             max-height: 400px !important;
         }

         #comments ::-webkit-scrollbar {
             width: 5px;
         }
         #comments ::-webkit-scrollbar-track {
             box-shadow: inset 0 0 5px grey;
             border-radius: 2px;
         }

     </style>
     <style>
         .null {
             width: 0 !important;
             padding: 0 !important;
             color: transparent !important;
         }
         #detailsDataHistory .scrollable-menu{
             max-height : 300px !important;
         }
     </style>
 {% endblock %}

 {% block content %}


     <!-- Main Alert -->
     <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" id="websiteSection" data-id="{{ shipper.id }}">
         <div class="container-fluid">

             <div class="row">
                 <!-- New -->
                 <div class="col-lg-2 col-4">
                     <!-- small box -->
                     <div class="small-box bg-secondary">
                         <div class="inner">
                             <h5>19.2<sup style="font-size: 15px">%</sup> New</h5>

                             <p>48 of 250</p>
                         </div>
                         <div class="icon">
                             <i class="ion ion-compose"></i>
                         </div>
                         <!--   <a href="/detail/new.php?name=aramex&id=1" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> -->
                     </div>
                 </div>

                 <!-- En cours -->
                 <div class="col-lg-2 col-4">
                     <!-- small box -->
                     <div class="small-box bg-info">
                         <div class="inner">
                             <h5>4.8<sup style="font-size: 15px">%</sup> En Cours</h5>

                             <p>12 of 250</p>
                         </div>
                         <div class="icon">
                             <i class="ion ion-load-a"></i>
                         </div>
                         <!--  <a href="/detail/en-cours.php?name=aramex&id=1" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> -->
                     </div>
                 </div>
                 <!-- Tentative -->
                 <div class="col-lg-2 col-4">
                     <!-- small box -->
                     <div class="small-box bg-warning">
                         <div class="inner" style="color: white !important;">
                             <h5>2.4<sup style="font-size: 15px">%</sup> Tentatives</h5>

                             <p>6 of 250</p>
                         </div>
                         <div class="icon">
                             <i class="ion ion-alert-circled"></i>
                         </div>
                         <!--    <a href="/detail/tentative.php?name=aramex&id=1" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> -->
                     </div>
                 </div>
                 <!-- Livré -->
                 <div class="col-lg-2 col-4">
                     <!-- small box -->
                     <div class="small-box bg-success">
                         <div class="inner">
                             <h5>53.6<sup style="font-size: 15px">%</sup> Livré</h5>

                             <p>134 of 250</p>
                         </div>
                         <div class="icon">
                             <i class="ion ion-checkmark-round"></i>
                         </div>
                         <!--   <a href="/detail/delivered.php?name=aramex&id=1" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> -->
                     </div>
                 </div>
                 <!-- en ECHANGE  -->
                 <div class="col-lg-2 col-4">
                     <!-- small box -->
                     <div class="small-box bg-black">
                         <div class="inner">
                             <h5>0.4<sup style="font-size: 15px">%</sup> Echange</h5>

                             <p>1 of 250</p>
                         </div>
                         <div class="icon">
                             <i class="ion ion-arrow-return-left"></i>
                         </div>
                         <!--    <a href="/detail/echange.php?name=aramex&id=1" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> -->
                     </div>
                 </div>
                 <!-- Retour -->
                 <div class="col-lg-2 col-4">
                     <!-- small box -->
                     <div class="small-box bg-danger">
                         <div class="inner">
                             <h5>10.8<sup style="font-size: 15px">%</sup> Retour</h5>

                             <p>27 of 250</p>
                         </div>
                         <div class="icon">
                             <i class="ion ion-arrow-return-left"></i>
                         </div>
                         <!--    <a href="/detail/retour.php?name=aramex&id=1" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a> -->
                     </div>
                 </div>

                 <!-- en Double -->
                 <div class="col-lg-2 col-4" style="display: none;">
                     <!-- small box -->
                     <div class="small-box bg-black">
                         <div class="inner">
                             <h5>0<sup style="font-size: 15px">%</sup> Doublure</h5>

                             <p>0 of 250</p>
                         </div>
                         <div class="icon">
                             <i class="ion ion-arrow-return-left"></i>
                         </div>
                         <a href="/detail/doublure.php" class="small-box-footer">More info <i
                                     class="fas fa-arrow-circle-right"></i></a>
                     </div>
                 </div>


                 <!-- ./col -->
             </div>
             <!-- Packages row -->
             <div class="row">
                 <div class="col-12">

                     <div class="card">
                         <div class="card-header">
                             <h3 class="card-title ">List of Orders</h3>
                         </div>
                         <!-- /.card-header -->
                         <div class="card-body">
                             <table id="example1" class="table table-bordered table-striped  ">
                                 <thead>
                                 <tr>
                                     <th class="null"></th>
                                     <th>ID</th>
                                     <th>Track Id</th>
                                     <th>Order</th>
                                     <th>Date</th>
                                     <th>Track Code</th>
                                     <th>Track Description</th>
                                     <th>Website</th>
                                     <th>Name</th>
                                     <th>Phone</th>
                                     <th>Action</th>
                                 </tr>
                                 </thead>
                                 <tbody>

                                 {% for package in packages %}
                                     {% if 'website-'~package.website.id in app.session.get('websites')|keys %}
                                     {% if package.isDeleted == false %}
                                         <tr id="package-{{ package.id }}">
                                             <td class="null"></td>
                                             <td>{{ package.id }}</td>
                                             <td>{{ package.trackId }} </td>
                                             <td>{{ package.orderReference }} </td>
                                             <td>{{ package.createdAt|date }}</td>
                                             <td>{{ package.trackingCode }} </td>
                                             <td>{{ package.trackingDescription }} </td>
                                             <td><a href="{{ path('app_admin_website_detail', {'projectId' : package.project.id, 'websiteId' : package.website.id }) }}">{{ package.website.label }}</a>     </td>
                                             <td>{{ package.fullName }}</td>
                                             <td>{{ package.phone }} </td>
                                             <td class="project-actions text-center">
                                                 <a class="btn btn-primary btn-sm viewShipper" data-id="{{ package.id }}" href="{{ path('app_admin_package_details', {'id' : package.id }) }}">
                                                     <i class="fas fa-external-link-alt"> </i>
                                                     View
                                                 </a >

                                                 {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_PROJECT_MANAGER') %}
                                                     <button   class="btn btn-danger btn-sm packageDelete"   data-id="{{ package.id }}">
                                                         <i class="fas fa-trash">
                                                         </i>
                                                         Delete
                                                     </button>
                                                 {% endif %}
                                             </td>

                                         </tr>
                                     {% endif %}
                                     {% endif %}
                                 {% endfor %}

                                 </tbody>
                                 <tfoot>
                                 <tr>
                                     <th class="null"></th>
                                     <th>ID</th>
                                     <th>Track Id</th>
                                     <th>Order</th>
                                     <th>Date</th>
                                     <th>Track Code</th>
                                     <th>Track Description</th>
                                     <th>Shipper</th>
                                     <th>Name</th>
                                     <th>Phone</th>
                                     <th>Action</th>
                                 </tr>
                                 </tfoot>
                             </table>
                         </div>
                         <!-- /.card-body -->
                     </div>
                     <!-- /.card -->
                 </div>
             </div>
         </div>


     </section>




 {% endblock %}


 {% block script %}
     <!-- DataTables  & Plugins -->
     <script src="{{ asset('assets/plugins/datatables/jquery.dataTables.min.js') }}"></script>
     <script src="{{ asset('assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
     <script src="{{ asset('assets/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
     <script src="{{ asset('assets/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
     <script src="{{ asset('assets/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
     <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
     <script src="{{ asset('assets/plugins/jszip/jszip.min.js') }}"></script>
     <script src="{{ asset('assets/plugins/pdfmake/pdfmake.min.js') }}"></script>
     <script src="{{ asset('assets/plugins/pdfmake/vfs_fonts.js') }}"></script>
     <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
     <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
     <script src="{{ asset('assets/plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>
     <script>
         $(function () {
             $("#example1").DataTable({
                 "responsive": true, "lengthChange": true, "autoWidth": false,
                 "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
             }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
             $('#example2').DataTable({
                 "paging": true,
                 "lengthChange": true,
                 "searching": true,
                 "ordering": true,
                 "info": true,
                 "autoWidth": false,
                 "responsive": true,
             });
         });
     </script>

     <!-- end  DataTables  & Plugins -->
     <script>

         // delete task commentDelete
         $(document).on('click', '.packageDelete', function () {
             rowData = $(this);
             var packageId = rowData.attr("data-id")
             //  $('#labelTypeOfTasks').val(label);

             $.ajax({
                 url: '/admin/package/delete', // {#  path('app_admin_package_delete') #}
                 type: "POST",
                 dataType: "json",
                 data: {
                     "package_id": packageId
                 },
                 async: true,
                 success: function (data) {
                     if (data.success) {
                         // statusTitle
                         toastr.success('Package deleted successfully ...');
                         $("#package-" + packageId).remove();
                     } else {
                         toastr.error('An error has occurred when deleting this package : ' + data.message);
                         if (data.message == 404){
                             $(location).attr('href','/login');
                         }
                     }


                 },
                 error: function () {
                     toastr.error('An error has occurred when deleting this Comment');
                 }
             });

         });
     </script>
 {% endblock %}