@extends('main')
@section('content')
<div class="row">
    <div class="col-xl-3 col-lg-3 col-sm-6">
        <a href="#">
            <div class="widget-stat card">
                <div class="card-body p-4">
                    <div class="media ai-icon">
                        <span class="mr-3 bgl-success text-success">
                            <svg id="icon-orders" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                            <line x1="16" y1="13" x2="8" y2="13"></line>
                            <line x1="16" y1="17" x2="8" y2="17"></line>
                            <polyline points="10 9 9 9 8 9"></polyline>
                            </svg>
                        </span>
                        <div class="media-body">
                            <p class="mb-1">Total QR Generated</p>
                            <h4 class="mb-0">{{$carpets}}</h4>
                            <!--<span class="badge badge-primary">+3.5%</span>-->
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
    <div class="col-xl-3 col-lg-3 col-sm-6">
        <a href="#">
        <div class="widget-stat card">
            <div class="card-body p-4">
                <div class="media ai-icon">
                    <span class="mr-3 bgl-warning text-warning">
                        <svg id="icon-orders" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="16" y1="13" x2="8" y2="13"></line>
                        <line x1="16" y1="17" x2="8" y2="17"></line>
                        <polyline points="10 9 9 9 8 9"></polyline>
                        </svg>
                    </span>
                    <div class="media-body">
                        <p class="mb-1">Total QR Scanned</p>
                        <h4 class="mb-0">{{$totalScanned}}</h4>
                        <!--<span class="badge badge-primary">+3.5%</span>-->
                    </div>
                </div>
            </div>
        </div>
        </a>
    </div>
    <div class="col-xl-3 col-lg-3 col-sm-6">
        <a href="#">
            <div class="widget-stat card">
                <div class="card-body p-4">
                    <div class="media ai-icon">
                        <span class="mr-3 bgl-info text-info">
                            <svg id="icon-orders" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                            <polyline points="14 2 14 8 20 8"></polyline>
                            <line x1="16" y1="13" x2="8" y2="13"></line>
                            <line x1="16" y1="17" x2="8" y2="17"></line>
                            <polyline points="10 9 9 9 8 9"></polyline>
                            </svg>
                        </span>
                        <div class="media-body">
                            <p class="mb-1">Total Scan</p>
                            <h4 class="mb-0">{{$total}}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
</div>
<div class="row">
    <div class="col-xl-12 col-xxl-12 col-lg-12 col-md-12">
        <div class="card">
            <div class="card-header border-0 pb-0">
                <h4 class="card-title">QR Code Statistics(%)</h4>
            </div>
            <div class="card-body pt-2">
             
                <div class="row mx-0 align-items-center">
                    <div class="col-sm-8 col-md-7  px-0">
                        <div id="chartCircle"></div>
                    </div>
                    <div class="col-sm-4 col-md-5 px-0">
                        <div class="patients-chart-deta">
                            <div class="col px-0">
                                <span class="bg-primary"></span>	
                                <div>
                                    <p>Total QR Code</p>
                                    <h3>{{$carpets}}</h3>
                                </div>
                            </div>
                            <div class="col px-0">
                                <span class="bg-success"></span>	
                                <div>
                                    <p>Scanned QR Code</p>
                                    <h3>{{$totalScanned}}
                                    </h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row">
   
    <div class="col-md-12">
        <div class="card">
            <div class="card-header border-0 pb-0">
                <h4 class="card-title">Traceability Report</h4>
            </div>
            <div class="card-body">
                <table id="example" class="display" style="min-width: 845px">
                        <thead>
                            <tr>
                                <th>S. No.</th>
                                <th>QR Code</th>
                                <th>Craft Type</th>
                                <th>Product Code</th>
                                <th>Latitude Longitude</th>
                                <th>Name of Place</th>
                                <th>Date & Time</th>                        
                            </tr>
                        </thead>
                        <tbody>
                             @foreach($data as $i => $row)
                           @php
                           $scanned = \App\Carpet::select('gi_registration_no','idUser','type','qrcode','idCarpet')->whereNotNull('qrcode')->where('idCarpet',$row->idCarpet)->orderBy('idCarpet', 'desc')->first();
                           @endphp
                           <tr>
                             <td>{{ $i+1 }}</td>
                            <td>
                            @if($scanned != null)
                                <a href="{{ url('/scan-map') }}?id={{$row->idCarpet}}"
                                target="_blank">
                                    {{ str_replace("https://cdiptqccgi.com/verify/","", $scanned->qrcode) }}
                                </a>
                            @endif
                            </td>
                            <td>@if($scanned != null) {{$scanned->type}} @endif</td>
                            <td>@if($scanned != null) {{$scanned->gi_registration_no}} @endif</td>
                            <td>{{ round($row->latitude, 4) }} {{ round($row->longitude,4) }}</td>
                            <td><a href="https://www.google.com/maps/search/?api=1&query={{$row->latitude}},{{$row->longitude}}" target="_blank">View Place</a></td>
                            <td>{{\Carbon\Carbon::parse($row->created_at)->format('d-m-Y')}}</td>
                           </tr>
                           @endforeach
                        </tbody>
                    </table>
            </div>
        </div>
    </div>
   
</div>
@stop
@section('script')

<script>
      $(document).ready(function () {
        $('#carpettable').DataTable({
            "order": [[0, "asc"]],
            dom: 'Bfrtip',
//            buttons: [
//                'copy', 'csv', 'excel', 'pdf', 'print'
//            ]
           
        });
    });
(function($) {
    "use strict"

    //date picker classic default
    $('.datepicker-default').pickadate({
        format :'dd-mm-yyyy'
    });

})(jQuery);
(function ($) {
    /* "use strict" */
    var dzChartlist = function () {
        var screenWidth = $(window).width();
         var chartCircle = function () {


            var optionsCircle = {
                chart: {
                    type: 'radialBar',
                    //width:320,
                    height: 350,
                    offsetY: 0,
                    offsetX: 0,

                },
                plotOptions: {
                    radialBar: {
                        size: undefined,
                        inverseOrder: false,
                        hollow: {
                            margin: 0,
                            size: '35%',
                            background: 'transparent',
                        },

                        track: {
                            show: true,
                            background: '#e1e5ff',
                            strokeWidth: '10%',
                            opacity: 1,
                            margin: 15, // margin is in pixels
                        },

                    },
                },
                responsive: [{
                        breakpoint: 480,
                        options: {
                            chart: {
                                offsetY: 0,
                                offsetX: 0
                            },
                            legend: {
                                position: 'bottom',
                                offsetX: 0,
                                offsetY: 0
                            }
                        }
                    }],

                fill: {
                    opacity: 1
                },

                colors: ['#209f84', '#551164'],
                series: [ {{floor($carpets)}}, {{floor($totalScanned)}}],
                labels: [ 'Total QR', 'Scanned QR'],
                legend: {
                    fontSize: '16px',
                    show: false,
                },
            }

            var chartCircle1 = new ApexCharts(document.querySelector('#chartCircle'), optionsCircle);
            chartCircle1.render();

        }
       /* Function ============ */
        return {
            init: function () {
            },

            load: function () {
               chartCircle();
            },

            resize: function () {
            }
        }

    }();

    jQuery(document).ready(function () {
    });

    jQuery(window).on('load', function () {
        setTimeout(function () {
            dzChartlist.load();
        }, 1000);

    });

    jQuery(window).on('resize', function () {


    });

})(jQuery);
</script>
@stop