@extends('backend.layouts.master')
@section('title')
    <title>Anasayfa</title>
@endsection
@section('breadcrumb')
    <h5 class="text-dark font-weight-bold my-1 mr-5">Anasayfa </h5>
    <div class="subheader-separator subheader-separator-ver mt-2 mb-2 mr-4 bg-gray-200"></div>
@endsection
@section('content')
<div class="d-flex flex-column-fluid">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <!--begin::Card-->
          <div class="card card-custom gutter-b">
            <!--begin::Header-->
            <div class="card-header h-auto">
              <!--begin::Title-->
              <div class="card-title py-5">
                <h3 class="card-label">{{ date('Y') }} Yıllının Cirosu <span class="btn btn-link-success font-weight-bold"> {{ number_format($years_totel_price, 2, ',', '.') }} TL </span></h3>
              </div>
              <!--end::Title-->
            </div>
            <!--end::Header-->
            <div class="card-body">
              <!--begin::Chart-->
              <div id="chart_1"></div>
              <!--end::Chart-->
            </div>
          </div>
          <!--end::Card-->
        </div>

   <div class="col-lg-6">
          <!--begin::Card-->
          <div class="card card-custom gutter-b">
            <div class="card-header">
              <div class="card-title">
                <h3 class="card-label ">Sınıf Kayıt Oranları</h3>

              </div>
            </div>
            <div class="card-body">
              <!--begin::Chart-->
              <div id="chart_12" class="d-flex justify-content-center"></div>
              <!--end::Chart-->
            </div>
          </div>
          <!--end::Card-->
        </div>
        <div class="col-lg-6">
          <!--begin::Card-->
          <div class="card card-custom gutter-b" style="height: 380px">
            <div class="card-header">
              <div class="card-title">
                <h3 class="card-label ">Filitrele</h3>
              </div>
            </div>
            <div class="card-body">
              <!--begin::Chart-->
              <div class="d-flex justify-content-center">

               <div class="row col-12">
                <div class="col-12">
                  <div class="form-group">
                      <label>Aylık Filitre Seç</label>
                      <select id="myProduct" class="form-control "  name="paymnet_month_statu"
                      onchange="if (this.value) window.location.href=this.value"
                      >
                            @if(!empty($_GET['month']))
                              <option  value="{{ $_GET['month'] }}" selected>{{ month_tr($_GET['month']) }}</option>
                            @else
                              <option  value="00" selected>Seç</option>
                            @endif
                            <option  value="?month=01" >Ocak</option>
                            <option  value="?month=02" >Şubat</option>
                            <option  value="?month=03" >Mart</option>
                            <option  value="?month=04" >Nisan</option>
                            <option  value="?month=05" >Mayıs</option>
                            <option  value="?month=06" >Haziran</option>
                            <option  value="?month=07" >Temmuz</option>
                            <option  value="?month=08" >Ağustos</option>
                            <option  value="?month=09" >Eylül</option>
                            <option  value="?month=10" >Ekim</option>
                            <option  value="?month=11" >Kasım</option>
                            <option  value="?month=12" >Aralık</option>
                      </select>
                  </div>
                </div>
                <div class="col-12 mt-10">
                  <div class="form-group">
                      <label>Şube Filitre Seç</label>
                      <select class="form-control" id="exampleSelect1" name="department_id"
                      onchange="if (this.value) window.location.href=this.value"
                      >
                      @if(!empty($_GET['department_id']))
                      <option  value="{{ $_GET['department_id'] }}" selected>{{ helper_department($_GET['department_id'])->name }}</option>
                    @else
                      <option  value="00" selected>Seç</option>
                    @endif
                        @foreach ($departmentes as $department)
                           <option  value="?department_id={{$department->id}}">{{$department->name}}</option>
                        @endforeach
                    </select>
                  </div>
                </div>

               </div>


              </div>
              <!--end::Chart-->
            </div>
          </div>
          <!--end::Card-->
        </div>
      </div>
      <div class="row">
        <div class="col-xl-12">
          <!--begin::Engage Widget 1-->
          <div class="card card-custom  card-stretch gutter-b">
            <div class="card-body d-flex p-0">
              <div class="flex-grow-1 card-rounded bgi-no-repeat  p-8 d-flex align-items-center" style="background-color: #FFF4DE; background-position: left bottom; background-size: auto 100%; background-image: url(/backend/assets/media/svg/humans/custom-2.svg)">
                <div class="row">
                  <div class="col-12 col-xl-5"></div>
                  <div class="col-12 col-xl-7">
                    <h4 class="text-danger font-weight-bolder">Ödemesi Gecikenler</h4>
                    <p class="text-dark-50 my-5 font-size-xl font-weight-bold">Öğrencilerin aylık geçiken ödemelerini çıktısını excel tipinde alabilirsiniz</p>
                    <a href="{{ route('accounting.export') }}" class="btn btn-success font-weight-bold py-2 px-6">Çıktı al</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--end::Engage Widget 1-->
        </div>
      </div>
        <div class="row">
            @role('SuperAdmin|Admin')
            <div class="col-3">
                <div class="card text-white bg-info mb-3" style="max-width: 18rem;">
                    <div class="card-header" style="color: black;">
                      <a href="{{ route('company.index') }}"   class="text-dark-75 font-weight-bolder text-hover-primary mb-1 font-size-lg"">
                        <h4>Toplam Firma</h4>
                      </a>
                      </div>
                    <div class="card-body">
                      <h5 class="card-title">Toplam Adet : {{ @$company_totel }}</h5>
                    </div>
                  </div>
            </div>
            <div class="col-3">
              <div class="card text-white bg-info mb-3" style="max-width: 18rem;">
                <div class="card-header" style="color: black;">
                  <a href="{{ route('department.index') }}"   class="text-dark-75 font-weight-bolder text-hover-primary mb-1 font-size-lg">
                    <h4>Toplam Şube</h4>
                  </a>
                </div>
                <div class="card-body">
                  <h5 class="card-title">Toplam Adet : {{ @$department_totel }}</h5>
                </div>
              </div>
            </div>
            <div class="col-3">
              <div class="card text-white bg-info mb-3" style="max-width: 18rem;">
                <div class="card-header" style="color: black;">
                  <a href="{{ route('classroom.index') }}"   class="text-dark-75 font-weight-bolder text-hover-primary mb-1 font-size-lg">
                    <h4>Toplam Sınıf</h4>
                  </a>
                </div>
                <div class="card-body">
                  <h5 class="card-title">Toplam Adet :  {{ @$classroom_totel }}</h5>
                </div>
              </div>
            </div>
            <div class="col-3">
              <div class="card text-white bg-info mb-3" style="max-width: 18rem;">
                <div class="card-header" style="color: black;">
                  <a href="{{ route('student.index') }}"   class="text-dark-75 font-weight-bolder text-hover-primary mb-1 font-size-lg">
                    <h4>Toplam Öğrenci</h4>
                  </a>
                </div>
                <div class="card-body">
                  <h5 class="card-title">Toplam Adet : {{ @$student_totel }}</h5>
                </div>
              </div>
            </div>
            @endrole
        </div>

    </div>
</div>
@endsection
@section('css')
<style>
  .apexcharts-toolbar{
    display: none !important;
  }
</style>
@endsection
@section('js')

    <script>
      // Shared Colors Definition
      const primary = '#6993FF';
      const success = '#1BC5BD';
      const info = '#8950FC';
      const warning = '#FFA800';
      const danger = '#F64E60';
      var KTApexChartsDemo = function () {
      var _demo1 = function ()
      {
        const apexChart = "#chart_1";
        var options =
        {
          series: [{
            name: "Aylık Ciro",
            data: {{ $my_array }}
          }],
          chart: {
            height: 350,
            type: 'line',
            zoom: {
              enabled: false
            }
          },
          dataLabels: {
            enabled: true
          },
          stroke: {
            curve: 'straight'
          },
          grid: {
            row: {
              colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
              opacity: 0.5
            },
          },
          xaxis: {
            categories: {!!  $my_array_month  !!},
          },
          colors: [primary]
	    	};
        var chart = new ApexCharts(document.querySelector(apexChart), options);
        chart.render();
	    }
      var _demo12 = function ()
       {
          const apexChart = "#chart_12";
          var options = {
            series: {{  $student_count_array  }},
            chart: {
              width: 380,
              type: 'pie',
            },
            labels: {!! $student_name_array !!} , //['Team A', 'Team B', 'Team C', 'Team D', 'Team E']
            responsive: [{
              breakpoint: 480,
              options: {
                chart: {
                  width: 200
                },
                legend: {
                  position: 'bottom'
                }
              }
            }],
            colors: [primary, success, warning, danger, info]
          };

          var chart = new ApexCharts(document.querySelector(apexChart), options);
          chart.render();
    	}

  return {
		// public functions
		init: function () {
			_demo1();
			_demo12();
		}
	};
}();
jQuery(document).ready(function () {
	KTApexChartsDemo.init();
});

    </script>
@endsection