@extends('layouts.app')

@section('content')

<div class="box">
	<div class="box-header">
		<h3 class="box-title">Cattle Breed</h3>
	</div>
	<form   class="box-body" id="cattlebreed_search-form">
		<div class="row">

			<div class="form-group col-xs-10">
				<label for="cattlebreed_name" class="col-sm-3 control-label">Cattle Breed</label>

				<div class="col-sm-9">
					<input type="text" class="form-control" id="cattle_breed_name" name="cattle_breed_name" placeholder="Enter Cattle Breed">
				</div>
			</div>

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

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


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

@endsection

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


		$('#cattlebreed_search-form').sayt({'recover': true});
		load_all_breed_details();

		$("#search_breed_btn").click(function() {
			$('#cattlebreed_search-form').sayt({'savenow': true});
			load_all_breed_details();
		});		

	});

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

		breed_id = $(this).data('brdid');

		deleteBreed(breed_id);

	});

	function deleteBreed(breed_id) {

		var ajax_url = "delete_catbrd_dtl/"+breed_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 breed type"
						})
					}else{						
						Swal.fire(
							'Deleted!',
							'Breed type has been deleted.',
							'success').then((result) => {
								if (result.value) {
									location.reload();
								}
							})
						}

					});
			}
		})
	}

	function load_all_breed_details(){
		var ajax_url = "{{ route("catbrd_srch") }}";
		form_data = $("#cattlebreed_search-form").find(":input").serializeArray();
		console.log(form_data);

		$.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