@extends('layouts.app')

@section('content')

<div class="box">
	<div class="box-header">
		<h3 class="box-title">Other (Equipment/Feed/Etc.) Category</h3>
	</div>
	<form   class="box-body" id="equipment_category_search-form">
		<div class="row">

			<div class="form-group col-xs-6">
				<label for="equpcat_name" class="col-sm-4 control-label">Other (Equipment/Feed/Etc.) Category</label>

				<div class="col-sm-8">
					<input type="text" class="form-control" id="equp_cat_name" name="equp_cat_name" placeholder="Enter Other (Equipment/Feed/Etc.) Category">
				</div>
			</div>

			<div class="form-group col-xs-6">
				<label class="col-sm-4 control-label" >Product Type</label>
				<div class="col-sm-8">
					<select class="form-control select2 prodsvc_id" style="width: 100%;" id="prodsvc_id" name="prodsvc_id">
						<option selected="selected" value="">Please Select</option>
						@foreach ($equipcategory_details['product'] as $product)
						<option value="{{ $product['prodsvc_id'] }}">{{ $product['product_name_en'] }}</option>
						@endforeach
					</select>
				</div>
			</div>

			
		</div>
		<div class="row">
			<div class="form-group col-xs-2 pull-right">
				<button type="button" class="btn btn-block btn-social btn-dropbox" id="search_equp_btn">
					<i class="fa fa-search"></i> Search
				</button>				
			</div>
			<div class="form-group col-xs-2">
				<button type="button" class="btn btn-light reset_btn">Reset</button>
			</div>
		</div>
	</form>
</div>


<div id="result_content"></div>

@endsection

@push('scripts')
<script type="text/javascript">
	jQuery(document).ready(function($) {

		$('#equipment_category_search-form').sayt({'recover': true});
		load_all_equipment_details();

		$("#search_equp_btn").click(function() {
			$('#equipment_category_search-form').sayt({'savenow': true});
			load_all_equipment_details();
		});	

		$('#equipment_category_search-form .reset_btn').click(function () {
			
            $('#equipment_category_search-form').sayt({'erase': true});
			location.reload();
		});	

	});

	$('#result_content').on('click', '.categoryDelete', function(event) {

		category_id = $(this).data('categoryid');

		deleteCategory(category_id);

	});

	function deleteCategory(category_id) {

		var ajax_url = "delete_equpcat_dtl/"+category_id;
		
		Swal.fire({
			title: 'Are you sure?',
			text: "You want to delete this!",
			icon: 'warning',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Yes, delete it!'
		}).then((result) => {
			if (result.value) {
				$.get(ajax_url, function(data){
					if(data == 'false'){
						Swal.fire({
							icon: 'error',
							title: 'Not Deleted',
							text: " Can't delete this equipment category"
						})
					}else{						
						Swal.fire(
							'Deleted!',
							'Equipment category has been deleted.',
							'success').then((result) => {
								if (result.value) {
									location.reload();
								}
							})
						}

					});
			}
		})
	}

	function load_all_equipment_details(){
		var ajax_url = "{{ route("equpcat_srch") }}";
		form_data = $("#equipment_category_search-form").find(":input").serializeArray();

		$.ajax({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			url: ajax_url,
			type: 'POST',
			data: form_data,
			success: function(msg) {
				$('#result_content').html(msg);
				$('.datatable').DataTable()
			},
			error: function() {
				alert("Can't Connect to Server");
			}
		})
	}

</script>
@endpush