@extends('backend.layouts.app')

@section('title')
レンタル契約詳細
@endsection

@section('content')
<div id="wrapper">
    <h2 class="title">レンタル契約【詳細】</h2>
    @include('backend.layouts.flash-message')
    <ul class="tab four">
        <li class="select" id="loan_info">貸出時情報</li>
        <li id="return_info">返却時情報</li>
        <li id="loan_customer_info">お客様用 貸出時情報</li>
        <li id="return_customer_info">お客様用 返却時情報</li>
    </ul>
    {{ Form::open(["route"=>"backend.rental.contract.update", "method"=>"post", 'id' => 'contract_update_form']) }}
    <ul class="content">
        <li class="loan_info">
            @include('backend.rental.contract._loan_info')
        </li>
        <li class="return_info hide">
            @include('backend.rental.contract._return_info')
        </li>
        <li class="loan_customer_info hide">
            @include('backend.rental.contract._customer_info', ["rental_check"=>$contract->loan_check, 'prefix'=>'loan', 'seq'=>300, 'check_diff' => null])
        </li>
        <li class="return_customer_info hide">
            @include('backend.rental.contract._customer_info', ["rental_check"=>$contract->return_check, 'prefix'=>'return', 'seq'=>400, 'check_diff' => $check_diff])
        </li>
    </ul>
    <input type="hidden" value="{{ $contract->id }}" name="rental_contract_id">
    <input type="hidden" value="{{ $contract->rental_reservation->id }}" name="rental_reservation_id">
    <input type="hidden" name="update_kb" id="update_kb" value="loan">
    <input type="hidden" name="is_customer_tab" id="is_customer_tab" value="0">
    <div class="center-submit triple">
        <input type="submit" name="update" value="更新">
        <input type="submit" name="cancel" value="取消" id="submit_remove">
        <input type="submit" name="output_contract" value="レンタカー契約書出力" class="blank">
    </div>
    {{ Form::close() }}
</div>
@endsection

@section('modals')
<div id="detail1" class="modal-content">
	<div class="MDL_window_wrap">
        <canvas id="cvs_departure_signature_name" width="700" height="300" class="cvs-sign-input hide"></canvas>
        <canvas id="cvs_return_signature_name" width="700" height="300" class="cvs-sign-input hide"></canvas>
		<div class="center-submit t_center">
			<button type="button" onclick="clearCanvas()">リセット</button>
			<button type="button" onclick="chgImg()" value="1">画像出力</button>
		</div>
	</div>
	<p class="closemodal"><a class="modal-close">×</a></p>
	@include('backend.rental.contract.canvas.input')
</div>
<div id="detail2" class="modal-content">
	<p class="closemodal"><a class="modal-close">×</a></p>
	<div style="background-color:white; padding:30px; margin:100px 50px;">
		@include('backend.rental.contract._icon_list_table', ['is_red' => true])
	</div>
	<input type="hidden" id="selected_img">
</div>
@endsection

@section('page_css')
<style>
img.ui-datepicker-trigger{
   display: none!important;
}

table.normal th{
	width: auto;
}

.center-submit.triple input[type=submit]:nth-child(4) {
    margin: 0 20px !important;
}

.center-submit.triple{
    position: fixed;
    bottom: 10px;
    padding-left: 20px;
}

.diff{
	color: red;
}
</style>
@endsection

@section('page_js')
<script src="{{ asset('vendor/jquery-ui/i18n/datepicker-ja.js') }}"></script>
<script src="{{ asset('vendor/ajaxupload/jquery.ajaxupload.js') }}"></script>
<script>
	$(function(){
		$('ul.tab.four li').click(function(){
			const id = $(this).attr('id');
			$('.center-submit.triple input[type=submit]').hide();

			if(id == 'loan_info'){
				$('.center-submit.triple input[name=output_contract]').show();
				$('.center-submit.triple input[name=update]').show();
				$('.center-submit.triple input[name=cancel]').show();
				$('#update_kb').val('loan');
				$('#is_customer_tab').val(0);

			}else if(id == 'return_info'){
				$('.center-submit.triple input[name=output_contract]').show();
				$('.center-submit.triple input[name=update]').show();
				$('.center-submit.triple input[name=cancel]').show();
				$('#update_kb').val('return');
				$('#is_customer_tab').val(0);

			}else if(id == 'loan_customer_info'){
				$('.center-submit.triple input[name=output_contract]').show();
				$('.center-submit.triple input[name=update]').show();
				$('.center-submit.triple input[name=cancel]').show();
				$('#update_kb').val('loan');
				$('#is_customer_tab').val(1);

			}else if(id == 'return_customer_info'){
				$('.center-submit.triple input[name=output_contract]').show();
				$('.center-submit.triple input[name=update]').show();
				$('.center-submit.triple input[name=cancel]').show();
				$('#update_kb').val('return');
				$('#is_customer_tab').val(1);
			}
		});

		$('.blank').click(function(){
			$('#contract_update_form').attr('target' , '_blank');


			setTimeout(function(){
				$('#contract_update_form').attr('target' , '');
			},1000);
		});

		$("#submit_remove").on("click", function () {
			if(!confirm('本当に契約を取消しますか？')) {
				return false;
			}
		});
	});
</script>
@endsection