sipadu_mbip/resources/views/officer/setting/memo_detail_add.blade.php

@extends('layout.officer', ['uid' => $user->_id, 'token' => $user->token_firebase])
@section('page_title', 'Kompaun (Kertas Siasatan)')
@section('sub_page_title', '')
@section('name', $user->StaffDetail->full_name)
@section('img_profile', $user->StaffDetail->profile_img)

@section('content')
<style type="text/css">
	select.form-control, select.form-control:focus, select.form-control:hover { 
		border: 1px solid #ccc !important;
		height: auto !important;
	}

	.panel-group .panel {
	    margin-bottom: 0;
	    overflow: hidden;
	    border-radius: 4px;
	}
	.panel-default {
    	border-color: #ddd;
	}
	.panel-default>.panel-heading {
	    color: #333;
	    background-color: #f5f5f5;
	    border-color: #ddd;
	}
	.panel-title {
	    margin-top: 0;
	    margin-bottom: 0;
	    font-size: 16px;
	    color: inherit;
	}

	.panel-body .table>thead>tr>th, .panel-body .table>tbody>tr>th, .panel-body .table>tfoot>tr>th, .panel-body .table>thead>tr>td, .panel-body .table>tbody>tr>td, .panel-body .table>tfoot>tr>td , .panel-body div{
	    padding: 8px 15px;
	    line-height: 1.428571429;
	    vertical-align: top;
	    border-top: 1px solid #ddd;
	}
	.glyphicon { margin-right:10px; }
	.panel-body { padding:0px; }
	.panel-body table tr td { padding-left: 15px }
	.panel-body table tr td a:hover , .panel-body div a:hover{ color: #d84315 !important; }
	.panel-body .table, .panel-body div {margin-bottom: 0px; }
	.active { color: #d84315; }
	.active:hover { color: #d84315; }

	#custom table { 
		table-layout:fixed !important; 
		border-collapse: collapse !important; 
		width: 100%; 
		word-wrap:break-word !important;
	}
	#custom td, #custom th {
	    border-top: 1px solid #dee2e6;
	    border-bottom: 1px solid #dee2e6;
	}
	.longtext{
		word-wrap: break-word !important;
  		word-break: break-word !important;
  		padding: 0.6rem 2rem;
	}

	.btn i {
	     margin-right: 0px; 
	}

	.form-control:disabled {
	    color: #333 !important;
	}
</style>

<div class="inner-page">
	<!-- Display message -->
	<div class="row">
		<div class="col-md-12">
			<div class="fluid">
				@if(count($errors) > 0)
				<div class="alert alert-danger icons-alert">
					@foreach($errors->all() as $error)
					<p>{{$error}}</p>
					@endforeach
				</div>
				@endif

				@if(Session::get('error_msg'))
				<div class="alert alert-danger icons-alert">
					{!! Session::get('error_msg') !!}
				</div>
				@elseif(Session::get('success_msg'))
				<div class="alert alert-success icons-alert">
					{!! Session::get('success_msg') !!}
				</div>
				@endif
			</div>
		</div>
	</div>
	<!-- End Display message -->
	<div class="row">
		<div class="col-xl-2 col-md-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h4 class="panel-title"> Navigasi </h4>
				</div>

				<div class="panel-body">
					<div>
						<a href="{{ url('/officer/setting/memo/index') }}">Senarai Memo/Nota</a>
					</div>
					<div>
						<a href="{{ url('/officer/setting/memo/add') }}" class="active">Tambah Memo/Nota</a>
					</div>
				</div>
			</div>
		</div>

		<div class="col-xl-10 col-md-12">
			<form method="POST" action="{{ url('/officer/setting/memo/request/add') }}" enctype="multipart/form-data">
				<div class="row">
					<div class="col-lg-12 col-md-12">
						<div class="card">
							<div class="card-header">
								<h5 class="card-header-text">Dalam Kategori</h5>
								<span><code>** <b>PERHATIAN!! </b></code> Memo ini dikuat kuasakan keatas jenis <code>kesalahan yang dipilih</code>. Kompaun yang dihasilkan akan mengguna pakai memo ini secara langsung. <code>**</code></span>
							</div>

							<div class="card-block">
								<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
								<input type="hidden" name="jabatan" value="{{ $department->jbkod }}">
								<div class="row">
									<div class="col-lg-6 col-md-12">
										<div class="form-group form-primary">
											<label class="float-label"><b>Kategori Jabatan</b></label>
											<span class="form-control" style="cursor: not-allowed;">[{{ $department->jbkod }}] {{ $department->jnama }}</span>
											<span class="form-bar"></span>
										</div>
									</div>
									<div class="col-lg-6 col-md-12">
										<div class="form-group form-primary" id="acts">
											<label class="float-label"><b>Kategori Akta/UUK <code>*</code></b></label>
											<select id="akta_uuk" name="akta_uuk" class="form-control">
												<option value="">Pilih Kategori Akta/UUK</option>
											</select>
											<span class="form-bar"></span>
										</div>
									</div>
								</div>

								<div class="row" id="faulty">
									<div class="col-lg-12 col-md-12">
										<div class="form-group form-primary">
											<label class="float-label"><b>Kategori Kesalahan <code>*</code></b></label>
											<select id="kesalahan" name="kesalahan" class="form-control">
												<option value="">Pilih Kategori Kesalahan</option>
											</select>
											<span class="form-bar"></span>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="row">
					<div class="col-lg-12 col-md-12">
						<div class="card">
							<div class="card-header">
								<h5 class="card-header-text">Maklumat Nota/Memo</h5>
							</div>

							<div class="card-block">
								<div class="row">
									<div class="col-lg-6 col-md-12">
										<div class="form-group form-primary">
											<label class="float-label"><b>Kategori Modul <code>*</code></b></label>
											<select id="kategori_modul" name="kategori_modul" class="form-control" required>
												<option value="">Pilih Kategori Modul</option>
												<option value="-">Semua Modul</option>
											</select>
											<span class="form-bar"></span>
										</div>
									</div>
									<div class="col-lg-6 col-md-12">
										<div class="form-group form-primary">
											<label class="float-label"><b>Jenis Memo/Nota <code>*</code></b></label>
											<select id="jenis_memo" name="jenis_memo" class="form-control" required>
												<option value="">Pilih Jenis Memo</option>
												<option value="Potongan">Potongan Harga</option>
												<option value="Tambahan">Tambahan Harga</option>
											</select>
											<span class="form-bar"></span>
										</div>
									</div>
								</div>

								<div class="row">
									<div class="col-lg-6 col-md-12">
										<div class="form-group form-primary">
											<label class="float-label"><b>No.Rujukan <code>*</code></b></label>
											<input type="text" name="no_rujukan" class="form-control" value="{{ old('no_rujukan')}}">
											<span class="form-bar"></span>
										</div>
									</div>
									<div class="col-lg-6 col-md-12">
										<div class="form-group form-primary">
											<label class="float-label"><b>Tawaran Kompaun Baru <code>*</code></b></label>
											<input type="text" name="tawaran" class="form-control" value="{{ old('tawaran')}}" placeholder="5%">
											<span class="form-bar"></span>
											<code>Format tawaran kompaun mesti dalam bentuk <b>peratus (%)</b></code>
										</div>
									</div>
								</div>

								<div class="row">
									<div class="col-lg-12 col-md-12">
										<div class="form-group form-primary">
											<label class="float-label"><b>Subjek <code>*</code></b></label>
											<input type="text" name="subjek" class="form-control" value="{{ old('subjek')}}" required="">
											<span class="form-bar"></span>
										</div>
									</div>
									<div class="col-lg-12 col-md-12">
										<div class="form-group form-primary">
											<label class="float-label"><b>Penerangan <code>*</code></b></label>
											<textarea type="text" name="penerangan" id="penerangan" style="width: 100%; height: 200px" required=""> {{ old('penerangan')}}</textarea>
											<span class="form-bar"></span>
										</div>
									</div>
								</div>

								<!-- Drag Drop -->
								<div class="row" style="margin-bottom: 1.25em;">
									<div class="col-lg-12">
										<div class="dropzone" id="uploadF">
											<label class="float-label"><b>Tekan untuk memuat PDF. <code>Optional</code></b></label>
											<div class="fallback">
												<input name="attachment[]" id="attachment" type="file" class="form-control form-control-sm" multiple />
											</div>
										</div>
										<code>Format <b>PDF</b> sahaja yang diterima</code>
									</div>
								</div>

								<div class="row">
									<div class="col-lg-6 col-md-12">
										<div class="form-group form-primary">
											<label class="float-label"><b>Tarikh Mula <code>*</code></b></label>
											<input type="datetime-local" name="tarikh_mula"  value="{{ old('tarikh_mula')}}" class="form-control">
											<span class="form-bar"></span>
										</div>
									</div>
									<div class="col-lg-6 col-md-12">
										<div class="form-group form-primary">
											<label class="float-label"><b>Tarikh Akhir <code>*</code></b></label>
											<input type="date" name="tarikh_akhir"  value="{{ old('tarikh_akhir')}}" class="form-control">
											<span class="form-bar"></span>
										</div>
									</div>
								</div>

								<hr>
								<div class="md-group-add-on"></div>
								<div class="f-right m-t-20">
									<button type="submit" class="btn btn-sm btn-outline-danger waves-effect">Simpan Memo</button>
								</div>                       
							</form>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
@endsection

@section('external_js')
<script type="text/javascript" src="{{ asset('js/toggle_button_edit.js') }}"></script>

<script type="text/javascript">

	var ellipsis = "...";
	function TrimLength(text, maxLength)
	{
	    text = $.trim(text);

	    if (text.length > maxLength)
	    {
	        text = text.substring(0, maxLength - ellipsis.length)
	        return text.substring(0, text.lastIndexOf(" ")) + ellipsis;
	    }
	    else
	        return text;
	}

	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});

	$('#acts').hide();
	$('#faulty').hide();

	$(document).ready(function() {

		var origin   = window.location.origin; 

		// <!-- Theme Loader -->
		$(".theme-loader").animate({
			opacity: "0"
		},1000);
		setTimeout(function() {
			$(".theme-loader").remove();
		}, 800);

		$('[data-toggle="tooltip"]').tooltip();

		$('#akta_uuk').empty();
		$('#akta_uuk').append('<option value="">Pilih Kategori Akta/UUK</option>');
		$.ajax({
			type: "GET",
			url: "{{ url('api/deed-law') }}"+"/{{ $department->jbkod }}/list",
			success: function(result){
				$.each(result.data, function(i, d) {
					$('#akta_uuk').append('<option value="' + d.akkod + '">' + d.nama + '</option>');
					$('#acts').show();
					$('#akta_uuk').prop('required',true);
				});
			}
		});

		$('#akta_uuk').change(function(){
			if( $(this).val()==""){
				$('#faulty').hide();
				$('#kesalahan').prop('required',false);
				$('#kesalahan').empty();
				$('#kesalahan').append('<option value="">Pilih Kategori Kesalahan</option>');
			}
			else {
				$('#kesalahan').empty();
				$('#kesalahan').append('<option value="">Pilih Kategori Kesalahan</option>');
				$.ajax({
		            type: "GET",
		            url: "{{ url('api/faulty') }}"+"/{{ $department->jbkod }}/"+$(this).val()+"/list",
		            success: function(result){
		                $.each(result.data, function(i, d) {
		                	var full_sentences = '[' + d.itkod + '] '+ d.nama;
		                    $('#kesalahan').append('<option value="' + d.itkod + '">' + TrimLength(full_sentences, 100) +'</option>');
		                    $('#faulty').show();
							$('#kesalahan').prop('required',true);
		                });
		            }
		        });
			}
		});
	});
</script>
@endsection