
<div class="row text-center">
  <div class="col-md-12">
      <a href="javascript:void(0)" class="widget widget-hover-effect5">
          <div class="widget-extra-full">
            <span class="h2 themed-color-dark animation-expandOpen">
              You are on a <span class="label label-info">layover</span>
            </span>
          </div>
      </a>
  </div>
    <div class="col-sm-6 col-lg-3">
        <a href="javascript:void(0)" class="widget widget-hover-effect2">
            <div class="widget-extra themed-background">
                <h4 class="widget-content-light"><strong>Total</strong> Flights</h4>
            </div>
            <div class="widget-extra-full"><span class="h2 animation-expandOpen">3</span></div>
        </a>
    </div>
    <div class="col-sm-6 col-lg-3">
        <a href="javascript:void(0)" class="widget widget-hover-effect2">
            <div class="widget-extra themed-background-dark">
              <h4 class="widget-content-light"><strong>Flight</strong> Status</h4>
            </div>
            <div class="widget-extra-full"><span class="h2 themed-color-dark animation-expandOpen">4.7% <i class="fa fa-arrow-up text-success"></i></span></div>
        </a>
    </div>
    <div class="col-sm-6 col-lg-3">
        <a href="javascript:void(0)" class="widget widget-hover-effect2">
            <div class="widget-extra themed-background-dark">
                <h4 class="widget-content-light"><strong>Passengers</strong> Carried</h4>
            </div>
            <div class="widget-extra-full"><span class="h2 themed-color-dark animation-expandOpen">120</span></div>
        </a>
    </div>
    <div class="col-sm-6 col-lg-3">
        <a href="javascript:void(0)" class="widget widget-hover-effect2">
            <div class="widget-extra themed-background-dark">
                <h4 class="widget-content-light"><strong>Revenue</strong> Generated</h4>
            </div>
            <div class="widget-extra-full"><span class="h2 themed-color-dark animation-expandOpen">$ 4.250</span></div>
        </a>
    </div>
</div>
<div class="block full">
    <div class="block-title">
        <h2><strong>Hajj Ops <?php echo date("Y"); ?> </strong> Overview</h2>
    </div>
    <div class="row">
        <div class="col-md-6 col-lg-4">
            <div class="row push">
                <div class="col-xs-6">
                    <h3><strong class="animation-fadeInQuick">45.000</strong><br><small class="text-uppercase animation-fadeInQuickInv"><a href="javascript:void(0)">Total Flights</a></small></h3>
                </div>
                <div class="col-xs-6">
                    <h3><strong class="animation-fadeInQuick">$ 1.200,00</strong><br><small class="text-uppercase animation-fadeInQuickInv"><a href="javascript:void(0)">Airline Revenue</a></small></h3>
                </div>
                <div class="col-xs-6">
                    <h3><strong class="animation-fadeInQuick">1.520.000</strong><br><small class="text-uppercase animation-fadeInQuickInv"><a href="javascript:void(0)">Passengers Carried</a></small></h3>
                </div>
                <div class="col-xs-6">
                    <h3><strong class="animation-fadeInQuick">28.000</strong><br><small class="text-uppercase animation-fadeInQuickInv"><a href="javascript:void(0)">Avg. Pax. per day</a></small></h3>
                </div>
                <div class="col-xs-6">
                    <h3><strong class="animation-fadeInQuick">3.5%</strong><br><small class="text-uppercase animation-fadeInQuickInv"><a href="javascript:void(0)">Prediction Rate</a></small></h3>
                </div>
                <div class="col-xs-6">
                    <h3><strong class="animation-fadeInQuick">4.250</strong><br><small class="text-uppercase animation-fadeInQuickInv"><a href="javascript:void(0)">Generated Rosters</a></small></h3>
                </div>
                <div class="col-xs-6">
                    <h3><strong class="animation-fadeInQuick">$ 260.000,00</strong><br><small class="text-uppercase animation-fadeInQuickInv"><a href="javascript:void(0)">Expected Revenue</a></small></h3>
                </div>
                <div class="col-xs-6">
                    <h3><strong class="animation-fadeInQuick">$ 16.850,00</strong><br><small class="text-uppercase animation-fadeInQuickInv"><a href="javascript:void(0)">Exppected Profits</a></small></h3>
                </div>
            </div>
        </div>
        <div class="col-md-8">

          <canvas id="myChart"  width="auto" height="125"></canvas>
<script>
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: 'Flights for <?php echo date("M Y"); ?>',
            data: [3, 5, 2, 3, 12, 19,],
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="block">
            <div class="block-title">
                <div class="block-options pull-right">
                    <a href="page_ecom_orders.php" class="btn btn-alt btn-sm btn-default" data-toggle="tooltip" title="" data-original-title="Show All"><i class="fa fa-eye"></i></a>
                    <a href="javascript:void(0)" class="btn btn-alt btn-sm btn-default" data-toggle="tooltip" title="" data-original-title="Settings"><i class="fa fa-cog"></i></a>
                </div>
                <h2><strong>RealOps</strong> Flights</h2>
            </div>
            <table class="table table-borderless table-striped table-vcenter table-bordered">
                <tbody>
                    <tr>
                        <td class="text-center" style="width: 100px;"><a href="javascript:void(0)"><strong>PIA132</strong></a></td>
                        <td class="text-center"><a href="javascript:void(0)">Leonard Selvaraja</a></td>
                        <td class="text-center">PIA50001RO  OPKC <i class="fa fa-plane"></i> OEMA</td>
                        <td class="text-center"><strong>INBOUND LEG</strong></td>
                        <td><a href="#">-270 FPM</a></td>
                        <td class="text-center"><strong>435</strong> Passengers</td>
                        <td><a href="#">$10,103 USD+</a></td>
                        <td class="text-center"><span class="label label-success">PIREP ACCEPTED</span></td>
                        <td class="text-center">
                            <div class="text-warning">
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star"></i>
                                <i class="fa fa-star-half-o"></i>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
