@extends('ioc::layout.main')

@section('head')
<title>iOC > Geolocalizzazione</title>
@endsection

@section('headJs')
    @parent
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
          crossorigin=""/>

    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
            integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
            crossorigin=""></script>

@endsection

@section('breadcrumb')
<i data-feather="chevron-right" class="breadcrumb__icon"></i>
<a href="{{ route('dashboard') }}" class="breadcrumb--active">Dashboard</a>
<i data-feather="chevron-right" class="breadcrumb__icon"></i>
<a href="{{ route('dashboard.geo') }}" class="breadcrumb--active">Geolocalizzazione</a>
@endsection

@section('content')

    @can('view-stats')

        @if($hasGeoFailed)
        <div class="mt-2 flex justify-end">
            <a href="{{route('dashboard.geo-failed')}}">
                <button class="ml-auto button text-white bg-theme-6 shadow-md"><i class="fal fa-location-xmark mr-2"></i>Mostra geocoding falliti</button>
            </a>
        </div>
        @endif

        @livewire('geo-table')

        <div class="grid grid-cols-12 gap-6 mt-3">
            <div class="col-span-12 xxl:col-span-9 grid grid-cols-12 gap-6">
                @livewire('map')
            </div>

            <div class="col-span-12 xxl:col-span-3 xxl:border-l border-theme-5 -mb-10 pb-10">
                <div class="xxl:pl-6 grid grid-cols-12">
                    @livewire('geo-stats-clienti-attivati')
                    @livewire('geo-stats-clienti-non-attivati')
                    @livewire('geo-stats-clienti-con-ordini')
                    @livewire('geo-stats-totale-ordini')
                    @livewire('geo-stats-totale-ordinato')
                    @livewire('geo-stats-valore-medio-ordini')
                    <br />
                    <div class="col-span-12 text-right text-gray-600 italic">* Su un massimo di 1000 risultati mostrati su mappa</div>
                </div>
            </div>
        </div>

    @endcan

@endsection