@extends('layouts.main')
@section('title')
  Pengajuan Cuti |
@endsection
@section('css')
  <style>
  .sidebar-menu{
    width:100%;
    padding:0px 5px;
    height: 100%;
  }
  .sidebar-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  .sidebar-menu ul li a i{
    color:#676767;
    font-size:20px;
    margin-right:10px;
    font-weight: 400;
    align-items:center
  }
  .sidebar-menu ul li a {
    display: flex;
    color:rgba(27, 46, 75, 0.9);
    padding: 3px 10px 3px 0px;
    text-decoration: none;
    align-items:center;
    font-size:15px;
    line-height: 1rem
  }
  .sidebar-menu ul li a:hover,
  .sidebar-menu ul li a.active{
    color:#47008d
  }
  .sidebar-menu ul li a.active{
    font-weight: 600
  }
  .sidebar-menu ul li:last-child a{
    border-bottom:none;
  }
  .content-box{
    border-left:3px solid #eaedf3;
  }
  .post ol, .post ul{
    padding-left: 20px;
  }
  .form-control:disabled, .form-control[readonly] {
    background-color: #ffffff;
  }

  .list-information{
    padding: 8px 0px;
    border-bottom: 1px solid #eaedf4;
  }
  .list-information label{
    margin-bottom:5px;
    color:#969696;
    font-weight: 400;
  }
  .list-information h6{
    margin-bottom: 0px;
  }
  .label {
    display: inline-block;
    font-weight: 400;
    padding:5px;
    line-height: 1.5384616;
    border: 1px solid transparent;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    border-radius: 0px
  }
  .date-text{
    margin-bottom:5px;
    color:#d3552f
  }

  </style>
@endsection
@section('content')
  <h1 class="df-title mg-b-10">Pembatalan Cuti</h1>
  <ol class="breadcrumb df-breadcrumbs">
    <li class="breadcrumb-item">Dashboard</li>
    <li class="breadcrumb-item active" aria-current="page">Pembatalan Cuti</li>
  </ol>
  <div class="card card-table mg-t-50">
    <div class="card-body pd-0">
      <div class="row">
        <div class="col-md-4">
          <div class="pd-t-20 pd-b-20 pd-l-20 pd-r-5">
            <div class="sidebar-menu d-none d-xl-block d-xxl-block">
              <div class="media mg-b-30">
                <a href="" class="avatar avatar-md mg-r-10"><img src="{{(!empty($data['pembatalan']->avatar) ? $data['pembatalan']->avatar : asset('assets/images/user-avatar-placeholder.png') )}}" class="rounded-circle" alt=""></a>
                <div class="media-body align-self-center">
                  <h6 class="tx-bold mg-b-0 text-truncated-1">{{ $data['pembatalan']->nama_lengkap }}</h6>
                  <div>NIP. {{$data['pembatalan']->nip}}</div>
                </div>
              </div>
              <div class="list-information">
                <label>Tanggal Pengajuan</label>
                <h6>{{GlobalHelper::tgl_indo($data['pembatalan']->created_at)}}</h6>
              </div>
              <div class="list-information">
                <label>Jenis Cuti</label>
                <h6>{{$data['pembatalan']->jenis_cuti}}</h6>
              </div>
              @if($data['pembatalan']->alasan_cuti != 'Semua Alasan')
              <div class="list-information">
                <label>Alasan Cuti</label>
                <h6>{{$data['pembatalan']->alasan_cuti}}</h6>
              </div>
              @endif
              <div class="list-information">
                <label>Tanggal Cuti</label>
                <h6>{{$data['pembatalan']->tanggal_cuti}}</h6>
              </div>
              <div class="list-information">
                <label>Tanggal Pembatalan</label>
                <h6>{{GlobalHelper::tgl_indo($data['pembatalan']->tanggal)}}</h6>
              </div>
              <div class="list-information">
                <label>Lama Cuti</label>
                <h6>{{$data['pembatalan']->durasi}} ({{ $data['pembatalan']->durasi_pembatalan }}) Hari Kerja</h6>
              </div>
              <div class="list-information">
                <label>Keterangan Cuti</label>
                <h6>{!! (!empty($data['pembatalan']->keterangan_cuti) ?  $data['pembatalan']->keterangan_cuti : 'Tidak Ada Keterangan') !!}</h6>
              </div>
              <div class="list-information">
                <label>Keterangan Pembatalan</label>
                <h6>{!! (!empty($data['pembatalan']->keterangan) ?  $data['pembatalan']->keterangan : 'Tidak Ada Keterangan') !!}</h6>
              </div>
              <a class="btn btn-dark btn-block mg-t-20" href="{{ route('surat_pembatalan',['id'=>$data['pembatalan']->id]) }}" target="_blank" >Download Surat Pembatalan Cuti</a>
            </div>
          </div>
        </div>
        <div class="col-md-8 content-box" style="padding-left: 0px">
          <div class="card-header">
            <h5>Proses Penetapan</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@section('js')
  <script>
  function durasi_cuti(){
    tanggal_mulai = $('#tanggal_mulai').val();
    tanggal_selesai = $('#tanggal_selesai').val();
    if(tanggal_mulai == null || tanggal_selesai == null ){
        $('#durasi').val('0 Hari Kerja');
    }
    else{
      $.get("{{ url('api/find_durasi_cuti/'.Session::get('useractive')->nip) }}/"+tanggal_mulai+"/"+tanggal_selesai, function (result) {
        $('#durasi').val(result+' Hari Kerja');
      });
    }
  }
  </script>
@endsection