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

@extends('layout.officer', ['uid' => $user->_id, 'token' => $user->token_firebase])
@section('page_title', 'Kompaun')
@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; }
</style>

<div class="inner-page">
	<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>

	<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/template/notice') }}">Senarai Templat Notis Amaran</a>
					</div>
					<div>
						<a href="{{ url('/officer/setting/template/notice/add') }}" class="active">Tambah Templat Notis Amaran</a>
					</div>
				</div>
			</div>
		</div>

		<div class="col-xl-10 col-md-12">
			<div class="card">
				<div class="card-header">
					<h5>Tambah Templat Notis Amaran</h5>
					<span><code>** <b>PERHATIAN!! </b></code>Template yang sedia ada akan diguna bila status dia <code>'aktif' **</code></span>
				</div>
				<div class="card-block">
					<form method="POST" action="{{ url('/officer/setting/template/notice/request/add') }}" enctype="multipart/form-data">
						<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
						<input type="hidden" id="department" name="department" 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>Jabatan <code>*</code></b></label>
									<input type="type" name="dd" class="form-control" value="[{{ $department->jbkod }}] {{ $department->jnama }}" disabled>
									<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>Akta Kesalahan <code>*</code></b></label>
									<select id="acts" name="acts" class="form-control" required></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>Seksyen Kesalahan <code>*</code></b></label>
									<select id="seksyen" name="seksyen" class="form-control" required></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>Jenis Amaran <code>*</code></b></label>
									<select id="jenis_amaran" name="jenis_amaran" class="form-control" required>
										<option value="">Pilih Jenis Amaran</option>
										<option value="Amaran 1">Amaran 1</option>
										<option value="Amaran 2">Amaran 2</option>
										<option value="Amaran 3">Amaran 3</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>Tempoh Hari <code>*</code></b></label>
									<select id="tempoh" name="tempoh" class="form-control" required>
										<option value="">Pilih Tempoh Hari</option>
										<option value="13">Sebelum 14</option>
										<option value="14">Selepas 14</option>
										<option value="28">Selepas 28</option>
									</select>
									<span class="form-bar"></span>
									<code>Notis amaran akan dihantar secara automatik selepas tempoh tarikh kompaun dikeluarkan, sekiranya jenis hantar adalah automatik</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>No.Rujukan <code>*</code></b></label>
									<input type="text" name="no_rujukan" class="form-control" value="{{ old('no_rujukan')}}" 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>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>Isi Kandungan Surat <code>*</code></b></label>
									<textarea id="editor2" type="text" name="kandungan" id="kandungan" style="width: 100%; height: 200px" required=""> {{ old('kandungan')}}</textarea>
									<span class="form-bar"></span>
								</div>
							</div>
						</div>

						<!-- <div class="row" style="margin-bottom: 1.25em;">
							<div class="col-lg-12">
								<div class="dropzone" id="uploadF">
									<label class="float-label"><b>Pengakuan Pengirim <code>*</code></b></label>
									<div class="fallback">
										<input name="attachment" id="attachment" type="file" class="form-control form-control-sm" required="" />
									</div>
								</div>
								<code>Format <b>JPG / JPEG</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>Nama Pengirim <code>*</code></b></label>
									<input type="text" name="nama_pengirim" class="form-control" value="{{ old('nama_pengirim')}}" required="">
									<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>Jawatan Pengirim <code>*</code></b></label>
									<input type="text" name="jawatan_pengirim" class="form-control" value="{{ old('jawatan_pengirim')}}" required="">
									<span class="form-bar"></span>
								</div>
							</div>
						</div> -->

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

@section('external_js')

<script type="text/javascript">
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});

	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;
	}

	$(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();

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

		$('#acts').change(function(){
			if( $(this).val()==""){
				$('#seksyen').empty();
				$('#seksyen').append('<option value="null">Pilih Kategori Kesalahan</option>');
				$('#seksyen').prop('required',false);
			}
			else {
				$('#seksyen').empty();
				$('#seksyen').append('<option value="null">Pilih Kategori Kesalahan</option>');
				$.ajax({
		            type: "GET",
		            url: "{{ url('api/faulty') }}"+"/"+	$('#department').val()+"/"+$(this).val()+"/list",
		            success: function(result){
		            	if(result.data.length !== 0 ){
		            		$.each(result.data, function(i, d) {
			                	var full_sentences = '[' + d.itkod + '] '+ d.nama;
			                    $('#seksyen').append('<option value="' + d.itkod + '">' + TrimLength(full_sentences, 300) +'</option>');
								$('#seksyen').prop('required',true);
			                });
		            	}
		            }
		        });
			}
		});
	});
</script>
<script type="text/javascript">
	CKEDITOR.replace('editor2', {
        // Define the toolbar: http://docs.ckeditor.com/#!/guide/dev_toolbar
        // The full preset from CDN which we used as a base provides more features than we need.
        // Also by default it comes with a 3-line toolbar. Here we put all buttons in a single row.
        toolbar: [{
            name: 'document',
            items: ['Print']
        }, {
            name: 'clipboard',
            items: ['Undo', 'Redo']
        }, {
            name: 'styles',
            items: ['Format', 'Font', 'FontSize']
        }, {
            name: 'basicstyles',
            items: ['Bold', 'Italic', 'Underline', 'Strike', 'RemoveFormat', 'CopyFormatting']
        }, {
            name: 'colors',
            items: ['TextColor', 'BGColor']
        }, {
            name: 'align',
            items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
        }, {
            name: 'links',
            items: ['Link', 'Unlink']
        }, {
            name: 'paragraph',
            items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
        }, {
            name: 'editing',
            items: ['Scayt']
        }],

        // Since we define all configuration options here, let's instruct CKEditor to not load config.js which it does by default.
        // One HTTP request less will result in a faster startup time.
        // For more information check http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-customConfig
        customConfig: '',

        // Sometimes applications that convert HTML to PDF prefer setting image width through attributes instead of CSS styles.
        // For more information check:
        //  - About Advanced Content Filter: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
        //  - About Disallowed Content: http://docs.ckeditor.com/#!/guide/dev_disallowed_content
        //  - About Allowed Content: http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules
        disallowedContent: 'img{width,height,float}',
        extraAllowedContent: 'img[width,height,align]',

        // Enabling extra plugins, available in the full-all preset: http://ckeditor.com/presets-all
        extraPlugins: 'tableresize,uploadimage,uploadfile',
        imageUploadUrl: '/uploader/upload.php?type=Images',
        uploadUrl: '/uploader/upload.php',
        /*********************** File management support ***********************/
        // In order to turn on support for file uploads, CKEditor has to be configured to use some server side
        // solution with file upload/management capabilities, like for example CKFinder.
        // For more information see http://docs.ckeditor.com/#!/guide/dev_ckfinder_integration

        // Uncomment and correct these lines after you setup your local CKFinder instance.
        // filebrowserBrowseUrl: 'http://example.com/ckfinder/ckfinder.html',
        // filebrowserUploadUrl: 'http://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
        /*********************** File management support ***********************/

        // Make the editing area bigger than default.
        height: 350,

        // An array of stylesheets to style the WYSIWYG area.
        // Note: it is recommended to keep your own styles in a separate file in order to make future updates painless.
        contentsCss: ['assets/pages/ckeditor/contents.css', 'assets/pages/ckeditor/document.css'],

        // This is optional, but will let us define multiple different styles for multiple editors using the same CSS file.
        bodyClass: 'document-editor',

        // Reduce the list of block elements listed in the Format dropdown to the most commonly used.
        format_tags: 'p;h1;h2;h3;pre',

        // Simplify the Image and Link dialog windows. The "Advanced" tab is not needed in most cases.
        removeDialogTabs: 'image:advanced;link:advanced',

        // Define the list of styles which should be available in the Styles dropdown list.
        // If the "class" attribute is used to style an element, make sure to define the style for the class in "mystyles.css"
        // (and on your website so that it rendered in the same way).
        // Note: by default CKEditor looks for styles.js file. Defining stylesSet inline (as below) stops CKEditor from loading
        // that file, which means one HTTP request less (and a faster startup).
        // For more information see http://docs.ckeditor.com/#!/guide/dev_styles
        stylesSet: [
            /* Inline Styles */
            {
                name: 'Marker',
                element: 'span',
                attributes: {
                    'class': 'marker'
                }
            }, {
                name: 'Cited Work',
                element: 'cite'
            }, {
                name: 'Inline Quotation',
                element: 'q'
            },

            /* Object Styles */
            {
                name: 'Special Container',
                element: 'div',
                styles: {
                    padding: '5px 10px',
                    background: '#eee',
                    border: '1px solid #ccc'
                }
            }, {
                name: 'Compact table',
                element: 'table',
                attributes: {
                    cellpadding: '5',
                    cellspacing: '0',
                    border: '1',
                    bordercolor: '#ccc'
                },
                styles: {
                    'border-collapse': 'collapse'
                }
            }, {
                name: 'Borderless Table',
                element: 'table',
                styles: {
                    'border-style': 'hidden',
                    'background-color': '#E6E6FA'
                }
            }, {
                name: 'Square Bulleted List',
                element: 'ul',
                styles: {
                    'list-style-type': 'square'
                }
            }
        ]
    });
</script>
@endsection