@extends('layouts.admin.core')
@section('content')
{!! Form::open(array('route' => 'absensis.store','method'=>'POST', 'enctype' => 'multipart/form-data')) !!}
<div id="hidPeg"></div>
<!-- Modal -->
<div id="pegawai" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog modal-lg">
		<!-- Modal content-->
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
			</div>
			<div class="modal-body">
        <h5 class="text-center">Pilih Pegawai</h5>
            <div class="table-responsive">
              <table class="table table-bordered table-striped" id="pegawai-table" style="width: 100%;">
                  <thead>
                    <tr>
                        <th>
                          <input id="chkpegawaiall" type="checkbox">
                        </th>
                        <th>No</th>
                        <th>NIP</th>
                        <th>Nama</th>
                        <th>Jabatan</th>
                    </tr>
                  </thead>
                  @foreach ($pegawais_ketidakhadiran as $key => $pegawai)
                    <tr>
                        <td>
                            <input class="chkpegawai" value="{{ $pegawai->id }}" type="checkbox"
                              data-nama="{{ $pegawai->nama }}"
                              data-id="{{ $pegawai->id }}"
                            >
                        </td>
                        <td>{{ ++$i }}</td>
                        <td>{{ $pegawai->nip_baru }}</td>
                        <td>{{ $pegawai->nama }}</td>
                        <td>{{ $pegawai->jabatan_unit_kerja }}</td>
                    </tr>
                  @endforeach
              </table>
            </div>
            <div class="row">
              <div class="col-xs-12 col-sm-12 col-md-12 text-right">
                  <button type="button" id="button_pilih_pegawai" data-dismiss="modal"  class="btn btn-primary">Submit</button>
              </div>
          </div>
      <!-- /.card-body -->
			</div>
			<div class="modal-footer"></div>
		</div>
	</div>
</div>
<!-- Modal -->
<div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <!--<h1 class="m-0 text-dark">Starter Page</h1>-->
        </div><!-- /.col -->
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ route('absensis.index') }}">Kembali</a></li>
            <li class="breadcrumb-item active">Tambah Absensi Ketidakhadiran</li>
          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
@if (count($errors) > 0)
  <div class="alert alert-danger">
    <strong>Whoops!</strong> There were some problems with your input.<br><br>
    <ul>
       @foreach ($errors->all() as $error)
         <li>{{ $error }}</li>
       @endforeach
    </ul>
  </div>
@endif
<div class="card card-default">
    <div class="card-header">
      <h3 class="card-title">Tambah Absensi Ketidakhadiran</h3>
    </div>
    <!-- /.card-header -->
    <div class="card-body">
      <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Dari Tanggal Ketidakhadiran:</label>
			        <div class="input-group">
                <div class="input-group-prepend">
                  <span class="input-group-text">
                  <i class="far fa-calendar-alt"></i>
                  </span>
                </div>
                <input type="text" class="form-control float-right" name="TglKetidakhadiran" id="TglKetidakhadiran" value="{{ old('TglKetidakhadiran') }}" required>
              </div>
          </div>
        </div>
          <!-- /.form-group -->
          <div class="col-md-6">
            <div class="form-group">
              <label>Sampai Tanggal Ketidakhadiran:</label>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text">
                    <i class="far fa-calendar-alt"></i>
                    </span>
                  </div>
                  <input type="text" class="form-control float-right" name="TglKetidakhadiranSelesai" id="TglKetidakhadiranSelesai" value="{{ old('TglKetidakhadiranSelesai') }}" required>
                </div>
            </div>
          </div>
          <!-- /.form-group -->
        </div>
        <!-- /.col -->
    <div class="row">
        <div class="col-md-6">
          <div class="form-group">
            <label>Jenis Absensi Ketidakhadiran:</label>
                  <select class="form-control select2" name="jenisketidakhadiran" style="width: 100%;">
                    <option selected="selected" value="Cuti Tahunan">Cuti Tahunan</option>
                    <option value="Cuti Sakit">Cuti Sakit</option>
                    <option value="Cuti Alasan Penting">Cuti Alasan Penting</option>
                    <option value="Cuti Besar">Cuti Besar</option>
                    <option value="Dinas Luar">Dinas Luar</option>
                    <option value="Izin Keluar Kantor">Izin Keluar Kantor</option>
					<option value="Izin Tidak Masuk Kantor">Izin Tidak Masuk Kantor</option>
                    <option value="Tanpa Keterangan">Tanpa Keterangan</option>
                  </select>
          </div>
        </div>
		    <div class="col-md-6">
          <div class="form-group">
            <label>Keterangan:</label>
            {!! Form::text('keterangan', null, array('placeholder' => 'Keterangan','class' => 'form-control','id' => 'keterangan', 'required' => 'required')) !!}
          </div>
          <!-- /.form-group -->
        </div>
        <!-- /.col -->
    </div>
      <!-- /.row -->
      <div class="row">
        <div class="col-12 col-sm-12">
          <div class="form-group">
            <label class="control-label has-star" for="textfield-btn-load-popup">Pilih Pegawai:</label>
              <div class="card">
                  <div class="card-body">
                    <div id="listPeg" class="float-left"></div>
                    <div class="input-group-append float-right">
                      <button type="button" id="pegawai" data-toggle="modal" data-target="#pegawai" class="btn btn-info btn-flat" value="load-pegawai">
                        <span class="fas fa-search"></span>
                      </button>
                    </div>
                  </div>
              </div>
                  
                  
          </div>
          <!-- /.form-group -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
      <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 text-center">
              <button onclick="tampil_ajax()" type="submit" class="btn btn-primary">Submit</button>
          </div>
      </div>	
    </div>
    <!-- /.card-body -->
    <!--
    <div class="card-footer">
      Visit <a href="https://select2.github.io/">Select2 documentation</a> for more examples and information about
      the plugin.
    </div>
    -->
  </div>
  <!-- /.card -->
{!! Form::close() !!}
@endsection
@section('js')
<script type="text/javascript">
  $(document).ready(function(){
    bsCustomFileInput.init();
    $('.select2').select2()
    $('#TglKetidakhadiran').daterangepicker({
        timePicker: false,
        singleDatePicker: true,
        locale: {
          format: 'DD/MM/YYYY'
        }
    })
    $('#TglKetidakhadiranSelesai').daterangepicker({
        timePicker: false,
        singleDatePicker: true,
        locale: {
          format: 'DD/MM/YYYY'
        }
    })
    
  })
</script>
<script type="text/javascript">
 $(document).ready(function(){
  var oTable = $("#pegawai-table").DataTable({
    stateSave: true
  });
  //var allPages = oTable.fnGetNodes();
  $("#chkpegawaiall").on("click", function(){
    oTable.$(".chkpegawai").prop("checked", $(this).is(':checked'));
  })
  var htmlPeg = "";
  var hidPeg = "";
  $("#button_pilih_pegawai").on("click", function(){
    htmlPeg = "";
    hidPeg = "";
    oTable.$(".chkpegawai").each(function(){
      console.log("berhasil");
      if(this.checked){
        htmlPeg = htmlPeg+"<span class='badge badge-secondary mr-1'>"+$(this).data('nama')+"</span>";
        hidPeg = hidPeg+"<input type='hidden' value='"+$(this).data('id')+"' name='listPeg[]'/>";
      }
    });
  $("#listPeg").html(htmlPeg);  
  $("#hidPeg").html(hidPeg);
  })
});
</script>
@endsection