@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">{{ $menu }}</h1>
  <ol class="breadcrumb df-breadcrumbs">
    <li class="breadcrumb-item">Dashboard</li>
    @if($page == 'rekapitulasi' )
    <li class="breadcrumb-item">{{ $menu }}</li>
    @endif
    <li class="breadcrumb-item active" aria-current="page">{{ $submenu }}</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['pengajuan']->avatar) ? $data['pengajuan']->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['pengajuan']->nama_lengkap }}</h6>
                  <div>NIP. {{$data['pengajuan']->nip}}</div>
                </div>
              </div>
              <div class="list-information">
                <label>Tanggal Pengajuan</label>
                <h6>{{GlobalHelper::tgl_indo($data['pengajuan']->created_at)}}</h6>
              </div>
              <div class="list-information">
                <label>Jenis Cuti</label>
                <h6>{{$data['pengajuan']->jenis_cuti->jenis_cuti}}</h6>
              </div>
              @if($data['pengajuan']->alasan_cuti != 'Semua Alasan')
              <div class="list-information">
                <label>Alasan Cuti</label>
                <h6>{{$data['pengajuan']->alasan_cuti->alasan_cuti}}</h6>
              </div>
              @endif
              <div class="list-information">
                <label>Tanggal Cuti</label>
                <h6>{{$data['pengajuan']->tanggal_cuti}}</h6>
              </div>
              <div class="list-information">
                <label>Lama Cuti</label>
                <h6>{{$data['pengajuan']->durasi}} Hari Kerja</h6>
              </div>
              <div class="list-information">
                <label>Keterangan</label>
                <h6>{!! (!empty($data['pengajuan']->keterangan) ?  $data['pengajuan']->keterangan : 'Tidak Ada Keterangan') !!}</h6>
              </div>
              <div class="list-information">
                <label>Alamat Selama Cuti</label>
                <h6>{{$data['pengajuan']->lokasi_cuti}}</h6>
              </div>
              <div class="list-information" style="border-bottom:none">
                <label>Status Pengajuan</label>
                <h6 style="color:{{ $data['pengajuan']->color }}">{{ $data['pengajuan']->status }}</h6>
              </div>

              @if($data['pengajuan']->fid_status == 1 && $page == 'pengajuan' )
                <div class="row row-xs mg-t-20">
                  <div class="col-md-6">
                    <button class="btn btn-primary btn-block" data-toggle = "modal" data-target="#modal-pengajuan" >Ubah</button>
                  </div>
                  <div class="col-md-6">
                    <button class="btn btn-danger btn-block">Hapus</button>
                  </div>
                </div>
              @elseif($data['pengajuan']->fid_status == 4 && $page == 'pengajuan' )
                <button class="btn btn-primary btn-block mg-t-20" data-toggle = "modal" data-target="#modal-pengajuan" >Ubah</button>
              @endif

              @if(!empty($data['pengajuan']->attachment ))
              <a class="btn btn-secondary btn-block mg-t-10" href="{{ url('storage/'.$data['pengajuan']->attachment) }}" target="_blank">Lihat Dokumen Pendukung</a>
              @endif

              @if($page == 'pengajuan' && $data['pengajuan']->fid_status == 3 )
                <button class="btn btn-danger btn-block mg-t-20" data-toggle = "modal" data-target="#modal-pembatalan" >Pembatalan Cuti</button>
              @endif

              @if(in_array($data['pengajuan']->fid_status,array(3,6,7)))
                @if($page == 'penerbitan_surat')
                  <button class="btn btn-primary btn-block mg-t-20" data-toggle = "modal" data-target="#modal-penerbitan" >Menerbitkan Surat Cuti</button>
                @endif
                @if(!empty($data['pengajuan']->no_surat_cuti))
                  <a class="btn btn-dark btn-block mg-t-20" href="{{ route('surat',['page'=>$page,'id'=>$data['pengajuan']->id]) }}" target="_blank" >Download Surat Cuti</a>
                @else
                  <button class="btn btn-dark btn-block mg-t-20" >Surat Cuti Belum Terbit</button>
                @endif
              @endif
            </div>
          </div>
        </div>
        <div class="col-md-8 content-box" style="padding-left: 0px">
          <div class="card-header">
            <div class="row">
              <div class="col-md-8 align-self-center">
                <h5>Verifikasi Pengajuan</h5>
              </div>
              <div class="col-md-4">
                @if($page == 'verifikasi' )
                  <button class="btn btn-primary pull-right" data-toggle = "modal" data-target="#modal-verifikasi">Proses Verifikasi</button>
                @endif
              </div>
            </div>
          </div>
          <table class="table table-vertical-middle">
            <thead>
              <tr>
                <th>No</th>
                <th>NIP / Nama Pegawai</th>
                <th class="tx-center">Level Jabatan</th>
                <th class="tx-center">Status Verifikasi</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($data['verifikasi'] as $label => $value)
                <tr>
                  <td>{{ $value['no'] }}</td>
                  <td>
                    <div class="media">
                      <a href="" class="avatar avatar-md mg-r-10">
                        <img src="{{(!empty($value['avatar']) ? $value['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">{{ $value['nama_lengkap'] }}</h6>
                        <div>NIP. {{$value['nip']}}</div>
                      </div>
                    </div>
                  </td>
                  <td class="tx-center" >{{ $value['level'] }}</td>
                  <td class="tx-center" style="color:{{ $value['color'] }}">{{ $value['status'] }}</td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

  @if($data['pengajuan']->fid_status == 1 && $page == 'pengajuan' )
    <div class="modal fade" id="modal-pengajuan" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Ubah Formulir Pengajuan</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form action="{{ route('proses_pengajuan') }}" method="post" enctype="multipart/form-data" data-parsley-validate >
            {{ csrf_field() }}
            <div class="modal-body">
              <div class="row">
                <div class="col-md-8">
                  <div class="form-group">
                    <label>Tanggal Cuti</label>
                    <div class="input-daterange input-group" data-date-format="dd-mm-yyyy" data-provide="datepicker">
                      <input type="text" class="form-control" autocomplete="off" name="tanggal_mulai" id="tanggal_mulai" onchange="durasi_cuti()" value="{{ GlobalHelper::dateFormat($data['pengajuan']->tanggal_mulai,'d-m-Y') }}" required readonly data-parsley-required-message="Tanggal Mulai tidak boleh kosong" />
                      <input type="text" class="form-control" autocomplete="off" name="tanggal_selesai" id="tanggal_selesai" onchange="durasi_cuti()" value="{{ GlobalHelper::dateFormat($data['pengajuan']->tanggal_selesai,'d-m-Y') }}" required readonly data-parsley-required-message="Tanggal Selesai tidak boleh kosong" />
                    </div>
                    <div class="tanggal-massage"></div>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label>Durasi</label>
                    <input type="text" class="form-control" id="durasi" autocomplete="off" value="{{ $data['pengajuan']->durasi }} Hari Kerja" readonly >
                  </div>
                </div>
              </div>
              @if(count($data['alasan_cuti']) == 1 )
                <input type="hidden" name="alasan" value="{{ $data['alasan_cuti'][0]->id }}">
              @else
              <div class="form-group">
                <label>Alasan Cuti</label>
                <select class="select2" name="alasan" style="width:100%">
                  @foreach ($data['alasan_cuti'] as $key => $value)
                    <option value="{{ $value->id }}" {{ ( $data['pengajuan']->fid_alasan_cuti == $value->id ? 'selected' :  null ) }} >{{ $value->alasan_cuti }}</option>
                  @endforeach
                </select>
              </div>
              @endif
              <div class="form-group">
                <label>Keterangan</label>
                <textarea class="form-control" name="keterangan" autocomplete="off" style="height:100px" >{{ $data['pengajuan']->keterangan  }}</textarea>
              </div>
              <div class="form-group">
                <label>Alamat Selama Masa Cuti</label>
                <input type="text" class="form-control" name="lokasi_cuti" value="{{ $data['pengajuan']->lokasi_cuti  }}" autocomplete="off" required data-parsley-required-message="Alamat Selama Masa Cuti tidak boleh kosong"  >
              </div>
              <div class="form-group">
                <label>Upload Dokumen Pendukung</label>
                <input type="file" class="dropify" name="attachment" autocomplete="off" >
              </div>
            </div>
            <div class="modal-footer">
              <input type="hidden" name="id" value="{{ $data['pengajuan']->id }}" >
              <button type="button" class="btn btn-dark" data-dismiss="modal">Batalkan</button>
              <button type="submit" class="btn btn-primary" name="action" value="edit">Simpan</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  @endif

  @if($data['pengajuan']->fid_status == 3 && $page == 'pengajuan')
    <div class="modal fade" id="modal-pembatalan" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Proses Pembatalan Cuti</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form action="{{ route('proses_pembatalan') }}" method="post" enctype="multipart/form-data">
            {{ csrf_field() }}
            <div class="modal-body">
              <div class="form-group">
                <label>Dibatalkan sejak tanggal</label>
                <input type="text" class="form-control datepicker" name="tanggal" autocomplete="off"  >
              </div>
              <div class="form-group">
                <label>Keterangan</label>
                <textarea class="form-control" name="keterangan" style="height:100px"></textarea>
              </div>
            </div>
            <div class="modal-footer">
              <input type="hidden" name="pengajuan_id" value="{{ $data['pengajuan']->id }}" >
              <button type="button" class="btn btn-dark" data-dismiss="modal">Batalkan</button>
              <button type="submit" class="btn btn-primary" name="action" value="edit">Simpan</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  @endif

  @if($page == 'penerbitan_surat' )
    <div class="modal fade" id="modal-penerbitan" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Penerbitan Surat Cuti</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form action="{{ route('proses_penerbitan_surat') }}" method="post" enctype="multipart/form-data" data-parsley-validate >
            {{ csrf_field() }}
            <div class="modal-body">
              <div class="form-group">
                <label>Nomo Surat</label>
                <input type="text" class="form-control" name="no_surat_cuti" value="{{ $data['pengajuan']->no_surat_cuti }}" autocomplete="off" required  >
              </div>
              <div class="form-group">
                <label>Tanggal Surat</label>
                <input type="text" class="form-control datepicker" name="tanggal_surat" value="{{ $data['pengajuan']->tanggal_surat }}" autocomplete="off" required  >
              </div>
            </div>
            <div class="modal-footer">
              <input type="hidden" name="pengajuan_id" value="{{ $data['pengajuan']->id }}" >
              <button type="button" class="btn btn-dark" data-dismiss="modal">Batalkan</button>
              <button type="submit" class="btn btn-primary" name="action" value="edit">Simpan</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  @endif

  @if($page == 'verifikasi' )
    <div class="modal fade" id="modal-verifikasi" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Verifikasi Pengajuan Cuti</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <form action="{{ route('proses_verifikasi') }}" method="post" enctype="multipart/form-data">
            {{ csrf_field() }}
            <div class="modal-body">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label>Status</label>
                    <select class="select2" name="status" style="width:100%">
                      <option value="DISETUJUI">DISETUJUI</option>
                      <option value="PERUBAHAN">PERUBAHAN</option>
                      <option value="DITANGGUHKAN">DITANGGUHKAN</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label>Keterangan</label>
                <textarea class="form-control" name="keterangan" style="height:100px"></textarea>
              </div>
            </div>
            <div class="modal-footer">
              <input type="hidden" name="id" value="{{ $data['pengajuan']->id }}" >
              <button type="button" class="btn btn-dark" data-dismiss="modal">Batalkan</button>
              <button type="submit" class="btn btn-primary" name="action" value="edit">Simpan</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  @endif
@endsection
@section('js')
  <script>
  $('.range_tanggal').parsley({
    errorsContainer: function (ParsleyField) {
      return ParsleyField.$element.closest('.form-group').find('.tanggal-massage');
    }
  });

  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