@extends('layouts.app')

@section('content')
	<div class="page-title">
        <div class="row">
            <div class="col-12 col-md-6 order-md-1 order-last">
                <h3>Dashboard</h3>
                
            </div>
            <div class="col-12 col-md-6 order-md-2 order-first">
                <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <section class="section">
		<div class="card">
            <div class="card-header">
                Dashboard
                 
                <div class="clearfix"></div>
            </div>
            <div class="card-body" >
                <div class="row">
                    <div class="col-6 col-lg-4 col-md-6">
                        <div class="card bg-primary text-white">
                            <div class="card-body px-4 py-4-5">
                                <div class="row">
                                    <div class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-start ">
                                        <div class="stats-icon purple mb-2">
                                            <i class="iconly-boldShield-Done"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                        <h6 class="text-white font-semibold">Rencana Completed</h6>
                                        <h6 class="font-extrabold mb-0 text-white">{{ $completed }}</h6>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-lg-4 col-md-6">
                        <div class="card bg-primary text-white">
                            <div class="card-body px-4 py-4-5">
                                <div class="row">
                                    <div class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-start ">
                                        <div class="stats-icon purple mb-2">
                                            <i class="iconly-boldCalendar"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                        <h6 class="text-white font-semibold">Task Progress</h6>
                                        <h6 class="font-extrabold mb-0 text-white"> {{ $progress }}</h6>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                    <div class="col-6 col-lg-4 col-md-6">
                        <div class="card bg-primary text-white">
                            <div class="card-body px-4 py-4-5">
                                <div class="row">
                                    <div class="col-md-4 col-lg-12 col-xl-12 col-xxl-5 d-flex justify-content-start ">
                                        <div class="stats-icon purple mb-2">
                                            <i class="iconly-boldChart"></i>
                                        </div>
                                    </div>
                                    <div class="col-md-8 col-lg-12 col-xl-12 col-xxl-7">
                                        <h6 class="text-white font-semibold">Nilai Rata-rata</h6>
                                        <h6 class="font-extrabold mb-0 text-white">{{ $avg }}</h6>
                                    </div>
                                </div> 
                            </div>
                        </div>
                    </div>
                </div>
                <form>
               <div class="my-5">
                    <fieldset class="border rounded-3 p-3">
                        <legend class="float-none w-auto px-3" >Filter</legend>
                        <div class="form-group row">

                        </div>
                    <div class="form-group row">
                        <div class="col-md-1">
                            <input type="radio" name="select" onclick="radioChecked(0)" value="0" @if(request()->select == 0) checked @endif>
                        </div>
                        <div class="col-md-3">
                            <select class="form-select periode" disabled name="periode">
                                <option value="">-Pilih Periode-</option>
                                @foreach(['7' => '1 Minggu','14' => '2 Minggu','30' => '1 Bulan'] as $key=>$val)
                                <option value="{{ $key }}" @if(request()->periode == $key) selected @endif>{{ $val }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-1">
                            <input type="radio" name="select" onclick="radioChecked(1)" value="1" @if(request()->select == 1) checked @endif>
                        </div>
                        <div class="col-md-3">
                           <input type="text" class="form-control flatpickr" disabled value="{{ request()->tanggal1 ?? date('Y-m-d') }}" name="tanggal1">
                        </div>
                        <div class="col-md-1"> - </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control flatpickr" disabled value="{{ request()->tanggal2 ?? date('Y-m-d') }}" name="tanggal2">
                         </div>
                         <div class="col-md-2">
                            <button class="btn btn-primary">Reload</button>
                         </div>
                    </div>
                   
                    </fieldset>
               </div>
               </form>
                <div class="col-lg-12 col-12">
                    
                    <div>
                        <canvas id="myChart"></canvas>
                      </div>
                      
                </div>
                
			</div>
		</div>
	</section>
@endsection

@push("modals")
 
   
@endpush
   
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  @if(request()->select != "")
    radioChecked({{ request()->select }});
  @endif
  const ctx = document.getElementById('myChart');

  new Chart(ctx, {
    type: 'bar',
    data: {
      labels: {!! json_encode($data['dates']) !!},
      datasets: [{
        label: 'Performance',
        data: {!! json_encode($data['nilai']) !!},
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true,
          ticks: {
            // Include a dollar sign in the ticks
            callback: function(value, index, ticks) {
                /* if(value < 25) {
                    return 'D';
                }
                if(value < 50) {
                    return 'C';
                }
                if(value < 75) {
                    return 'C';
                }
                return 'A' */
                return value;
            }
        }
        }
      }
    }
  });

function radioChecked(value)
{
    
    if(value == 0) {
        $('.periode').prop('disabled',false)
        $('.flatpickr').prop('disabled',true)
    } else {
        $('.periode').prop('disabled',true)
        $('.flatpickr').prop('disabled',false)
    }
    
}
     
</script>
@endpush