@php
    $view['type']               = $type;
    $view['tb_scope']           = $tb_scope;
    $view['count_repair']       = $count_repair;
    $view['count_available']    = $count_available;
    $view['count_reprocess']    = $count_reprocess;
    $view['count_operation']    = $count_operation;
@endphp

@extends('layouts.layout_tack')
@section('style')
<style>
    .row{
        margin: 0;
    }
    .apexcharts-legend{
        top: 25% !important;
    }
    .box-new{
        width: 100%;
        padding-top: 0.7em;
        text-align: center;
        font-size: -webkit-xxx-large;
    }
    .pd-1{
        padding: 1px;
    }
    h1{
        margin: 0;
    }
    .card{
        height: 100%;
    }
    .scope{
        position: absolute;
        right: 5px;
        color: #fff;
        top: 3px;
    }
    #chartdiv1{
        width: 100%;
        height: 90%;
    }
    #chartdiv2{
        width: 100%;
        height: 390px;
    }
    /* g[fill="#67b7dc"]{
        fill:rgb(235, 232, 80);
    }
    g[fill="#6794dc"]{
        fill:rgb(153, 153, 150);
    }
    g[fill="#6771dc"]{
        fill:rgb(68, 168, 143);
    }
    g[fill="#8067dc"]{
        fill:rgb(151, 78, 30);
    } */
    g[aria-labelledby="id-66-title"]{
        opacity: 0;
    }
    g[aria-labelledby="id-290-title"]{
        opacity: 0;
        position: absolute;
    }
    /* g[fill="#67b7dc"] {
        fill: green;
        stroke:none;
    }
    g[fill="#6771dc"] {
        fill: rgb(255, 136, 0);
        stroke:none;
    }
    g[fill="#a367dc"]{
        fill: rgb(0, 183, 255);
        stroke:none;
    }
    g[fill="#dc67ce"]{
        fill: brown;
        stroke:none;
    }
    g[fill="#dc6788"]{
        fill: rgb(66, 77, 78);
        stroke:none;
    }
    g[fill="#dc8c67"]{
        fill: rgb(66, 150, 136);
        stroke:none;
    } */
    g[aria-labelledby="id-311-title"]{
        opacity: 0;
    }
    .h100{
        height: 100%;
    }
</style>
<style>




.scrollbar
{
	float: left;
	height: 30em;
	overflow-y: scroll;
}


.style-4::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
    border-radius: 10px;
}

.style-4::-webkit-scrollbar
{
	width: 5px;
	background-color: #F5F5F5;
}

.style-4::-webkit-scrollbar-thumb
{
	background-color: #999595;
	border: 2px solid #969292;
    border-radius: 5px;
}

element.style {
}
.card-body {
    padding: 0.6rem;
}
.table th, .table td {
    vertical-align: inherit;
    padding: 2px;
}
div.justify-between{
        position: absolute;
        overflow: hidden;
        opacity: 0;
}
.w-5 ,.h-5{
    width: 15px;
}
p{opacity: 0;}
.table-position{
    position: absolute;
    height: 100%;
}
.table-position tr td{
    width: 20%;
}
.position-room{
    margin-top: 65px;
    margin-left: 9px;
}
.position-room2{
    margin-left: 9px;
}
.position-room3{
    /* right: 10px; */
    margin-left: 17px;
    position: absolute;
}
.bg-set{
    background: red;
}
.bg-set:hover{
    background: rgb(165, 6, 6);
}
</style>
@endsection


@section('content')
@php
    function set_colot($data){
            $color = '#000';
        $text = "<span class=\" \" style=\"color:$color;font-size:16px;\">$data</span>";
        echo $text;
    }
    function check_value($value,$text){
        $data = $text;
        if(isset($value)){
            if($value!=''){
                $data = $value;
            }
        }
        echo $data;
    }
@endphp

    <div class="row m-0 w-100">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    @component('ENDOTRACK.track.component.firstcard',$view)@endcomponent
                </div>
            </div>
        </div>
    </div>


    <div class="row" style="margin-top: 1em;">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    @component('ENDOTRACK.track.component.table_head',$view)@endcomponent

                    @if(isset($_GET['type']))
                        @if($_GET['type']=='Reprocess')
                            @component('ENDOTRACK.track.component.reprocess',$view)@endcomponent
                        @elseif($_GET['type']=='Repair')
                            @component('ENDOTRACK.track.component.repair'   ,$view)@endcomponent
                        @elseif($_GET['type']=='Available')
                            @component('ENDOTRACK.track.component.available',$view)@endcomponent
                        @else
                            @component('ENDOTRACK.track.component.operation',$view)@endcomponent
                        @endif
                    @else
                            @component('ENDOTRACK.track.component.operation',$view)@endcomponent
                    @endif
                </div>
            </div>
        </div>
    </div>
@endsection



@section('script')
<script src="{{url('')}}/public/sample/assets/js/pages/features/charts/apexcharts.js"></script>
<script src="{{asset('public/js/jquery.min.js')}}"></script>
<script src="{{asset('public/js/core.js')}}"></script>
<script src="{{asset('public/js/charts.js')}}"></script>
<script src="{{asset('public/js/animated.js')}}"></script>
<script>
    am4core.ready(function() {
    am4core.useTheme(am4themes_animated);
    var chart = am4core.create('chartdiv2', am4charts.XYChart)
    chart.colors.step = 2;
    chart.legend = new am4charts.Legend()
    chart.legend.position = 'top'
    chart.legend.paddingBottom = 20
    var xAxis = chart.xAxes.push(new am4charts.CategoryAxis())
    xAxis.dataFields.category = 'category'
    xAxis.renderer.cellStartLocation = 0.1
    xAxis.renderer.cellEndLocation = 0.9
    xAxis.renderer.grid.template.location = 0;

    var yAxis = chart.yAxes.push(new am4charts.ValueAxis());
    yAxis.min = 0;

    function createSeries(value, name) {
        var series = chart.series.push(new am4charts.ColumnSeries())
        series.dataFields.valueY = value
        series.dataFields.categoryX = 'category'
        series.name = name

        series.events.on("hidden", arrangeColumns);
        series.events.on("shown", arrangeColumns);

        var bullet = series.bullets.push(new am4charts.LabelBullet())
        bullet.interactionsEnabled = false
        bullet.dy = 30;
        bullet.label.text = '{valueY}'
        bullet.label.fill = am4core.color('#ffffff')

        return series;
    }
    chart.colors.list = [
        am4core.color("#55B855"),
        am4core.color("#F05A22"),
        am4core.color("#A26135"),
        am4core.color("#4CACE0"),
        am4core.color("#BCE1D6"),
        am4core.color("#7ECEDF"),
        am4core.color("#A19CCC"),
        am4core.color("#A29735"),
        am4core.color("#7BC9B3"),
        am4core.color("#F4A2C6"),
        am4core.color("#FF1410"),
        am4core.color("#8B74FF"),
        am4core.color("#5B82F0"),
        am4core.color("#898989"),
        am4core.color("#FFCC00")
    ];
    chart.data = [
        {
            category: 'Operation',
            Gastroscope: 40,
            Colonoscope: 55,
            Duodenoscope: 60,
            Bronchoscope:10,
            Ultrasonic_gastroscope:50,
            Ultrasonic_bronchoscope:20,
            ENT_Naso_Pharyngo_Laryngoscopes:0,
            Choledochoscope:0,
            Enteroscope:0,
            Pleuroscope:0,
            Cystoscopes:0,
            Ureteroscope:0,
            Tracheal_Intubation_Scope:0,
            Laparoscope:0,
            Hysteroscope:0,
        },
        {
            category: 'Available',
            Gastroscope: 30,
            Colonoscope: 78,
            Duodenoscope: 69,
            Bronchoscope:0,
            Ultrasonic_gastroscope:0,
            Ultrasonic_bronchoscope:0,
            ENT_Naso_Pharyngo_Laryngoscopes:0,
            Choledochoscope:0,
            Enteroscope:0,
            Pleuroscope:0,
            Cystoscopes:0,
            Ureteroscope:0,
            Tracheal_Intubation_Scope:0,
            Laparoscope:0,
            Hysteroscope:0,
        },
        {
            category: 'Reprocess',
            Gastroscope: 50,
            Colonoscope: 33,
            Duodenoscope: 22,
            Bronchoscope:0,
            Ultrasonic_gastroscope:0,
            Ultrasonic_bronchoscope:0,
            ENT_Naso_Pharyngo_Laryngoscopes:0,
            Choledochoscope:0,
            Enteroscope:0,
            Pleuroscope:0,
            Cystoscopes:0,
            Ureteroscope:0,
            Tracheal_Intubation_Scope:0,
            Laparoscope:0,
            Hysteroscope:0,
        }
    ]


    createSeries('Gastroscope', 'Gastroscope');
    createSeries('Colonoscope', 'Colonoscope');
    createSeries('Duodenoscope', 'Duodenoscope');
    createSeries('Bronchoscope', 'Bronchoscope');
    createSeries('Ultrasonic_gastroscope', 'Ultrasonic_gastroscope');
    // createSeries('Ultrasonic_bronchoscope', 'Ultrasonic_bronchoscope');
    // createSeries('ENT_Naso_Pharyngo_Laryngoscopes', 'ENT_Naso_Pharyngo_Laryngoscopes');
    // createSeries('Choledochoscope', 'Choledochoscope');
    // createSeries('Enteroscope', 'Enteroscope');
    // createSeries('Pleuroscope', 'Pleuroscope');
    // createSeries('Cystoscopes', 'Cystoscopes');
    // createSeries('Ureteroscope', 'Ureteroscope');
    // createSeries('Tracheal_Intubation_Scope', 'Tracheal_Intubation_Scope');
    // createSeries('Laparoscope', 'Laparoscope');
    // createSeries('Hysteroscope', 'Hysteroscope');



    function arrangeColumns() {

        var series = chart.series.getIndex(0);

        var w = 1 - xAxis.renderer.cellStartLocation - (1 - xAxis.renderer.cellEndLocation);
        if (series.dataItems.length > 1) {
            var x0 = xAxis.getX(series.dataItems.getIndex(0), "categoryX");
            var x1 = xAxis.getX(series.dataItems.getIndex(1), "categoryX");
            var delta = ((x1 - x0) / chart.series.length) * w;
            if (am4core.isNumber(delta)) {
                var middle = chart.series.length / 3;

                var newIndex = 0;
                chart.series.each(function(series) {
                    if (!series.isHidden && !series.isHiding) {
                        series.dummyData = newIndex;
                        newIndex++;
                    }
                    else {
                        series.dummyData = chart.series.indexOf(series);
                    }
                })
                var visibleCount = newIndex;
                var newMiddle = visibleCount / 3;

                chart.series.each(function(series) {
                    var trueIndex = chart.series.indexOf(series);
                    var newIndex = series.dummyData;

                    var dx = (newIndex - trueIndex + middle - newMiddle) * delta

                    series.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
                    series.bulletsContainer.animate({ property: "dx", to: dx }, series.interpolationDuration, series.interpolationEasing);
                })
            }
        }
    }

    }); // end am4core.ready()
</script>


<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

// Create chart instance
var chart = am4core.create("chartdiv1", am4charts.PieChart);

// Add data

chart.data = [{
  "country": "Operation",
  "litres": {{$count_operation}},
  "color":"#f1bd47"
}, {
  "country": "Repair",
  "litres": {{$count_repair}},
}, {
  "country": "Available(Storage)",
  "litres": {{$count_available}},
}, {
  "country": "Reprocess",
  "litres": {{$count_reprocess}},
}];

// Add and configure Series
var pieSeries = chart.series.push(new am4charts.PieSeries());
pieSeries.dataFields.value = "litres";
pieSeries.dataFields.category = "country";
pieSeries.innerRadius = am4core.percent(40);
pieSeries.ticks.template.disabled = true;
pieSeries.labels.template.disabled = true;
pieSeries.colors.list = [
        am4core.color("#f1bd47"),
        am4core.color("#999999"),
        am4core.color("#33aa93"),
        am4core.color("#db524b"),
];
var rgm = new am4core.RadialGradientModifier();
rgm.brightnesses.push(0.5, 0, 0.1, 0,  0);
pieSeries.slices.template.fillModifier = rgm;
pieSeries.slices.template.strokeModifier = rgm;
pieSeries.slices.template.strokeOpacity = 0.4;
pieSeries.slices.template.strokeWidth = 0.5;

chart.legend = new am4charts.Legend();
chart.legend.position = "bottom";

}); // end am4core.ready()
</script>
<script>
    setTimeout(function(){
        $('g[role="menuitem"]').click(function() {
            var this_val = $(this).attr("id");
            var this_x   = $('g[aria-controls="'+this_val+'"] g g[fill="#000000"]:first').attr('aria-label');
            console.log(this_x);
        });
        $('g[role="group"]').click(function(){
            var g_val = $(this).attr('aria-label');
            console.log(g_val);
        });
     }, 3000);


     setTimeout(() => {
        //window.location.reload();
    }, 5000);
</script>

<script src="http://{{webconfig('server_name')}}:3000/socket.io/socket.io.js"></script>
<script>
    var socket = io.connect('http://{{webconfig('server_name')}}:3000');
    socket.on('chat message', function(msg) {
        location.reload();
        if(msg=="track"){

        }
    });
    // socket.emit('chat message','track');
</script>


@endsection