{%  extends "WebBackBundle::layout_lte.html.twig" %}

{% block title %} Dashboard {% endblock %}
{% block bodytile %}Tableau administration {% endblock %}
{% block body %}
	<!-- script data tabels -->


	<!-- DataTables -->

	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">


	<div class="container-fluid">


	<div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-aqua"><i class="ion ion-ios-clock-outline"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Réservation Aujourd'hui</span>
              <span class="info-box-number">{{ todaysBooking|length }}<small></small></span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-red"><i class="ion ion-laptop"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Réservation Manuelles</span>
              <span class="info-box-number">{{ manualBookings|length }}</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->

        <!-- fix for small devices only -->
        <div class="clearfix visible-sm-block"></div>

        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-green"><i class="ion ion-ios-browsers-outline"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Réservation Site Web</span>
              <span class="info-box-number">{{ websiteBookings|length }}</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
          <div class="info-box">
            <span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>

            <div class="info-box-content">
              <span class="info-box-text">Utilisateurs</span>
              <span class="info-box-number">{{ utilisateurs|length }}</span>
            </div>
            <!-- /.info-box-content -->
          </div>
          <!-- /.info-box -->
        </div>
        <!-- /.col -->
      </div>

<div class="row">

  <div class="col-md-12">
       <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">Réservation d'Aujourd'hui</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <div class="table-responsive">
                <table class="table no-margin">
                  <thead>
                  <tr>
                    <th>Commande</th>
                    <th>Aéroport</th>
                    <th>Pack</th>
                    <th>Trajet</th>
                    <th>Client</th>
                    <th>Tel</th>
                    <th>Nbr PAX</th>
                    <th>Heure</th>
                    <th>Commentaire</th>
                  </tr>
                  </thead>
                  <tbody>
                  {% for book in todaysBooking %}
                  <tr>
                    <td><a href="{{ path('order_detail_back',{'id':book.commande}) }}">{{ book.commande }}</a></td>
                    <td>{{ book.airport }}</td>
                    <td>{{ book.pack }}</td>
                    {% if book.type == "0" %}
                      {% set typePack = "Départ" %}
                      <td><span class="label label-danger">{{ typePack }}</span></td>
                    {% else %}
                      {% set typePack = "Arrivée" %}
                      <td><span class="label label-success">{{ typePack }}</span></td>
                    {% endif %}
                    <td>{{ book.fullName }}</td>
                    <td>{{ book.Tel }}</td>
                    <td>{{ book.nbrPassagers }}</td>
                    <td>{{ book.HeureFly }}</td>
                    <td>{{ book.comment }}</td>
                  </tr>
                  {% endfor %}



                  </tbody>
                </table>
              </div>
              <!-- /.table-responsive -->
            </div>
            <!-- /.box-body -->

            <div class="box-footer clearfix">
              <a href="{{ path('bookFastTrack') }}" class="btn btn-sm btn-info btn-flat pull-left"> <i class="fa fa-plus"></i> Nouvelle Commande</a>
              <a href="{{ path('adminPanel') }}" class="btn btn-sm btn-default btn-flat pull-right"><i class="fa fa-bars"></i> Liste Commandes</a>
            </div>
            <!-- /.box-footer -->
          </div>
  </div>

</div>

<div class="row">

 <div class="col-md-12">

	  <div class="box box-default">

            <div class="box-header with-border">
              <h3 class="box-title">Synthèse des Réservations</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="chart-responsive">
                    <canvas id="pieChart" height="160" width="205" style="width: 205px; height: 160px;"></canvas>
                  </div>
                  <!-- ./chart-responsive -->
                </div>
                <!-- /.col -->                
                <div class="col-md-6"> 
                  <ul class="nav nav-pills nav-stacked">
                  <li><a class="text-red" href="#">Mohammed V Intl, CMN, Casablanca, Morocco
                    <span class="pull-right text-red">{{ bookingsByAiroprts[0].nbrBooking }}</span></a></li>
                  <li><a class="text-yellow" href="#">Marrakesh Menara, RAK, Marrakesh, Morocco
                    <span class="pull-right text-yellow">{{ bookingsByAiroprts[1].nbrBooking }}</span></a>
                  </li>  
                  <li><a class="text-green" href="#">Agadir – Al Massira, AGA, Agadir, Morocco 
                  <span class="pull-right text-green">{{ bookingsByAiroprts[2].nbrBooking }}</span></a>
                  </li>
                  <li><a class="text-blue" href="#">Tangier Ibn Battouta, TNG, Tangier, Morocco
                    <span class="pull-right text-blue">{{ bookingsByAiroprts[3].nbrBooking }}</span></a>
                  </li>
                  <li><a class="text-light-blue" href="#">Rabat–Salé, RBA, Salé, Morocco 
                  <span class="pull-right text-light-blue">{{ bookingsByAiroprts[4].nbrBooking }}</span></a>
                  </li>  
                  <li><a class="text-aqua" href="#">Oujda Angads, OUD, Oujda, Morocco
                    <span class="pull-right text-aqua">{{ bookingsByAiroprts[5].nbrBooking }}</span></a>
                  </li>
                  <li><a class="text-maroon" href="#">Fes–Saïss, FEZ, Fes, Morocco
                    <span class="pull-right text-maroon">{{ bookingsByAiroprts[6].nbrBooking }}</span></a>
                    </li>
                  <li><a class="text-fuchsia" href="#">Laayoune Hassan 1st, EUN, Laayoune, Morocco
                    <span class="pull-right text-fuchsia">{{ bookingsByAiroprts[7].nbrBooking }}</span></a>
                    </li>
                  <li><a class="text-black" href="#">Dakhla, VIL, Morocco
                    <span class="pull-right text-black">{{ bookingsByAiroprts[8].nbrBooking }}</span></a>
                    </li>
                    <li><a class="text-teal" href="#">Paris-Orly, ORY, France
                    <span class="pull-right text-teal">{{ bookingsByAiroprts[9].nbrBooking }}</span></a>
                    </li>
                  <li><a class="text-navy" href="#">Paris-Charles-de-Gaulle, CDG, France
                    <span class="pull-right text-navy">{{ bookingsByAiroprts[11].nbrBooking }}</span></a>
                    </li>
                    <li><a class="text-purple" href="#">Ouarzazate, OZZ, Morocco
                    <span class="pull-right text-purple">{{ bookingsByAiroprts[12].nbrBooking }}</span></a>
                    </li>
                    
                </ul>                
                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </div>
            <!-- /.box-body -->
      </div>

	</div>

</div>

<div class="row">
        <div class="col-md-6">
         <div class="box box-success">
            <div class="box-header with-border">
              <h3 class="box-title">Chiffre d'affaire annuel</h3>
            </div>
            <div class="box-body">
              <div class="chart">
                <canvas id="barChart" style="height: 250px; width: 787px;" width="787" height="250"></canvas>
              </div>
            </div>
            <!-- /.box-body -->
          </div>
        </div>
        <!-- /.col (LEFT) -->
        <div class="col-md-6">
          <div class="box box-info">
            <div class="box-header with-border">
              <h3 class="box-title">Récap par méthode de paiement</h3>
            </div>
            <div class="box-body">
              <div class="chart">
                <canvas id="lineChart" style="height: 250px; width: 787px;" width="787" height="250"></canvas>
              </div>
            </div>
            <!-- /.box-body -->
          </div>
        </div>
        <!-- /.col (RIGHT) -->
      </div>
	
</div>

<div class="row">
        <div class="col-md-12">
          <div class="box">
            <div class="box-header with-border">
              <h3 class="box-title">Monthly Recap Report</h3>

              <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <div class="btn-group">
                  <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                    <i class="fa fa-wrench"></i></button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
              </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <div class="row">
                <div class="col-md-8">
                  <p class="text-center">
                    <strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
                  </p>

                  <div class="chart">
                    <!-- Sales Chart Canvas -->
                    <canvas id="salesChart" style="height: 180px; width: 1072px;" width="1072" height="180"></canvas>
                  </div>
                  <!-- /.chart-responsive -->
                </div>
                <!-- /.col -->
                <div class="col-md-4">
                  <p class="text-center">
                    <strong>Goal Completion</strong>
                  </p>

                  <div class="progress-group">
                    <span class="progress-text">Add Products to Cart</span>
                    <span class="progress-number"><b>160</b>/200</span>

                    <div class="progress sm">
                      <div class="progress-bar progress-bar-aqua" style="width: 80%"></div>
                    </div>
                  </div>
                  <!-- /.progress-group -->
                  <div class="progress-group">
                    <span class="progress-text">Complete Purchase</span>
                    <span class="progress-number"><b>310</b>/400</span>

                    <div class="progress sm">
                      <div class="progress-bar progress-bar-red" style="width: 80%"></div>
                    </div>
                  </div>
                  <!-- /.progress-group -->
                  <div class="progress-group">
                    <span class="progress-text">Visit Premium Page</span>
                    <span class="progress-number"><b>480</b>/800</span>

                    <div class="progress sm">
                      <div class="progress-bar progress-bar-green" style="width: 80%"></div>
                    </div>
                  </div>
                  <!-- /.progress-group -->
                  <div class="progress-group">
                    <span class="progress-text">Send Inquiries</span>
                    <span class="progress-number"><b>250</b>/500</span>

                    <div class="progress sm">
                      <div class="progress-bar progress-bar-yellow" style="width: 80%"></div>
                    </div>
                  </div>
                  <!-- /.progress-group -->
                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </div>
            <!-- ./box-body -->
            <div class="box-footer">
              <div class="row">
                <div class="col-sm-3 col-xs-6">
                  <div class="description-block border-right">
                    <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 17%</span>
                    <h5 class="description-header">$35,210.43</h5>
                    <span class="description-text">TOTAL REVENUE</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-3 col-xs-6">
                  <div class="description-block border-right">
                    <span class="description-percentage text-yellow"><i class="fa fa-caret-left"></i> 0%</span>
                    <h5 class="description-header">$10,390.90</h5>
                    <span class="description-text">TOTAL COST</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-3 col-xs-6">
                  <div class="description-block border-right">
                    <span class="description-percentage text-green"><i class="fa fa-caret-up"></i> 20%</span>
                    <h5 class="description-header">$24,813.53</h5>
                    <span class="description-text">TOTAL PROFIT</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-3 col-xs-6">
                  <div class="description-block">
                    <span class="description-percentage text-red"><i class="fa fa-caret-down"></i> 18%</span>
                    <h5 class="description-header">1200</h5>
                    <span class="description-text">GOAL COMPLETIONS</span>
                  </div>
                  <!-- /.description-block -->
                </div>
              </div>
              <!-- /.row -->
            </div>
            <!-- /.box-footer -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>

{% endblock %}


{% block scripts %}
    
	<!-- jQuery 3 -->
<script src="{{ asset("assets/admbtob/bower_components/jquery/dist/jquery.min.js")}}"></script>
<script>

var PieDataGraph = [
    {
      value    : {{ bookingsByAiroprts[0].nbrBooking }},
      color    : '#dd4b39',
      highlight: '#dd4b39',
      label    : 'CMN'
    },
    {
      value    : {{ bookingsByAiroprts[1].nbrBooking }},
      color    : '#f39c12',
      highlight: '#f39c12',
      label    : 'RAK'
    },
    {
      value    : {{ bookingsByAiroprts[2].nbrBooking }},
      color    : '#00a65a',
      highlight: '#00a65a',
      label    : 'AGA'
    },
    {
      value    : {{ bookingsByAiroprts[3].nbrBooking }},
      color    : '#0073b7',
      highlight: '#0073b7',
      label    : 'TNG'
    },
    {
      value    : {{ bookingsByAiroprts[4].nbrBooking }},
      color    : '#3c8dbc',
      highlight: '#3c8dbc',
      label    : 'RBA'
    },
    {
      value    : {{ bookingsByAiroprts[5].nbrBooking }},
      color    : '#00c0ef',
      highlight: '#00c0ef',
      label    : 'OUD'
    },
    {
      value    : {{ bookingsByAiroprts[6].nbrBooking }},
      color    : '#d81b60',
      highlight: '#d81b60',
      label    : 'FEZ'
    },
    {
      value    : {{ bookingsByAiroprts[7].nbrBooking }},
      color    : '#f012be',
      highlight: '#f012be',
      label    : 'EUN'
    },
    {
      value    : {{ bookingsByAiroprts[8].nbrBooking }},
      color    : '#111',
      highlight: '#111',
      label    : 'VIL'
    },
    {
      value    : {{ bookingsByAiroprts[9].nbrBooking }},
      color    : '#39cccc',
      highlight: '#39cccc',
      label    : 'ORY'
    },
    {
      value    : {{ bookingsByAiroprts[11].nbrBooking }},
      color    : '#001f3f',
      highlight: '#001f3f',
      label    : 'CDG'
    },
    {
      value    : {{ bookingsByAiroprts[12].nbrBooking }},
      color    : '#605ca8',
      highlight: '#605ca8',
      label    : 'OZZ'
    },
   
]
</script>
<!-- Bootstrap 3.3.7 -->
<!-- ChartJS -->
<!-- FastClick -->
<!-- AdminLTE App -->
<!-- AdminLTE for demo purposes -->
<script src="{{ asset("assets/admbtob/dist/js/demo.js")}}"></script>
<!-- page script -->
<script src="{{ asset("assets/js/Chart.js")}}"></script>
<script src="{{ asset("assets/js/dashboards.js")}}"></script>
<script src="{{ asset("assets/admbtob/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js")}}"></script>

{% endblock %}