@extends('frontend.layouts.app')
@section('content')
@php
    $breadCrump2 = 'Service Provider Dashboard';
@endphp

<style>.profile-menu {
    list-style-type: none;
    padding: 0;
}

.profile-menu li {
    position: relative;
}

.dropbtn {
    display: block;
    /* padding: 10px; */
    text-decoration: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>

  <!--Job alerts start -->
  <div class="wrapper-inner">
    <div class="container">
      <div class="profile-dash">
        @include('frontend.serviceProvider.sidebar')

        <div class="profile-dash-rt">
          <div class="my-profile-inner">
            <div class="headingBlock">
                <h4>Dashboard</h4>
            </div>
            <div class="dashboard-main">
              <div class="overview-box">
                <h5>Overview</h5>
                <div class="row">
                  <div class="col-md-4">
                    <div class="dashboard-list">
                      <div class="dashboard-Lt">
                        Active Services
                        <strong>{{ $active_services }}</strong>
                      </div>
                      <div class="dashboard-Rt">
                        <img src="{{asset('frontend/images/service-active-01.png')}}" alt="service-active-01">
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="dashboard-list">
                      <div class="dashboard-Lt">
                        Completed Job <strong>{{ $complete_services }}</strong>
                      </div>
                      <div class="dashboard-Rt">
                        <img src="{{asset('frontend/images/service-active-02.png')}}" alt="service-active-02">
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="dashboard-list">
                      <div class="dashboard-Lt">
                        Pending Job<strong>{{ $pending_services }}</strong>
                      </div>
                      <div class="dashboard-Rt">
                        <img src="{{asset('frontend/images/service-active-03.png')}}" alt="service-active-03">
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="vacancy-box">
                <div class="vacancy-top-row">
                    <h5>Revenue Graph</h5>
                  <div style="width: 100%;">
                    <form method="GET" class="" action="{{ route('serviceProvider.home') }}" accept-charset="UTF-8" id="graphform">
                      @csrf
                      <div class="row">
                        <div class="col-md-2">
                          <div class="form-group">
                            <div class="form-group">
                            <select class="form-control" name="type" onchange="onchangeType(this)">
                                <option value="year" <?=isset($inputs["type"]) && $inputs["type"]=="year" ? "selected" : "";?>>Yearly</option>
                                <option value="month" <?=!isset($inputs["type"]) || $inputs["type"]=="month" ? "selected" : "";?>>Monthly</option>
                                <option value="week" <?=isset($inputs["type"]) && $inputs["type"]=="week" ? "selected" : "";?>>Weekly</option>
                                <option value="custom" <?=isset($inputs["type"]) && $inputs["type"]=="custom" ? "selected" : "";?>>Custom</option>
                            </select>
                            </div>
                          </div>
                        </div>

                          <div class="form-group col-md-2" id="year-section" style="display: none;">
                            <select class="form-control" id="year-select" name="value" disabled="">
                                <option value="">All Year</option>
                                <option value="{{Carbon::now()->year}}" <?=isset($inputs["value"]) && $inputs["value"]== Carbon::now()->year ? "selected" : "";?>>{{Carbon::now()->year}}</option>
                                <option value="{{Carbon::now()->subYear(1)->year}}" <?=isset($inputs["value"]) && $inputs["value"]== Carbon::now()->subYear(1)->year ? "selected" : "";?>>{{Carbon::now()->subYear(1)->year}}</option>
                                <option value="{{Carbon::now()->subYear(2)->year}}" <?=isset($inputs["value"]) && $inputs["value"]== Carbon::now()->subYear(2)->year ? "selected" : "";?>>{{Carbon::now()->subYear(2)->year}}</option>
                                <option value="{{Carbon::now()->subYear(3)->year}}" <?=isset($inputs["value"]) && $inputs["value"]== Carbon::now()->subYear(3)->year ? "selected" : "";?>>{{Carbon::now()->subYear(3)->year}}</option>
                                <option value="{{Carbon::now()->subYear(4)->year}}" <?=isset($inputs["value"]) && $inputs["value"]== Carbon::now()->subYear(4)->year ? "selected" : "";?>>{{Carbon::now()->subYear(4)->year}}</option>
                            </select>
                          </div>
                          <div class="form-group col-md-2" id="month-section">
                            <select class="form-control" id="month-select" name="value">
                              {{-- <option value="">All Month</option> --}}
                              <option value="1" <?=(!isset($inputs["value"]) && Carbon::now()->month == 1) || (isset($inputs["value"]) && $inputs["value"] == 1) ? "selected" : "";?>>January</option>
                              <option value="2" <?=(!isset($inputs["value"]) && Carbon::now()->month == 2) || (isset($inputs["value"]) && $inputs["value"] == 2) ? "selected" : "";?>>February</option>
                              <option value="3" <?=(!isset($inputs["value"]) && Carbon::now()->month == 3) || (isset($inputs["value"]) && $inputs["value"] == 3) ? "selected" : "";?>>March</option>
                              <option value="4" <?=(!isset($inputs["value"]) && Carbon::now()->month == 4) || (isset($inputs["value"]) && $inputs["value"] == 4) ? "selected" : "";?>>April</option>
                              <option value="5" <?=(!isset($inputs["value"]) && Carbon::now()->month == 5) || (isset($inputs["value"]) && $inputs["value"] == 5) ? "selected" : "";?>>May</option>
                              <option value="6" <?=(!isset($inputs["value"]) && Carbon::now()->month == 6) || (isset($inputs["value"]) && $inputs["value"] == 6) ? "selected" : "";?>>June</option>
                              <option value="7" <?=(!isset($inputs["value"]) && Carbon::now()->month == 7) || (isset($inputs["value"]) && $inputs["value"] == 7) ? "selected" : "";?>>July</option>
                              <option value="8" <?=(!isset($inputs["value"]) && Carbon::now()->month == 8) || (isset($inputs["value"]) && $inputs["value"] == 8) ? "selected" : "";?>>August</option>
                              <option value="9" <?=(!isset($inputs["value"]) && Carbon::now()->month == 9) || (isset($inputs["value"]) && $inputs["value"] == 9) ? "selected" : "";?>>September</option>
                              <option value="10" <?=(!isset($inputs["value"]) && Carbon::now()->month == 10) || (isset($inputs["value"]) && $inputs["value"] == 10) ? "selected" : "";?>>October</option>
                              <option value="11" <?=(!isset($inputs["value"]) && Carbon::now()->month == 11) || (isset($inputs["value"]) && $inputs["value"] == 11) ? "selected" : "";?>>November</option>
                              <option value="12" <?=(!isset($inputs["value"]) && Carbon::now()->month == 12) || (isset($inputs["value"]) && $inputs["value"] == 12) ? "selected" : "";?>>December</option>
                            </select>
                          </div>
                          <div class="form-group col-md-2" id="week-section" style="display: none;">
                            <select class="form-control" id="week-select" name="value" disabled="">
                                <option value="this" <?=isset($inputs["value"]) && $inputs["value"] == "this" ? "selected" : "";?>>This Week</option>
                                <option value="last" <?=isset($inputs["value"]) && $inputs["value"] == "last" ? "selected" : "";?>>Last Week</option>
                            </select>
                          </div>
                          <div class="form-group col-md-2" id="from-date-section" style="display: none;">
                            <input type="date" class="form-control AM form-field from-date-select" onkeydown = 'return false;' id="dpd1" value="<?=isset($inputs["type"]) && $inputs["type"] == "custom" && isset($inputs["from_date"]) ? $inputs["from_date"] : ""; ?>" type="text" name="from_date" required placeholder="From Date" autocomplete="off">

                          </div>
                          <div class="form-group col-md-2"  id="to-date-section" style="display: none;">
                            <input type="date" class="form-control AM form-field to-date-select" onkeydown = 'return false;' id="dpd2" value="<?=isset($inputs["type"]) && $inputs["type"] == "custom" && isset($inputs["to_date"]) ? $inputs["to_date"] : ""; ?>" type="text" name="to_date" placeholder="To Date" required autocomplete="off">
                          </div>
                        <div class="col-md-2">
                          <div class="form-group pull-right" style="padding-right: 20px">
                            <button style=" margin-left: 10px;" class="btn btn-info" type="submit">
                                Search
                            </button>
                          </div>
                        </div>
                      </div>
                    </form>
                  </div>
                </div>
                {{-- Graph --}}
                <canvas id="myChart" style="height:352px !important;"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Job alerts start -->
  @push('front-script')
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

    <script type="text/javascript">
    $( document ).ready(function() {
      // Date selection
      $('.from-date-select').on('change',function(){
        var fromDateValue =$(this).val();
        $('.to-date-select').attr('min', fromDateValue);
      });

      // MAP
      var ctx = document.getElementById('myChart');
      var myChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: <?=isset($chartdata) && count($chartdata) ? json_encode($chartdata["label"]) : json_encode([]); ?>,
          datasets: [
            {
              label: 'Income',
              data: <?= isset($chartdata)  && count($chartdata) ? json_encode($chartdata["total_amount"]) : json_encode([]); ?>,
              // backgroundColor: 'rgba(255, 99, 132, 0.2)',
              borderColor: 'rgba(255, 99, 132, 1)',
              borderWidth: 2,
              fill: false, // No background fill
              tension: 0.4, // Smooth curves
              pointRadius: 3 // Data points
            },

          ]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
      });
    });
    var type = "<?=isset($inputs['type']) ? $inputs['type'] : 'month'; ?>";
    setSection(type);
    function onchangeType(event) {
        setSection(event.value);
    }

  function setSection(value) {
    if (value == "year") {
      $("#year-section").show();
      $("#month-section").hide();
      $("#week-section").hide();
      $("#from-date-section").hide();
      $("#to-date-section").hide();
      $('#year-select').prop('disabled', false);
      $('#month-select').prop('disabled', true);
      $('#week-select').prop('disabled', true);
      $('.from-date-select').prop('disabled', true);
      $('.to-date-select').prop('disabled', true);
    }
    else if (value == "month") {
      $("#year-section").hide();
      $("#month-section").show();
      $("#week-section").hide();
      $("#from-date-section").hide();
      $("#to-date-section").hide();
      $('#year-select').prop('disabled', true);
      $('#month-select').prop('disabled', false);
      $('#week-select').prop('disabled', true);
      $('.from-date-select').prop('disabled', true);
      $('.to-date-select').prop('disabled', true);
    }
    else if (value == "week") {
      $("#year-section").hide();
      $("#month-section").hide();
      $("#week-section").show();
      $("#from-date-section").hide();
      $("#to-date-section").hide();
      $('#year-select').prop('disabled', true);
      $('#month-select').prop('disabled', true);
      $('#week-select').prop('disabled', false);
      $('.from-date-select').prop('disabled', true);
      $('.to-date-select').prop('disabled', true);
    }
    else if (value == "custom") {
      $("#year-section").hide();
      $("#month-section").hide();
      $("#week-section").hide();
      $("#from-date-section").show();
      $("#to-date-section").show();
      $('#year-select').prop('disabled', true);
      $('#month-select').prop('disabled', true);
      $('#week-select').prop('disabled', true);
      $('.from-date-select').prop('disabled', false);
      $('.to-date-select').prop('disabled', false);
    }
  }


</script>
  @endpush
@endsection
