@extends('layouts.app')
@section('content')
    <script type="text/javascript">
        $(document).ready(function(){
            $(".date-picker").datepicker({
                format: '{{config('app.date_format_js')}}'
            });

            $('#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">{{__("Intervention date")}}</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">{{__('Reasons')}} </label>
                    <div class="col-sm-4">
                        <select multiple data-plugin-selectTwo class="form-control populate" name="razlozi[]" id="razlozi">
                            <optgroup label="{{__('Reason')}}">
                                @foreach($razlozi as $r)
                                    <option value="{{$r->id}}">{{$r->razlog}}</option>
                                @endforeach
                            </optgroup>
                        </select>
                    </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.dth.js')}}"></script>
                        <div class="chart chart-md" id="flotPieOptika"></div>
                    @endif
                    @if($cli == 'SUPERNOVA')
                        <script src="{{asset('assets/javascripts/pies/pie.dth.js')}}"></script>
                        <div class="chart chart-md" id="flotPieSupernova"></div>
                    @endif
                    @if($cli == 'BAKAR')
                        <script src="{{asset('assets/javascripts/pies/pie.dth.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