@extends('layout')


@section('content')

<div class="page-header page-header-default">
	<div class="breadcrumb-line">
		<ul class="breadcrumb">
			<li><a href="index.html"><i class="icon-home2 position-left"></i> Master</a></li>
			<li class="active">Jadwal</li>
		</ul>
	</div>
</div>

<div class="content">
	<div class="panel panel-flat">
		<div class="panel-heading">
			<h5 class="panel-title">Jadwal</h5>
			<div class="heading-elements">
				<ul class="icons-list">
		      		<li><a data-action="collapse"></a></li>
		      	</ul>
	       	</div>
	    </div>
	    <div class="panel-body">
	    	<button class="btn btn-primary" id="btn_tambah_satuan"><i class=""></i>Tambah</button>
	    </div>

	    <table class="table table_satuan table-stripped">
	    	<thead>
				<tr>
					<th>No</th>
					<th>Nama Shift</th>
					<th>Nama Pegawai</th>
					<th>Nama Mesin</th>
					<th>Tanggal Awal</th>
					<th>Tanggal Akhir</th>
					<th>Jam Masuk</th>
					<th>Jam Pulang</th>
					<th>Status</th>
					<th class="text-center">Aksi</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
	    </table>
	</div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
	<div class="modal-dialog" role="document">
	    <div class="modal-content">
	    	<div class="modal-header">
	    		<h5 class="modal-title" id="exampleModalLabel">Data</h5>
	    		<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span></button>
	      	</div>
	      	<div class="modal-body">
	      		<form class="form-horizontal" autocomplete="off">
	      			<input type="hidden" name="id_shift">
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Nama Shift</label>
	      				<div class="col-sm-8">
	      					<input type="text" class="form-control" name="popup_shift" required="">
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Pegawai</label>
	      				<div class="col-sm-8">
	      					<select class="form-control select-search" name="popup_pegawai" required="">
	      						<option value="">--- Pilih Pegawai ---</option>
        					@php $no=1; foreach($data['pegawai'] as $row){
        					@endphp
        						<option value="{{ $row->id_pegawai }}">{{ $row->nama_pegawai }}</option>
        					@php } @endphp
	      					</select>
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Mesin</label>
	      				<div class="col-sm-8">
	      					<select class="form-control select-search" name="popup_mesin" required="">
	      						<option value="">--- Pilih Mesin ---</option>
                            @php $no=1; foreach($data['mesin'] as $row){
                            @endphp
                                <option value="{{ $row->id_mesin }}">{{ $row->nama }}</option>
                            @php } @endphp
	      					</select>	      					
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Tanggal Awal</label>
	      				<div class="col-sm-8">
	      					<input type="text" class="form-control datepicker" name="popup_tanggalAwal" required="">
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Tanggal Akhir</label>
	      				<div class="col-sm-8">
	      					<input type="text" class="form-control datepicker" name="popup_tanggalAkhir" required="">
	      				</div>
	      			</div>
                    <div class="form-group">
	      				<label class="control-label col-sm-4">Jam Masuk</label>
	      				<div class="col-sm-8">
	      					<input type="text" class="form-control timepicker" name="popup_masuk" placeholder="12:00" required="">
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Jam Masuk</label>
	      				<div class="col-sm-8">
	      					<input type="text" class="form-control timepicker" name="popup_pulang" placeholder="12:00" required="">
	      				</div>
	      			</div>
	      			<div class="form-group">
	      				<label class="control-label col-sm-4">Status</label>
	      				<div class="col-sm-8">
	      					<select name="popup_status" class="form-control select-search">
	      						<option value="1">Aktif</option>
	      						<option value="0">Tidak Aktif</option>
	      					</select>
	      				</div>
	      			</div>
	      		</form>
	      	</div>
	      	<div class="modal-footer">
	        	<button type="button" class="btn btn-primary" id="btn_popup_simpan">Simpan</button>
	      	</div>
	    </div>
	</div>
</div>

<script type="text/javascript">
	var table_satuan;

	$(document).ready(function(){
		table_satuan = $(".table_satuan").DataTable({
			processing: true,
	        serverSide: true,
	        ajax: '{{ url('shift/get_data') }}',
	        columns: [
	            {data: 'status', name: 'status', orderable: false, searchable: false, render : function(data, type, row, meta){
			  		return meta.row+1;
			  	}},
	            {data: 'nama_shift', name: 'ms.nama_shift'},
	            {data: 'nama_pegawai', name: 'mp.nama_pegawai'},
	            {data: 'nama_mesin', name: 'mm.nama'},
	            {data: 'tgl_awal', name: 'ms.tgl_awal', searchable: false},
	            {data: 'tgl_akhir', name: 'ms.tgl_akhir', searchable: false},
	            {data: 'jam_awal', name: 'ms.jam_masuk', searchable: false},
	            {data: 'jam_akhir', name: 'ms.jam_pulang', searchable: false},
	            {data: 'status', name: 'status', orderable: false, searchable: false},
	            {data: 'aksi', name: 'aksi', orderable: false, searchable: false}
	        ],
			columnDefs: [{
		        "targets": 'no-sort',
		        "orderable": false,
		    }]
		});
		
		// table_satuan.on( 'order.dt search.dt', function () {
  //           table_satuan.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
  //               cell.innerHTML = i+1;
  //           } );
  //       } ).draw();
  //       table_satuan.clear().draw();

    //    get_data();

    	$('.timepicker').timepicker({
    		template : 'modal',
    		showMeridian: false,
    		snapToStep : true,
    		disableMousewheel : false,
    		modalBackdrop : false,
    		defaultTime : 'current'
    	});
	})
	$("#btn_tambah_satuan").click(function(){
		$("[name=id_shift]").val('');
		$("[name=popup_shift]").val('');
		$("[name=popup_pegawai]").val(null).trigger('change');
		$("[name=popup_mesin]").val(null).trigger('change');
		$("[name=popup_tanggalAwal]").val('');
		$("[name=popup_tanggalAkhir]").val('');
		$("[name=popup_pulang]").val('');
		$("[name=popup_masuk]").val('');
		$("[name=popup_status]").val('0').trigger('change');

		$("#exampleModal").modal("show");
	})

	function get_data(){
		$.ajax({
			url: "{{ url('shift/get_data')}}  ",
			type: 'get',
			dataType: 'json',
			success: function(respon){
				table_satuan.clear().draw();
				for(i in respon){
					table_satuan.row.add(['<div><center></center></div>',
						'<div>'+respon[i].nama_shift+'</div>',
						'<div>'+respon[i].nama_pegawai+'</div>',
						'<div>'+respon[i].nama_mesin+'</div>',
						'<div>'+respon[i].tanggal_awal+'</div>',
						'<div>'+respon[i].tanggal_akhir+'</div>',
						'<div>'+respon[i].jam_masuk+'</div>',
						'<div>'+respon[i].jam_pulang+'</div>',
						'<div>'+respon[i].aksi+'</div>'+
						'<input type="hidden" id="table_id'+respon[i].id_shift+'" value="'+respon[i].id_shift+'">'+
						'<input type="hidden" id="table_namashift'+respon[i].id_shift+'" value="'+respon[i].nama_shift+'">'+
						'<input type="hidden" id="table_idpegawai'+respon[i].id_shift+'" value="'+respon[i].id_pegawai+'">'+
						'<input type="hidden" id="table_idmesin'+respon[i].id_shift+'" value="'+respon[i].id_mesin+'">'+
						'<input type="hidden" id="table_tanggalAwal'+respon[i].id_shift+'" value="'+respon[i].tanggal_awal+'">'+
						'<input type="hidden" id="table_tanggalAkhir'+respon[i].id_shift+'" value="'+respon[i].tanggal_akhir+'">'+
						'<input type="hidden" id="table_masuk'+respon[i].id_shift+'" value="'+respon[i].jam_masuk+'">'+
						'<input type="hidden" id="table_pulang'+respon[i].id_shift+'" value="'+respon[i].id_pgawai+'">'
						]).draw(false);
				}
			}
		})
	}

	

	function edit(id){
		var id = $("#table_id"+id).val();
		var nama_shift = $("#table_namashift"+id).val();
		var id_pegawai = $("#table_idpegawai"+id).val();
		var id_mesin = $("#table_idmesin"+id).val();
		var tanggal_awal = $("#table_tanggalAwal"+id).val();
		var tanggal_akhir = $("#table_tanggalAkhir"+id).val();
		var jam_masuk = $("#table_masuk"+id).val();
		var jam_pulang = $("#table_pulang"+id).val();
		var status = $("#table_status"+id).val();

		$("[name=id_shift]").val(id);
		$("[name=popup_shift]").val(nama_shift);
		$("[name=popup_pegawai]").val(id_pegawai).trigger('change');
		$("[name=popup_mesin]").val(id_mesin).trigger('change');
		$("[name=popup_tanggalAwal]").val(tanggal_awal);
		$("[name=popup_tanggalAkhir]").val(tanggal_akhir);
		$("[name=popup_masuk]").val(jam_masuk);
		$("[name=popup_pulang]").val(jam_pulang);
		$("[name=popup_status]").val(status).trigger('change');

		$("#exampleModal").modal('show');

	}

	function hapus(id){
		swal({
			title: 'Anda yakin akan menghapus item ini?',
			type: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Ya',
			cancelButtonText: 'Tidak',
		}).then((result) => {
			if(result.value){
			 	$.ajax({
					url: "{{ url('shift/hapus')}} ",
					type: 'post',
					data: {id : id},
					headers : {
						'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
					},
					success: function(respon){
						table_satuan.ajax.reload();
					}
				})
			}
		})
	}

	$("#btn_popup_simpan").click(function(){
		var id = $("[name=id_shift]").val();
		var nama_shift = $("[name=popup_shift]").val();
		var id_pegawai = $("[name=popup_pegawai]").val();
		var id_mesin = $("[name=popup_mesin]").val();
		var tanggal_awal = $("[name=popup_tanggalAwal]").val();
		var tanggal_akhir = $("[name=popup_tanggalAkhir]").val();
		var jam_masuk = $("[name=popup_masuk]").val();
		var jam_pulang = $("[name=popup_pulang]").val();
		var status = $("[name=popup_status]").val();
		
		if(nama_shift != '' && tanggal_awal != '' && tanggal_akhir != ''){
			$.ajax({
				url: "{{ url('shift/simpan')}} ",
				type: 'post',
				data: {id : id, nama_shift : nama_shift, id_pegawai : id_pegawai, id_mesin : id_mesin, tanggal_awal : tanggal_awal, tanggal_akhir : tanggal_akhir, jam_masuk : jam_masuk, jam_pulang : jam_pulang, status : status},
				headers : {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				},
				success: function(respon){
					table_satuan.ajax.reload();
					$("#exampleModal").modal('hide');
				}
			})
		}
	})
</script>

@endsection