@extends('app')
@section('content')
<title>Create Service</title>

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
 
<style type="text/css">
.alert-danger {
	margin-top: 1%;
	padding: 0;
	margin-bottom: 0px !important;
	background-color: transparent !important;
	border: none !important;
	color:#f33a12;
}
#scrollbars {
	scrollbar-base-color: #9999cc;
scrollbar-arrow-color: white;
scrollbar-track-color: #ccccff;

scrollbar-shadow-color: black;
scrollbar-lightshadow-color: black;
scrollbar-darkshadow-color: gray;

scrollbar-highlight-color: white;
scrollbar-3dlight-color: black;
}

/*added by brijesh on 12-12-2019*/
/**
 * Variables
 */
/**
 * Wrapper
 */
.combo-select {
	position: relative;
	border: 1px solid #ccc;
	border-radius: 2px;
	max-width: 500px;
	line-height: 1.42857143;
	font: 100% Helvetica, Arial, Sans-serif;
	font-size: 14px;
	color: #555;
	
}
.combo-select .combo-input {
	margin-bottom: 0;
}
/**
 * Input field
 */
.combo-input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin-left: 0px;
	text-overflow: ellipsis;
	white-space: nowrap;
	border: none;
	width: 100%;
	box-sizing: border-box;
	padding-left: 15px;
	height: 34px;
	line-height: 34px;
	padding-right: 34px;
	border-radius: 0px;
	font-size: 14px;
}
.combo-input:focus {
	outline: none;
}
/**
 * Arrow
 */
.combo-arrow {
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	cursor: pointer;
	text-align: center;
	font-size: 22px;
	width: 40px;
	color: #999999;
}
.combo-arrow:before {
	content: "\f107";
	font-family: 'FontAwesome';
	font-size: 22px;
	top: -25px;
	display: block;
	width: 0;
	height: 0;
	right: 25px;
	bottom: 0;
	position: absolute;
	margin: auto 0;
}
/**
 * When opened
 */
.combo-open .combo-arrow {
	border-color: #51A7E8;
}
.combo-open .combo-arrow:before {
	content: "\f106";
}
/**
 * When focused
 */
.combo-focus {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-color: #51A7E8; 
  }
.combo-focus input {
	border-color: #51A7E8;
}
/**
 * Hide native select
 */
.combo-select select {
	position: absolute;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	-webkit-appearance: none;
	opacity: 0;
}

@media only screen and (min-width: 960px) {
.combo-select select {
	left: -1px;
	top: -1px;
	width: 0;
	height: 0;
	margin: 0;
}
}
/**
 * Selected option
 */
.option-selected {
	background-color: #eee;
}
/**
 * Hovered option
 */
.option-hover {
	background-color: #dfdfdf;
	color: #454545;
}
/**
 * Option item
 */
.option-item {
	cursor: pointer;
/*border-bottom: 1px #e3e3e3 solid;*/ }
.option-item:hover {
	background-color: #efefef;
	color: #454545;
}
.option-item:last-child {
	border-bottom: none;
}
/**
 * Disabled and optgroups
 */
/*.option-group {
  cursor: text;
  font-weight: 600;
  background: #e1e1e1;
  border: 1px #ccc solid;
  border-width: 1px 0; }*/

/**
 * Disabled
 */
.option-disabled {
	opacity: 0.5;
}
/**
 * Dropdown
 */
.combo-dropdown {
	position: absolute;
	z-index: 999;
	top: 100%;
	left: 0;
	min-width: 100%;
	max-width: 300px;
	max-height: 270px;
	margin: 0;
	padding: 0;
	opacity: 0;
	visibility: hidden;
	/*display: none;*/
	overflow-y: auto;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
	-webkit-transition: all 0.2s ease-out;
	-ms-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	border-radius: 0;
	box-sizing: border-box;
	-webkit-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	-webkit-transform-origin: top left;
	-ms-transform-origin: top left;
	transform-origin: top left;
}
.combo-dropdown li {
	list-style: none;
	padding: 10px 15px;
	margin: 0 !important;
}
/**
 * On Active
 */
.combo-open .combo-dropdown {
	/*display: block; */
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	visibility: visible;
}
/**
 * Search marker
 */
.combo-marker {
	text-decoration: underline;
}

/*end added by brijesh*/
/*vickey*/
.control-label1{margin-top:2px;}
</style>

<script type="text/javascript">
function showhiderma(selval)
{ 
	if(selval=='1')
	{
		$("#ctktrmarefpnl").show(); return false;
	}
	else
	{
		$("#ctktrmarefpnl").hide();
		$("#rmarefticketno").val(""); return false;
	}
}
//
function showhideother(selval)
{ 
	if(selval=='1')
	{
		$('#service_date_div').show();
	}
	else
	{
		$('#service_date_div').hide();
	}
}

function submitktfrm()
{
	var errmsg = "";
	var radbx = document.getElementById("rmarefyes");
	if(radbx.checked)
	{ 
		var rmarefticketno = $("#rmarefticketno").val();
		
		if(rmarefticketno=='') { errmsg += "Please Enter RMA Reference Ticket No.\n"; }
		
	}

	if(errmsg=="") { return true; }
	else 
	{
		alert(errmsg); return false;
	}
	
}
</script>

<div class="content-wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-head-line">CREATE SERVICE</h1>
                </div>
           	</div>

           	<div class="row">
            	<div class="col-md-12">
            		<div class="panel panel-default">
                        <div class="panel-body">
							@if(Session::has('flash_message'))
					    		<div class="alert alert-success">
					        		{{ Session::get('flash_message') }}
					    		</div>
							@endif	

							<!-- if basic plan user used 50 services of limit error -->
							@if(Session::has('unable_create_serv_mesg'))
					    		<div class="alert alert-success" style="text-align: center;">
					        		{{ Session::get('unable_create_serv_mesg') }}
					    		</div>
							@endif	

                               <input type="hidden" name="token1" id="token1" value="{{ csrf_token() }}" />
							<form name="form1" class="form-horizontal" role="form" method="POST" action="/service/store"  enctype="multipart/form-data" onsubmit="return submitktfrm();">
								<input type="hidden" name="_token" value="{{ csrf_token() }}" />


							<div class="col-md-12">
		                        <div class="form-group">
		                        	@if(Session::get('custid'))
		                            
		                            <div class="col-md-5 col-sm-6 col-xs-12">
		                               <!-- <select class="form-control" name="vendor_id" id="scrollbars"> -->
		                               
		                               <input type="hidden" name="vendor_id" value="