@extends('adminlte::page')

@section('title', '据付最終確認書点検')

@section('content_header')
	@if (!$page_id)
    <h5><label class="title-underbar">据付最終確認書点検</label></h5>
	@endif
@stop

@section('content')
    <x-admin.success-flush-message />
    <x-admin.error-flush-message />
    <x-admin.validation-message />
    <div class="card" style="border-radius: 20px; box-shadow: 0px 3px 0px 0px rgba(0, 0, 0, 0.04);">
        <div class="card-body">
            <form method="POST" id="inspectForm" action="{{ route('assemblyconfirmation.admin.store-checklists', ['item_id' => $item_id]) }}" class="form-group mt-3">
                @csrf
                <input type="hidden" name="item_id" value="{{$item_id}}" />
                  
                <div class="row">
                    <div class="col-md-2" style="position: relative;height: 60vh;overflow: auto;">
                        <nav id="navbar-inspection" class="navbar navbar-light bg-light">
                            <nav class="nav nav-pills flex-column">
                                @foreach ($details as $idx => $detail)
                                    <a class="nav-link" href="#{{$detail->id}}">{{ $detail->name }}</a>
                                @endforeach
                            </nav>
                          </nav>
                    </div>
                    <div class="col-md-10" data-spy="scroll" data-target="#navbar-inspection" data-offset="0" style="position: relative;height: 60vh;overflow: auto;">
                        @foreach ($details as $idx => $detail)
                            <div
                                id="survey"
                                aria-labelledby="survey_page"
                                role="tabpanel"
                            >
                                <div class="col-12">
                                    <p><a name="{{ $detail->id }}">{{ $detail->name }}</a></p>
                                    <table class="table table-responsive">
                                        <thead class="thead-light medium-heading">
                                            <tr>
                                                <th style="width: 40%">点検項目</th>
                                                <th style="width: 20%">詳細</th>
                                                <th style="width: 20%">チェック</th>
                                                <th style="width: 20%">備考</th>
                                            </tr>
                                        </thead>
                                        <tbody class="main-text">
                                            @foreach ($results as $result)
                                                @if ($result->assembly_item_id == $detail->assembly_item_id)
                                                    <tr>
                                                        <td>
                                                            <input type="hidden" name="assembly_item_inspection_id[{{$result->assembly_item_inspection_id}}]" value="{{$result->assembly_item_inspection_id}}" class="question-input" /> 
                                                            <input type="hidden" name="assembly_item_id[{{$result->assembly_item_inspection_id}}]" value="{{$result->assembly_item_id}}" class="question-input" /> 
                                                            {{ $result->assemblyItemInspection->name }}
                                                        </td>
                                                        <td>
                                                            @if($result->assemblyItemInspection->detail) <small>{{$result->assemblyItemInspection->detail}}</small> @endif
                                                        </td>
                                                        <td>
                                                            <div class="btn-group-toggle" data-toggle="buttons">
                                                                <label class="btn rounded-pill" style="margin-left:10px">
                                                                    <input type="radio" name="result[{{$result->assembly_item_inspection_id}}]" class="result{{$result->assembly_item_inspection_id}}" value="1" autocomplete="off" onchange="checkSubmit(this)"
                                                                    @if (old('result[' . $result->assembly_item_inspection_id . ']') ?? $result->result == 1) checked @endif> 可
                                                                </label>
                                                                <label class="btn rounded-pill" style="margin-left:10px">
                                                                    <input type="radio" name="result[{{$result->assembly_item_inspection_id}}]" class="result{{$result->assembly_item_inspection_id}}" value="2" autocomplete="off" onchange="checkSubmit(this)"
                                                                    @if (old('result[' . $result->assembly_item_inspection_id . ']') ?? $result->result == 2) checked @endif> 否
                                                                </label>
                                                            </div>
                                                        </td>
                                                        <td><input type="text" name="notes[{{$result->assembly_item_inspection_id}}]" value="{{old('notes[' . $result->assembly_item_inspection_id . ']') ?? $result->notes}}" autocomplete="off" maxlength="100" @if ($result->assemblyItemInspection->is_required_notes) required @endif></td>
                                                    </tr>
                                                @endif
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="row" style="margin-top: 10px;">
                    <div class="col-md-4">
                        <a href="{{ route('assemblyconfirmation.admin.index', ['category' => $assemblyConfirmation->category]) }}" class="btn btn-secondary btn-lg 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 type="submit" id="submit" class="btn btn-block button-red btn-lg rounded-pill"><b>チェック完了</b></button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <link rel="stylesheet" href="/css/admin_maintenance.css">
    <style>
     .content-wrapper {
        margin-bottom: 0px;
        padding-bottom: 10px !important;
     }
     </style>
@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 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;
    }
}
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);
}
*/
//this is dummy
function checkSubmit(element) {
    console.log(element);
}
</script>
@stop