@extends('layouts.app')
@section('css')
<style type="text/css">
    .cardTitle{
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
    }
    .cardSubTitle{
        font-size: 14px;
        font-weight: 400;
        /*color: #09C;*/
    }
    .cardValue{
        font-size: 34px;
        font-weight: 700;
    }
    .card.col-sm-4{
        padding: 0px;
        flex: calc(33% - 10px);
        width: calc(33% - 10px);
        max-width: calc(33% - 10px);
        margin: 5px;
    }
    .card.col-sm-6{
        padding: 0px;
        flex: calc(50% - 10px);
        margin: 5px;
    }
    .card-body{
        padding: 10px;
     }
</style>
@endsection

@section('content')
<div class="container" style="padding-top: 20px;">
    <div class="row">
<div class="card col-sm-4">
    <div class="card-body">
        <h5 class="cardTitle">Total Customers</h5>
        <h3 class="cardValue">{{$totalCustomers}}</h3>
        <h5 class="cardSubTitle"><div class="badge badge-sm badge-dark">{{$newCustomersToday}}</div> <b>New Customers Today</b></h5>
        <h5 class="cardSubTitle"><div class="badge badge-sm badge-dark">{{$newCustomersWeek}}</div> <b>New Customers this week</b></h5>
        <h5 class="cardSubTitle"><div class="badge badge-sm badge-dark">{{$newCustomersMonth}}</div> <b>New Customers This Month</b></h5>
        <a href="{{url('/')}}/customer/create" class="btn btn-sm btn-warning"><i class="fa fa-plus"></i> Create Customer</a>
    </div>

        </div>
            <div class="card col-sm-4">
                <div class="card-body">
                    <h5 class="cardTitle">Search for a customer</h5>
                    <form action="{{url('/')}}/customerSearch" method="POST">
        @csrf
        <div class="form-group">
            <div class="input-group">
                <select class="form-control" name="type">
                    <option>Name</option>
                    <option>ID Number</option>
                    <option>Email</option>
                    <option>Phone</option>
                </select>
                <input type="text" name="query" class="form-control">
                <div class="input-group-append">
                <button type="submit" class="btn btn-sm btn-warning"><i class="fa fa-search"></i> Search </button>
            </div>
            </div>
        </div>
    </form>
    <h5 class="cardTitle">Search blacklist</h5>
    <form action="{{url('/')}}/blacklistSearch" method="POST">
        @csrf
        <div class="form-group">
            <div class="input-group">
                <select class="form-control" name="type">
                    <option>Name</option>
                    <option>ID Number</option>
                    <option>Alias</option>
                    <option>Phone</option>
                </select>
                <input type="text" name="query" class="form-control">
                <div class="input-group-append">
                <button type="submit" class="btn btn-sm btn-warning"><i class="fa fa-search"></i> Search</button>
            </div>
            </div>
        </div>
    </form>
                </div>
            </div>
    </div>


@can('is_admin', auth()->user())
<div class="row">
<div class="card col-sm-4">
    <div class="card-header">Forex Buying Transactions by branch</div>
    <div class="card-body">
        <table class="table table-bordered table-condensed">
            <thead>
                <tr>
                    <th>Branch</th>
                    <th>Number</th>
                    <th>Value in KES</th>
                </tr>
            </thead>
            @foreach($forexesBuyingByBranch as $forex)
            <tr>
                <td>{{$forex->name}}</td>
                <td>{{$forex->count}}</td>
                <td>{{number_format($forex->amount,2)}}</td>
            </tr>
            @endforeach
        </table>
    </div>
</div>
<div class="card col-sm-4">
    <div class="card-header">Forex Selling Transactions by branch</div>
    <div class="card-body">
        <table class="table table-bordered table-condensed">
            <thead>
                <tr>
                    <th>Branch</th>
                    <th>Number</th>
                    <th>Value in KES</th>
                </tr>
            </thead>
            @foreach($forexesSellingByBranch as $forex)
            <tr>
                <td>{{$forex->name}}</td>
                <td>{{$forex->count}}</td>
                <td>{{number_format($forex->amount,2)}}</td>
            </tr>
            @endforeach
        </table>
    </div>
</div>

<div class="card col-sm-4">
    <div class="card-header">Money Transfer by provider in KES</div>
    <div class="card-body">
        <table class="table table-bordered table-condensed">
            <thead>
                <tr>
                    <th>Provider</th>
                    <th>Sending</th>
                    <th>Receiving</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Western Union</th>
                    <td>{{number_format($transfersWUSending,2)}}</td>
                    <td>{{number_format($transfersWUReceiving,2)}}</td>
                </tr>
                <tr>
                    <th>Money Gram</th>
                    <td>{{number_format($transfersMGSending,2)}}</td>
                    <td>{{number_format($transfersMGReceiving,2)}}</td>
                </tr>
                <tr>
                    <th>RIA</th>
                    <td>{{number_format($transfersRIASending,2)}}</td>
                    <td>{{number_format($transfersRIAReceiving,2)}}</td>
                </tr>
                <tr>
                    <th>World Remit</th>
                    <td>{{number_format($transfersWRSending,2)}}</td>
                    <td>{{number_format($transfersWRReceiving,2)}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div> 

    </div>
    <div class="row">
        <div class="card col-sm-6" style="padding: 0px;">
            <div class="card-header">
                Money transfer trends by value in KES
            </div>
    <div class="card-body">
      <canvas id="transfer" width="500" height="300"></canvas>
    </div>
  </div>

  <div class="card col-sm-6" style="padding: 0px;">
            <div class="card-header">
                Forex transactions trends by value in KES 
            </div>
    <div class="card-body">
      <canvas id="forex" width="500" height="300"></canvas>
    </div>
  </div>

    </div>
    @endcan
</div>
@endsection

@section('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/gh/emn178/chartjs-plugin-labels/src/chartjs-plugin-labels.js"></script>
<script type="text/javascript">

var ctx = document.getElementById("transfer").getContext('2d');
var ctx2 = document.getElementById("forex").getContext('2d');
var i;

var transfersWUSendingGroup=new Array();
var transfersWUReceivingGroup=new Array();
var transfersMGSendingGroup=new Array();
var transfersMGReceivingGroup=new Array();
var transfersRIASendingGroup=new Array();
var transfersRIAReceivingGroup=new Array();
var transfersWRSendingGroup=new Array();
var transfersWRReceivingGroup=new Array();

var forexesBuyingGroup=new Array();
var forexesSellingGroup=new Array();

transfersWUSendingGroup[0]=