@extends('layouts.app')
@section('content')
    <script type="text/javascript">
        $(document).ready(function(){
            $('#btn-pie').click(function(){
                var route = $(this).attr('route');
                $.ajax({
                    type	:	"GET",
                    cache	: 	false,
                    url		:	route,
                    data	: 	$("#frmPie").serialize(),
                    success	: function(){
                        document.location.reload();
                    }
                });
            });

        });
    </script>
    <section class="panel">
        <header class="panel-heading">
            <div class="panel-actions">
                {{--<button type="button" class="btn btn-sm btn-warning" id="print-btn"><i class="fa fa-print"></i></button>--}}
            </div>
            <h2 class="panel-title">{{__('Statistic range')}} ({{$from.' - '.$to}})</h2>
        </header>
        <div class="panel-body">
            <form id="frmPie" method="get" class="form-horizontal mb-lg">
                <div class="form-group">
                    <label class="col-md-2 control-label">{{__("Created at")}} {{__('range')}}</label>
                    <div class="col-md-4">
                        <div class="input-daterange input-group">
                                        <span class="input-group-addon">
                                            <i class="fa fa-calendar"></i>
                                        </span>
                            <input type="text" class="form-control date-picker" name="start">
                            <span class="input-group-addon">{{__("to")}}</span>
                            <input type="text" class="form-control date-picker" name="end">
                        </div>
                    </div>
                    <div class="col-md-2"><button type="submit" class="btn btn-primary" id="btn-pie" route="{{route('montaza_sintetika')}}">{{__('Show')}}</button></div>
                </div>
            </form>
        </div>
    </section>

    <div class="row">
    <script type="text/javascript">
        var flotPieDataDth = [];
        var flotPieDataOptika = [];
        var flotPieDataSupernova = [];
        var flotPieDataBakar = [];
    </script>
    @foreach($statistic as $cli=>$stat)
        <section class="panel col-md-12 print-content" id="print_content">
            <header class="panel-heading">
                <h2 class="panel-title">{{$cli}} </h2>
            </header>
            <div class="panel-body">
                @if($cli == 'RUNE')
                    <script src="{{asset('assets/javascripts/pies/pie.optika.js')}}"></script>
                    <div class="chart chart-md" id="flotPieOptika"></div>
                @endif
                @foreach($stat as $status=>$nmb)
                    @if($nmb['br'] == 0) @continue @endif
                    <div class="custom-legend" style="color:{{$nmb['color']}}">
                        <div class="legend-square" style="background-color:{{$nmb['color']}}"></div> {{$status}} </div>
                @endforeach
                <table class="table table-bordered table-striped table-condensed mb-none">
                                    @foreach($stat as $status=>$nmb)
                    @if($nmb['br'] < 1) @continue @endif
                    <tr>
                        <td>{{$status}}</td>
                        <td>{{$nmb['procenat'].'%'}}</td>
                        <td>{{$nmb['br']}}</td>
                                            </tr>
                @endforeach
                    <tr>
                        <td></td>
                        <td><strong>{{__('TOTAL')}}</strong></td>
                        <td><strong>{{$suma}}</strong></td>
                    </tr>
                </table>
                <script type="text/javascript">
                    @foreach($stat as $status=>$nmb)
                    @if($nmb['br'] < 1) @continue @endif
                        @if($cli == 'RUNE')
                        flotPieDataOptika.push({
                            label: '{{$nmb['procenat']}}',
                            data: [1, {{$nmb['procenat']}}],
                            color: '{{$nmb['color']}}'
                        });
                        @endif
                    @endforeach
                </script>
            </div>
        </section>
    @endforeach
    </div>
@endsection