@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">
            <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>
                <div class="form-group">
                    <label class="col-sm-2 control-label">{{__('Nov services')}} </label>
                    <div class="col-sm-2">
                        <div class="switch switch-sm switch-success">
                            <input type="checkbox" name="nov_servis" data-plugin-ios-switch />
                        </div>
                    </div>
                    <label class="col-sm-2 control-label">{{__('Packets')}} </label>
                    <div class="col-sm-2">
                        <div class="switch switch-sm switch-warning">
                            <input type="checkbox" name="paketi" data-plugin-ios-switch />
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">{{__('Packet types')}} </label>
                    <div class="col-sm-2">
                        <div class="switch switch-sm switch-info">
                            <input type="checkbox" name="vrste_paketa" data-plugin-ios-switch />
                        </div>
                    </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">
                <header class="panel-heading">
                    <h2 class="panel-title">
                        {{$cli}}
                    </h2>
                </header>
                <div class="panel-body">
                    @if($cli == 'M:SAT DTH')
                        <script src="{{asset('assets/javascripts/pies/pie.dth.js')}}"></script>
                        <div class="chart chart-md" id="flotPieDth"></div>
                    @endif
                    @if($cli == 'OPTIKA')
                        <script src="{{asset('assets/javascripts/pies/pie.optika.js')}}"></script>
                        <div class="chart chart-md" id="flotPieOptika"></div>
                    @endif
                    @if($cli == 'SUPERNOVA')
                        <script src="{{asset('assets/javascripts/pies/pie.supernova.js')}}"></script>
                        <div class="chart chart-md" id="flotPieSupernova"></div>
                    @endif
                    @if($cli == 'BAKAR')
                        <script src="{{asset('assets/javascripts/pies/pie.bakar.js')}}"></script>
                        <div class="chart chart-md" id="flotPieBakar"></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($cli == 'M:SAT DTH')
                            flotPieDataDth.push({
                                label: '{{$nmb['procenat']}}',
                                data: [1, {{$nmb['procenat']}}],
                                color: '{{$nmb['color']}}'
                            });
                            @endif
                            @if($cli == 'OPTIKA')
                            flotPieDataOptika.push({
                                label: '{{$nmb['procenat']}}',
                                data: [1, {{$nmb['procenat']}}],
                                color: '{{$nmb['color']}}'
                            });
                            @endif
                            @if($cli == 'SUPERNOVA')
                            flotPieDataSupernova.push({
                                label: '{{$nmb['procenat']}}',
                                data: [1, {{$nmb['procenat']}}],
                                color: '{{$nmb['color']}}'
                            });
                            @endif
                            @if($cli == 'BAKAR')
                            flotPieDataBakar.push({
                                label: '{{$nmb['procenat']}}',
                                data: [1, {{$nmb['procenat']}}],
                                color: '{{$nmb['color']}}'
                            });
                            @endif
                        @endforeach
                        </script>
                </div>
            </section>
        @endforeach
    </div>
@endsection