@php
if (count($keyStages) > 0) {
    $firstStage = $keyStages->first()->id;
}
@endphp
@extends('student.layouts.default')
@section('content')
    <div class="inner-page-banner-strip2 banner-height">
        <img src="{{ asset('frontend/img/inner-page-background.jpg') }}" alt="..." class="res-img">
    </div>
    <div class="loader" style="display: none;">
        <div class="loading"></div>
    </div>
    <style>
        .table tbody+tbody {
            border-top: none !important;
        }

        .unbold {
            font-size: 22.7px;
            font-weight: normal !important;
        }

    </style>
    <div class="detail-section2 resource-tab mb-0">
        <div class="container">
            <div class="row">
                @include('layout.top-ads')
                <div class="col-lg-12 mt-5">
                    <h2 class="text-white"><small class="text-white unbold">Resources: Past Papers and Exam Questions
                            by Topic</small></h2>

 
                </div>
                <div class="col mt-5 freeze-parent">
                    <div class="card card-custom mt-1 freeze">
                        <div class="card-body left-box">

                            <table class="table  mb-0">
                                <tbody>
                                    <tr>
                                        <th>
                                            @foreach ($keyStages as $key => $keyStage)
                                                <button type="button"
                                                    class="btn btn-primary font-weight-bold btn-md mx-1 my-1 btn-ks btn-ks-{{ $keyStage->id }}"
                                                    onclick="setKeystage(this.id)"
                                                    id="{{ $keyStage->id }}">{{ $keyStage->stage_name }}</button>
                                            @endforeach
                   
                                        </th>
                                    </tr>

                                  
                                </tbody>
                                <tbody id="table-row">
                                </tbody>
                            </table>

                            <div class="form-group">

                                <div class="col-sm-2 qstn-btn-wrapper">
                                    <input type="hidden" name="keystage_id" id="keystage_id" value="0">
                                    <input type="hidden" name="board_id" id="board_id" value="0">
                                    <input type="hidden" name="comsep_id" id="comsep_id" value="0">
                                    <input type="hidden" name="question_type_id" id="question_type_id" value="0">
                                    <input type="hidden" name="subject_id" id="subject_id" value="0">
                                    <input type="hidden" name="level_id" id="level_id" value="0">

                                    <input type="hidden" name="keystage_id" id="sel_keystage_id" value="0">
                                    <input type="hidden" name="board_id" id="sel_board_id" value="0">
                                    <input type="hidden" name="comsep_id" id="sel_comsep_id" value="0">
                                    <input type="hidden" name="question_type_id" id="sel_question_type_id" value="0">
                                    <input type="hidden" name="subject_id" id="sel_subject_id" value="0">
                                    <input type="hidden" name="level_id" id="sel_level_id" value="0">

                                    <input type="hidden" name="sel_stage" id="sel_stage" value="0">
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-xl-8 col-lg-8 col-md-7 mt-5">
                    <div class="card card-custom mt-1 mb-5">
                        <div class="card-body right-box">
                            <div class="box-body">
                                <div class="row">
                                    <div class="col-md-12 no-data-found" style="display:none;">
                                        <div class="subject-detail-box-section">
                                            <div class="listed-section">
                                                <h4>No videos and quizzes found</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12" id="col-paper1">
                                        <div class="scroll-content" id="topic-72">
                                            <div class="subject-detail-box-section">
                                                <div id="resource-list"></div>
                                                           
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- <div class="question-div" style="display: none;">
                                </div>
                                <div class="form-group row">
                                    <label for="inputEmail3" class="col-sm-10 control-label">&nbsp; </label>
                                    <div class="col-sm-2 qstn-btn-wrapper">
                                        <input type="hidden" name="country_id" id="country_id" value="1">
                                        
                                        <input type="hidden" name="curriculum_id" id="curriculum_id" value="5">
                                        <input type="hidden" name="question_type" id="question_type">
                                        <input type="hidden" name="select_topic" id="select_topic">
                                    </div>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
                
    

                @include('layout.bottom-ads')
            </div>
        </div>
    </div>
    <div class="modal fade modal-style1" id="resource-access-modal" tabindex="-1" role="dialog"
     aria-labelledby="signup-continue-modal-Label" style="display: none;">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <!-- <h4 class="modal-title" id="school-log-modal-Label">Student Sign Up</h4> -->
            </div>
            <div class="modal-body">
                
                    <div style="text-align:center;">
                    <h3 style="margin-bottom:35px;" id="access-msg"></h3>
                    
                    </div>
                
            </div>
        </div>
    </div>
</div>
@endsection
@section('pagecss')
    <link href="{{ url('frontend/css/custom.css') }}" rel="stylesheet">
@endsection


@section('pagescripts')
    <script>
        var questionUrl = "{{ url('resources') }}";
        //$('#overlay').fadeIn(); 

        $(document).ready(function() {
            //setCountry(1);
            //setSubject(1);
            // $('#table-row').append('<tr><th><button type="button" class="btn btn-primary font-weight-bold btn-md mx-1 my-1 btn-eb btn-eb-" onclick="setExamboard()" id="">2</button></th></tr>');
            // $('#table-row').append('<tr><th><button type="button" class="btn btn-primary font-weight-bold btn-md mx-1 my-1 btn-eb btn-eb-" onclick="setExamboard()" id="">2</button></th></tr>');

            $("#keystage_id").val(0);
            $("#board_id").val(0);
            $("#comsep_id").val(0);
            $("#question_type_id").val(0);
            $("#subject_id").val(0);
            //setKeystage(1);
            init();
        });

        function clearStages() {
            $("#keystage_id").val(0);
            $("#board_id").val(0);
            $("#comsep_id").val(0);
            $("#question_type_id").val(0);
            $("#subject_id").val(0);
            $("#resource-list").html('');
            let firstStage = "{{ $firstStage }}";
            setKeystage(firstStage);
        }

        function setKeystage(keystage_id) {
            $('#keystage_id').val(keystage_id);
            $('.btn-ks').removeClass('active');
            $('.btn-ks-' + keystage_id).addClass('active');
            $('#table-row').html('');
            $("#resource-list").html('');

            $("#sel_keystage_id").val(0);
  $("#sel_board_id").val(0);
  $("#sel_comsep_id").val(0);
  $("#sel_question_type_id").val(0);
  $("#sel_subject_id").val(0);
  $("#sel_level_id").val(0);
   $('#sel_stage').val(0);

            $.ajax({
                url: "{{ url('resources/getStages') }}/" + keystage_id,
                type: "GET",
                dataType: "json"
            }).done(function(data) {
                // console.log(data.html);
                if (data.flagError) {
                    showAlert(data.message, "error");
                } else {

                    $('#table-row').append(data.html);
                    showHide();
                    //setResources();
                }
            });

            //  $.ajax({
            //          url: "{{ url('common/getCurriculums') }}/"+country_id,
            //          type: "GET",
            //          dataType: "html"
            //  }).done(function (data) {
            //      $(".curriculum-head").html(data);
            //      cur_id = $(".curriculum-head button:first").attr('id');
            //      $("#curriculum_id").val(cur_id);
            //      $('.btn-cur').removeClass('btn-active');
            //     $('.btn-cur-'+cur_id).addClass('btn-active');
            //      //setTopics();


            //  })
        }

        // function showHide() {
        //     let first_tr = $('#table-row').children('tr:first');
        //     $('#table-row').children('tr').hide();
        //     $('#clearButton_tr').show();
        //     first_tr.show();
        // }

        function setExamboard(board_id) {
            $('#board_id').val(board_id);
            $('.btn-eb').removeClass('active');
            $('.btn-eb-' + board_id).addClass('active');
            $('#comSep_tr').show();
            //setResources();
            if($('#sel_board_id').val()!=1)
            {
              $('#sel_board_id').val(1);
              var sel_stage = $('#sel_stage').val();
              sel_stage++;
              $('#sel_stage').val(sel_stage);
            }
            checkAllSet();
        }

        function setComsep(comsep_id) {
            $('#comsep_id').val(comsep_id);
            $('.btn-cs').removeClass('active');
            $('.btn-cs-' + comsep_id).addClass('active');
            $('#question_tr').show();
            //setResources();
            if($('#sel_comsep_id').val()!=1)
            {
              $('#sel_comsep_id').val(1);
              var sel_stage = $('#sel_stage').val();
              sel_stage++;
              $('#sel_stage').val(sel_stage);
            }
            checkAllSet();
        }

        function setQuestiontype(question_type_id) {
            $('#question_type_id').val(question_type_id);
            $('.btn-qt').removeClass('active');
            $('.btn-qt-' + question_type_id).addClass('active');
            $('#subject_tr').show();
            //setResources();
            if($('#sel_question_type_id').val()!=1)
            {
              $('#sel_question_type_id').val(1);
              var sel_stage = $('#sel_stage').val();
              sel_stage++;
              $('#sel_stage').val(sel_stage);
            }
            checkAllSet();
        }

        function setSubject(subject_id) {
            $('#subject_id').val(subject_id);
            $('.btn-sb').removeClass('active');
            $('.btn-sb-' + subject_id).addClass('active');
            $('#level6_tr').show();
            //setResources();
            if($('#sel_subject_id').val()!=1)
            {
              $('#sel_subject_id').val(1);
              var sel_stage = $('#sel_stage').val();
              sel_stage++;
              $('#sel_stage').val(sel_stage);
            }
            checkAllSet();
        }

        function setLevel(level_id) {
            $('#level_id').val(level_id);
            $('.btn-lv').removeClass('active');
            $('.btn-lv-' + level_id).addClass('active');
            //setResources();
            if($('#sel_level_id').val()!=1)
              {
                $('#sel_level_id').val(1);
                var sel_stage = $('#sel_stage').val();
                sel_stage++;
                $('#sel_stage').val(sel_stage);
              }
              checkAllSet();
        }

        function checkAllSet(){
            $("#resource-list").html('');
          var stage_count = $('#stage_count').val();
          var sel_stage = $('#sel_stage').val();
          if(stage_count==sel_stage)
          {
            setResources();
          }
            
        
        }

        function setResources() {
            var keystage_id = $("#keystage_id").val();
            var board_id = $("#board_id").val();
            var comsep_id = $("#comsep_id").val();
            var question_type_id = $("#question_type_id").val();
            var subject_id = $("#subject_id").val();
            var level_id = $("#level_id").val();
            var token = "{{ csrf_token() }}";

            if (keystage_id != '') {
                $.ajax({
                    url: "{{ url('resources/getResources') }}",
                    type: "POST",
                    data: {
                        'keystage_id': keystage_id,
                        'board_id': board_id,
                        'comsep_id': comsep_id,
                        'question_type_id': question_type_id,
                        'subject_id': subject_id,
                        'level_id': level_id,
                        _token: token
                    },
                    dataType: "html"
                }).done(function(data) {
                    $("#resource-list").html(data);
                    // top_id = $(".topic-head button:first").attr('id');
                    // $("#topic_id").val(top_id);
                    // $('.btn-top').removeClass('btn-active');
                    // $('.btn-top-'+top_id).addClass('btn-active');
                    //getSyllubus();
                    //$(".syllubus-div").show();
                    //$(".question-div").hide();
                })
            }

        }

        function restrictedAccess(msgtype)
        {
            if(msgtype==1)
                $('#access-msg').html('Please sign up for a free trial account to be able to access this resource');
            else if(msgtype==2)
            $('#access-msg').html('To access this resource you must have a paid subscription');

            $("#resource-access-modal").modal("show");
        }
    </script>
@endsection