@extends('be.layout-index')
@section('content')
@php
$modul="Status Laporan";
$modula="m_status";
$id='';
$id_laporan='';
$note='';
$no='';
$id_kat1='';
$dokumen_cover='';
$dokumen='';
if(isset($data)){
	$id=$data->id;
	$id_laporan=$data->id_laporan;
	$note=$data->note;
	$no=$data->no;
	$id_kat1=$data->id_kat1;
	$dokumen_cover=$data->dokumen_cover;
	$dokumen=$data->dokumen;
}
@endphp
<link rel="stylesheet" href="{{asset('media/assets/css/select2.min.css')}}">
<link rel="stylesheet" href="{{asset('media/assets/css/select2-bootstrap.css')}}">
<link rel="stylesheet" href="{{asset('media/css/readonly.css')}}">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<div class="row">
   <div class="col-12">
       <div class="card">
           	<div class="card-body">
			
<div class="panel-default">
	<div class="content-box-header  panel-heading">
		<div class="panel-title"></div>
	</div>
	<div class="content-box-large box-with-header">
		<form id=frm name=frm enctype="multipart/form-data" method=post>
			@csrf
			<div class="row">
				<div class="col-sm-12">
					<div class="form-group row required">
						<label class="col-sm-2 control-label">Laporan</label>
						<div class="input-group col-md-4">
							@if($id!='')
								{!!$no!!}
							@else
						      <input class="form-control py-2" type="search" placeholder="Cari No Pelaporan" id="no" name="no">
							  <span class="input-group-append">
						        <button class="btn btn-outline-secondary" type="button" data-toggle="modal" data-target=".bs-example-modal-lg">
						            <i class="fa fa-search"></i>
						        </button>
						      </span><span class="col-md-12" style="margin-left:-10px" class=span_err><font class=font_err></font></span>
							@endif
						</div>
					</div>
					<div class="form-group row required">
						<label class="col-sm-2 control-label">Status</label>
						<div class="col-sm-5">
							<select style="width:300px" class='form-control select2' id=id_kat1 name=id_kat1>
								<option value=''>- Pilih Status -</option>
								@php
									$m_status_sel='';
									foreach($m_status as $item)
									{
										if($item->id==$id_kat1){
											$m_status_sel='selected';
										}
										else{
											$m_status_sel='';
										}
										echo '<option value="'.$item->id.'" '.$m_status_sel.'>'.$item->nama.'</option>';
									}
								@endphp
						   </select>
						</div>
					</div>
					<div class="form-group row required">
						<label class="col-sm-2 control-label">Catatan</label>
						<div class="col-sm-5">
							<textarea name="note" id=note class="form-control" rows=4/>{!!$note!!}</textarea>
						</div>
					</div>
					<div class="form-group row">
						<label class="col-sm-2 control-label">Slide Dokumen<br><font class=small>(format gif,jpeg,png ukuran 350px X 350px)</font></label>
						<div class="col-sm-7">
							<input type=file name=dokumen_cover id=dokumen_cover accept=".jpg, .jpeg, .png, .gif">
							@php
								if($dokumen_cover!=''){
									echo '<br><br><a href="'.route("download.be_sts_dk").'/'.rawurlencode($dokumen_cover).'" class="btn btn-primary btn-xs"><i class=" ti-download"></i> Download</a>';
								}
							@endphp
						</div>
					</div>
					<div class="form-group row">
						<label class="col-sm-2 control-label">Dokumen</label>
						<div class="col-sm-7">
							<input type=file name=dokumen id=dokumen>
							@php
								if($dokumen!=''){
									echo '<br><br><a href="'.route("download.be_sts_dk").'/'.rawurlencode($dokumen).'"class="btn btn-primary btn-xs"><i class=" ti-download"></i> Download</a>';
								}
							@endphp
						</div>
					</div>
				</div>
			</div>
			<br />
			<div class="row">
				<div class="col-sm-6">
					<div class="form-group" style="margin-left:13px">
						<div class="col-sm-offset-2 col-sm-10">
							<input name="id" type="hidden" value="{!!$id!!}"/>
							<input name=id_laporan id=id_laporan type="hidden" value="{!!$id_laporan!!}"/>
							<input name="id_jenislaporan" type="hidden" value="{!!$id_jenislaporan!!}"/>
							<button type="submit" class="btn btn-primary btn-sm" name="btnSave"><i class='fa fa-save'></i> Simpan</button>
							<a href="javascript:history.back()" class="btn btn-warning btn-sm"><i class='fa fa-repeat'></i> Batalkan</a>
						</div>
					</div>
				</div>
			</div>
		</form>
	</div>
</div>	

			</div>
        </div>
    </div>        
</div>

<div id="modal_laporan" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Daftar Laporan</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div id="dTable" class="box-body table-responsive" style="padding:20px;">
      </div>
    </div>
  </div>
</div>
<div id=tbllaporan class="hide">
			<table width="100%" id="tblData" class="table table-hover table-striped" id="example">
                <thead>
                    <tr>
                        <td width="25%">No Laporan</td>
                        <td width="25%">Tempat Kejadian</td>
                        <td width="25%">Waktu Kejadian</td>
                        <th width="10%" style="text-align: center;">Actions</th>
                    </tr>
                </thead>
				<tbody id="show_data">
				@php
                  if (!empty($listlaporan)) {
                      foreach ($listlaporan as $row) {
                @endphp
					<tr>
						<td>{!!$row->no!!}</td>
						<td>{!!$row->tempatkejadian!!}</td>
						<td>{!!konversi_tanggal('d-M-Y H:i:s',$row->waktukejadian)!!}</td>
						<td style="text-align: center;">
							<a class="btn btn-primary btn-sm item_modal"  data-id="{!!$row->id!!}" data-no="{!!$row->no!!}"><i class="ti-check-box"></i> Pilih</a>
						</td>
					</tr>
				@php
						}
					}
				@endphp
				</tbody>
            </table>
</div>
<script>
var html = "";
var dtpelapor=$('#tbllaporan').html();
$("#dTable").append(dtpelapor);
$('#tblData').dataTable({
  "bPaginate": true,
  "bLengthChange": true,
  "bFilter": true,
  "bSort": false,
  "bInfo": true,
  "bAutoWidth": true
});
$(document).ready(function(){
	$('#show_data').on('click','.item_modal',function(){
       	var id = $(this).data('id');
       	var no = $(this).data('no');
		$('#id_laporan').val(id)
		$('#no').val(no)
		$('#modal_laporan').modal('hide');
   });
});
function validFileType(x) {
	var s=true
  	var validExtensions = ["jpg","jpeg","gif","png"]
    var file = $(x).val().split('.').pop().toLowerCase();
	if(x.val()!=""){
	    if (validExtensions.indexOf(file) == -1) {
	        alert("Hanya format berikut yang diperbolehkan : "+validExtensions.join(', '));
			$(x).val('');
			s=false
	    }
	}
	return s
}
</script>

<script>
$(function() {
  $("#frm").validate({
  	errorClass: "errorCssClass",
    rules: {
	  no: "required",
	  id_kat1: "required",
	  note: "required",
    },
    messages: {
      no: "Isikan no pelaporan",
	  id_kat1: "Pilih status terlebih dahulu",
      note: "Isikan catatan status",
    },
	errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) { 
            error.insertAfter(element.next('span').next('span'));      // radio/checkbox?
        } else if (element.hasClass('select2')) {    
            error.insertAfter(element.next('span'));  // select2
        } else {         
            error.insertAfter(element);               // default
        }
    },
	highlight: function (element, errorClass, validClass) {
        $(element).addClass(errorClass); //.removeClass(errorClass);
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
    },
   	unhighlight: function (element, errorClass, validClass) {
       	$(element).removeClass(errorClass); //.addClass(validClass);
       },
	submitHandler: function(form) {
		var frm = document.getElementById("frm");
		if(validFileType($('#dokumen_cover'))){
			if(gosubmit()){
				$("#overlay").fadeIn(300);
				//frm.submit();
				var formData = new FormData(frm);
				$.ajax({
				    type: "POST",
				    url: "{!!route($modula.'.save')!!}",
				    data: formData,
				    contentType: false,
				    processData: false,
				    beforeSend: function() {
				    },
				    success: function(msg){
						document.location.href=msg
				    },
				    error: function() {
				    }
				});
			}
		}
	}
  });
});
</script>
<script src="{{asset('media/assets/js/select2.full.js')}}"></script>
<script>
$(".select2").select2();
$('#no').attr("readonly", true);
</script>
@endsection