@extends('company_portal.layouts.master')

@section('title','Creating the third workspace.')

@section('header')
	@include('company_portal.partials.header')
@endsection

@section('content')
    <div class="modal" tabindex="-1" id="free-trial-error">
        <div class="modal-dialog">
        <div class="modal-content content-update">
            <div class="modal-header header-update-details">
                <h5 class="modal-title text-white title-update">Notification</h5>
                <button type="button" class="btn-close btn-close-update" data-bs-dismiss="modal" aria-label="Close">X</button>
            </div>
            <div class="modal-body text-white">
                @if(Session::has('error'))
                {{ Session::get('error') }}
                @endif
            </div>
        </div>
        </div>
    </div>
    <section class="main-container">
        <div class="padding">
            
            <div class="content">
                <p class="h1 pb-3">Welcome to your dashboard {{ Auth::user()->name }} </p>
                @if(Auth::user()->should_enter_card == 0)
                    <section class="my-5">
                        <div class="boxed shadow-box-bolder">
                            <div class="total">
                                <div class="row">
                                    <div class="col-12 offset-0 col-sm-6 offset-sm-0 col-md-3 offset-md-2  col-lg-2">
                                        <div class="flex-column text-center">
                                            <p class="text-uppercase text-bold"><b>Plan</b></p>
                                            @if($plan_subscribed && $freemium)
                                                <div class="h4 color-green pt-2">{{$plan_subscribed->name}}</div>
                                                <div class="h6 pt-2"><a href="{{route('company_billing')}}">Upgrade your account</a></div>
                                            @elseif($plan_subscribed)
                                            
                                                    <div class="h4">{{$plan_subscribed->name}}</div>
                                            
                                                    @if($user->onTrial())
                                                        <p>(Free trial) </p>
                                                    @endif
                                                    @if($user->subscription('default')->cancelled())
                                                        <p>(Cancelled) </p>
                                                    @endif
                                            
                                            @elseif($user->subscription('default') && $user->subscription('default')->cancelled())
                                                <div class="h4 color-green pt-2">No plan</div>
                                                <p>(Cancelled) </p>
                                            @else
                                                <div class="h4 color-green pt-2">Freemium</div>
                                                <div class="h6 pt-2"><a href="{{route('company_billing')}}">Upgrade your account</a></div>
                                            @endif
                                            <p></p>
                                        </div>
                                    </div>
                                    @if(!$freemium)
                                    <div class="col-12 col-sm-6 col-md-3 col-lg-2">
                                        <div class="flex-column text-center">
                                            <p class="text-uppercase"><b>Days remaining</b></p>
                                            <div class="green-numbers h3">{{$daysRemaining }}</div>
                                        </div>
                                    </div>
                                    @else 
                                        <div class="col-12 col-sm-6 col-md-3 col-lg-2">
                                            <div class="flex-column text-center">
                                                <p class="text-uppercase"><b>Bookings a month per user</b></p>
                                                <div class="green-numbers h3">0</div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="col-12 col-sm-6 col-md-3 col-lg-2">
                                        <div class="flex-column text-center">
                                            <p class="text-uppercase"><b>No. of users</b></p>
                                            <div class="green-numbers h3">{{$licences}}</div>
                                            <p></p>
                                        </div>
                                    </div>
                                    <div class="col-12 col-sm-6 col-md-3 offset-md-1 col-lg-2 offset-lg-0">
                                        <div class="flex-column text-center">
                                            <p class="text-uppercase"><b>Lifetime bookings</b></p>
                                            <div class="green-numbers h3">{{count($bookings)}}</div>
                                            <p></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>


                @elseif (Auth::user()->should_enter_card == 1)
                

                @endif



                @if(Auth::user()->should_enter_card == 0)
                    @if (count($getMonthlyBookingsCompany) > 0 )
                    <div class="boxed extra-space mb-5">
                        <div class="mb-5" >
                            <p class="h2">Booking Overview</p>
                            <canvas id="line-chart-company" style="position:relative; max-height:292px; height: auto; width: 100%">
                            </canvas>
                        </div>
                    </div>
                    @endif

                    @if (count($getVenuesLocations) > 0 )
                    <div class="col-12 mb-5">
                        <div class="row g-4">
                            <div class="col-12 col-md-6">
                                <div class="boxed h-100">
                                    <p class="h2">Booking locations</p>
                                    <div class="row">
                                        <div class="col-12 col-md-7 col-lg-9">
                                            <canvas id="bookingsLocations"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-md-6">
                                <div class="boxed">
                                    <p class="h2">Top Users by bookings</p>
                                    <div class="row">
                                        @if(count($bookings) > 0)
                                        <div class="col-12 col-md-7 col-lg-9 mb-3 mb-md-0">
                                            <canvas id="bookingFreelancers"></canvas>
                                          
                                        </div>
                                        @else
                                        <p class="ps-3 pt-4">No bookings from your users</p>
                                        @endif
                                        <div class="col-12 col-md-2">
                                        
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                @endif
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    
@if(Session::has('error'))
<script>
  $(document).ready(function (){
    $("#free-trial-error").modal('show')
  });
</script>
@endif

<script>
if($(document).find("#line-chart-company").length > 0){

  const CHART = document.getElementById("line-chart-company");
  console.log(Chart.defaults.scale.ticks);
  Chart.defaults.scale.ticks.beginAtZero = true;
  let label = [];
  let value = [];
  @foreach ($getMonthlyBookingsCompany as $key => $value)
      label.push("{!!$key!!}");
      value.push("{{count($value)}}");

  @endforeach
  console.log(label, value);
  new Chart(document.getElementById("line-chart-company"), {
      type: 'line',
      data: {
          labels: label,
          datasets: [{
              label: 'Bookings',
              data: value,
              borderColor: "#000",
              borderWidth: 2,
              fill: false,
              lineTension: 0.1,
              pointRadius: 3,
              pointHitRadius: 10,
              backgroundColor: '#fff',
              hoverBorderColor: '#000',
              hoverBackgroundColor: '#7FDAC7'
          }, ]
      },
      options: {
          responsive: true,
          legend: {
              display: false            },
          scales: {
              yAxes: [{
                  display: true,
                  scaleLabel: {
                      display: true,
                      labelString: 'No. of bookings'
                  },
                  ticks: {
                      precision: 0
                  },
                  gridLines: {
                      display: false
                  }
              }],
              xAxes: [{
                  gridLines: {
                      display: false
                  }
              }]
          }
      }
  });

}

</script>

<script>
// // ========Pie Chart==============

let labels1 = [];
let data1 = [];
let value = [];
let colors1 = ['#D8F3DC', '#B7E4C7', '#95D5B2' , '#74C69D' , '#52B788' , '#40916C' , '#2D6A4F' , '#1B4332' , '#081C15'];

@foreach ($getVenuesLocations as $key => $value)
  labels1.push("{!!$key!!}");
  value.push("{{count($value)}}");
@endforeach


if($(document).find("#bookingsLocations").length > 0){
let myDoughnutChart = document.getElementById("bookingsLocations").getContext('2d');


let chart1 = new Chart(myDoughnutChart, {
  type: 'pie',
  data: {
      labels: labels1 ,
      datasets: [{
          data: value,
          backgroundColor: ['#D8F3DC', '#B7E4C7', '#95D5B2' , '#74C69D' , '#52B788' , '#40916C' , '#2D6A4F' , '#1B4332' , '#081C15']
      }]
  },
  options: {
      legend: {
          display: true,
          position: 'right',
      }
  }
});

}
</script>

<script>
  let labels2 = [];
  let data2 = [];
  let colors2 = [];
  let value2 = [];

  @foreach ($topUserFreelancerids as  $topUserFreelancerid)
      labels2.push("{!!$topUserFreelancerid->freelancer->user->username!!}");
      value2.push("{{$topUserFreelancerid->count}}");

  @endforeach

  if($(document).find("#bookingFreelancers").length > 0){
  let myDoughnutChart1 = document.getElementById("bookingFreelancers").getContext('2d');
  let chart2 = new Chart(myDoughnutChart1, {
      type: 'pie',
      data: {
          labels: labels2,
          datasets: [{
              data: value2 ,
              backgroundColor: ['#D8F3DC', '#B7E4C7', '#95D5B2' , '#74C69D' , '#52B788' , '#40916C' , '#2D6A4F' , '#1B4332' , '#081C15']
          }]
      },
      options: {
          legend: {
              display: true,
              position : 'right',
          }
      }
  });

}

</script>
@endpush