@php
use App\models\Mongo;

@endphp
@php
    $registered = [];
    $finished = [];
    $labels = [];

    $countall = 0;
    $polypectomyall = 0;
    for ($i=0; $i < $stations ; $i++) {
        $str      = str_pad($i, 2, "0", STR_PAD_LEFT);
        //$finish   = isset($station["hos$str"."_gender"]['finished']) ? $station["hos$str"."_gender"]['finished'] : 0;
        $register = isset($station["hos$str"."_gender"]['unfinished']) ? 0 : 0;

        $room = Mongo::table("tb_room")->where("room_name",$station["hos$str"."_gender"]['name'])->first();
        //dd($room);
        $polyp = Mongo::table("tb_case")
        ->where("room",intval($room['room_id']))
        ->where("appointment_date",date("Y-m-d"))
        ->whereIn('diagnostic',["Rectal polyp","Anal polyp","Colonic polyp"])
        ->count();

        $polypectomy = Mongo::table("tb_case")
        ->where("room",intval($room['room_id']))
        ->where("appointment_date",date("Y-m-d"))
        ->whereIn('procedure_sub',["Polypectomy"])
        ->count();

        $countall = $countall+$polyp;
        $polypectomyall = $polypectomyall+$polypectomy;

        $name     = isset($station["hos$str"."_gender"]['name']) ? $station["hos$str"."_gender"]['name'] : '';
        $finished[]   = $polypectomy;
        $registered[] = $polyp;
        $labels[]     = "$name";
    }


@endphp

<div class="col-4">
    <div class="card h-charts mt-2">
        <div class="card-header">
            <span class="text-header-chart">Polyp ({{$countall}}) | Polypectomy ({{$polypectomyall}})</span>
        </div>
        <div class="card-body p-0 mt-4">
            <div id="bar_status" data-colors='["--vz-danger", "--vz-primary", "--vz-success"]' class="apex-charts" dir="ltr"></div>
        </div>
    </div>
</div>



<script>
  var registered = @json($registered);
  var finished   = @json($finished);
  var status_labels = @json($labels);
  console.log(registered, finished, status_labels);
   var options = {
         series: [{

         name: 'Polyp',
         data: registered
       },
       {
         name: 'Polypectomy',
         data: finished
       },
    ],
        chart: {
         type: 'bar',
         height: 190,
         width: '80%',
       },
       plotOptions: {
         bar: {
           horizontal: false,
           columnWidth: '50%',
           endingShape: 'rounded'
         },
       },
       dataLabels: {
         enabled: false
       },
       stroke: {
         show: true,
         width: 2,
         colors: ['transparent']
       },
       xaxis: {
         categories: status_labels,
       },
       yaxis: {
         title: {
           text: ''

         }
       },
       fill: {
         opacity: 1,
         colors:['#245788', '#0ab39c'],
       },
       tooltip: {
         y: {
           formatter: function (val) {
             return  `${val} เคส`
           }
         }
       },
       legend: {
           show: true,
           position: 'bottom',
           horizontalAlign: 'center',
       },
       colors: ['#245788', '#0ab39c'],
       };

       var chart = new ApexCharts(document.querySelector("#bar_status"), options);
       chart.render();
</script>
