@extends('layouts.vertical', ["page_title"=> "Dashboard", "mode" => $mode ?? "", "demo" => $demo ?? ""])

@section('css')
<!-- third party css -->
<link href="{{asset('assets/libs/flatpickr/flatpickr.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/selectize/selectize.min.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/libs/jquery-toast-plugin/jquery-toast-plugin.min.css')}}" rel="stylesheet" type="text/css" />
<!-- third party css end -->
@endsection

@section('content')
<!-- Start Content-->

<div class="container-fluid">

    <!-- start page title -->
    <div class="row">
        <div class="col-6">
            <div class="page-title-box">
                <h4 class="page-title">Dashboard</h4>
            </div>
        </div>
        <div class="col-6 mt-2">
            <a href="/index?refresh=1" class="btn btn-dark rounded waves-effect waves-light float-end">Refresh Data</a>
        </div>
    </div>
    @php
    $roles = json_decode(auth()->user()->roles);
    
    @endphp

    <div class="row">
        @foreach($metrics as $metric)
        <div class="col-lg-4">
            <div class="card">
                <div class="card-body">
                    <h4 class="header-title mb-0">{{$metric->name}}</h4>
                    <h6>{{$metric->current_period}}</h6>
                    <div class="widget-chart text-center" dir="ltr">
                        <div id="chart-{{$metric->id}}" class="mt-0" data-colors="#f1556c"></div>
                        <h5 class="text-muted mt-0">{{$metric->label}}</h5>
                        <h2>{{$metric->value}} {{$metric->type=='verses' ? ' / ' . $metric->max : ''}} </h2>
                        <div class="button-list">
                            @foreach($metric->available_charts as $chart)
                                <a href="/metricreport/report?id={{$metric->id}}&type={{$chart->type}}&chart={{$chart->chart}}" class="btn btn-soft-blue btn-rounded">{{$chart->name}} Chart</a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div> <!-- end card -->
        </div> <!-- end col-->
        @endforeach
    </div>


    <div class="row">
        <div class="col-6">
            <div class="card p-2">
            <h6 class="mb-2">Copy and share unique Paramedic register link.</h6>
            <textarea name="" id="linkcontainer" rows="3" class="form-control">https://road.xltr.in/lmsregister/{{auth()->user()->user_id}}</textarea>
            <button type="button" class="btn btn-primary mt-2" id="copylink">Copy Link</button>
            </div>
            <div class="card p-2">
            <h6 class="mb-2">Copy and share unique Chemist register link.</h6>
            <textarea name="" id="linkcontainerchemist" rows="3" class="form-control">https://road.xltr.in/lmsregisterchemist/{{auth()->user()->user_id}}</textarea>
            <button type="button" class="btn btn-primary mt-2" id="copylinkchemist">Copy Link</button>
            </div>
        </div> <!-- end col -->
        <div class="col-6">
            <div class="card p-2">
                <p class="mb-2">Download and share unique QR Code with register link.</p>
                <div class="row">
                    <div class="col-6">
                        <h6>Paramedic QR Code</h6>
                        <div class="align-center">
                            <img src="https://api.qrserver.com/v1/create-qr-code/?size=200&data=https://road.xltr.in/lmsregister/{{auth()->user()->user_id}}" class="img-fluid">
                        </div>
                        <a href="https://api.qrserver.com/v1/create-qr-code/?size=200&data=https://road.xltr.in/lmsregister/{{auth()->user()->user_id}}" target="_blank" download class="btn btn-primary mt-2">Paramedic QR Code</a>
                    </div>
                    <div class="col-6">
                        <h6>Chemist QR Code</h6>
                        <div class="align-center">
                            <img src="https://api.qrserver.com/v1/create-qr-code/?size=200&data=https://road.xltr.in/lmsregisterchemist/{{auth()->user()->user_id}}" class="img-fluid">
                        </div>
                        <a href="https://api.qrserver.com/v1/create-qr-code/?size=200&data=https://road.xltr.in/lmsregisterchemist/{{auth()->user()->user_id}}" target="_blank" download class="btn btn-primary mt-2">Chemist QR Code</a>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
  
    <div class="row">
        @foreach($sessions as $sess)
        <div class="col-md-6 col-xl-3">
            <div class="card" id="tooltip-container">
                <div class="card-body">
                    <i class="fa fa-info-circle text-muted float-end" data-bs-container="#tooltip-container" data-bs-toggle="tooltip" data-bs-placement="bottom" title="More Info"></i>
                    <h4 class="mt-0 font-16">{{$sess->number}} ({{$sess->type}})</h4>
                    <h2 class="text-primary my-3 text-center"><span data-plugin="counterup">{{$sess->reg_confirmed}}</span> / <span data-plugin="counterup">{{$sess->reg_count}}</span></h2>
                    <p class="text-muted mb-0">{{date("d M Y", strtotime($sess->start_date))}} <span class="float-end">{{$sess->venue}}</span></p>
                    <div class="button-list mt-2">
                        <a href="/session/visit?id={{$sess->id}}" class="btn btn-success btn-xs waves-effect waves-light"><i class="mdi mdi-web"></i> Microsite</a>
                        <a href="/analytic/sessionusers?id={{$sess->id}}" class="btn btn-danger btn-xs waves-effect waves-light"><i class="mdi mdi-account"></i> Analytics</a>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
        
    </div>
    <!-- end row -->


</div> <!-- container -->

@endsection

@section('script')
<!-- third party js -->
<script src="{{asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>
<script src="{{ URL::asset('assets/libs/jquery-toast-plugin/jquery-toast-plugin.min.js')}}"></script>
<script src="{{ URL::asset('assets/js/pages/toastr.init.js')}}"></script>
<!-- third party js ends -->

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('#copylink').click(function(){
            try {
                copyToClipboard("https://road.xltr.in/lmsregister/{{auth()->user()->user_id}}");
                $.NotificationApp.send("success!", "Copied the link to your Clipboard", 'top-center', '#5ba035', 'success');
            } catch (err) {
                $.NotificationApp.send("Oops, unable to copy!", "Please copy the link manually.", 'top-center', '#bf441d', 'error');
                //console.log('Oops, unable to copy');
            }
        });
        $('#copylinkchemist').click(function(){
            try {
                copyToClipboard("https://road.xltr.in/lmsregisterchemist/{{auth()->user()->user_id}}");
                $.NotificationApp.send("success!", "Copied the link to your Clipboard", 'top-center', '#5ba035', 'success');
            } catch (err) {
                $.NotificationApp.send("Oops, unable to copy!", "Please copy the link manually.", 'top-center', '#bf441d', 'error');
                //console.log('Oops, unable to copy');
            }
        });
    });
    function copyToClipboard(textToCopy) {
          var textArea;
          function isOS() {
            //can use a better detection logic here
            return navigator.userAgent.match(/ipad|iphone/i);
          }

          function createTextArea(text) {
            textArea = document.createElement('textArea');
            textArea.readOnly = true;
            textArea.contentEditable = true;
            textArea.value = text;
            document.body.appendChild(textArea);
          }

          function selectText() {
            var range, selection;

            if (isOS()) {
              range = document.createRange();
              range.selectNodeContents(textArea);
              selection = window.getSelection();
              selection.removeAllRanges();
              selection.addRange(range);
              textArea.setSelectionRange(0, 999999);
            } else {
              textArea.select();
            }
          }

          function copyTo() {
            document.execCommand('copy');
            document.body.removeChild(textArea);
          }

          createTextArea(textToCopy);
          selectText();
          copyTo();
        }
</script>
<script src="{{asset('assets/libs/apexcharts/apexcharts.min.js')}}"></script>
<!-- third party js ends -->

<script type="text/javascript">
    jQuery(document).ready(function($){
        var colors = ['#01C14B', '#FF8050', '#4A5CD0', '#FECD00', '#707070'];
        var dataColors = $("#total-revenue").data('colors');
        if (dataColors) {
            colors = dataColors.split(",");
        }
        let options = {}
        let chart = {}
        let values = []
        @foreach($metrics as $metric)
            @if($metric->agg_type == 'individual')
                @if($metric->type == 'grouped')
                    values = {!!json_encode($metric->values)!!}
                    options = {
                      series: values.map(a => a.value),
                      chart: {
                      width: 250,
                      type: 'pie',
                      animations: {
                        enabled: true,
                        easing: 'easeinout',
                        speed: 2000,
                      }
                    },
                    labels: values.map(a => a.label),
                    responsive: [{
                      breakpoint: 480,
                      options: {
                        chart: {
                          width: 250
                        },
                        legend: {
                          position: 'bottom'
                        }
                      }
                    }]
                    };
                @elseif($metric->type == 'simple')
                    options = {
                        series: [{{ceil($metric->max>0 ? ($metric->value/$metric->max)*100 : 0 )}}],
                        chart: {
                            height: 250,
                            type: 'radialBar',
                            animations: {
                                enabled: true,
                                easing: 'easeinout',
                                speed: 2000,
                            }
                        },
                        plotOptions: {
                            radialBar: {
                                startAngle: -90,
                                endAngle: 270,
                                hollow: {
                                    size: '58%',
                                }
                            },
                        },
                        fill: {
                          type: 'gradient',
                          gradient: {
                              shade: 'light',
                              shadeIntensity: 0.15,
                              inverseColors: false,
                              opacityFrom: 1,
                              opacityTo: 1,
                              stops: [0, 50, 65, 91]
                          },
                        },
                        stroke: {
                          dashArray: 7
                        },
                        colors: colors,
                        labels: ['{{$metric->label}}'],
                    };
                @endif
                
            @elseif($metric->agg_type == 'team')
                @if($metric->type == 'grouped')
                    values = {!!json_encode($metric->values)!!}
                    options = {
                      series: values.map(a => a.value),
                      chart: {
                      width: 250,
                      type: 'pie',
                      animations: {
                        enabled: true,
                        easing: 'easeinout',
                        speed: 2000,
                      }
                    },
                    labels: values.map(a => a.label),
                    responsive: [{
                      breakpoint: 480,
                      options: {
                        chart: {
                          width: 250
                        },
                        legend: {
                          position: 'bottom'
                        }
                      }
                    }]
                    };
                @elseif($metric->type == 'simple' || $metric->type == 'verses')
                    options = {
                        series: [{{ceil($metric->max>0 ? ($metric->value/$metric->max)*100 : 0 )}}],
                        chart: {
                            height: 250,
                            type: 'radialBar',
                            animations: {
                                enabled: true,
                                easing: 'easeinout',
                                speed: 2000,
                              }
                        },
                        plotOptions: {
                            radialBar: {
                                hollow: {
                                    size: '68%',
                                }
                            },
                        },
                        fill: {
                          type: 'gradient',
                          gradient: {
                              shade: 'dark',
                              shadeIntensity: 0.15,
                              inverseColors: false,
                              opacityFrom: 1,
                              opacityTo: 1,
                              stops: [0, 50, 65, 91]
                          },
                        },
                        stroke: {
                          dashArray: 4
                        },
                        colors: colors,
                        labels: ['{{$metric->label}}'],
                    };
                @endif
            @endif
            chart['{{$metric->id}}'] = new ApexCharts(document.querySelector("#chart-{{$metric->id}}"), options);
            chart['{{$metric->id}}'].render();
        @endforeach
    });
</script>


@endsection