allo/resources/views/contractor/reschedule_work_order.blade.php

@extends('contractor.layout.master')
@section('ptitle','Contractor')
@section('page_title', 'Dashboard')
@section('subpage', 'Graph & Summary Report')
@section('img_profile', asset($user->StaffDetail->user_pic))
@section('login_name', $user->StaffDetail->name )
@section('last_login', $user->last_login_at )

@section('content')
	<style>
		.ui-tabs .ui-tabs-nav li.ui-tabs-active a { color: #EA5730 !important; }
		.ui-widget-content .bRed { color: #fff !important; }
		.ui-tabs .ui-tabs-nav li a { color: #636363 !important; }
		.ui-tabs .ui-tabs-nav li a:hover { color: #212121 !important; }
		.ui-tabs .ui-tabs-nav li.ui-tabs-active a { color: #2E6B9B !important; }
		.ui-widget-content a { color: #fff; }
		.dt-buttons { background: -webkit-linear-gradient(top, #F8F8F8 0%, #EFEFEF 100%); }
		.icos-download { padding-top: 0px; }
		.buttons-excel {
			padding: 7px 12px;
			display: block;
			color: #808080;
			font-size: 11px;
		}
	</style>
	<!-- Table work order -->
	<!-- 6 + 6 -->
	<div class="fluid">
		<form action="" class="main cussPayment">
			<fieldset>
				<div class="widget grid2 widgetH"></div>
				<div class="widget grid8">
					<div class="whead"><h6>Installer's Name </h6></div>
					<div class="formRow">
						<div class="grid3"><label><b>Select installer to assign work order : </b></label></div>
                        <div class="grid9">
							<select class="styled" id="scid" name="scid" required>
								<option value=''>Please Choose Installer</option>
								@foreach ($installer as $c){
								<option value='{{$c->_id}}'>{{ $c->name }}</option>
								@endforeach
							</select>
							<b> * Any changes will automatically update, whether you drag or select</b>
						</div>
					</div>
				</div>
				<div class="widget grid2 widgetH"></div>
			</fieldset>
		</form>

		<form action="" class="main cussPayment">
			<fieldset>
				<div class="widget grid2 widgetH"></div>
				<div class="widget grid8">
					<div class="whead"><h6>Type Work</h6></div>
					<div class="formRow">
						<div class="grid3"><label><b>Select type of work : </b></label></div>
                        <div class="grid9">
							<select class="styled" id="type_work" name="type_work" required>
								<option value=''>Please Choose Type of Work</option>
								<option value='Pending Prelaid'>Prelaid</option>
								<option value='Pending Installer'>Activation</option>
							</select>
						</div>
					</div>
				</div>
				<div class="widget grid2 widgetH"></div>
			</fieldset>
		</form>
	</div>
	
	<div class="fluid">
		<!-- Calendar -->
		<div class="widget grid2 widgetH"></div>
		<div class="widget grid8 widgetBg">
			<div class="whead"><h6 id="title">Calendar for {{ $wo }}</h6></div>
			<div id="reschedule_calendar"></div>
			
			<div class="formRow calenderW">
				<div class="grid6"><button id="cancel" href="#" class="buttonM bCalender">Cancel Reschedule</button></div>
				<div class="grid6"><button id="confirm" href="#" class="buttonM bCalender">Confirm Reschedule</button></div>
			</div>
		</div>
		<div class="widget grid2 widgetH"></div>
	</div>
@endsection

@section('external_js')
<script>
	$(document).ready(function(){
		var origin   = window.location.origin; 

		//===== Dynamic table toolbars =====//		
			
		$('#dyn1 .tOptions').click(function () {
			$('#dyn .tablePars').slideToggle(200);
		});	
			
		$('.tOptions').click(function () {
			$(this).toggleClass("act");
		});

		var today = "{{ $today }}";
		var company_selection = ''; var type_work = '';
		var wo = '{{ $wo }}';
		var subscriber_id = '';
		console.log(wo);

		/* View all schedule */
		$('#reschedule_calendar').fullCalendar({
			header: {
				left: 'prev,next,today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			defaultView: 'agendaWeek',
			defaultDate: today,
			navLinks: true, // can click day/week names to navigate views
			firstDay: 1,
			eventLimit: true, // allow "more" link when too many events
			events: {
				url: "{{ url('/contractor/get-all-calendar') }}",
				type: 'POST',
				data: function () { // a function that returns an object
					return {
						"installer": $('#scid').val(),
						"status": '',
						"wk":wo,
						"_token": "{{ csrf_token() }}"
					};
				},
				error: function() {
					alert('there was an error while fetching events!');
				},
			},
			selectable:true,
			eventDurationEditable:false,
			editable:false,
			select: function(start, end, allDay) {
				var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
				var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
				if(company_selection != '' && type_work != '') {
					$.ajax({
						type: "POST",
						url: "{{ url('/contractor/work-order/reschedule') }}",
						data: { "installer": company_selection, "start": start, "end": end, "wo": wo , "type_work": type_work ,"_token": "{{ csrf_token() }}"},
						success:function(data){
							$('#reschedule_calendar').fullCalendar('refetchEvents');
						}
					});
				}else {
					alert("ERROR!! Please choose installer and type work!");
					window.location.reload();
				}
			},
		});

		/* View schedule based on company */
		$('#scid').on('change',function(){
			company_selection = $('#scid').val();
		});

		/* View schedule based on company */
		$('#type_work').on('change',function(){
			type_work = $('#type_work').val();
		});

		/* Cancel add new schedule */
		$('#cancel').on('click',function(){
			window.location = "{{ url ('/customer-service/work-order/list')}}";
		});

		/* Confirm new schedule */
		$('#confirm').on('click',function(){
			if(company_selection != '' && type_work != ''){
				$.ajax({
					type:"POST",
					url: "{{ url('/contractor/work-order/update/reschedule') }}",
					data:{"wo": wo,"installer": company_selection, "type_work": type_work, "_token": "{{ csrf_token() }}"},
					success:function(response){
						if(response[0].result == "yes"){
							window.location = "{{ url ('/contractor/work-order/list')}}";
						}else if(response[0].result == "no"){
							alert("ERROR!! Please choose datetime for current work order !");
						}
					}
				});
			}else {
				alert("ERROR!! Please choose installer and type work!");
			}
		});
	});
</script>
@endsection