@extends('layouts.backend-app')

<link rel="stylesheet" type="text/css" href="{{asset('backend-assets/plugins/iziToast/iziToast.min.css')}}">
<style>
    .modal-confirm {
      color: #636363;
      width: 400px;
    }

    .modal-confirm .modal-content {
      padding: 20px;
      border-radius: 5px;
      border: none;
      text-align: center;
      font-size: 14px;
    }

    .modal-confirm .modal-header {
      border-bottom: none;
      position: relative;
    }

    .modal-confirm h4 {
      text-align: center;
      font-size: 26px;
      margin: 30px 0 -10px;
    }

    .modal-confirm .close {
      position: absolute;
      top: -5px;
      right: -2px;
    }

    .modal-confirm .modal-body {
      color: #999;
    }

    .modal-confirm .modal-footer {
      border: none;
      text-align: center;
      border-radius: 5px;
      font-size: 13px;
      padding: 10px 15px 25px;
    }

    .modal-confirm .modal-footer a {
      color: #999;
    }

    .modal-confirm .icon-box {
      width: 80px;
      height: 80px;
      margin: 0 auto;
      border-radius: 50%;
      z-index: 9;
      text-align: center;
      border: 3px solid #f15e5e;
    }

    .modal-confirm .icon-box i {
      color: #f15e5e;
      font-size: 46px;
      display: inline-block;
      margin-top: 13px;
    }

    .modal-confirm .btn {
      border-radius: 4px;
      background: #60c7c1;
      text-decoration: none;
      transition: all 0.4s;
      line-height: normal;
      min-width: 120px;
      border: none;
      min-height: 40px;
      border-radius: 3px;
      margin: 0 5px;
    }

    .modal-confirm .btn-secondary {
      /* background: #c1c1c1; */
      background-color: #ECECEC;
    }

    .modal-confirm .btn-secondary:hover,
    .modal-confirm .btn-secondary:focus {
      /* background: #a8a8a8; */
      background-color: #ECECEC;
      color: #636363;
    }

    .modal-confirm .btn-danger {
      background: #f15e5e;
    }

    .modal-confirm .btn-danger:hover,
    .modal-confirm .btn-danger:focus {
      background: #ee3535;
    }

    .trigger-btn {
      display: inline-block;
      margin: 100px auto;
    }

    .btn-cancel {
      color: #636363;
    }

    .btn-del {
      color: white;
    }
	label.error{
		color: red;
	}
	input.error{
		border: 1px solid red;
	}

  </style>
@section('content')
<!-- BEGIN: Content-->
<div class="page-body">
	<div class="container-fluid">        
		<div class="page-title">
			<div class="row">
				<div class="col-6">
					<h3>Parameters</h3>
				</div>
				<div class="col-6">
					<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="{{url('dashboard')}}"> <i data-feather="home"></i></a></li>
					<li class="breadcrumb-item">Masters</li>
					<li class="breadcrumb-item active">Parameters</li>
					</ol>
				</div>
			</div>
		</div>
	</div>
	<div class="container-fluid">
		<div class="row">
			<!-- Zero Configuration  Starts-->
			<div class="col-sm-12">
				<div class="card">
					<div class="card-header">
						<div class="media">  
							<h5 class="mb-0">Parameters</h5>
							<div class="media-body text-end">
								<button id="createNewParameter" class="btn btn-primary add-item-btn" type="button" data-bs-toggle="modal" data-bs-target="#add-testtype" data-bs-original-title="" title=""><i data-feather="plus-square"></i> Add Parameter</button>    								
							</div>        
						</div>
					</div>
					<div class="card-body">
						<div class="table-responsive">
							<table class="display parameter-table" >
								<thead>
									<tr>
									<th style="width: 80px;">S.No</th>
									<th>Test type</th>
									<th>Parameter</th>
									<th>Price</th>
									<th style="width: 20px;">Action</th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

		
<!-- END: Content-->
	<!-- The Modal -->
	<div class="modal fade" id="ajaxModel">
		<div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="modelHeading">Add Parameter Type</h4>
					<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
                <form id="parameterForm" name="parameterForm" class="form-horizontal">
                    <div class="modal-body">
                        @csrf
                        <input type="hidden" name="parameter_id" id="parameter_id">
                        <div class="form-group">
                            <label for="test_type">Test Type</label>
                            <select class="custom-select form-control" id="test_type" name="test_type">
                                <option value="">Select a test type</option>
                                @if(count($ttypes))
                                    @foreach($ttypes as $ttype)
                                        <option value="{{$ttype->id}}">{{$ttype->name}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="name">Parameters
                            </label>
                            <input type="text" name="name" class="form-control" id="name">
                        </div>
                        <div class="form-group">
                            <label for="part_number">IS Part Number
                            </label>
                            <input type="text" class="form-control" name="part_number" id="part_number">
                        </div>
                        <div class="form-group">
                            <label for="price">Price
                            </label>
                            <input type="text" class="form-control" name="price" id="price">
                        </div>
                        <div class="form-group">
                            <label for="other_detail">Others</label>
                            <textarea class="form-control" id="other_detail" name="other_detail" rows="3"></textarea>
                        </div>
						<label class="d-block" for="is_default" style="width: 80%;">
                      	<input name="is_default" class="checkbox_animated" id="is_default" type="checkbox" value="1" checked data-bs-original-title="" title="">Set as default</label>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-sm btn-light cancel-btn" type="button" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" id="savebtn" class="btn btn-primary">Submit</button>
                    </div>
                </form>
			</div>
		</div>
	</div>
	<!-- End Modal -->
@endsection

@push('javascript')
<!-- BEGIN : Validation Scripts -->
	<script src="{{asset('backend-assets/js/validation/jquery.validate.min.js')}}" type="text/javascript"></script>
	<script src="{{asset('backend-assets/js/validation/additional-methods.min.js')}}" type="text/javascript"></script>
	<script src="{{asset('backend-assets/plugins/iziToast/iziToast.min.js')}}" type="text/javascript"></script>
<!-- END:Validation Scripts -->
<script>
let dTable = '';
$(function () {
	$.ajaxSetup({
		headers: {
			'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
		}
	});
	fetchTable();
});
function fetchTable(){
	var table=$(".parameter-table");
	if(dTable!=''){
		table.DataTable().clear().destroy();
	}
	var dTable = table.DataTable({
		processing: true,
		serverSide: true,
		stateSave: true,
		order:[[0,'desc']],
		ajax: {
			url: "{{ route('admin.parameter.index') }}",
			type: 'GET',
			data:{_token: '{{csrf_token()}}'},
		},
		columns: [
				{data: 'DT_RowIndex', name: 'DT_RowIndex'},
				{data: 'type', name: 'type'},
                {data: 'name', name: 'name'},
				{data: 'price', name: 'price'},
				{data: 'action', name: 'action',searchable:true,orderable:false},
		],
		"drawCallback": function( settings ) {
        	feather.replace();
    	}
	}).draw();
}
$(document).on('click','#createNewParameter',function () {
	$('#savebtn').html("Submit");
	$('#parameter_id').val('');
	$('#parameterForm').trigger("reset");
	$('#modelHeading').html("Create New Parameter");
	$('#ajaxModel').modal('show');
});
$(document).on('click','#savebtn',function (e) {
	var formId = "#parameterForm";
	var thizSelector = $(this);
	// $(this).html('Sending..');
	$("form"+formId).validate({
		errorElement: "label",
		rules: {
			test_type:{required:true},
            name:{
				required:true,
				remote: {
					url : "parameter-check",
					type: "post",
					data: {
                       name: function() {
                       return $("#name").val();
                      },
					  test_type_id: function() {
                       return $("#test_type").val();
                      },
					  parameter_id: function() {
                       return $("#parameter_id").val();
                      },
					  _token: '{{csrf_token()}}'
                   }
				}
			},
			price:{required:true}
		},
		messages: {
			test_type:{required:"Please select test type", remote: "Parameter name already exists!"},
            name:{required:"Please enter parameter name"},
			price:{required:"Please enter price"},
		},
		focusInvalid: true,
		invalidHandler: function() {
			$(this).find(":input.error:first").focus();
		},
		errorPlacement: function(error,element) {
			if(element.is(":radio")) {
				error.insertAfter(element.parents('checkboxsequence'));
			} else if(element.is(":checkbox")){
				error.appendTo(element.parents('.checkboxsequence'));
			} else {
				error.insertAfter(element);
			}
		},
		submitHandler:function(e)
		{
			var formData = new FormData($(formId)[0]);
			$.ajax({
				data: formData,
				url: "{{ route('admin.parameter.store') }}",
				type: "POST",
				processData: false,
				contentType: false,
				dataType: 'json',
				success: function (response) {
					if(response.success){
						iziToast.success({
							title: 'success',
							message: response.message,
						});
					} else {
						iziToast.error({
							title: 'Warning',
							message: response.message,
						});
					}
					$('#parameterForm').trigger("reset");
					$('#ajaxModel').modal('hide');
					fetchTable();
				
				},
				error: function (data) {
					console.log('Error:', data);
					$('#savebtn').html('Save Changes');
				}
			});
		}

	});
});
$(document).on('click', '.editTest', function () {
	var parameter_id = $(this).data('id');
	$.get("{{ route('admin.parameter.index') }}" +'/' + parameter_id +'/edit', function (data) {
			$('#modelHeading').html("Edit Parameter Type");
			$('#savebtn').html("Update");
			$('#ajaxModel').modal('show');
			$('#parameter_id').val(data.id);
			$('#test_type').val(data.test_type_id).trigger('change');
            $("#name").val(data.name);
            $("#price").val(data.price);
            $("#part_number").val(data.part_number);
            $("#other_detail").val(data.other_detail);
			$('#is_default').prop( "checked", false );
			if(data.is_default==1) {
				$('#is_default').prop( "checked", true );
			}
        })
});

	

function deleteParameter(parameter_id){
	let fun = function(){
		var url = "{{route('admin.parameter.destroy',':id') }}";
		url = url.replace(":id",parameter_id);
		$.ajax({
			url: url,
			type: "DELETE",
			data: {_token: '{{csrf_token()}}'},
			success: function (response) {
				if(response.success){
					iziToast.success({
						title: 'success',
						message: response.message,
					});
				} else {
					iziToast.error({
						title: 'Warning',
						message: response.message,
					});
				}
				fetchTable();
			},
			error: function (response) {
					console.log('Error:', response);
			}
		});
	};
	showDynamicModal('confirm','confirmation','Confirmation','Do you really want to delete?',fun);
}
function showDynamicModal(id,type,title,content,cbFn)
{
	if(type=='confirmation'){
		okTxt = 'No';
		btnCls='light';
		cbBtn = '<button type="button" class="btn btn-primary" id="confirm-ok">Yes</button>';
	}
	var modal = '<div class="modal fade" id="'+id+'" tabindex="-1" role="dialog"  aria-hidden="true">'+
					'<div class="modal-dialog modal-confirm modal-dialog-centered" role="document">'+
						'<div class="modal-content">'+
							'<div class="modal-header modal-header flex-column">'+
								'<button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>'+
								'<h5 class="modal-title">'+title+'</h5>'+								
							'</div>'+
							'<div class="modal-body">'+content+'</div>'+
							'<div class="modal-footer justify-content-center">'+cbBtn+
								'<button type="button" class="btn btn-'+btnCls+'" data-bs-dismiss="modal">'+okTxt+'</button>'+
							'</div>'+
						'</div>'+
						
					'</div>'+
				'</div>';
	$('html>body').append(modal);
	$('#'+id).modal('show');
	$('#'+id).on('hidden.bs.modal', function(e) { $('#'+id).remove(); })
	$('#'+id+' #confirm-ok').click(function(e)
	{
		e.preventDefault();
		$('#'+id).modal('hide');
		return cbFn();
	});
}
</script>
@endpush