@extends('adminlte::page')

@section('title', '定期メンテナンス検査')

@section('content_header')
	@if (!$page_id || $page_id > $page_max)
    <h5><label class="title-underbar">定期メンテナンス検査</label></h5>
	@else
    @foreach ($page_info as $page)
        <h5
            @if ($page->page != $startPageId)
            class="title-page d-none"
            @else
            class="title-page"
            @endif
            id="title{{ $page->page }}">
            <label class="title-underbar">{{ $page->title }}</label>
        </h5>
    @endforeach
	@endif
@stop

@section('content')
    <x-admin.success-flush-message />
    <x-admin.error-flush-message />
    <x-admin.validation-message />
    <div class="row">
        <div class="col-md-12">
            <div class="card" style="border-radius: 20px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.04);">
                <div class="card-body">
                @if (!$page_id)
                    <div class="col-12">
                        <h4>間違いありませんか？</h4>
                        <table class="table table-responsive" style="margin-top:35px">
                            <thead class="thead-light medium-heading">
                                <tr>
                                    <th style="width: 20%">検査</th>
                                    <th style="width: 20%">医院名</th>
                                    <th style="width: 20%">対象機器</th>
                                    <th style="width: 20%">担当者</th>
                                    <th style="width: 20%">対応予定日</th>
                                </tr>
                            </thead>
                            <tbody class="main-text">
                                <tr>
                                    <td>{{ $result->survey->name }}</td>
                                    <td>{{ $result->clinic->name }}</td>
                                    <td>{{ $result->ownOsadaEquipment->equipmentType->external_name }}</td>
                                    <td>{{ $result->staff->name }}</td>
                                    <td>{{ $result->start_at ? $result->start_at->format('Y.m.d'): '' }}</td>
                                </tr>
                            </tbody>
                        </table>                                                    
                        @if(Gate::forUser(\Auth::user())->allows('employeeOperation', 'maintenance|4') || Gate::forUser(\Auth::user())->allows('employeeOperation', 'maintenance|2'))
                        <div class="col-md-3 float-right" style="margin: 5px;">
                            @if ($isNeedPreCheck)
                            <a href="{{ route('smartsupport.admin.supportPack.preCheck', ['id' => $id]) }}" class="btn btn-block btn-outline-primary rounded-pill">検査を開始する</a>
                            @else
                            <a href="{{ route('smartsupport.admin.supportPack.inspect', ['id' => $id, 'page_id' => 1]) }}" class="btn btn-block btn-outline-primary rounded-pill">検査を開始する</a>
                            @endif
                        </div>
                        @endif
                    </div>
					@else
					<div class="row">
						<div class="col-2">
							<ul class="survey-pages" role="tablist" style="padding-left: 0;">
                                @if ($page_info->isEmpty())
                                    @foreach ($pageIndex as $page)
                                        @php
                                            $tabClass = $page == $startPageId ? 'survey-page-tag tag-active' : 'survey-page-tag';
                                        @endphp
                                        <li
                                            name="survey_pages"
                                            id="survey_page{{ $page }}"
                                            aria-controls="survey{{ $page }}"
                                            data-page="{{ $page }}"
                                            class="{{ $tabClass }}"
                                            @if (in_array($page, $pageIds))
                                            role="tab"
                                            style="cursor: pointer;"
                                            @endif
                                        >
                                            <span class="tag-check">（無名のページ）</span>
                                        </li>
                                    @endforeach
                                @else
                                    @foreach ($page_info as $page)
                                        @php
                                            $tabClass = $page->page == $startPageId ? 'survey-page-tag tag-active' : 'survey-page-tag';
                                        @endphp
                                        <li
                                            name="survey_pages"
                                            id="survey_page{{ $page->page }}"
                                            aria-controls="survey{{ $page->page }}"
                                            data-page="{{ $page->page }}"
                                            class="{{ $tabClass }}"
                                            @if (in_array($page->page, $pageIds))
                                            role="tab"
                                            style="cursor: pointer;"
                                            @endif
                                        >
                                            <span class="tag-check">{{ $page->title ? $page->title : （無名のページ） }}</span>
                                        </li>
                                    @endforeach
                                @endif
							</ul>
						</div>
						<div class="col-10" style="border-left: #dcdcdc solid 1px;">
							<form method="POST" id="inspectForm" action="{{ route('smartsupport.admin.supportPack.inspectStore', ['id' => $id]) }}" class="form-group mt-3">
								<input type="hidden" id="url_store_draft" name="url_store_draft" value="{{ route('smartsupport.admin.supportPack.inspectStoreDraft', ['id' => $id, 'page_id' => $startPageId]) }}">
								@csrf
								@foreach ($questionPages as $pageId => $questions)
									<div
										id="survey{{ $pageId }}"
										aria-labelledby="survey_page{{ $pageId }}"
										role="tabpanel"
										@if ($pageId != $startPageId)
										class="row survey-tab d-none"
										@else
										class="row survey-tab"
										@endif
									>
										<div class="col-12">
										@if (count($page_info) > 0)
											<p>{{$page_info[$pageId]->caution}}</p>
										@endif
										@if (count($page_info) > 0 && $page_info[$pageId] && $page_info[$pageId]->page_image_id)
										<div class="col-4">
											<img src ="{{\App\Models\File::getFileDomain() . $page_info[$pageId]->page_image->url}}" />
										</div>
										@endif
											<table class="table table-responsive" style="margin-top:35px">
												<thead class="thead-light medium-heading">
													<tr>
														<th style="width: 30%">点検項目</th>
														<th style="width: 30%">点検内容</th>
														<th style="width: 20%">チェック</th>
														<th style="width: 20%">備考</th>
													</tr>
												</thead>
												<tbody class="main-text">
													@foreach ($questions as $key => $question)
													<tr>
														<td>
															<input type="hidden" name="question[question{{$question->id}}]" value="{{$question->id}}" class="question-input" /> 
															{{ $question->question }}
														</td>
														<td>
															@if($question->detail) {{$question->detail}} @endif
														</td>
														<td>
															<div class="btn-group-toggle" data-toggle="buttons">
																@php
																	$choices = explode(",", $question->choices);
																@endphp
																@foreach ($choices as $choice)
																<label class="btn rounded-pill" style="margin-left:10px">
																	<input type="{{$question->type}}" name="answer[answer{{$question->id}}]" class="answers{{$question->id}}" value="{{$choice}}" autocomplete="off" onchange="checkSubmit(this)" data-num="{{$question->id}}"
																	@if ($answers && array_key_exists('answer'. $question->id, $answers['answer']) && $answers['answer']['answer'. $question->id] == $choice) checked @endif
																	@if ($question->required == 1) required @endif> {{$choice}}
																</label>
																@endforeach
															</div>
														</td>
														<td><input type="text" name="notes[notes{{$question->id}}]" value="{{$answers['notes']['notes'. $question->id] ?? null}}" autocomplete="off" maxlength="100"></td>
													</tr>
													@endforeach
												</tbody>
											</table>
										</div>
									</div>
								@endforeach
							</form>
							<div class="row" style="margin: 5px;">
								<div class="col-md-4">
                                    <button type="button" class="btn btn-block button-back btn-lg rounded-pill"
                                    data-toggle="modal" data-target="#cancelMaintenanceModal"><b>キャンセル</b></button>
								</div>
								<div class="col-md-4">
									<button onclick="execSubmitStoreDraft()" id="storeDraft" class="btn btn-block btn-outline-primary rounded-pill">下書き保存</button>
								</div>
								<div class="col-md-4">
                                    <button type="button" id="submit" class="btn btn-block button-red btn-lg rounded-pill"
                                    data-toggle="modal" data-target="#execMaintenanceModal"><b>チェック完了</b></button>
								</div>
							</div>
						</div>
					</div>
					@include('smartsupport::admin.supportPack.modal.cancel')
					@include('smartsupport::admin.supportPack.modal.check_exec')
				@endif
			</div>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link rel="stylesheet" href="/css/admin_maintenance.css">
@stop

@section('js')
<script>
var answered = [];
var answers = document.getElementsByClassName('answers*');
for (var i = 0; i < answers.length; i++) {
    console.log(answers[i]);
}
checkAllStatus();
$('li[role="tab"]').on('click', function (){
    let targetId = $(this).attr('aria-controls');
    let targetPage = $(this).attr('data-page');
    $('li[role="tab"]').removeClass('tag-active');
    $(this).addClass('tag-active');
    $('.survey-tab').removeClass('d-block');
    $('.survey-tab').addClass('d-none');
    $('#'+targetId).removeClass('d-none');
    $('#'+targetId).addClass('d-bllock');
    $('.title-page').removeClass('d-block');
    $('.title-page').addClass('d-none');
    $('#title'+targetPage).removeClass('d-none');
    $('#tilte'+targetPage).addClass('d-bllock');
});
$('input[name^="answer"]:required').on('change', function() {
    // タブ全体の相対位置が常に同じであることを想定
    const tabElement = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
    let targetId = $(tabElement[0]).attr('aria-labelledby');
    toggleTabStatus('#'+targetId);
});
function checkSubmit(element) {
    if (element.required == true) {
        var num = element.dataset.num;
        if (element.checked == true) {
            if (answered.indexOf(num) == -1 ) {
                answered.push(num);
            }
        } else {
            var answers = document.getElementsByClassName('answers' + num);
            var cnt = 0;
            for ( var idx = 0; idx < answers.length; idx++ ) {
                if (answers[idx].checked) {
                    cnt++;
                }
            }
            if (cnt == 0) {
                answered.splice(answered.indexOf(num), 1);
            }
        }
    }
    checkLength(answered.length);
}

function checkLength(len) {
    if ( len >= {{ $required_max }} ) {
        document.getElementById('submit').disabled = false;
    } else {
        document.getElementById('submit').disabled = true;
    }
}

function execSubmit() {
    event.preventDefault();
    document.getElementById("inspectForm").submit();
}

function execSubmitStoreDraft() {
    event.preventDefault();
    $('form#inspectForm').attr('action', $('input#url_store_draft').val()).submit();
}

function writeSignature(url) {
    window.open(url, "writeChild", "width=800,height=500");
}

function checkAllStatus() {
    let tabCount = 0;
    let checkedTabCount = 0;
    $('.survey-page-tag[role="tab"]').each(function (index, element) {
        tabCount++;
        const isChecked = isCheckedTab(element);
        if (isChecked) {
            checkedTabCount++;
        }
    });
    if (tabCount == checkedTabCount) {
        $('#submit').prop('disabled', false);
    } else {
        $('#submit').prop('disabled', true);
    }
}

function toggleTabStatus(element) {
    const isCHecked = isCheckedTab(element);
    if ($('.survey-page-tag[role="tab"]').length == $('.survey-page-tag-checked').length) {
        $('#submit').prop('disabled', false);
    } else {
        $('#submit').prop('disabled', true);
    }
}

function isCheckedTab(element) {
    let targetId = $(element).attr('aria-controls');
    // 必須のもののみ
    const questions = $('#'+targetId + ' input:required');
    const questionCount = questions.length;
    let answerName = '';
    let answerCount = 0;
    questions.each(function (qIndex, qElement) {
        answerName = $(qElement).attr('name');
        let answerElement = $('input[name="'+answerName+'"]');
        // 選択式のものはチェックされたもののみ
        if (answerElement.attr('type') == 'radio' || answerElement.attr('type') == 'checkbox') {
            answerElement = $('input[name="'+answerName+'"]:checked');
        }
        const answer = answerElement.val();
        // 回答されてるもののみカウント
        if (answer === undefined || answer === '') {
            return true;
        }
        answerCount++;
    });
    if (questionCount == answerCount) {
        if (!$(element).hasClass('survey-page-tag-checked')) {
            $(element).addClass('survey-page-tag-checked');
        }
        return true;
    } else {
        $(element).removeClass('survey-page-tag-checked');
        return false;
    }
}
</script>
@stop