@extends('adminlte::page')


@section('content')
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

<form action="/revenue-carrier-chart" class="form-inline" style="padding:10px" method="post">
@csrf
    <label for="currency">Currency</label>
    <select name="currency" id="currency" class="form-control">
        <option value="all">ALL</option>
        <option value="US" @if($selected_currency=='US') selected @endif>US</option>
        <option value="CAN" @if($selected_currency=='CAN') selected @endif>CAN</option>
    </select>

    <label for="broker" style="margin-left:10px">Broker</label>
    <select name="broker" id="broker" class="form-control" style="margin-right:5px">
        <!-- <option value="">All</option> -->
        @foreach($brokers as $broker)
            <option value="{{$broker->id}}" @if($broker->id==$selected_broker) selected @endif>{{$broker->name}}</option>
        @endforeach
    </select>

    <label for="week_id">Week ID</label>
    <select name="week_id" id="week_id" class="form-control">
        @foreach($week_ids as $week_id)
            <option value="{{$week_id->week_id}}" @if($week_id->week_id==request()->week_id) selected @endif>{{$week_id->week_id}}</option>
        @endforeach
    </select>


    <input type="submit" class="btn btn-sm btn-success" value="Filter"/>
</form>
<button id="toggle">show/hide all</button>

<canvas id="myChart" width="1050" height="400"></canvas>
    
<div class="card">
        <div class="card-header">
            <h3 class="card-title"><b>Revenue </b> </h3>
            
           
            <a href="/revenue-carrier" style="float:right;margin-right:15px" class="btn btn-sm btn-success"> Table</a>

        </div>
        <!-- /.card-header -->
        <div class="card-body">

            <table class="table table-striped table-bordered">
                <tr >
                    <thead style="text-align: center">
                    <th style="width: 150px"></th>
                    <th>Broker</th>
                    <th colspan="2">Radu</th>
                    <th colspan="2">Vasi</th>
                    <th colspan="2">Pete</th>
                    <th colspan="2">Gelly</th>
                    <th colspan="2">Arslan</th>
                    <th colspan="2">Marcel</th>

                    </thead>
                </tr>
                        <tr style="text-align: center">
                            <td></td>
                            <td></td>
                            <td>US</td>
                            <td>CAN</td>
                            <td>US</td>
                            <td>CAN</td>
                            <td>US</td>
                            <td>CAN</td>
                            <td>US</td>
                            <td>CAN</td>
                            <td>US</td>
                            <td>CAN</td>
                            <td>US</td>
                            <td>CAN</td>
                        </tr>

                    @foreach($report as $carrier)
                        <tr>
                        <td>{{$carrier->week_id}}</td>
                            <td>{{$carrier->carrier->name}}</td>
                            <td>{{$carrier->pru}}</td>
                            <td>{{$carrier->prc}}</td>
                            <td>{{$carrier->pvu}}</td>
                            <td>{{$carrier->pvc}}</td>
                            <td>{{$carrier->ppu}}</td>
                            <td>{{$carrier->ppc}}</td>
                            <td>{{$carrier->pgu}}</td>
                            <td>{{$carrier->pgc}}</td>
                            <td>{{$carrier->pau}}</td>
                            <td>{{$carrier->pac}}</td>
                            <td>{{$carrier->pmu}}</td>
                            <td>{{$carrier->pmc}}</td>
                        </tr>
                    @endforeach
            </table>


        </div>
        <!-- /.card-body -->
    </div>
@stop

@section('css')
<link rel="stylesheet" href="bower_components/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>

<style>
.select-option {
float: left;
}
</style>
@stop

@section('js')
<script type="text/javascript" src="bower_components/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>

<script>
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: {!!$labels!!},
        datasets: [
                {!!$datasets!!}
           ]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        },
        responsive:false
    }
});

$("#toggle").click(function() {
    myChart.data.datasets.forEach(function(ds) {
    ds.hidden = !ds.hidden;
  });
  myChart.update();
});


</script>
@stop