@extends("layouts.admin.app")
@section("page-title")
    Dashboard
@endSection
@section("page-nav-title")
    <div class="app-title">
        <div>
            <h1><i class="fa fa-dashboard"></i> {{__("Dashboard")}}</h1>
            <p>Sahla Dashboard</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">

            <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
            <li class="breadcrumb-item"><a href="#">{{__("Dashboard")}}</a></li>
        </ul>
    </div>
@endsection

@section("content")
    <div class="row">
        <div class="col-md-6 col-lg-3">
            <a style="  text-decoration: none"  href="{{route("admin.clients.index")}}">
            <div class="widget-small primary coloured-icon"><i class="icon fa fa-user fa-3x"></i>
                <div class="info">
                    <h4>{{__("Users")}}</h4>
                    <p><b id="users">{{$counter->users}}</b></p>
                </div>
            </div>
            </a>
        </div>
        <div class="col-md-6 col-lg-3">
            <a style="  text-decoration: none"  href="{{ route("admin.technician.index", ["page" => "single"]) }}">
            <div class="widget-small primary coloured-icon"><i class="icon fa fa-user-tie fa-3x" style="background: #1e7e34"></i>
                <div class="info">
                    <h4>{{__("Technicians")}}</h4>
                    <p><b id="technicians">{{$counter->technicians}}</b></p>
                </div>
            </div>
            </a>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="widget-small warning coloured-icon"><i class="icon fas fa-list-ul fa-3x"></i>
                <div class="info">
                    <h4>{{__("Services")}}</h4>
                    <p><b id="services">{{$counter->services}}</b></p>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <a style="  text-decoration: none" href="{{route("admin.orders.index")}}">
            <div class="widget-small danger coloured-icon"><i class="icon fas fa-th-large fa-3x"></i>
                <div class="info">
               <h4>{{__("Orders")}}</h4>
                    <p><b id="orders">{{$counter->orders}}</b></p>
                </div>
            </div>
            </a>
        </div>

        <div class="col-md-6 col-lg-3">
            <a style="  text-decoration: none" href="{{route("admin.orders.index" , $status="under-processing")}}">
            <div class="widget-small danger coloured-icon"><i class="icon fas fa-th-large fa-3x"></i>
                <div class="info">
                    <h4>{{__("Orders Accepted")}}</h4>
                    <p><b id="ordersAccepted">{{$counter->ordersAccepted }}</b></p>
                </div>
            </div>
            </a>
        </div>

        <div class="col-md-6 col-lg-3">
            <a style="  text-decoration: none"  href="{{route("admin.orders.index" , $status="finish")}}">
            <div class="widget-small danger coloured-icon"><i class="icon fas fa-th-large fa-3x"></i>
                <div class="info">
                    <h4>{{__("Orders Finished")}} </h4>
                    <p><b id="ordersFinesh">{{$counter->ordersFinesh}}</b></p>
                </div>
            </div>
            </a>
        </div>

        <div class="col-md-6 col-lg-3">
            <a style="  text-decoration: none"  href="{{route("admin.orders.index" , $status="pending")}}">
            <div class="widget-small danger coloured-icon"><i class="icon fas fa-th-large fa-3x"></i>
                <div class="info">
                    <h4>{{__("Orders Pending")}} </h4>
                    <p><b id="ordersPending">{{$counter->ordersPending}}</b></p>
                </div>
            </div>
            </a>
        </div>


        <div class="col-md-6 col-lg-3">
            <a style="  text-decoration: none" href="{{route("admin.orders.index" , $status="canceled")}}">
              <div class="widget-small danger coloured-icon"><i class="icon fas fa-th-large fa-3x"></i>
                  <div class="info">
                      <h4>{{__("Orders Canceled")}} </h4>
                      <p><b id="ordersCanceled">{{$counter->ordersCanceled}}</b></p>
                  </div>
              </div>
            </a>
        </div>

        <div class="col-md-6 col-lg-3">
            <a style="  text-decoration: none" href="{{route("admin.orders.index" , $status="under-guarantee")}}">
            <div class="widget-small danger coloured-icon"><i class="icon fas fa-th-large fa-2x"></i>
                <div class="info">
                    <h4>{{__('Under Guarantee')}} </h4>
                    <p><b id="orderUnderGuarantee">{{$counter->orderUnderGuarantee}}</b></p>
                </div>
            </div>
            </a>
        </div>
    </div>


@endsection

@section("scripts")

    <script type="text/javascript" src="{{asset('assets/js/plugins/chart.js') }}"></script>

    <script>
        setInterval(()=>{
            $.ajax({
                type: "get",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{route('ajax.dashboard.index')}}",
                data: {},
                success: function( response ) {
                    const data = response.data.counter;
                    $("#users").text(data.users);
                    $("#technicians").text(data.technicians);
                    $("#services").text(data.services)
                    $("#orders").text(data.orders)
                    $("#ordersAccepted").text(data.ordersAccepted )
                    $("#ordersFinesh").text(data.ordersFinesh)
                    $("#ordersPending").text(data.ordersPending)
                    $("#ordersCanceled").text(data.ordersCanceled)
                    $("#orderUnderGuarantee").text(data.orderUnderGuarantee)
                },
                error : function (response) {
                    console.log("Error!");
                }
            });
        },10000);
    </script>
        </script>
        <!-- Google analytics script-->
        <script type="text/javascript">
            if(document.location.hostname == 'pratikborsadiya.in') {
                (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
                    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
                    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
                ga('create', 'UA-72504830-1', 'auto');
                ga('send', 'pageview');
            }
        </script>
@endsection