@extends('main')
@section('content')
<style>
    #map { height: 50vh; width: 100%; margin-bottom:20px}
</style>
<div id="map"></div>

<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-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-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 src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></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);
@php 
$ol = [];
foreach($locations as $var){
  $key = $var['lat'].'|'.$var['lng'];
  if(array_key_exists($key,$ol))
  $ol[$key] += 1;
  else $ol[$key] = 1;
}
@endphp
const locations = {!! json_encode($locations) !!};
    const counts = {!! json_encode($ol) !!};
    const map = L.map('map').setView([0, 0], 2);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap'
    }).addTo(map);

    const markerGroup = new L.featureGroup();

    locations.forEach(loc => {
        if(loc.lat && loc.lng) {
            const qrLabel = loc.qr.replace("https://cdiptqccgi.com/verify/", "");
            const key = loc.lat+'|'+loc.lng;
            const marker = L.marker([loc.lat, loc.lng])
                .bindPopup(`<b>QR Code:</b> ${qrLabel}<br><b>Count:</b> ${counts[key]}`)
                .addTo(markerGroup);
        }
    });

    markerGroup.addTo(map);
    
    if (locations.length > 0) {
        map.fitBounds(markerGroup.getBounds(), { padding: [50, 50] });
    }
</script>
@stop