@extends('layouts.app')
@section('title') {{'Welcome'}} @endsection
@section('content')


<div class="shop_area release-container">
    <div class="container">
        <div class="row">
        <div class="col-lg-9 col-md-12">
           
        </div>
        <div class="col-lg-3 col-md-12 stuck release margins">
            
        </div>
        </div>
    </div>
</div>


<div class="newsletter_area_start">
    <div class="">
        <div class="row">
        <div class="col-12">
        <section class="content">
      <div class="container-fluid"> 
        
      <div class="row">

          <div class="col-lg-3 col-md-6 col-sm-12 col-12 box-hover">
            <div id="todayAppointmentsCompleted"></div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-12 box-hover">
           <div id="todayAppointmentsPending"></div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-12 box-hover">
           <div id="todayBookingsCompleted"></div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-12 box-hover">
           <div id="todayBookingsPending"></div>
          </div>

          <div class="col-lg-3 col-md-6 col-sm-12 col-12 box-hover">
            <div id="todayMobileGroomingsCompleted"></div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-12 box-hover">
           <div id="todayMobileGroomingsPending"></div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-12 box-hover">
           <div id="todayHotelBookingsCompleted"></div>
          </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-12 box-hover">
           <div id="todayHotelBookingsPending"></div>
          </div>

          <div class="col-lg-3 col-md-6 col-sm-12 col-12"> 
            <!-- small box -->
            <div class="small-box box-minheight text-dark bg-warning card w-100 float-left rounded-3 elevation-1 py-1 hover-padding">
              <div class="icon float-left relative icon_card text-center"> <i class="fa fa-book"></i> </div>
              <div class="inner float-left col-12 col-md-10">
                <p class="border-bottom pb-2 mb-2 mt-1 text-dark"><a href="{{url('/adm/bookings')}}">Total Active Bookings</a></p>
                <h3 class="mb-0">{{@$totalBookings}}</h3>
              </div>
            </div>
          
          </div>
          <div class="col-lg-3 col-md-6 col-sm-12 col-12"> 
            <!-- small box -->
            <div class="small-box box-minheight text-dark bg-warning card w-100 float-left rounded-3 elevation-1 py-1 hover-padding">
              <div class="icon float-left relative icon_card text-center"> <i class="fa fa-caret-square-o-down"></i> </div>
              <div class="inner float-left col-12 col-md-10">
                <p class="border-bottom pb-2 mb-2 mt-1 text-dark"><a href="{{url('/adm/bookings')}}" >Todays Active Bookings</a></p>
                <h3 class="mb-0">{{@$todaysBookings}}</h3>
              </div>
            </div>
          </div>
       
          <div class="col-lg-3 col-md-6 col-sm-12 col-12"> 
            <!-- small box -->
            <div class="small-box box-minheight text-dark bg-warning card w-100 float-left rounded-3 elevation-1 py-1 hover-padding">
              <div class="icon float-left relative icon_card text-center"> <i class="fa fa-paperclip"></i> </div>
              <div class="inner float-left col-12 col-md-10">
                <p class="border-bottom pb-2 mb-2 mt-1 text-dark"><a href="{{url('/adm/appointments')}}" >Total Appointments</a></p>
                <h3 class="mb-0">{{@$totalAppointments}}</h3>
              </div>
            </div>
          </div>

          <div class="col-lg-3 col-md-6 col-sm-12 col-12"> 
            <!-- small box -->
            <div class="small-box box-minheight text-dark bg-warning card w-100 float-left rounded-3 elevation-1 py-1 hover-padding">
              <div class="icon float-left relative icon_card text-center"> <i class="fa fa-caret-square-o-down"></i> </div>
              <div class="inner float-left col-12 col-md-10">
                <p class="border-bottom pb-2 mb-2 mt-1 text-dark"><a href="{{url('/adm/appointments')}}" >Todays Appointments</a></p>
                <h3 class="mb-0">{{@$todaysAppointments}}</h3>
              </div>
            </div>
          </div>

          <div class="col-lg-3 col-md-6 col-sm-12 col-12"> 
            <!-- small box -->
            <div class="small-box box-minheight text-dark bg-warning card w-100 float-left rounded-3 elevation-1 py-1 hover-padding">
              <div class="icon float-left relative icon_card text-center"> <i class="fa fa-list"></i> </div>
              <div class="inner float-left col-12 col-md-10">
                <p class="border-bottom pb-2 mb-2 mt-1 text-dark"><a href="{{url('/adm/services')}}" >Most Booked Service & Booking Count</a></p>
                <h3 class="mb-0">@if(!empty($mostusedServiceName)){{ucfirst($mostusedServiceName)}} - @endif{{$serviceCount}}</h3>
              </div>
            </div>
          </div>

          <div class="col-lg-3 col-md-6 col-sm-12 col-12"> 
            <!-- small box -->
            <div class="small-box box-minheight text-dark bg-warning card w-100 float-left rounded-3 elevation-1 py-1 hover-padding">
              <div class="icon float-left relative icon_card text-center"> <i class="fa fa-list"></i> </div>
              <div class="inner float-left col-12 col-md-10">
                <p class="border-bottom pb-2 mb-2 mt-1 text-dark"><a href="{{url('/adm/services')}}" >Second Most Booked Service & Count</a></p>
                <h3 class="mb-0">@if(!empty($SecondMostusedServiceName)) {{ucfirst($SecondMostusedServiceName)}} - @endif{{$secondMostUsederviceCount}}</h3>
              </div>
            </div>
          </div>

          <div class="col-lg-3 col-md-6 col-sm-12 col-12"> 
            <!-- small box -->
            <div class="small-box box-minheight text-dark bg-warning card w-100 float-left rounded-3 elevation-1 py-1 hover-padding">
              <div class="icon float-left relative icon_card text-center"> <i class="fa fa-stethoscope"></i> </div>
              <div class="inner float-left col-12 col-md-10">
                <p class="border-bottom pb-2 mb-2 mt-1 text-dark"><a href="{{url('/adm/doctors')}}" >Most Booked Doctor & Booking Count</a></p>
                <h3 class="mb-0">@if(!empty($mostusedDoctorName)){{ ucfirst($mostusedDoctorName)}} - @endif {{$mostBookedDoctor}}</h3>
              </div>
            </div>
          </div>

          <div class="col-lg-3 col-md-6 col-sm-12 col-12"> 
            <!-- small box -->
            <div class="small-box box-minheight text-dark bg-warning card w-100 float-left rounded-3 elevation-1 py-1 hover-padding">
              <div class="icon float-left relative icon_card text-center"> <i class="fa fa-stethoscope"></i> </div>
              <div class="inner float-left col-12 col-md-10">
                <p class="border-bottom pb-2 mb-2 mt-1 text-dark"><a href="{{url('/adm/doctors')}}" >Second Most Booked Doctor & Booking Count</a></p>
                <h3 class="mb-0">@if(!empty($SecondMostusedDoctoreName)) {{ucfirst($SecondMostusedDoctoreName)}} - @endif {{$secondMostBookedDoctor}}</h3>
              </div>
            </div>
          </div>
        
        </div>


        <div class="row">
          
          <div class="col-md-6">
          
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Service Booking Chart</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                </div>
              </div>
              <div class="card-body">
                <canvas id="serviceChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                
              </div>
              
            </div>
           

          </div>

          <div class="col-md-6">
         
            <div class="card">
              <div class="card-header">
                <h3 class="card-title">Hotel Room Booking Chart</h3>

                <div class="card-tools">
                  <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fa fa-minus"></i>
                  </button>
                </div>
              </div>
              <div class="card-body">
                <div class="chart">
                   <canvas id="hotelChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                </div>
              </div>
             
            </div>
           
         </div>

</div>
        
      </div>
      <!-- /.container-fluid --> 
    </section>
        </div>
        </div>
    </div>
</div>
@endsection
@section('style')
<link rel="shortcut icon" href="{{asset('dashboard/img/faveicon.png')}}"/>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="{{asset('dashboard/plugins/fontawesome-free/css/all.min.css')}}">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="{{asset('dashboard/css/adminlte.min.css')}}">
<!-- custom-styles -->
<link rel="stylesheet" href="{{asset('dashboard/css/style.css')}}">
<!-- view-styles -->
<link rel="stylesheet" href="{{asset('dashboard/css/viewport.css')}}">
@endsection

@section('script')
<script src="{{asset('dashboard/plugins/chart.js/Chart.min.js')}}"></script>
<script src="{{asset('dashboard/js/adminlte.min.js')}}"></script>
<script src="{{asset('dashboard/js/pages/dashboard.js')}}"></script>
<script src="{{asset('dashboard/js/pages/dashboard.js')}}"></script>
<script src="{{asset('dashboard/plugins/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.2/firebase.js"></script>
<script>
    var firebaseConfig = {
        apiKey: "AIzaSyBW4VIOu1sCWUVA65C1mgtF0UUw-INy9Qg",

        authDomain: "canary-a8801.firebaseapp.com",

        databaseURL: "canary-a8801.firebaseio.com",

        projectId: "canary-a8801",

        storageBucket: "canary-a8801.appspot.com",

        messagingSenderId: "1048988424802",

        appId: "1:1048988424802:web:d1f35cf992e8aa1a4b0f3b",

        measurementId: "G-3S9BCZ3TXQ"
    };

    firebase.initializeApp(firebaseConfig);
    const messaging = firebase.messaging();

    function startFCM() {
        messaging
            .requestPermission()
            .then(function () {
                return messaging.getToken()
            })
            .then(function (response) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    url: '{{ route("store.token") }}',
                    type: 'POST',
                    data: {
                        token: response
                    },
                    dataType: 'JSON',
                    success: function (response) {
                        alert('Token stored.');
                    },
                    error: function (error) {
                        alert(error);
                    },
                });

            }).catch(function (error) {
                alert(error);
            });
    }

    messaging.onMessage(function (payload) {
        const title = payload.notification.title;
        const options = {
            body: payload.notification.body,
            icon: payload.notification.icon,
        };
        new Notification(title, options);
    });

</script>
<script>
  $(function () {

  $(document).ready(function(){ 

    todayAppointmentsCompleted();
    todayAppointmentsPending();
    todayBookingsCompleted();
    todayBookingsPending();

    todayMobileGroomingsCompleted();
    todayMobileGroomingsPending();
    todayHotelBookingsCompleted();
    todayHotelBookingsPending();

    bookingGraphShow();
    hotelbookingGraphShow();
});


function todayAppointmentsCompleted()
{ 
    var baseurl = $('#baseurl').val();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    $.ajax({
        type: "GET",
        url: '{{url('adm/todayAppointmentsCompleted')}}',
        data: [],
        success: function(data) {
            $('#todayAppointmentsCompleted').html(data.html);
        }
    });
}

function todayAppointmentsPending()
{
     var baseurl = $('#baseurl').val();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    $.ajax({
        type: "GET",
        url: '{{url('adm/todayAppointmentsPending')}}',
        data: [],
        success: function(data) {
            $('#todayAppointmentsPending').html(data.html);
        }
    });
}

function todayBookingsCompleted()
{
     var baseurl = $('#baseurl').val();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    $.ajax({
        type: "GET",
        url: '{{url('adm/todayBookingsCompleted')}}',
        data: [],
        success: function(data) {
            $('#todayBookingsCompleted').html(data.html);
        }
    });
}

function todayBookingsPending()
{
     var baseurl = $('#baseurl').val();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    $.ajax({
        type: "GET",
        url: '{{url('adm/todayBookingsPending')}}',
        data: [],
        success: function(data) {
            $('#todayBookingsPending').html(data.html);
        }
    });
}

function todayMobileGroomingsCompleted()
{
     var baseurl = $('#baseurl').val();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    $.ajax({
        type: "GET",
        url: '{{url('adm/todayMobileGroomingsCompleted')}}',
        data: [],
        success: function(data) {
            $('#todayMobileGroomingsCompleted').html(data.html);
        }
    });
}

function todayMobileGroomingsPending()
{
     var baseurl = $('#baseurl').val();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    $.ajax({
        type: "GET",
        url: '{{url('adm/todayMobileGroomingsPending')}}',
        data: [],
        success: function(data) {
            $('#todayMobileGroomingsPending').html(data.html);
        }
    });
}

function todayHotelBookingsCompleted()
{
     var baseurl = $('#baseurl').val();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    $.ajax({
        type: "GET",
        url: '{{url('adm/todayHotelBookingsCompleted')}}',
        data: [],
        success: function(data) {
            $('#todayHotelBookingsCompleted').html(data.html);
        }
    });
}

function todayHotelBookingsPending()
{
     var baseurl = $('#baseurl').val();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    $.ajax({
        type: "GET",
        url: '{{url('adm/todayHotelBookingsPending')}}',
        data: [],
        success: function(data) {
            $('#todayHotelBookingsPending').html(data.html);
        }
    });
}

function bookingGraphShow()
{
    var baseurl = $('#baseurl').val();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    $.ajax({
        type: "GET",
        url: '{{url('adm/servicebookingGraphBranch')}}',
        data: [],
        dataType:'JSON',
        success: function(data) {
          var name = [];
          var count = [];
          var length = 12;
          for (var i in data) {
              name.push(data[i].title);
              count.push(data[i].count);
          }

          var donutChartCanvas = $('#serviceChart').get(0).getContext('2d')
          var donutData        = {
            labels: name,
            datasets: [
              {
                data: count,
                //backgroundColor : ['#d31320', 'rgba(23,171,156,1)', '#c4898d'],
                backgroundColor: [
                  'rgb(255, 0, 0)',
                  'rgb(128, 0, 0)',
                  'rgb(255, 255, 0)',
                  'rgb(128, 128, 0)',
                  'rgb(0, 255, 0)',
                  'rgb(0, 128, 0)',
                  'rgb(0, 255, 255)',
                  'rgb(0, 0, 255)',
                  'rgb(255, 0, 255)',
                  'rgb(128, 0, 128)'
              ],
              }
            ]
          }
          var donutOptions     = {
            maintainAspectRatio : false,
            responsive : true,
          }
          
          new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,
            options: donutOptions
          });
        }
    });
}

function hotelbookingGraphShow()
{
    var baseurl = $('#baseurl').val();
    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    });

    $.ajax({
        type: "GET",
        url: '{{url('adm/hotelroomGraphBranch')}}',
        data: [],
        dataType:'JSON',
        success: function(data) {
          var name = [];
          var count = [];
          var length = 12;
          for (var i in data) {
              name.push(data[i].title);
              count.push(data[i].count);
          }

          var donutChartCanvas = $('#hotelChart').get(0).getContext('2d')
          var donutData        = {
            labels: name,
            datasets: [
              {
                data: count,
                //backgroundColor : ['#d31320', 'rgba(23,171,156,1)', '#c4898d'],
                backgroundColor: [
                    'rgb(0, 128, 0)',
                    'rgb(0, 255, 255)',
                    'rgb(0, 0, 255)',
                    'rgb(255, 0, 255)',
                    'rgb(128, 0, 128)',
                    'rgb(255, 0, 0)',
                    'rgb(128, 0, 0)',
                    'rgb(255, 255, 0)',
                    'rgb(128, 128, 0)',
                    'rgb(0, 255, 0)'
                    
                ],
              }
            ]
          }
          var donutOptions     = {
            maintainAspectRatio : false,
            responsive : true,
          }
          
          new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,
            options: donutOptions
          });
        }
    });
}

})
</script>
@endsection