@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">Service Engaged {{ $service_details['action'] }}</h3>
	</div>

	@php 

	$type_code = empty($service_details['type_code'])?'':$service_details['type_code'];
	$readonly = empty($service_details['type_code'])?'':'readonly';
	// dd($disabled);
	$engd_svc_en = empty($service_details['engd_svc_en'])?'':$service_details['engd_svc_en'];
	$engd_svc_si = empty($service_details['engd_svc_si'])?'':$service_details['engd_svc_si'];
	$engd_svc_ta = empty($service_details['engd_svc_ta'])?'':$service_details['engd_svc_ta'];

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

			<div class="form-group col-xs-12">
				<label for="type_code" class="col-sm-4 control-label">Service Engaged Code</label>

				<div class="col-sm-8">
					<input type="text" class="form-control" id="type_code" name="type_code" placeholder="Enter Service Engaged Code" value="{{  old('type_code', $type_code ) }}" {{ $readonly }} >
				</div>
				{{-- <span class="error"> {{ $errors->first('type_code') }} </span> --}}
			</div>

			<div class="form-group col-xs-12">
				<label for="engd_svc_en" class="col-sm-4 control-label">Service Engaged English Description </label>

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

			<div class="form-group col-xs-12">
				<label for="engd_svc_si" class="col-sm-4 control-label">Service Engaged Sinhala Description</label>

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

			<div class="form-group col-xs-12">
				<label for="engd_svc_ta" class="col-sm-4 control-label">Service Engaged Tamil Description</label>

				<div class="col-sm-8">
					<input type="text" class="form-control" id="engd_svc_ta" name="engd_svc_ta" placeholder="Enter Service Engaged Tamil Description" value="{{  old('engd_svc_ta', $engd_svc_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="servce_store">
					{{ $service_details['action'] }}
				</button>
			</div>

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

@endsection

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

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

		
		$("#servce_store").click(function() {
			store_serice_details();
		});		

	});

	function store_serice_details(){
		$("span.error").hide();
		
		var ajax_url = "{{ route("servce_store") }}";
		var action = "{{ $service_details['action'] }}";
		
		form_data = $("#servce_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'){	
					$('#servce_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