<?php $__env->startSection('content'); ?>
	<div class="row">
    	<div class="col-lg-12">
    		<h1 class="page-header">New Ticket</h1>
    	</div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <?php if(session('status')): ?>
			<div class="alert alert-success">
				<?php echo e(session('status')); ?>

			</div>
			<?php endif; ?>
			<?php if(count($errors) > 0): ?>
				<div class="alert alert-danger">
					<strong>Whoops!</strong> There were some problems with your input.<br><br>
					<ul>
						<?php foreach($errors->all() as $error): ?>
							<li><?php echo e($error); ?></li>
						<?php endforeach; ?>
					</ul>
				</div>
			<?php endif; ?>
			<div class="panel panel-default">
				<div class="panel-heading">
                    New Ticket
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-12">
		                    <form id="theForm" class="form-horizontal" role="form" method="POST" enctype="multipart/form-data" action="<?php echo e(url('admin/tickets/add')); ?>">
								<input type="hidden" name="_token" value="<?php echo e(csrf_token()); ?>">

								<div class="form-group">

									<div class="col-sm-12 col-md-12" style="margin-bottom: 10px;">
										<div class="col-sm-12 col-md-8 input-item" onclick="inputFocus('title')">
											<input type="text" step="1" class="form-control" id="title" name="title" value="<?php echo e(old('title')); ?>" title="title">
											<span id="title-label" class="label-text">Title*</span>
										</div>

										<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('parent')">
											<select class="form-control" id="parent" name="parent"  title="parent">
												<option value="">Select One</option>
												
												<?php foreach(\App\Ticket::where('type','=','Problem')->where('closed_at','=', null)->orderBy('created_at', 'desc')->get() as $ticket): ?>
													
													<option value="<?php echo e($ticket->id); ?>" ><?php echo e($ticket->getID() . ' - ' . $ticket->title); ?></option>
												
												<?php endforeach; ?>
											</select>
											<span id="parent-label" class="xlabel-text hasValue">Parent Ticket (Optional)</span>	
										</div>
									</div>

									<div class="col-sm-12 col-md-12">
										<div class="col-sm-12 col-md-2 morePadding morePadding2" onclick="inputFocus('type')">
											<select class="form-control" id="type" name="type"  title="type">
												<option selected value="">Select One</option>
												<option value="Incident">Incident</option>
												<option value="Problem">Problem</option>
												<option value="Request">Request</option>
											</select>
											<span id="type-label" class="xlabel-text hasValue">Ticket Type*</span>	
										</div>

										<div class="col-sm-12 col-md-2 morePadding morePadding2" onclick="inputFocus('issue_type')">
											<select class="form-control" id="issue_type" name="issue_type"  title="issue_type">
												<option selected value="">Select One</option>
												<option value="Circuit">Circuit</option>
												<option value="Phone">Phone</option>
												<option value="Maintenance">Maintenance</option>
												<option value="Other">Other</option>
											</select>
											<span id="issue_type-label" class="xlabel-text hasValue">Issue Type*</span>	
										</div>

										<div class="col-sm-12 col-md-2 morePadding morePadding2" onclick="inputFocus('priority')">
											<select class="form-control" id="priority" name="priority"  title="priority">
												<option selected value="">Select One</option>
												<option value="Low">Low</option>
												<option value="Medium">Medium</option>
												<option value="High">High</option>
											</select>
											<span id="priority-label" class="xlabel-text hasValue">Priority*</span>	
										</div>
									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-12 col-md-12">
										<div class="col-sm-12 col-md-4 morePadding morePadding2" onclick="inputFocus('customer')">
											<span id="customer-custom-label" class="xlabel-text hasValue">Company*</span>
											<select class="form-control" id="customer" name="customer" title="Company Name"></select>
										</div>

										<div class="col-sm-12 col-md-3 morePadding morePadding2" onclick="inputFocus('location')">
											<span id="location-custom-label" class="xlabel-text hasValue">Location*</span>
											<input disabled type="text" class="form-control" id="location" name="location" title="Location">
										</div>
										
										<div class="col-sm-12 col-md-2 morePadding morePadding2">
											<select class="form-control" id="queue" name="queue"  title="queue">
												<option value="">Select One</option>
												
												<?php foreach(\App\Ticket_Queue::all()->sortBy('name') as $queue): ?>
													
													<option value="<?php echo e($queue->id); ?>" ><?php echo e($queue->name); ?></option>
												
												<?php endforeach; ?>
											</select>
											<span id="queue-label" class="xlabel-text hasValue">Queue*</span>	
										</div>

										<div class="col-sm-12 col-md-3 morePadding morePadding2">
											<select class="form-control" id="assigned_to" name="assigned_to"  title="assigned_to">
												<option value="">Select One</option>
												
												<?php foreach(\App\User::all()->sortBy('name') as $user): ?>
													
													<option value="<?php echo e($user->id); ?>" ><?php echo e($user->name); ?></option>
												
												<?php endforeach; ?>
											</select>
											<span id="assigned_to-label" class="xlabel-text hasValue">Assign Employee</span>	
										</div>
									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-12 col-md-12" style="margin-bottom: 20px;">
										<label class="label-control col-sm-12 col-md-12" style="margin-bottom: -5px;">Description</label>
										<div class="col-sm-12 col-md-12 morePadding morePadding2" onclick="inputFocus('description')">
											<textarea class="form-control" style="max-width: 100%; height:200px;" id="description" name="description" title="Description" placeholder="Description"><?php echo e(old('description')); ?></textarea>
										</div>
									</div>

									<div class="col-sm-12 col-md-12">


										<div class="col-sm-12 col-md-4 morePadding morePadding2" onclick="inputFocus('attachments')">
											<input type="file" class="form-control" id="attachments" name="attachments[]" value="<?php echo e(old('attachments')); ?>"  title="Attachments" multiple>
											<span id="attachments-label" class="xlabel-text hasValue">Attachments</span>
										</div>
									</div>
								</div>

								<div class="form-group">
									<div class="col-sm-12 col-md-12 morePadding"  style="text-align: right;">
										<button type="submit" value="pass" class="btn btn-primary" onclick="this.style.visibility = 'hidden'">
											Create Ticket
										</button>
									</div>
								</div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('extras'); ?>
	
	<link rel="stylesheet" type="text/css" href="<?php echo e(asset('css/jquery.timepicker.css')); ?>" />
	<link rel="stylesheet" type="text/css" href="<?php echo e(asset('css/bootstrap-datepicker3.min.css')); ?>" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/css/selectize.bootstrap3.min.css" />
	<style>

	<style>
		input:focus+.label-text, input:not([value=""])+.label-text, select+.label-text {
		    font-weight: normal;
		    padding: 0;
		    padding-left: 20px;
		    -webkit-transform: translateY(-2rem) scale(.7);
		    transform: translateY(-2rem) scale(.7);
		}
		input+.label-text, select+.label-text, .hasValue{
		    font-size: 1.5rem;
		    font-weight: 400;
		    position: absolute;
		    top: 0;
		    left: 0;
		    display: block;

		    padding-left: 20px;
		    padding-top: 5px;
		    padding-bottom: 5px;
		    opacity: .8;
		    transition: all .3s ease-out,opacity 150ms ease .3s;
		    -webkit-transform: translateY(0) scale(1);
		    transform: translateY(0) scale(1);
		    -webkit-transform-origin: left top;
		    transform-origin: left top;
		}
		span {
		    font-size: 1rem;
		    font-weight: 600;
		    display: block;
		    padding-top: .25rem;
		    padding-bottom: .25rem;
		    margin-left: 1rem;
		    color: #317aba;
		}
		.hasValue
		{
		    font-weight: normal;
		    padding: 0;
		    padding-left: 10px;
		    -webkit-transform: translateY(-2rem) scale(.7);
		    transform: translateY(-2rem) scale(.7);
		}
		

		@media (max-width: 959px)
		{
			.morePadding {
			    margin-top: 1.5em;
			}
		}

		@media (min-width: 960px)
		{
			.morePadding {
			    margin-top: 1em;
			}
		}
		
    	a:hover{
    		text-decoration: none;
    	}
    	.odd .subBack {
    		background-color: #f0fcff;
    	}
    	.even .subBack {
    		background-color: #ecf7fa;
    	}
    	.floatLeft
    	{
    		float: left;
    	}

    	.checkbox-item{
    		padding-top: 7px;
    		padding-bottom: 5px;
    	}

    	.no-bold{
    		font-weight: normal;
    	}

    	.input-item{
    		padding-bottom: 5px;
    	}

    	@media (max-width: 991px)
		{
			.input-item{
	    		margin-top: 20px;
	    	}
		}

    	@media (min-width: 992px)
		{
			.input-item{
	    		margin-top: 12px;
	    	}
		}
		#customer-selectized {
			width: 100% !important;
		}
		.highlight {
			display: inline;
			margin: 0;
			padding: 0;
			font-size: 14px;
			font-style: none;
		}
    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('bottom'); ?>

	<script src="<?php echo e(asset('js/jquery.datepair.min.js')); ?>"></script>
	<script src="<?php echo e(asset('js/bootstrap-datepicker.min.js')); ?>"></script>
	<script src="<?php echo e(asset('js/jquery.timepicker.min.js')); ?>"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.min.js"></script>

<script>

	$('.form-control').each(function() {
	   var elem = $(this);

	   // Save current value of element
	   elem.data('oldVal', elem.val());

	   // Look for changes in the value
	   elem.bind("propertychange change click keyup input paste", function(event){
	      // If value has changed...
	      if (elem.data('oldVal') != elem.val()) {
	       // Updated stored value
	       elem.data('oldVal', elem.val());
	       var elem2 = $('#'+elem.attr('id')+"-label");
	       elem2.addClass('hasValue');
	       elem2.removeClass('label-text');
	       if(elem.val() == "")
	       {
	    	   elem2.addClass('label-text');
		       elem2.removeClass('hasValue');
	       }
	     }
	   });
	 });

	function inputFocus(id)
	{
		document.getElementById(id).focus();
	}

	$('#due_date_container .date').datepicker({
        'format': 'yyyy-m-d',
        'autoclose': true
    });

    let allLocations = (<?php echo json_encode($locations); ?>);
    let allCustomers = (<?php echo json_encode($customers); ?>);
    let queue_members = (<?php echo json_encode($queue_members); ?>);
    let users = (<?php echo json_encode($users); ?>);
    
	$('#customer').selectize({
	    create: false,
	    sortField: 'customer',
	    maxItems: 1,
	    valueField: 'id',
	    labelField: 'customer',
	    searchField: ['customer'],
	    options: [
      	<?php foreach($customers as $customer): ?>
    		{customer: "<?php echo $customer->company_name; ?>", id: <?php echo e($customer->id); ?> },
    	<?php endforeach; ?>
    	],
    	onChange: function(){ this.$dropdown_content.removeHighlight(); },
    	onType: function(str) { str || this.$dropdown_content.removeHighlight(); },
    	onItemAdd: function(value, $item) {
    		$('#location')[0].selectize.clearOptions();
    		for(let i=0;i<allLocations.length;i++){
    			if(allLocations[i].customer == value){
    				if(allLocations[i].main_location){
    					for(let j=0;j<allCustomers.length;j++){
    						if(allCustomers[j].id == value){
    							if(allCustomers[j].directory_address){
    								$('#location')[0].selectize.addOption({name: 'Main Office', address: '', customer: allLocations[i].customer, id: allLocations[i].id});
    							}
    						}
    					}
    					
    				}else{
    					$('#location')[0].selectize.addOption({name: allLocations[i].name, address: allLocations[i].address, customer: allLocations[i].customer, id: allLocations[i].id});
    				}
    			}
    		}
    		$('#location')[0].selectize.enable();
    	},
    	onItemRemove: function() { $('#location')[0].selectize.disable(); }
	});

	$('#location').selectize({
	    create: false,
	    sortField: 'name',
	    maxItems: 1,
	    valueField: 'id',
	    labelField: 'name',
	    searchField: ['name','address'],
	    options: []
	});

	$( "#queue" ).change(function(){
		let $el = $("#assigned_to");
		$el.empty();
		let defaultOption = $('<option></option>').attr("value", "").text("Select One");
		$el.append(defaultOption);
		
		for(let i=0;i<queue_members.length;i++){
			if(queue_members[i].queue == $(this).val()){
				for(let j=0;j<users.length;j++){
					if(users[j].id == queue_members[i].user){
						let option = $('<option></option>').attr("value", queue_members[i].user).text(users[j].name);
						$el.append(option);
					}
				}
			}
		}
	});


</script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('residential.templates.uadmin', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>