@extends('adminlte::page')

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

@section('content_header')
    {{-- <h5><label class="title-underbar">定期メンテナンス検査</label></h5> --}}
    @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
@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">
                    <div class="row">
                        <div class="col-2">
                            <ul class="survey-pages" role="tablist" style="padding-left: 0;">
                                @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 }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="col-10" style="border-left: #dcdcdc solid 1px;">
                            @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
                                        <form method="POST" id="inspectForm" action="{{ route('smartsupport.admin.supportPack.inspect', ['id' => $id, 'page_id' => $startPageId + 1]) }}" 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
                                            <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>
                                        </form>
                                    </div>
                                </div>
                            @endforeach
                            <div class="row" style="margin: 5px;">
                                <div class="col-md-4">
                                    <a href="{{ route('smartsupport.admin.supportPack.inspect', ['id' => $id]) }}" class="btn btn-block button-back rounded-pill">キャンセル</a>
                                </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 onclick="execSubmit()" id="submit" class="btn btn-block button-red rounded-pill">チェック完了</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </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().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