@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>
						</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">

			@if($status == 'non-prelaid')
			@else
			<div class="whead"><h6 id="title">Calendar for {{ $wo }}</h6></div>
			<div id="new_calendar"></div>
			@endif
			<div class="formRow calenderW">
				<div class="grid6"><button id="cancel" href="#" class="buttonM bCalender">Cancel Schedule</button></div>
				<div class="grid6"><button id="confirm" href="#" class="buttonM bCalender">Confirm Schedule</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 = '{{ $subscriber_id }}';
		var status = '{{ $status }}';
		var created_by = '{{ $user->_id }}';
		console.log(status);

		/* View all schedule */
		$('#new_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 != '' && status != 'non-prelaid') {
					$.ajax({
						type: "POST",
						url: "{{ url('/customer-service/work-order/add-schedule') }}",
						data: { "subscriber_id": subscriber_id, "vendor": company_selection, "start": start, "end": end, "wo": wo , "status": status, "created_by": created_by,"_token": "{{ csrf_token() }}"},
						success:function(data){
							$('#new_calendar').fullCalendar('refetchEvents');
						}
					});
				}else {
					alert("ERROR!! Please choose company !");
					window.location.reload();
				}
			},
			editable:true,
		});

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

			$('#new_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(){
			$.ajax({
				type:"POST",
				url: "{{ url('/customer-service/work-order/remove-schedule') }}",
				data:{"wo": wo,  "_token": "{{ csrf_token() }}"},
				success:function(){
					//$('#calendar').fullCalendar('refetchEvents');
					window.location = "{{ url ('/customer-service/work-order/list')}}";
				}
			});
		});

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