@extends('layouts.main')
@section('title')
  Pengajuan Cuti |
@endsection
@section('css')
  <style>
  .sidebar-menu{
    width:270px;
    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:1px solid #eaedf3;
  }
  .post ol, .post ul{
    padding-left: 20px;
  }
  .form-control:disabled, .form-control[readonly] {
    background-color: #ffffff;
  }
  </style>
@endsection
@section('content')
  <h1 class="df-title mg-b-10">Pengajuan Cuti</h1>
  <ol class="breadcrumb df-breadcrumbs">
    <li class="breadcrumb-item">Dashboard</li>
    <li class="breadcrumb-item active" aria-current="page">Pengajuan Cuti</li>
  </ol>
  <div class="card mg-t-50">
    <div class="card-header">
      <h4>Pengajuan {{$jenis_cuti->jenis_cuti}}</h4>
    </div>
    <div class="card-body pd-0">
      <div class="row">
        <div class="col-md-4">
          <div class="pd-20">
            <div class="sidebar-menu d-none d-xl-block d-xxl-block bg-soft-ash"  >
              <ul>
                @foreach ($data['jenis_cuti'] as $key => $value)
                <li>
                  <a href="{{ route('form_pengajuan',['jenis'=>$value->label]) }}" class="{{($jenis_cuti->jenis_cuti == $value->jenis_cuti ? 'active' : '')}}" >
                    <i class="bx bx-chevron-right"></i>
                    <div>{{$value->jenis_cuti}}</div>
                  </a>
                </li>
                @endforeach
              </ul>
            </div>
          </div>
        </div>
        <div class="col-md-8 content-box">
          <form action="{{ route('proses_pengajuan',['jenis'=>$jenis_cuti->id]) }}" method="post" enctype="multipart/form-data" data-parsley-validate >
            {{ csrf_field() }}
            <div class="pd-t-20 pd-l-10 pd-r-30 pd-b-20">
              @if($page != 'formulir' )
              <h5 class="mg-b-20">Syarat dan Ketentuan</h5>
              <div class="post">{!!$jenis_cuti->deskripsi!!}</div>
              <hr>
              <div class="row">
                <div class="col-md-12">
                  <a class="btn btn-primary pull-right" href="{{ route('form_pengajuan',['jenis'=>$jenis_cuti->label,'page'=>'formulir']) }}">Lanjutkan</a>
                </div>
              </div>
              @else
              <h5 class="mg-b-20">Formulir Pengajuan</h5>
              <div class="row row-sm">
                <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 range_tanggal" placeholder="Tanggal Mulai" autocomplete="off" name="tanggal_mulai" id="tanggal_mulai" onchange="durasi_cuti()" required readonly  data-parsley-required-message="Tanggal Mulai tidak boleh kosong"/>
                      <input type="text" class="form-control range_tanggal" placeholder="Tanggal Selesai" autocomplete="off" name="tanggal_selesai" id="tanggal_selesai" onchange="durasi_cuti()" 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" 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" id="alasan" style="width:100%">
                  @foreach ($data['alasan_cuti'] as $key => $value)
                    <option value="{{ $value->id }}">{{ $value->alasan_cuti }}</option>
                  @endforeach
                </select>
              </div>
              @endif
              <div class="form-group">
                <label>Keterangan</label>
                <textarea class="form-control" placeholder="Tuliskan alasan cuti secara detail" name="keterangan" autocomplete="off" style="height:100px" ></textarea>
              </div>
              @if($jenis_cuti->label == 'cuti-melahirkan')
                <div class="row row-sm">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label>Anak Ke</label>
                      <input type="text" class="form-control numeric" name="anak_ke" autocomplete="off" required data-parsley-required-message="Kolom ini tidak boleh kosong"  >
                    </div>
                  </div>
                  <div class="col-md-8">
                    <div class="form-group">
                      <label>Alamat Selama Masa Cuti</label>
                      <input type="text" class="form-control" name="lokasi_cuti" autocomplete="off" required data-parsley-required-message="Alamat Selama Masa Cuti tidak boleh kosong"  >
                    </div>
                  </div>
                </div>
              @else
                <div class="form-group" id="form_alamat_cuti">
                  <label>Alamat Selama Masa Cuti</label>
                  <input type="text" class="form-control" name="lokasi_cuti" autocomplete="off" required data-parsley-required-message="Alamat Selama Masa Cuti tidak boleh kosong"  >
                </div>
                <div class="row row-sm" id="form_anak_ke">
                  <div class="col-md-4">
                    <div class="form-group">
                      <label>Anak Ke</label>
                      <input type="text" class="form-control numeric" name="anak_ke" autocomplete="off" required data-parsley-required-message="Kolom ini tidak boleh kosong"  >
                    </div>
                  </div>
                  <div class="col-md-8">
                    <div class="form-group">
                      <label>Alamat Selama Masa Cuti</label>
                      <input type="text" class="form-control" name="lokasi_cuti" autocomplete="off" required data-parsley-required-message="Alamat Selama Masa Cuti tidak boleh kosong"  >
                    </div>
                  </div>
                </div>
              @endif
              <div class="form-group">
                <label>Upload Dokumen Pendukung</label>
                <input type="file" class="dropify" name="attachment" autocomplete="off" >
              </div>
              <hr>
              <div class="row">
                <div class="col-md-12">
                  <div class="pull-right">
                    <a class="btn btn-secondary" href="{{ route('form_pengajuan',['jenis'=>$jenis_cuti->label]) }}">Kembali</a>
                    <button type="submit" class="btn btn-primary" name="action" value="add" >Simpan</button>
                  </div>
                </div>
              </div>
              @endif
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
@endsection
@section('js')
  <script>
  $(document).ready(function () {
    $('#alasan').trigger('change');
  });
  $('#alasan').change(function(){
    let id=$(this).val();
    if(id == 4 ){
      $('#form_alamat_cuti').hide();
      $('#form_alamat_cuti :input').each(function () {
          $(this).removeAttr('required');
      });

      $('#form_anak_ke').show();
      $('#form_anak_ke :input').each(function () {
          $(this).attr('required', 'required');
      });
    }
    else{
      $('#form_alamat_cuti').show();
      $('#form_alamat_cuti :input').each(function () {
          $(this).attr('required', 'required');
      });

      $('#form_anak_ke').hide();
      $('#form_anak_ke :input').each(function () {
          $(this).removeAttr('required');
      });
    }
  });

  $('.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