@extends('layouts.app',[
    'class' => '',
    'folderActive' => '',
    'elementActive' => 'osp'
    ])
@section('head_supplement')

    <style>
        .show_filter {
            display: none;
        }

        @media only screen and (max-width: 600px) {
            .show_filter {
                display: block;
            }

            /*    .filters_row {
                    display: none;
                }*/
            .open {
                display: block;
            }

            .closed {
                display: none;
            }
        }





.loader {
  position: relative;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  margin: 10px auto;
  font-size: 12px;
}
.loader::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  border: 5px solid #f3f3f3;
  background: black;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  animation: spin 3s linear infinite;
}

.loader span {
    color:white;
    position: absolute;
    left:25%;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
    </style>
@endsection
@section('content')
    <div class="app-page-title">
        <div class="page-title-wrapper">
            <div class="page-title-heading">
                <div class="page-title-icon">
                    <i class="fa fa-calendar icon-gradient bg-arielle-smile"> </i>
                </div>
                <div>
                    OSP
                </div>
            </div>
            <div class="page-title-actions">
            </div>
        </div>
    </div>

    <div class="carre">
        
        <span class="texte">TEXTE</span>
    </div>

<div class="loader">
  <span>LOGO</span>
</div>

    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/solid-gauge.js"></script>

    <div class="row">
        <div class="mb-2 mb-sm-0 col-12 col-md-3">

            <label for="exampleEmail22" class="mr-sm-2">Inspecteur</label>

            <select id="filter_user" class="form-control select_filter select2 " multiple="multiple">

                <option value="">Choisir un inspecteur</option>
                @foreach($inspecteurs as $inspecteur)

                    <option value="{{ $inspecteur->user_id }}">
                        {{ $inspecteur->user_firstname }} {{ $inspecteur->user_lastname }}
                    </option>

                @endforeach

            </select>

        </div>

        <div class="mb-2 mb-sm-0 col-12 col-md-3">

            <label for="exampleEmail22" class="mr-sm-2">Types de rapports</label>

            <select id="filter_type" class="form-control select_filter select2">

                <option value="">Choisir un type de rapport</option>
                @foreach(config('types.type_rapport') as $key => $type)

                    <option value="{{ $key }}">
                        {{ $type }}
                    </option>

                @endforeach

            </select>

        </div>

        <div class="mb-2 mb-sm-0 col-12 col-md-3">

            <label for="exampleEmail22" class="mr-sm-2">Client</label>

            <select id="filter_client" class="form-control select_filter select2">

                <option value="">Choisir un client</option>
                @foreach($clients as $client)

                    <option value="{{ $client->client_id }}">
                        {{ $client->client_title }}
                    </option>

                @endforeach

            </select>

        </div>

        <div class="mb-2 mb-sm-0 col-12 col-md-3">

            <label for="exampleEmail22" class="mr-sm-2">Opération</label>

            <select id="filter_ope" class="form-control select_filter select2">

                <option value="">Choisir une opération</option>
                @foreach($operations as $key => $operation)

                    <option value="{{ $operation->operation_id }}">
                        {{ $operation->operation_title }}
                    </option>

                @endforeach

            </select>

        </div>

    </div>

    <div class="row mb-3">

        <div class="mb-2 mb-sm-0 col-12 col-md-3">

            <label for="exampleEmail22" class="mr-sm-2">Année</label>

            <select id="filter_year" class="form-control select_filter select2">

                <option value="">Choisir une année</option>
                @foreach($years as $year)

                    <option value="{{ $year }}">
                        {{ $year }}
                    </option>

                @endforeach

            </select>

        </div>

        <div class="mb-2 mb-sm-0 col-12 col-md-3">

            <label for="exampleEmail22" class="mr-sm-2">Mois</label>

            <select id="filter_month" class="form-control select_filter select2">

                <option value="">Choisir un mois</option>
                @foreach($months as $key=>$month)

                    <option value="{{ $key }}">
                        {{ $month }}
                    </option>

                @endforeach

            </select>

        </div>



        <div class="mb-2 mb-sm-0 col-12 col-md-3">

            <label for="exampleEmail22" class="mr-sm-2">Date de début</label>

            <input type="text" class="date_picker  form-control" id="min_date" autocomplete="off">

        </div>

        <div class="mb-2 mb-sm-0 col-12 col-md-3">

            <label for="exampleEmail22" class="mr-sm-2">Date de fin</label>

            <input type="text" class="date_picker  form-control" id="max_date" autocomplete="off">

        </div>

    </div>

    <div class="row">
        <div class="col-lg-12 col-xl-12">
            <div class="main-card mb-3">
                <div id="container"></div>
            </div>
        </div>

        <div class="col-lg-12 col-xl-12">
            <div class="main-card mb-3">
                <div id="container2"></div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 col-xl-4 col-xs-6">
            <div class="main-card mb-3">
                <div id="container3"></div>
            </div>
        </div>
        <div class="col-lg-6 col-xl-4 col-xs-6">
            <div class="main-card mb-3">
                <div id="container4"></div>
            </div>
        </div>

        <div class="col-lg-6 col-xl-4 col-xs-6">
            <div class="main-card mb-3">
                <div id="container5"></div>
            </div>
        </div>

        <div class="col-sm-12 col-md-4" id="container6" style="display: none">
            <div class="main-card mb-3">

                <div class="widget-content p-0">
                    <div class="widget-content-outer">
                        <div class="widget-content-wrapper">
                            <div class="widget-content-left">
                                <div id="widget_value_total" class="widget-numbers text-primary"></div>
                            </div>
                        </div>
                        <div class="widget-progress-wrapper mt-1">
                            <div class="progress-bar-xs progress-bar-animated-alt progress">
                                <div id="widget_progress" class="progress-bar bg-primary" role="progressbar"
                                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
                                </div>
                            </div>
                            <div class="progress-sub-label">
                                <div class="sub-label-left font-size-md">Total rapports sur la période</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="widget-content p-0">
                    <div class="widget-content-outer">
                        <div class="widget-content-wrapper">
                            <div class="widget-content-left">
                                <div id="widget_value" class="widget-numbers text-info">65%</div>
                            </div>
                        </div>
                        <div class="widget-progress-wrapper mt-1">
                            <div class="progress-bar-xs progress-bar-animated-alt progress">
                                <div id="widget_progress" class="progress-bar bg-info" role="progressbar"
                                     aria-valuenow="84" aria-valuemin="0" aria-valuemax="100" style="width: 84%;">
                                </div>
                            </div>
                            <div class="progress-sub-label">
                                <div class="sub-label-left font-size-md"><span id="total_diff"></span> RDV non
                                    transformés en rapports (sur <span id="total_rdv"></span> rdv)
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>


        <div class="col-sm-12 col-md-4" id="container7" style="display: none">
            <div class="main-card mb-3">

                <div class="widget-content p-0">
                    <div class="widget-content-outer">
                        <div class="widget-content-wrapper">
                            <div class="widget-content-left">
                                <div id="widget_conformes" class="widget-numbers text-success"></div>
                            </div>
                        </div>
                        <div class="widget-progress-wrapper mt-1">
                            <div class="progress-bar-xs progress-bar-animated-alt progress">
                                <div id="widget_conformes_bar" class="progress-bar bg-success" role="progressbar"
                                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
                                </div>
                            </div>
                            <div class="progress-sub-label">
                                <div class="sub-label-left font-size-md">Rapports conformes</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="widget-content p-0">
                    <div class="widget-content-outer">
                        <div class="widget-content-wrapper">
                            <div class="widget-content-left">
                                <div id="widget_non_conformes" class="widget-numbers text-danger"></div>
                            </div>
                        </div>
                        <div class="widget-progress-wrapper mt-1">
                            <div class="progress-bar-xs progress-bar-animated-alt progress">
                                <div id="widget_non_conformes_bar" class="progress-bar bg-danger" role="progressbar"
                                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
                                </div>
                            </div>
                            <div class="progress-sub-label">
                                <div class="sub-label-left font-size-md">Rapports non conformes</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="widget-content p-0">
                    <div class="widget-content-outer">
                        <div class="widget-content-wrapper">
                            <div class="widget-content-left">
                                <div id="widget_non_verifiables" class="widget-numbers text-warning"></div>
                            </div>
                        </div>
                        <div class="widget-progress-wrapper mt-1">
                            <div class="progress-bar-xs progress-bar-animated-alt progress">
                                <div id="widget_non_verifiables_bar" class="progress-bar bg-warning" role="progressbar"
                                     aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
                                </div>
                            </div>
                            <div class="progress-sub-label">
                                <div class="sub-label-left font-size-md">Rapports non vérifiables</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>

        document.addEventListener('DOMContentLoaded', function () {

            $('#filter_year').val('2021').trigger('change');

            chartData();

            $('.select_filter').on('change', function () {
                chartData()
            });

            $('#min_date').on('change', function () {
                chartData()
            });

            $('#max_date').on('change', function () {
                chartData()
            });


            function chartData() {
                axios.get('/api/suivis/osp', {

                    headers: {
                        'Authorization': `Bearer ${token}`
                    },
                    params: {
                        filter_user: $('#filter_user').val(),
                        filter_type: $('#filter_type').val(),
                        filter_year: $('#filter_year').val(),
                        filter_month: $('#filter_month').val(),
                        filter_ope: $('#filter_ope').val(),
                        filter_client: $('#filter_client').val(),
                        filter_min_date: $('#min_date').val(),
                        filter_max_date: $('#max_date').val(),
                    }
                    }
                ).then((response) => {

                    console.log(response.data)
                    if (response.data != '') {

                        let result = [];
                        let result_points = [];
                        let result_pie = [];

                        $.each(response.data.bar, function (key, values) {

                            $.each(values, function (k, v) {

                                result.push(v)

                            });

                        });

                        $.each(response.data.points, function (key, values) {
                            result_points.push(values)

                        });

                        $.each(response.data.pie, function (key, values) {
                            result_pie.push(values)

                        });

                        
                        Highcharts.chart('container', {

                            chart: {
                                type: 'column'
                            },


                            series: result
                        });

                        Highcharts.chart('container2', {

                            // chart: {
                            //   type: 'column'
                            // },

                            title: {
                                text: '',
                                x: -20, //center
                                marginTop: 0
                            },
                            credits: {
                                enabled: false
                            },

                            // xAxis: {
                            //       categories: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin',
                            //           'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre']

                            //               },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: 'Nbre de rapports'
                                },
                                stackLabels: {
                                    enabled: true,
                                    style: {
                                        fontWeight: 'bold',
                                        color: ( // theme
                                            Highcharts.defaultOptions.title.style &&
                                            Highcharts.defaultOptions.title.style.color
                                        ) || 'gray'
                                    }
                                }
                            },

                            series: result_points
                        });

                        Highcharts.chart('container3', {
                            chart: {
                                plotBackgroundColor: null,
                                plotBorderWidth: null,
                                plotShadow: false,
                                type: 'pie'
                            },
                            title: {
                                text: 'Proportion par type de rapport'
                            },
                            tooltip: {
                                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                            },
                            accessibility: {
                                point: {
                                    valueSuffix: '%'
                                }
                            },
                            plotOptions: {
                                pie: {
                                    allowPointSelect: true,
                                    cursor: 'pointer',
                                    dataLabels: {
                                        enabled: true,
                                        format: '<b>{point.name}</b>: {point.percentage:.1f} % ({point.y})'
                                    }
                                }
                            },

                            series: [{
                                name: 'Brands',

                                colorByPoint: true,
                                data: result_pie
                            }
                            ]

                        });

                        var gaugeOptions = {
                            chart: {
                                type: 'solidgauge'
                            },

                            title: 'Proportion de rapports validés',

                            pane: {
                                center: ['50%', '85%'],
                                size: '140%',
                                startAngle: -90,
                                endAngle: 90,
                                background: {
                                    backgroundColor:
                                        Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
                                    innerRadius: '60%',
                                    outerRadius: '100%',
                                    shape: 'arc'
                                }
                            },

                            exporting: {
                                enabled: false
                            },

                            tooltip: {
                                enabled: false
                            },

                            // the value axis
                            yAxis: {
                                stops: [
                                    [0.1, '#55BF3B'], // green
                                    [0.5, '#DDDF0D'], // yellow
                                    [0.9, '#DF5353'] // red
                                ],
                                lineWidth: 0,
                                tickWidth: 0,
                                minorTickInterval: null,
                                tickAmount: 2,
                                title: {
                                    y: -70
                                },
                                labels: {
                                    y: 16
                                }
                            },

                            plotOptions: {
                                solidgauge: {
                                    dataLabels: {
                                        y: 5,
                                        borderWidth: 0,
                                        useHTML: true
                                    }
                                }
                            }
                        };

// The speed gauge
                        var chartSpeed = Highcharts.chart('container4', Highcharts.merge(gaugeOptions, {
                            yAxis: {
                                min: 0,
                                max: 100,
                                title: {
                                    text: 'Validation'
                                }
                            },

                            credits: {
                                enabled: false
                            },

                            series: [{
                                name: 'Speed',
                                data: [response.data.pourcentage_valide],
                                dataLabels: {
                                    format:
                                        '<div style="text-align:center">' +
                                        '<span style="font-size:25px">{y}</span><br/>' +
                                        '<span style="font-size:12px;opacity:0.4">% de rapports validés</span>' +
                                        '</div>'
                                },
                                tooltip: {
                                    valueSuffix: ' % de rapports validés'
                                }
                            }]

                        }));

                        var gaugeOptions = {
                            chart: {
                                type: 'solidgauge'
                            },

                            title: 'Proportion de rapports validés',

                            pane: {
                                center: ['50%', '85%'],
                                size: '140%',
                                startAngle: -90,
                                endAngle: 90,
                                background: {
                                    backgroundColor:
                                        Highcharts.defaultOptions.legend.backgroundColor || '#EEE',
                                    innerRadius: '60%',
                                    outerRadius: '100%',
                                    shape: 'arc'
                                }
                            },

                            exporting: {
                                enabled: false
                            },

                            tooltip: {
                                enabled: false
                            },

                            // the value axis
                            yAxis: {
                                stops: [
                                    [0.1, '#55BF3B'], // green
                                    [0.5, '#DDDF0D'], // yellow
                                    [0.9, '#DF5353'] // red
                                ],
                                lineWidth: 0,
                                tickWidth: 0,
                                minorTickInterval: null,
                                tickAmount: 2,
                                title: {
                                    y: -70
                                },
                                labels: {
                                    y: 16
                                }
                            },

                            plotOptions: {
                                solidgauge: {
                                    dataLabels: {
                                        y: 5,
                                        borderWidth: 0,
                                        useHTML: true
                                    }
                                }
                            }
                        };

// The speed gauge
                        var chartSpeed = Highcharts.chart('container5', Highcharts.merge(gaugeOptions, {
                            yAxis: {
                                min: 0,
                                max: 100,
                                title: {
                                    text: 'Conformité non renseignée'
                                }
                            },

                            credits: {
                                enabled: false
                            },

                            series: [{
                                name: 'Speed',
                                data: [response.data.pourcentage_non_renseignes],
                                dataLabels: {
                                    format:
                                        '<div style="text-align:center">' +
                                        '<span style="font-size:25px">{y}</span><br/>' +
                                        '<span style="font-size:12px;opacity:0.4">% de rapports conformites non renseignés</span>' +
                                        '</div>'
                                },
                                tooltip: {
                                    valueSuffix: ' % de rapports validés'
                                }
                            }]

                        }));

                        var pourcentage_rdv = ((response.data.total) / response.data.total_rdv) * 100;
                        $('#widget_value').html(pourcentage_rdv.toFixed(2) + '% RDV transformés');
                        $('#widget_progress').css('width', pourcentage_rdv.toFixed(0) + '%');
                        $('#widget_progress').data('aria-valuenow', pourcentage_rdv.toFixed(0));

                        $('#widget_value_total').html(response.data.total);

                        var pourcentage_conformes = ((response.data.conformes) / response.data.total) * 100;
                        var pourcentage_non_conformes = ((response.data.non_conformes) / response.data.total) * 100;
                        var pourcentage_non_conformes = ((response.data.non_conformes) / response.data.total) * 100;
                        var pourcentage_non_verifiables = ((response.data.non_verifiables) / response.data.total) * 100;


                        $('#widget_conformes').html(response.data.conformes + ' (' + pourcentage_conformes.toFixed(2) + '%)');
                        $('#widget_non_conformes').html(response.data.non_conformes + ' (' + pourcentage_non_conformes.toFixed(2) + '%)');
                        $('#widget_non_verifiables').html(response.data.non_verifiables + ' (' + pourcentage_non_verifiables.toFixed(2) + '%)');


                        $('#total_diff').html(response.data.total_rdv - response.data.total);
                        $('#total_rdv').html(response.data.total_rdv);
                        $('#container6').show();
                        $('#container7').show();
                        $('.col-lg-12').show();
                    } else {

                        $('#container6').hide();
                        $('#container7').hide();
                        $('.col-lg-12').hide();
                    }
                })

            }
        })
    </script>
@endsection