allo/resources/views/customer-service/view_reschedule-work-order.blade.php

@extends('customer-service.layout.master')
@section('ptitle','Customer Service')
@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>Company's Name </h6></div>
					<div class="formRow">
						<div class="grid3"><label><b>Select company to assign work order : </b></label></div>
                        <div class="grid9">
							<select class="styled" id="scid" name="scid" required>
								<option value=''>Please Choose Company</option>
								@foreach ($company 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>
	</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 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('/customer-service/get-all-calendar') }}",
				type: 'POST',
				data: function () { // a function that returns an object
					return {
						"company": $('#scid').val(),
						"status": '',
						"customer": '',
						"wk":wo,
						"_token": "{{ csrf_token() }}"
					};
				},
				error: function() {
					alert('there was an error while fetching events!');
				},
			},
			selectable:true,
			eventDurationEditable: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 != '') {
					$.ajax({
						type: "POST",
						url: "{{ url('/customer-service/work-order/reschedule') }}",
						data: { "vendor": company_selection, "start": start, "end": end, "wo": wo , "_token": "{{ csrf_token() }}"},
						success:function(data){
							$('#reschedule_calendar').fullCalendar('refetchEvents');
						}
					});
				}else {
					alert("ERROR!! Please choose company !");
					window.location.reload();
				}
			},
			editable:false,
		});

		$('#scid').on('change',function(){
			company_selection = $('#scid').val();

			$('#reschedule_calendar').fullCalendar('refetchEvents');

			$.ajax({
				url: "{{ url('/customer-service/get-company-color') }}",
				type: 'POST',
				data: { "company": $('#scid').val(), "_token": "{{ csrf_token() }}" },
			}).done(function(company_label) {

				$('.fc-widget-header').css({"background":company_label[0].bg,"color":company_label[0].text});
				$('.fc-widget-header a[data-goto]').css({"background": company_label[0].bg,"color":company_label[0].text});
				document.getElementById("title").innerHTML = 'Calendar '+ company_label[0].name;

			});
		});

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

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