@extends('layouts.app')
@section('title', session('company_code') . ' Elite System')

@section('body')
	<div class="box box-default">
		<div class="box-body">
			<div class="row">
				<div class="col-xs-12">
					<div class="pull-right box-tools">
                        <a href="{{ url('/administrator/admin-tools') }}" class="btn btn-default btn-flat">
                            <i class="fa fa-chevron-left"></i> Back
                        </a>

						<a class="btn btn-success btn-flat" data-target="#addMaterial-Modal" data-toggle="modal">
							<i class="fa fa-plus-circle"></i> Add Material
						</a>
					</div>

					<div class="pull-right box-tools" style="width:100px; margin-right: 3px;">
	                    <select id="filter-by-status" class="form-control select2 select2-hidden-accessible" data-placeholder="STATUS" style="width: 100%;" aria-hidden="true">
	                        <option value=""></option>
	                        <option value="1">Enabled</option>
	                        <option value="0">Disabled</option>
	                    </select>
	                </div>

					<div class="pull-right box-tools" style="width:100px; margin-right: 3px;">
	                    <select id="filter-by-uom" class="form-control select2 select2-hidden-accessible" data-placeholder="UOM" style="width: 100%;" aria-hidden="true">
	                        <option value=""></option>
	                        <option value="piece">Piece</option>
	                        <option value="roll">Roll</option>
	                        <option value="meters">Meter</option>
	                        <option value="feet">Feet</option>
	                    </select>
	                </div>

					<div class="pull-right box-tools" style="width:180px; margin-right: 3px;">
	                    <select id="filter-by-category" class="form-control select2 select2-hidden-accessible" data-placeholder="CATEGORY" style="width: 100%;" aria-hidden="true">
	                        <option value=""></option>
	                        <option value="new connection">New Connection</option>
	                        <option value="distribution mainline">Distribution Mainline</option>
	                        <option value="meter assembly">Meter Assembly</option>
	                        <option value="disconnection">Disconnection</option>
	                        <option value="tapping equipment">Tapping Equipment</option>
	                        <option value="mainline tapping">Mainline Tapping</option>
	                        <option value="repair material">Repair Material</option>
	                        <option value="pump and motor">Pump and Motor</option>
	                        <option value="electrical materials">Electrical Materials</option>
	                        <option value="office supplies">Office Supplies</option>
	                    </select>
	                </div>

                    <label class="text-primary" style="font-size:16px; margin-top:6px"><i class="fa fa-wrench"></i> List of Materials</label>
				</div>
			</div>
        	<hr style="margin-top:6px; margin-bottom:8px">
			<div class="row">
				<div class="col-xs-12">
					<table class="table table-condensed table-hover" id="table-materials" style="width:100%">
                    <thead class="table-header-bg">
                        <tr>
                            <th width="15%">Category</th>
                            <th width="15%">Code</th>
                            <th width="35%">Name</th>
							<th width="10%">Price</th>
                            <th width="7%">UOM</th>
							<th width="8%">STATUS</th>
                            <th width="10%">&nbsp;</th>
                        </tr>
                    </thead>
                </table>
				</div>
			</div>
		</div>
	</div>

	<!-- ADD MATERIALS MODAL -->
	<div class="modal fade" id="addMaterial-Modal" data-backdrop="static" data-keyboard="false" role="dialog">
	    <div class="modal-dialog modal-sm" role="document" table>
	        <div class="modal-content">
	            <div class="modal-body">
                    <div class="form-row">
                        <h5 class="text-primary" style="margin-top:0px;"><strong><i class="fa fa-plus-square"></i> Add Material</strong></h5>
                    </div>

                    <div class="form-group">
                        <span class="control-label text-bold">Category</span>
                        <select id="add_mat_category" class="form-control select2 select2-hidden-accessible" aria-hidden="true" style="width: 100%;">
	                        <option value="new connection">New Connection</option>
                            <option value="distribution mainline">Distribution Mainline</option>
	                        <option value="meter assembly">Meter Assembly</option>
	                        <option value="disconnection">Disconnection</option>
	                        <option value="tapping equipment">Tapping Equipment</option>
	                        <option value="mainline tapping">Mainline Tapping</option>
	                        <option value="repair material">Repair Material</option>
	                        <option value="pump and motor">Pump and Motor</option>
	                        <option value="electrical materials">Electrical Materials</option>
	                        <option value="office supplies">Office Supplies</option>
                        </select>
                    </div>

					<div class="form-row">
                        <div class="form-group col">
                            <label for="add_mat_code"><strong>Material Code</strong></label>
                            <input type="text" class="form-control" id="add_mat_code" placeholder="Material Code">
                        </div>
                    </div>

					<div class="form-row">
                        <div class="form-group col">
                            <label for="add_mat_name"><strong>Material Name</strong></label>
                            <input type="text" class="form-control" id="add_mat_name" placeholder="Material Name">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col">
                            <label for="add_mat_price"><strong>Price</strong></label>
                            <input type="number" class="form-control" id="add_mat_price" placeholder="0.00">
                        </div>
                    </div>

					<div class="form-group">
                        <span class="control-label text-bold">UOM</span>
                        <select id="add_mat_uom" class="form-control select2 select2-hidden-accessible" style="width: 100%;" aria-hidden="true">
							<option value="piece">Piece</option>
							<option value="roll">Roll</option>
							<option value="meters">Meter</option>
							<option value="feet">Feet</option>
						</select>
                    </div>

                    <div class="form-group">
                        <button type="button" class="btn btn-default btn-flat waves-effect btn-sm" onclick="clearInputs()" data-dismiss="modal">
                            Cancel
                        </button>
                        <button type="button" class="btn btn-success btn-flat waves-effect waves-light btn-sm addMaterial-btn">
                            <i class="fa fa-check"></i> Save
                        </button>
                    </div>
	            </div>
	        </div>
	    </div>
	</div>

	<!-- EDIT MATERIALS MODAL -->
	<div class="modal fade" id="editMaterial-Modal" data-backdrop="static" data-keyboard="false" role="dialog">
	    <div class="modal-dialog modal-sm" role="document" table>
	        <div class="modal-content">
	            <div class="modal-body">
                    <div class="form-row">
                        <h5 class="text-primary" style="margin-top:0px;"><strong><i class="fa fa-pencil-square"></i> Edit Material</strong></h5>
                    </div>
					<input type="hidden" id="hidden_id">
                    <div class="form-group">
                        <span class="control-label text-bold">Category</span>
                        <select id="edit_mat_category" class="form-control select2 select2-hidden-accessible" aria-hidden="true" style="width: 100%;">
	                        <option value="new connection">New Connection</option>
                            <option value="distribution mainline">Distribution Mainline</option>
	                        <option value="meter assembly">Meter Assembly</option>
	                        <option value="disconnection">Disconnection</option>
	                        <option value="tapping equipment">Tapping Equipment</option>
	                        <option value="mainline tapping">Mainline Tapping</option>
	                        <option value="repair material">Repair Material</option>
	                        <option value="pump and motor">Pump and Motor</option>
	                        <option value="electrical materials">Electrical Materials</option>
	                        <option value="office supplies">Office Supplies</option>
                        </select>
                    </div>

					<div class="form-row">
                        <div class="form-group col">
                            <label for="edit_mat_code"><strong>Material Code</strong></label>
                            <input type="text" class="form-control" id="edit_mat_code" placeholder="Material Code">
                        </div>
                    </div>

					<div class="form-row">
                        <div class="form-group col">
                            <label for="edit_mat_name"><strong>Material Name</strong></label>
                            <input type="text" class="form-control" id="edit_mat_name" placeholder="Material Name">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col">
                            <label for="edit_mat_price"><strong>Price</strong></label>
                            <input type="number" class="form-control" id="edit_mat_price" placeholder="0.00">
                        </div>
                    </div>

					<div class="form-group">
                        <span class="control-label text-bold">UOM</span>
                        <select id="edit_mat_uom" class="form-control select2 select2-hidden-accessible" style="width: 100%;" aria-hidden="true">
							<option value="piece">Piece</option>
							<option value="roll">Roll</option>
							<option value="meters">Meter</option>
							<option value="feet">Feet</option>
						</select>
                    </div>

                    <div class="form-group">
                        <button type="button" class="btn btn-default btn-flat waves-effect btn-sm" onclick="clearInputs()" data-dismiss="modal">
                            Cancel
                        </button>
                        <button type="button" class="btn btn-success btn-flat waves-effect waves-light btn-sm editMaterial-btn">
                            <i class="fa fa-check"></i> Save
                        </button>
                    </div>
	            </div>
	        </div>
	    </div>
	</div>
@endsection

@section('scripts')
	<script type="text/javascript">
		function clearInputs() {
			$('#add_mat_category').val('new connection').trigger('change');
			$('#add_mat_code').val('');
			$('#add_mat_name').val('');
			$('#add_mat_price').val('');
			$('#add_mat_uom').val('piece').trigger('change');

			$('#hidden_id').val('');
			$('#edit_mat_category').val('new connection').trigger('change');
			$('#edit_mat_code').val('');
			$('#edit_mat_name').val('');
			$('#edit_mat_price').val('');
			$('#edit_mat_uom').val('piece').trigger('change');
		}

		$(document).ready(function(){
			$dt = $('#table-materials').DataTable({
				ordering: false,
				deferred: true,
				processing: true,
				serverSide: true,
				ajax: {
						url: $app_url + '/administrator/admin-tools/add-materials/dt',
						data : function(d) {
		                    d.category = $('#filter-by-category option:selected').val();
		                    d.uom = $('#filter-by-uom option:selected').val();
		                    d.status = $('#filter-by-status option:selected').val();
                		}
					  },
				columns: [
					{data: 'category',			name: 'category',		orderable: false,	className:'text-uppercase', searchable: false},
					{data: 'code',				name: 'code',			orderable: false,	className:'text-uppercase'},
					{data: 'description',		name: 'description',	orderable: false,	className:'text-uppercase'},
					{data: 'unit_price',		name: 'unit_price',		orderable: false,	className:'text-uppercase', searchable: false},
					{data: 'uom',				name: 'uom',			orderable: false,	className:'text-uppercase', searchable: false},
					{data: 'status',			name: 'status',			orderable: false,	className:'text-uppercase', searchable: false},
					{data: 'action',			name: 'action',			orderable: false, searchable: false},
				]
			});

        	$('input[type="search"]').focus();

        	$('.dataTables_filter input').unbind();
            $('.dataTables_filter input').bind('keyup', function(e){
                if (e.keyCode == 13) {
                    $dt.search($(this).val()).draw();
                }
            });

            $('#filter-by-category').on('change', function(){
	            $dt.search($('#table-materials_filter input').val()).draw();
	        });

			$('#filter-by-uom').on('change', function(){
	            $dt.search($('#table-materials_filter input').val()).draw();
	        });

	        $('#filter-by-status').on('change', function(){
	            $dt.search($('#table-materials_filter input').val()).draw();
	        });

			$('#addMaterial-Modal').on('shown.bs.modal', function(){
            	$('#add_mat_code').focus();
            });

			$('#editMaterial-Modal').on('shown.bs.modal', function(){
				$('#edit_mat_code').focus();
            });
		})
		.on('click', '.addMaterial-btn', function(){
			var category = $('#add_mat_category option:selected').val();
			var code = $('#add_mat_code').val();
			var name = $('#add_mat_name').val();
			var price = $('#add_mat_price').val();
			var uom = $('#add_mat_uom option:selected').val();

			if (category && name && price && uom) {
				$jc = $.confirm({
					title: '',
					draggable: true,
					content: '<p class="text-center"><i class="fa fa-question-circle text-bold text-success" style="font-size:54px"></i></p>' +
								'<p class="text-center">Are you sure you want to add this Material <strong>'+name+'?</strong></p>',
					type: 'green',
					buttons: {
						CLOSE: {
							btnClass: 'btn btn-default',
							text: '<small>[ESC]</small> Cancel',
							keys: ['esc'],
							action: function() {
								$('#addMaterial-Modal').modal('show');
							}
						},
						CONFIRM: {
							btnClass: 'btn btn-success',
							text: '<small>[ENTER]</small> Confirm',
							keys: ['enter'],
							action: function() {
								$.ajax({
									url: $app_url + '/administrator/admin-tools/add-materials/add',
									type: 'POST',
									data: {
										'category' : category,
										'code' : code,
										'name' : name,
										'price' : price,
										'uom' : uom
									},
									beforeSend: function(){
										$jc.showLoading(true);
									},
									success: function(e){
										clearInputs();
										$('#addMaterial-Modal').modal('hide');
										$dt.draw();
									},
									error: function(e){
									},
									complete: function() {
										$jc.hideLoading(true);
									}
								})
							}
						}
					}
				});
			}
		})
		.on('click', '.edit-material', function() {
			$('#hidden_id').val($(this).data('id'));
			$('#edit_mat_category').val($(this).data('cat')).trigger('change');
			$('#edit_mat_code').val($(this).data('code'));
			$('#edit_mat_name').val($(this).data('name'));
			$('#edit_mat_price').val($(this).data('price'));
			$('#edit_mat_uom').val($(this).data('uom')).trigger('change');
			
			$('#editMaterial-Modal').modal('show');
			
		})
		.on('click', '.editMaterial-btn', function() {
			var id = $('#hidden_id').val();
			var category = $('#edit_mat_category option:selected').val();
			var code = $('#edit_mat_code').val();
			var name = $('#edit_mat_name').val();
			var price = $('#edit_mat_price').val();
			var uom = $('#edit_mat_uom option:selected').val();

			if (id && category && name && price && uom) {
				$jc = $.confirm({
					title: '',
					draggable: true,
					content: '<p class="text-center"><i class="fa fa-question-circle text-bold text-primary" style="font-size:54px"></i></p>' +
								'<p class="text-center">Are you sure you want to update this Material <strong>'+name+'?</strong></p>',
					type: 'blue',
					buttons: {
						CLOSE: {
							btnClass: 'btn btn-default',
							text: '<small>[ESC]</small> Cancel',
							keys: ['esc'],
							action: function() {
								$('#editMaterial-Modal').modal('show');
							}
						},
						CONFIRM: {
							btnClass: 'btn btn-primary',
							text: '<small>[ENTER]</small> Confirm',
							keys: ['enter'],
							action: function() {
								$.ajax({
									url: $app_url + '/administrator/admin-tools/add-materials/edit',
									type: 'POST',
									data: {
										'id' : id,
										'category' : category,
										'code' : code,
										'name' : name,
										'price' : price,
										'uom' : uom
									},
									beforeSend: function(){
										$jc.showLoading(true);
									},
									success: function(e){
										clearInputs();
										$('#editMaterial-Modal').modal('hide');
										$dt.draw();
									},
									error: function(e){
									},
									complete: function() {
										$jc.hideLoading(true);
									}
								})
							}
						}
					}
				})
			}
		})
		.on('click', '.update-status', function() {
			var id = $(this).data('id');
			var name = $(this).data('name');
			var action = $(this).data('action');

			if (id && name && action) {
				$jc = $.confirm({
					title: '',
					draggable: true,
					content: '<p class="text-center"><i class="fa fa-question-circle text-bold text-primary" style="font-size:54px"></i></p>' +
								'<p class="text-center">Are you sure you want to <strong>'+action.toUpperCase()+'</strong> this Material <strong>'+name+'?</strong></p>',
					type: 'blue',
					buttons: {
						CLOSE: {
							btnClass: 'btn btn-default',
							text: '<small>[ESC]</small> Cancel',
							keys: ['esc']
						},
						CONFIRM: {
							btnClass: 'btn btn-primary',
							text: '<small>[ENTER]</small> Confirm',
							keys: ['enter'],
							action: function() {
								$.ajax({
									url: $app_url + '/administrator/admin-tools/add-materials/update-status',
									type: 'POST',
									data: {
										'id' : id,
										'name' : name,
										'action' : action
									},
									beforeSend: function(){
										$jc.showLoading(true);
									},
									success: function(e){
										$dt.draw();
									},
									error: function(e){
									},
									complete: function() {
										$jc.hideLoading(true);
									}
								})
							}
						}
					}
				})
			}
		});
	</script>
@endsection