@extends('layouts.empty',['paceTop' => true])

@section('title', 'Earnings Input')

@include('includes.require.input')

@section('content')

	<div class='bg-white p-b-10'>
		<h1 class="page-header p-10">Process and Earnings</h1>

		<form action="{{ route('process.update', $process->process_uid) }}" method="POST" id="form-edit" onsubmit="return checkForm();">
			<input type="hidden" name="_token" value="{{ csrf_token() }}"/>
			<input type="hidden" id="en_uid" name="en_uid" value="{{ $process->en_uid }}">
			<input type="hidden" id="school_uid" name="school_uid" value="{{ isset($process->school_uid) ? $process->school_uid : '' }}">
			<input type="hidden" id="course_uid" name="course_uid" value="{{ isset($process->course_uid) ? $process->course_uid : '' }}">

			<h5 class="bg-grey-transparent-5 p-10">Process info</h5>

			<section class="info">
				<label>enquiry#</label>
				<a class="btn btn-sm btn-success mr-1" href="javascript:;" onclick="openWindow('{{ URL::route('counsel.edit',$process->en_uid) }}','counsel-{{$process->en_uid}}',800,600)">
					<i class="far fa-window-restore"></i> {{$process->en_uid}}
				</a>
				@if (!empty($process->enquiry->en_counselor))
					<input type="hidden" name="counselor" value="{{ $process->enquiry->en_counselor }}">
					({{ $process->enquiry->edmerInfo['emm_name'] }})
				@endif
				<label>process#</label> <strong>{{$process->process_uid}}</strong>
				<label>process date</label> <strong>{{ date_format($process->start_date, 'Y-m-d')}}</strong>
				<div class="form-inline mt-2 pt-2" style="border-top: solid 1px #ccc">
					<label>Deposit</label>
					<input type="checkbox" name="deposit" value="Y" {{ $process->deposit=='Y' ? 'checked':'' }}>

					<label>Tuition</label>
					<input type="checkbox" name="tuition_check" value="Y" {{ $process->tuition_check=='Y' ? 'checked':'' }}>

					<label id="exrate-label">Exchange Rate {{ isset($process->school->country) ? '('.strtoupper($process->school->country).')':'' }}</label>
											<input type="text" id="exrate" name="exrate" class="form-control text-right" size="5" value="{{ $exrate }}" {{ (isset($process->exrate) and $process->exrate!=0.00 and !_is('admin') and !_is('manager')) ? 'readonly':'' }}>

					<ul id="exrate_win"><br />
<b>Notice</b>:  Undefined variable: rate in <b>/home/edmedu/www/edmeducation.co.kr/tw-dev/resources/views/client/process/form.blade.php</b> on line <b>65</b><br />
<br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/edmedu/www/edmeducation.co.kr/tw-dev/resources/views/client/process/form.blade.php</b> on line <b>65</b><br />
</ul>				</div>
			</section>

			<h5 class="bg-grey-transparent-5 p-10">School/Course</h5>

			<section>
				<div>
					<div class="input-group">
						<input id="keyword" type="input" name="keyword" class="form-control" value="" placeholder="School name" autocomplete="off">
						<div class="input-group-append">
							<button id="school-search" type="button" class="btn btn-primary">Find</button>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-md-2">
						<label class="width-full col-form-label">School type</label>

						<select name="school_type" class="form-control">
							<option value="ST010"{{ (isset($process->school_type) and $process->school_type=='ST010') ? ' selected' : '' }}>遊學</option>
							<option value="ST020"{{ (isset($process->school_type) and $process->school_type=='ST020') ? ' selected' : '' }}>留學</option>
							<option value="ST030"{{ (isset($process->school_type) and $process->school_type=='ST030') ? ' selected' : '' }}>靑少年</option>
						</select>
					</div>
					<div class="col-md-5">
						<label class="width-full col-form-label">School name</label>
						<input type="text" name="_school_name" class="form-control" value="{{ isset($process->school_name) ? $process->school_name : '' }}" {{ empty($process->school_uid) ? '' : 'readonly' }}>
						<div id="search-school-result"></div>
					</div>
					<div class="col-md-5">
						<label class="width-full col-form-label">Course name</label>
						<input type="text" name="course_name" id="course_name" class="form-control" value="{{ isset($process->course_name) ? $process->course_name : '' }}" {{ empty($process->course_uid) ? '' : 'readonly' }}>
						<div id="search-course-result"></div>
					</div>
				</div>
			</section>

			<h5 class="bg-grey-transparent-5 p-10">Earnings & Expenses</h5>

			<section>
				<div class="row">
					<div class="col-md-9" id="fees">
						<div class="row">
							<div class="col-md-3">
								<label class="width-full col-form-label">Weeks</label>
									<input id="term" type="input" name="term" class="form-control calc" autocomplete="off" value="{{ isset($process->weeks) ? $process->weeks : '' }}">
							</div>
							<div class="col-md-3">
								<label class="width-full col-form-label">Per week</label>
									<input id="week_pay" type="input" name="week_pay" class="form-control calc" autocomplete="off" value="{{ isset($process->tuition_per_week) ? $process->tuition_per_week : '' }}">
							</div>
							<div class="col-md-3">
								<label class="width-full col-form-label">Sum</label>
									<input id="term_pay" type="input" name="term_pay" class="form-control calc" autocomplete="off" value="{{ isset($process->tuition) ? $process->tuition : '' }}">
							</div>
							<div class="col-md-3">
								<label class="width-full col-form-label">Commission</label>
									<input id="commission" type="input" name="commission" class="form-control calc" autocomplete="off" value="{{ isset($process->commission) ? $process->commission : '' }}">
							</div>
						</div>

						<div id="earnings" class="divider">
							<div class="misc-fees-head">
								<label class="col-form-label">Earning/Profit</label>
								<button id="add-earning" type="button" class="btn btn-outline-secondary btn-sm">+</button>
							</div>
							@isset($process->misc_plus)
								@foreach ($process->misc_plus as $fee)
									<div class="row m-t-1">
										<div class="col-md-3"><input type="input" name="misc_plus_item[]" class="form-control" placeholder="Item" autocomplete="off" value="{{ isset($fee['item']) ? $fee['item'] : '' }}"></div>
										<div class="col-md-3 input-group">
											<div class="input-group-prepend">
												<div class="input-group-text">
													<input type="checkbox" class="twd" name="misc_plus_twd[]" value="1" {{ !empty($fee['twd']) ? 'checked' : '' }} aria-label="TWD">
												</div>
											</div>
											<input type="input" name="misc_plus[]" class="form-control calc" placeholder="Amount" autocomplete="off" value="{{ isset($fee['amount']) ? $fee['amount'] : '' }}">
										</div>
										<div class="col-md-6"><input type="input" name="misc_plus_note[]" class="form-control" placeholder="Notes" autocomplete="off" value="{{ isset($fee['note']) ? $fee['note'] : '' }}"></div>
									</div>
								@endforeach
							@endisset
						</div>

						<div id="expenses" class="divider">
							<div class="misc-fees-head">
								<label class="col-form-label text-danger">Expense/Loss</label>
								<button id="add-expense" type="button" class="btn btn-outline-secondary btn-sm">+</button>
							</div>
							@isset($process->misc_minus)
								@foreach ($process->misc_minus as $fee)
									<div class="row m-t-1">
										<div class="col-md-3"><input type="input" name="misc_minus_item[]" class="form-control" placeholder="Item" autocomplete="off" value="{{ isset($fee['item']) ? $fee['item'] : '' }}"></div>
										<div class="col-md-3 minus input-group">
											<div class="input-group-prepend">
												<div class="input-group-text">
													<input type="checkbox" class="twd" name="misc_minus_twd[]" value="1" {{ !empty($fee['twd']) ? 'checked' : '' }} aria-label="TWD">
												</div>
											</div>
											<input type="input" name="misc_minus[]" class="form-control calc minus" placeholder="Amount" autocomplete="off" value="{{ isset($fee['amount']) ? $fee['amount'] : '' }}">
										</div>
										<div class="col-md-6"><input type="input" name="misc_minus_note[]" class="form-control" placeholder="Notes" autocomplete="off" value="{{ isset($fee['note']) ? $fee['note'] : '' }}"></div>
									</div>
								@endforeach
							@endisset
						</div>
					</div>
					<div class="col-md-3 total-cell">
						<div>
							<div class="misc-fees-head">
								<label class="col-form-label">Earning Sum</label>
								<button id="calc" type="button" class="btn btn-outline-secondary btn-sm">Re-calculate</button>
							</div>

							<input id="earning_sum" type="input" name="earning_sum" class="form-control total" autocomplete="off" value="{{ isset($process->earning_sum) ? $process->earning_sum : '' }}">
						</div>

						<div>
							<label class="col-form-label">TWD Total</label>
							<input id="tw_total" type="input" name="tw_total" class="form-control total" autocomplete="off" value="{{ isset($process->tw_total) ? $process->tw_total : '' }}">
						</div>

						<div>
							<label class="col-form-label">Actual Total</label>
							<input id="actual_total" type="input" name="actual_total" class="form-control total" autocomplete="off" value="{{ (isset($process->actual_total) and $process->tuition_check=='Y') ? $process->actual_total : '' }}" {{ $process->tuition_check=='Y' ? '':'disabled' }}>
						</div>
					</div>
				</div>

				<label class="width-full col-form-label mt-4">Notes</label>
				<input id="notes" type="input" name="notes" class="form-control" value="{{ isset($process->notes) ? $process->notes : '' }}">
			</section>

			<ul class="footnote">
				<li>* Earning Sum - decimals will be rounded</li>
			</ul>

			<div style="padding: 1rem; text-align: center;">
				<button id="submit" type="submit" class="btn btn-lg btn-danger">Submit</button>
			</div>
		</form>
	</div>
@endsection

@push('css')
<style type="text/css">
	section {
		padding: 1rem
	}
	section.info label {
		padding-left: 0;
		margin: 0 5px 0 1rem;
	}
	#search-school-result, #search-course-result {
		padding: 0;
		max-height: 300px;
		overflow-y: auto;
		font-weight: bold;
		color: var(--orange)
	}
	#search-school-result li, #search-course-result li {
		font-weight: normal;
		color: var(--gray-700);
		list-style: none;
		padding: .5rem;
		background-color: #F5F5F5
	}
	#search-course-result > li {
		font-weight: bold;
	}
	#search-course-result li ul {
		padding: 0;
		margin: 0;
	}
	#search-course-result li ul li {
		font-weight: normal;
	}
	#search-course-result li ul li span {
		display: inline-block;
		width: 80px;
		text-align: right;
	}
	#search-school-result li:hover, #search-course-result li.data:hover, #search-course-result li.comm:hover {
		cursor: pointer;
		background-color: #fff;
		padding-left: .6rem;
		font-weight: bold;
	}

	.total-cell {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.total {
		font-weight: bold;
		font-size: large;
		text-align: center;
	}

	.misc-fees-head {
		display: flex;
		align-items: center;
	}

	#add-earning, #add-expense, #calc, #manual-input {
		margin-left: 1rem;
		padding: 0 .5rem;
		line-height: 1
	}

	.divider {
		margin-top: 1rem;
		padding-top: 1rem;
		border-top: dotted 1px var(--gray-400);
	}

	input.calc, input.misc-calc {
		text-align: right;
	}

	div.minus {
		position: relative;
	}

	input.minus {
		color: var(--red);
	}

	div.minus:before {
		display: block;
		content: ' ';
		position: absolute;
		z-index: 9;
		left: 50px;
		top: 17px;
		border-top: solid 1px var(--red);
		width: 8px;
	}

	input.twd:before {
		content: 'TWD';
		font-size: 7pt;
		font-weight: bold;
		color: var(--gray-600);
		position: absolute;
		top: 1px;
		left: 17px
	}

	#exrate_win {
		display: none;
		position: absolute;
		z-index: 3;
		top: 1rem;
		left: 50%;
		background: #F6FFA3;
		border: solid 1px #D4D200;
		border-bottom: none;
		padding: 0;
		list-style: none;
		box-shadow: 1px 1px 5px;
	}
	#exrate_win li {
		display: flex;
		justify-content: space-between;
		border-bottom: solid 1px var(--gray-400);
		padding: .2rem 1rem;
	}
	#exrate_win li span {
		margin-left: 1rem;
	}
	#exrate_win li:hover {
		cursor: pointer;
		background-color: var(--gray-800);
		color: #fff
	}

	#exrate-label {
		cursor: pointer;
		color: var(--red)
	}
	#exrate-label:hover {
		text-decoration: underline;
	}

</style>
@endpush

@push('scripts')
<script type="text/javascript">
	function checkForm() {
		/*if ($('#school_uid').val()=='' || $('#school_uid').val()==0) {
			alert('Select School');
			$('#keyword').focus();
		} else return true;
		return false;*/
		return true;
	}

	function setManualInput()
	{
		$('input[name="_school_name"]').prop('readonly', false).val('');
		$('input[name="course_name"]').prop('readonly', false).val('');
		$('input[name="school_uid"]').val('');
		$('input[name="course_uid"]').val('');
	}

	function calc() {
		if ($('#term').val()=='') var week = 0;
			else var week = parseInt($('#term').val());
		if ($('#week_pay').val()=='') var perweek = 0;
			else var perweek = parseInt($('#week_pay').val());
		//var sum = week * perweek;
		if ($('#term_pay').val()=='') var sum = 0;
			else var sum = parseInt($('#term_pay').val());
		if ($('#commission').val()=='') var commission = 0;
			else var commission = parseFloat($('#commission').val());

		if ($('#exrate').val()=='') var exrate = 1;
			else var exrate = parseFloat($('#exrate').val());

		var misc_plus = misc_minus = misc_plus_twd = misc_minus_twd = 0;

		$('input[name="misc_plus[]"]').each(function(idx, val){
			if ($(this).val()!='') {
				var fee = parseInt($(this).val());
				var mptwd = $('input[name="misc_plus_twd[]"]').get(idx);

				if ($(mptwd).prop('checked')==true) misc_plus_twd = misc_plus_twd + fee;
				else misc_plus = misc_plus + fee;
			}
		});

		$('input[name="misc_minus[]"]').each(function(idx, val){
			if ($(this).val()!='') {
				var v = $(this).val();
				var conv = v.replace('-', '');
				var fee = parseInt(conv);
				var mptwd = $('input[name="misc_minus_twd[]"]').get(idx);
				//$(this).val(conv);

				if ($(mptwd).prop('checked')==true) misc_minus_twd = misc_minus_twd + fee;
				else misc_minus = misc_minus + fee;
			}
		});

		if (commission==0) var earning_sum = misc_plus - misc_minus;
		else var earning_sum = Math.round(sum * (commission / 100) + (misc_plus - misc_minus));

		var tw_total = Math.round((earning_sum * exrate) + misc_plus_twd - misc_minus_twd);
		//if ($('#tw_total').val()!=0 && tw_total==0) tw_total = $('#tw_total').val();

		$('#earning_sum').val(earning_sum);
		$('#tw_total').val(tw_total);
	}

	function searchCourse(school_uid) {
		$('#search-course-result').html('');

	    $.ajax({
            method: 'GET',
			data: {school_uid:school_uid},
            url: "{{ route('process.searchSchool') }}",
			success:function(result){
				$('#search-course-result').html(result);
				if ($('#search-course-result li.data').length>0) {
					$('#search-course-result li.data').each(function(){
						$(this).on('click', function(){
							$('#search-course-result').html('');
							$('#search-course-result').text($(this).attr('data-course_name'));
							//$('#course_name').val($(this).attr('data-course_name'));
							$('#course_uid').val($(this).attr('data-course_uid'));
							$('#term').val($(this).attr('data-term'));
							$('#week_pay').val($(this).attr('data-week_pay'));
							$('#term_pay').val($(this).attr('data-term_pay'));
							$('#commission').val($(this).attr('data-commission'));

							$('input[name="course_name"]').val($(this).attr('data-course_name')).prop('readonly', true);

							calc();
						});
					});
				} else if ($('#search-course-result li.comm').length>0) {
						$('#course_uid').val('');
						$('input[name="course_name"]').val('').prop('readonly', false);

						$('#search-course-result li.comm').on('click', function(){
							$('#search-course-result').text('');
							$('#commission').val($(this).attr('data-commission'));
							calc();
						});
				} else {
					$('#search-course-result').text('');
					$('#course_uid').val('');
					$('input[name="course_name"]').val('').prop('readonly', false);
					$('#term').val('');
					$('#week_pay').val('');
					$('#term_pay').val('');
					$('#commission').val('');
				}
			}
        });
	}

	$(document).on("keypress", "#keyword", function(e) {
	    var keyCode = e.keyCode ? e.keyCode : e.which;
	    if (keyCode === 13) {
	    	e.preventDefault();
	    	$('#school-search').click();
	    }
	});

	$(document).ready(function(){
		//calc();

		$('#calc').on('click', function(e){
			e.preventDefault();
			calc();
		});

		$('.calc').on('change', function(){
			calc();
		});

		$('#add-earning').on('click', function(e){
			e.preventDefault();

			var forms = '<div class="row m-t-1"><div class="col-md-3"><input type="input" name="misc_plus_item[]" class="form-control" placeholder="Item"></div><div class="col-md-3 input-group"><div class="input-group-prepend"><div class="input-group-text"><input type="checkbox" class="twd" name="misc_plus_twd[]" value="1" aria-label="TWD"></div></div><input type="input" name="misc_plus[]" class="form-control misc-calc" placeholder="Amount"></div><div class="col-md-6"><input type="input" name="misc_plus_note[]" class="form-control" placeholder="Notes"></div></div>';

			$('#earnings').append(forms);

			$('.misc-calc').on('change', function(){
				calc();
			});
		});

		$('#add-expense').on('click', function(e){
			e.preventDefault();

			var forms = '<div class="row m-t-1"><div class="col-md-3"><input type="input" name="misc_minus_item[]" class="form-control" placeholder="Item"></div><div class="col-md-3 minus input-group"><div class="input-group-prepend"><div class="input-group-text"><input type="checkbox" class="twd" name="misc_minus_twd[]" value="1" aria-label="TWD"></div></div><input type="input" name="misc_minus[]" class="form-control misc-calc minus" placeholder="Amount"></div><div class="col-md-6"><input type="input" name="misc_minus_note[]" class="form-control" placeholder="Notes"></div></div>';

			$('#expenses').append(forms);

			$('.misc-calc').on('change', function(){
				calc();
			});
		});

		$('#school-search').on('click', function(e){
			e.preventDefault();
			var keyword = $('#keyword').val();
			var school_type = $('select[name="school_type"] option:selected').val();

		    $.ajax({
	            method: 'GET',
				data: {name:keyword, school_type:school_type},
	            url: "{{ route('process.searchSchool') }}",
				success:function(result){
					$('#search-school-result').html(result);
					$('#search-school-result li').each(function(){
						var school_uid = $(this).attr('data-id');
						var school_type = $(this).attr('data-st');
						$(this).on('click', function(){
							$('#school_uid').val(school_uid);
							$('option:selected', 'select[name="school_type"]').removeAttr('selected');
							$('select[name="school_type"]').find('option[value="'+school_type+'"]').attr("selected",true);

							$('#keyword').val('');
							var school_name = $(this).text();
							$('#search-school-result').html(school_name);

							$('input[name="_school_name"]').val(school_name).prop('readonly', true);
							$('#course_uid').val('');
							$('input[name="course_name"]').val('');

							searchCourse(school_uid);
						});
					});
				}
	        });
		});

		$('#exrate-label').on('click', function(){
			$('#exrate_win').toggle();
		});

		$('#exrate_win li').each(function(){
			$(this).on('click', function(){
				var exrate = $(this).attr('data-exrate');
				$('input[name="exrate"]').val(exrate);
				$('#exrate_win').toggle();
			});
		});

		$('input[name="tuition_check"]').click(function(){
			if ($(this).prop('checked')) {
				$('#actual_total').prop('disabled', false);
			} else {
				$('#actual_total').val('').prop('disabled', true);
			}
		});
	});
</script>
@endpush