@extends('admin.layouts.app')
@section('content')
    <form method="post" action="{{ route('report.prints') }}" name="frmaddedit" id="frmaddedit" onsubmit="clickme();">
        @csrf
        <input type="hidden" name="form_id" id="form_id" value="{{ $form_id }}" />
        <input type="hidden" name="organization_id" id="organization_id" value="{{ $organization_id }}" />
        <input type="hidden" name="rid" id="rid" value="{{ $rid }}" />
        <div class="row mx-0 slct_tab_que_print">
            <!-- START: main-row -->
            <div class="col-lg-6 mb-2 mb-lg-3">
                <h1 class="page-title">Select the tab or question to print</h1>
            </div>
            <div class="top-btn-box col-lg-6 mb-3" id="normal_btns">
                <div class="top-btn-box d-flex justify-content-lg-end align-items-center h-100">
                    <button tabindex="2" type="submit" value="Print" name="btnsubmit" class="btn  btn-primary addnew-btn">
                        <span class="btn-title">Print</span>
                    </button>
                    <a class="btn btn-primary addnew-btn ml-3"
                        href="{{ route('report.plisting', ['organization_id' => $organization_id]) }}">Back</a>
                </div>
            </div>
            <div class="col-12 mb-3">
                <div class="custom-control custom-checkbox">
                    <input type="checkbox" class="custom-control-input" value="customAll" name="customAll" id="customAll">
                    <label class="custom-control-label" for="customAll">Check All</label>
                </div>
            </div>
            <div class="col-12 tab_accordion">
                <div class="accordion slct_que_tab" id="accordionExample">
                    @php
                        $i = 0;
                    @endphp
                    @if (isset($tabs))
                        @foreach ($tabs as $key => $tab)
                            @php
                                $div_show = $i == 0 ? 'show' : '';
                            @endphp
                            @if (isset($tab->tabQuestion) && count($tab->tabQuestion) > 0)
                                <div class="card border rounded-0 mb-3">
                                    <div class="card-header p-0 bg-white" id="headingOne{{ $tab->id }}">
                                        <h5 class="mb-0 d-flex align-items-center mx-3 my-2">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input"
                                                    value="{{ $tab->id }}__{{ $tab->id }}" name="tab[]"
                                                    id="tab{{ $tab->id }}" onclick="tabselect({{ $tab->id }});">
                                                <label class="custom-control-label" for="tab{{ $tab->id }}"></label>
                                            </div>
                                            <a class="btn pl-0 pr-3 py-2 text-left flex-grow-1 d-flex align-items-center"
                                                href="javacript:void(0);" data-toggle="collapse"
                                                data-target="#collapseOne{{ $tab->id }}{{ $tab->id }}"
                                                aria-expanded="true" aria-controls="collapseOne">
                                                {{ $tab->tabname }}
                                            </a>
                                            <div class="d-flex flex-row">
                                                <span class="badge round-0 rounded-0 px-2 py-1">TAB</span>
                                            </div>
                                        </h5>
                                    </div>
                                    <div id="collapseOne{{ $tab->id }}{{ $tab->id }}"
                                        class="collapse {{ $div_show }}"
                                        aria-labelledby="headingOne{{ $tab->id }}" style="">
                                        <div class="card-body py-1">
                                            @foreach ($tab->tabQuestion as $qkey => $question)
                                                @if ($question->status)
                                                    <div class="col-auto my-3 p-0 px-sm-3">
                                                        <div class="custom-control custom-checkbox">
                                                            <input type="checkbox" class="custom-control-input"
                                                                value="{{ $tab->id }}__{{ $tab->id }}__{{ $question->id }}"
                                                                name="question[]" id="question{{ $question->id }}">
                                                            <label class="custom-control-label text-third"
                                                                for="question{{ $question->id }}">{{ $question->question_text }}</label>
                                                        </div>
                                                    </div>
                                                @endif
                                                @if ($question->triggeredQuestion && !empty($question->triggeredQuestion))
                                                    @foreach ($question->triggeredQuestion as $tqkey => $tquestion)
                                                        @if ($tquestion->status)
                                                            <div class="col-auto my-3 p-0 px-sm-3">
                                                                <div class="custom-control custom-checkbox">
                                                                    <input type="checkbox" class="custom-control-input"
                                                                        value="{{ $tab->id }}__{{ $tab->id }}__{{ $tquestion->id }}"
                                                                        name="question[]"
                                                                        id="question{{ $tquestion->id }}">
                                                                    <label class="custom-control-label text-third"
                                                                        for="question{{ $tquestion->id }}">{{ $tquestion->question_text }}</label>
                                                                </div>
                                                            </div>
                                                        @endif
                                                    @endforeach
                                                @endif
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endif
                        @endforeach
                    @endif
                    @php
                        $i++;
                    @endphp
                </div>
            </div>
            <!-- END: main-row -->
        </div>
    </form>
    <script>
        $('#customAll').on('click', function() {
            if (this.checked == true) {
                $('#accordionExample').find('input[name="tab[]"]').prop('checked', true);
                $('#accordionExample').find('input[name="question[]"]').prop('checked', true);
            } else {
                $('#accordionExample').find('input[name="tab[]"]').prop('checked', false);
                $('#accordionExample').find('input[name="question[]"]').prop('checked', false);
            }
        });
        function tabselect(id) {
            if ($('#tab' + id).is(":checked")) {
                $('#collapseOne' + id + id).find('input[name="question[]"]').prop('checked', true);
            } else {
                $('#collapseOne' + id + id).find('input[name="question[]"]').prop('checked', false);
            }
        }
        function clickme() {
            setTimeout(function() {
                window.location.reload();
            }, 5000);
        }
    </script>
@endsection