@extends('layouts.app')

@section('content')

<style type="text/css">

span.error{
	position: relative;
	top: 0rem;
	left: 0rem;
	color: #FF4081;
} 

</style>

<div style="height: 45px;">
	<a href="{{ $backurl }}" type="button" class="btn pull-right bg-gray btn-sm">Back</a>
</div>

<div class="box">
	<div class="box-header">
		<h3 class="box-title">Cattle Breed {{ $cattlebreed_details['action'] }}</h3>
	</div>

	@php 

	$breed_type = empty($cattlebreed_details['breed_type'])?'':$cattlebreed_details['breed_type'];

	$readonly   = empty($cattlebreed_details['breed_type'])?'':'readonly';
	
	$breed_name_en = empty($cattlebreed_details['breed_name_en'])?'':$cattlebreed_details['breed_name_en'];

	$breed_name_si = empty($cattlebreed_details['breed_name_si'])?'':$cattlebreed_details['breed_name_si'];

	$breed_name_ta = empty($cattlebreed_details['breed_name_ta'])?'':$cattlebreed_details['breed_name_ta'];

	@endphp
	<form   class="box-body" id="breed_type_store-form">
		<div class="row">

			<div class="form-group col-xs-12">
				<label for="breed_type" class="col-sm-4 control-label">Breed Type</label>

				<div class="col-sm-8">
					<input type="text" class="form-control" id="breed_type" name="breed_type" placeholder="Enter Breed Type" value="{{  old('breed_type', $breed_type ) }}" {{ $readonly }} >
				</div>
			</div>

			<div class="form-group col-xs-12">
				<label for="breed_name_en" class="col-sm-4 control-label">Breed Type English Description </label>

				<div class="col-sm-8">
					<input type="text" class="form-control" id="breed_name_en" name="breed_name_en" placeholder="Enter Breed Type English Description" value="{{  old('breed_name_en', $breed_name_en ) }}">
				</div>
			</div>

			<div class="form-group col-xs-12">
				<label for="breed_name_si" class="col-sm-4 control-label">Breed Type Sinhala Description</label>

				<div class="col-sm-8">
					<input type="text" class="form-control" id="breed_name_si" name="breed_name_si" placeholder="Enter Breed Type Sinhala Description" value="{{  old('breed_name_si', $breed_name_si ) }}">
				</div>
			</div>

			<div class="form-group col-xs-12">
				<label for="breed_name_ta" class="col-sm-4 control-label">Breed Type Tamil Description</label>

				<div class="col-sm-8">
					<input type="text" class="form-control" id="breed_name_ta" name="breed_name_ta" placeholder="Enter Breed Type Tamil Description" value="{{  old('breed_name_ta', $breed_name_ta ) }}">
				</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="breed_store">
					{{ $cattlebreed_details['action'] }}
				</button>
			</div>

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

@endsection

@push('scripts')
<script type="text/javascript">

	jQuery(document).ready(function($) {

		
		$("#breed_store").click(function() {

			store_breed_details();
		});		

	});

	function store_breed_details(){

		var ajax_url = "{{ route("catbrd_store") }}";

		var action 	 = "{{ $cattlebreed_details['action'] }}";
	
		form_data 	 = $("#breed_type_store-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) {
				success_msg();
				if(action == 'Save'){	
					$('#breed_type_store-form').closest('form').find("input[type=text]").val("");
				}
				$('.datatable').DataTable()
			},
			error: function(data) {

				$('.error').empty();

				var errors = data.responseJSON.errors;

				$.each(errors, function(key, value) {

					$("#"+key).closest('div').append("<span class='error'>"+value+" </span>");
				});

			},
		})
	}


	function success_msg(){
		Swal.fire({
			position: 'top-end',
			icon: 'success',
			title: 'Your work has been saved',
			showConfirmButton: false,
			timer: 1500
		})
	}

</script>
@endpush