@extends('dashboard.layout')
@section('content')

<!-- Content Header (Page header) -->
  <section class="content-header">
    <h1>
      Ringkasan Cuti <strong>{{date('Y')}}</strong>
    </h1>
  </section>

  <!-- Main content -->
  <section class="content">

    <div class="row">
      <div class="col-md-6">
        <strong>LIHAT BULAN LAIN</strong>
        <div class="form-group" style="margin-bottom: 5px;">
          <input type="text" class="form-control input-sm" name="tanggal_surat" id="tanggal_surat" value="{{date('F Y', strtotime($blnTahun))}}" style="width: 150px;">
        </div>
      </div>
      <div class="col-md-6 text-right">
        <strong>KETERANGAN</strong>
        <p style="margin-top: 5px;">
          <span class="label label-warning">Cuti Masih Proses</span>
          <span class="label label-success">Cuti Diterima</span>
        </p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="box box-primary">
          <div class="box-body no-padding">
            <!-- THE CALENDAR -->
            <div id="calendar"></div>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection

@push('css')
  <!-- fullCalendar -->
  <link rel="stylesheet" href="{{asset('asset/bower_components/fullcalendar/dist/fullcalendar.min.css')}}">
  <link rel="stylesheet" href="{{asset('asset/bower_components/fullcalendar/dist/fullcalendar.print.min.css')}}" media="print">
  <link rel="stylesheet" href="{{asset('asset/bower_components/select2/dist/css/select2.min.css')}}">

  <style type="text/css">
    .dash-h4 {
    margin-top: 0px;margin-bottom: 5px;
    }
    .dash-p {
      margin-bottom: 0px;
          white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
      max-width: 100%;
    }
  </style>
@endpush

@push('js')
  <!-- fullCalendar -->
  <script src="{{asset('asset/bower_components/moment/moment.js')}}"></script>
  <script src="{{asset('asset/bower_components/fullcalendar/dist/fullcalendar.min.js')}}"></script>
  <script src="{{asset('asset/bower_components/select2/dist/js/select2.min.js')}}"></script>

  <!-- Page specific script -->
  <script>
  $(document).ready(function() {
    $('#tanggal_surat').datepicker({
        format: "MM yyyy",
        startView: 1,
        orientation: "bottom",
        minViewMode: 1,
            todayHiglight: true,
            autoclose: true
      })
       .on('changeMonth', function(e) {
          //console.log(e.date);
          window.location.replace("{{route('dashboard.index')}}?bln="+e.date.getMonth()+"&thn="+e.date.getFullYear());
      });
    });
    $(function () {

      /* initialize the calendar
       -----------------------------------------------------------------*/
      //Date for the calendar events (dummy data)
      var date = new Date()
      var d    = date.getDate(),
          m    = date.getMonth(),
          y    = date.getFullYear()
      $('#calendar').fullCalendar({
        //eventStartEditable: false,
        displayEventTime: false,
        header    : {
          left  : '',
          center: 'title',
          right : ''
        },
        titleFormat: '[{{date('F Y', strtotime($blnTahun))}}]',
        buttonText: {
          today: 'Hari Ini',
          month: 'Bulan',
          week : 'Minggu',
          day  : 'Hari'
        },
        //Random default events
        events    : [
          @foreach($cuti as $c)
          {
              title : '{{ $c->pegawai_nama }} NIP:{{ $c->pegawai_nip }}',
              start : '{{ $c->tgl_dari }}',
              end : '{{date('Y-m-d', strtotime('+1 day', strtotime( $c->tgl_sampai)))}}',
              @if($c->pejabat_status == 0)
              backgroundColor: '#f39c12', //kuning
              borderColor    : '#f39c12' //kuning
              @else
              backgroundColor: '#00a65a', //hijau
              borderColor    : '#00a65a' //hijau
              @endif
          },
          @endforeach
        ]

      });

      $('#calendar').fullCalendar( 'gotoDate', "{{date('Y-m-d', strtotime($blnTahun))}}" )

      $('.fc-prev-button').click(function(){
        window.location.replace('{{route('admin.cuti.index')}}');
      });

      $('.fc-next-button').click(function(e){
         alert('nextis clicked, do something');
      });

      $('.fc-today-button').click(function(e){
         window.location.replace('{{route('admin.dashboard.index')}}');
      });

    })
  </script>

@endpush