@php
if (count($keyStages) > 0) {
    $firstStage = $keyStages->first()->id;
}
@endphp
@extends('layout.default')
@section('content')
<style>
@media screen and (min-width: 800px) {
  .header-fixed.subheader-fixed.subheader-enabled .wrapper {
            padding-top: 60px;
  }
}  .unbold{
  font-size: 22.7px;
  font-weight: normal !important;
  }
  .aligntext {
            text-align:center;
            color:black !important;
            font-size: 18px !important;
  }
  .backgrounddiv{
    border: 3px solid #e7e4e0 !important;
    -webkit-box-shadow: 0 0 11px rgb(132 154 180 / 80%)  !important;
    box-shadow: 0 0 11px rgb(132 154 180 / 80%)  !important;
  }
  .listbackgrounddiv{
    border: 3px solid #e7e4e0 !important;
    box-shadow: 0 0 11px rgb(132 154 180 / 80%) !important;
  } 

  .subject-tab {
    margin-top: 1.25rem !important;
 }  
</style>    
    <div class="inner-page-banner-strip2 resource-img" style="display:none">
        <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>

    <div class="container resource-tab">
        <div class="row">
            <div class="col-lg-12 mt-12" style="display:none">
                <h2 class="text-white" >Resources: Past Papers and Exam Questions by Topic</h2>
            </div>
            <div class="col mt-8 freeze-parent">
                <div class="card card-custom mt-1 freeze backgrounddiv" >
                    <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 mr-1 mb-3 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="levelexist" id="levelexist" 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-8">
                <div class="card card-custom mt-1 mb-5 listbackgrounddiv" style="min-height: 0px;">
                    <div class="card-body right-box" style="padding: 10px!important;">
                        <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 aligntext">
                                            <h4>No videos and quizzes found</h4>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12" id="col-paper1" style="margin-bottom: -3%;">
                                    <div class="scroll-content" id="topic-72" >
                                        <div class="subject-detail-box-section aligntext " style="margin-bottom: 20px;">
                                            <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>
        </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>
                    <a href="{{ url('signup') }}">
                        <button type="submit" class="btn btn-primary " id="stud_button">Sign Up</button>
                    </a>
                    
                    </div>
                
            </div>
        </div>
    </div>
</div>
@endsection
@section('pagecss')
    <link href="{{ url('frontend/css/custom.css') }}" rel="stylesheet">
@endsection


@section('scripts')
<script>
        var questionUrl = "{{ url('resources') }}";
        var get_stages_url = "{{ url('resources/getStages') }}";
        var next_level_url = "{{ url('resources/getNextLevel') }}";
        var firstStage = "{{ $firstStage }}";
        var resource_url = "{{ url('resources/getResources') }}";
        var token = "{{ csrf_token() }}"; 

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

            $("#resource-access-modal").modal("show");
        }
        var currentStage = 0;
var isResources = false;
//$('#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(2);
    // init();
});

function clearStages() {
    location.reload();
    // $("#keystage_id").val(0);
    // $("#board_id").val(0);
    // $("#comsep_id").val(0);
    // $("#question_type_id").val(0);
    // $("#subject_id").val(0);
    // $("#resource-list").html("");
    // setKeystage(firstStage);
    // currentStage = 1;
    // isResources = false;
}

function setKeystage(keystage_id) {
    currentStage = 1;
    isResources = false;
    $("#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: get_stages_url + "/" + keystage_id,
        type: "GET",
        dataType: "json",
    }).done(function (data) {
        // console.log(data.html);
        if (data.flagError) {
            showAlert(data.message, "error");
        } else {
            $("#table-row").html("");
            $("#table-row").append(data.html);
            init();
            showHide();
            checkNextlevel(".btn-eb");
            //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();

    //  })
}
const init = () =>{
    var buttonList = ['.btn-eb','.btn-cs','.btn-qt','.btn-sb','.btn-lv'];
    buttonList.forEach(element => {
        $(element).removeClass("active");
        $(element).addClass("grayscale");
        $(element).prop('disabled', true);
    });
    // $(".btn-eb").removeClass("active");
    // $(".btn-eb").addClass("grayscale");
    // $(".btn-cs").removeClass("active");
    // $(".btn-cs").addClass("grayscale");
    // $(".btn-qt").removeClass("active");
    // $(".btn-qt").addClass("grayscale");
    // $(".btn-sb").removeClass("active");
    // $(".btn-sb").addClass("grayscale");
    // $(".btn-lv").removeClass("active");
    // $(".btn-lv").addClass("grayscale");
    // $(".btn-eb").prop('disabled', true);
    // $(".btn-cs").prop('disabled', true);
    // $(".btn-qt").prop('disabled', true);
    // $(".btn-sb").prop('disabled', true);
    // $(".btn-lv").prop('disabled', true);
}
function showHide() {
  /*   let first_tr = $("#table-row").children("tr:first");
    $("#table-row").children("tr").hide();*/
    $("#clearButton_tr").show(); 
    // first_tr.show();
    // $('.btn-eb').removeClass('grayscale');
    // $('.btn-eb').prop('disabled', false);
}

const toggleButton = (selectedValue,button ,id) =>{
     if($(button +'-'+ id).hasClass('active')){
        $(selectedValue).val('');
        $(button).removeClass("active");
        $(button +'-'+ id).blur(); 
    }else{
        $(selectedValue).val(id);
        $(button).removeClass("active");
        $(button +'-' + id).addClass("active");
    } 
}

function setExamboard(board_id) {
    
    currentStage = 2;
    // $("#board_id").val(board_id);
    // $(".btn-eb").removeClass("active");
    // $(".btn-eb-" + board_id).addClass("active");
     toggleButton("#board_id",".btn-eb",board_id);
    // $("#comSep_tr").show();
    checkNextlevel(".btn-cs");
   
    //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);
    }
    else{
        $("#sel_board_id").val(0);
    }
    //checkAllSet();
}
    checkAllSet();
   

function setComsep(comsep_id) {
    currentStage = 3;
  /*   $("#comsep_id").val(comsep_id);
    $(".btn-cs").removeClass("active");
    $(".btn-cs-" + comsep_id).addClass("active"); */
    toggleButton("#comsep_id",".btn-cs",comsep_id);
    // $("#question_tr").show();
    checkNextlevel(".btn-qt");
    //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);
    }
    else{
        $("#sel_comsep_id").val(0);
    }
   // checkAllSet();
}

function setQuestiontype(question_type_id) {
    currentStage = 4;
    // $("#question_type_id").val(question_type_id);
    // $(".btn-qt").removeClass("active");
    // $(".btn-qt-" + question_type_id).addClass("active");
    // $("#subject_tr").show();
    toggleButton("#question_type_id",".btn-qt",question_type_id);
    checkNextlevel(".btn-sb");
    //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);
    }
    else{
        $("#sel_question_type_id").val(0);
    }
   // checkAllSet();
}

function setSubject(subject_id) {
    currentStage = 5;
    // $("#subject_id").val(subject_id);
    // $(".btn-sb").removeClass("active");
    // $(".btn-sb-" + subject_id).addClass("active");
    // $("#level_tr").show();
    toggleButton("#subject_id",".btn-sb",subject_id);
    checkNextlevel(".btn-lv");
    //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);
    }
    else{
        $("#sel_subject_id").val(0);
    }
   // checkAllSet();
}

function setLevel(level_id) {
    currentStage = 6;
    // $("#level_id").val(level_id);
    // $(".btn-lv").removeClass("active");
    // $(".btn-lv-" + level_id).addClass("active");
    toggleButton("#level_id",".btn-lv",level_id);
    //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);
    }
    else{
        $("#sel_level_id").val(0);
    }
    checkAllSet();
}

function checkAllSet() {
    var stage_count = $("#stage_count").val();
    var sel_stage = $("#sel_stage").val();
    var levelexist = $("#levelexist").val();
    var level_id = $("#level_id").val();
    //   if(stage_count==sel_stage)
    
    /*if (currentStage >= 5 || isResources) {
        setResources();
        isResources = true;
    }*/
  

    if ((currentStage == 5 && levelexist == 'N') || isResources) {
        $("#resource-list").html("");
        setResources();
        isResources = true;
    }
    else  if ((currentStage > 5 &&  level_id >0 ) || isResources) {
        $("#resource-list").html("");
        setResources();
        isResources = true;
    }
    else  if (currentStage > 1 || isResources) 
    {
        $("#resource-list").html("");
      //  setResources();
        isResources = true;
    }  
}

function setValues(){
    var keystage = $("#sel_keystage_id").val();
    var board = $("#board_id").val();
    var comsep = $("#comsep_id").val();
    var question_type = $("#question_type_id").val();
    var subject = $("#subject_id").val();
    var level = $("#level_id").val();console.log(level);

    if(board){//console.log($(".btn-eb-" + board).hasClass('grayscale')+'-'+board);
        //if(!$(".btn-eb-" + board).hasClass('grayscale')){
            $(".btn-eb-" + board).addClass("active");
        //} 
    } 
    if(comsep){//console.log($(".btn-cs-" + comsep).hasClass('grayscale')+'-'+comsep);
        //if(!$(".btn-cs-" + board).hasClass('grayscale')){
            $(".btn-cs-" + comsep).addClass("active");
        //} 
    } 
    if(question_type){//console.log($(".btn-qt-" + question_type).hasClass('grayscale')+'-'+question_type);
        if($(".btn-qt-" + question_type).hasClass('grayscale')){
            $("#question_type_id").val(0);
        }else{
            $(".btn-qt-" + question_type).addClass("active");
        }
    }
    if(subject){console.log('sb-'+$(".btn-sb-" + subject).hasClass('grayscale')+'-'+subject);
        if($(".btn-sb-" + subject).hasClass('grayscale')==true){
            console.log($("#subject_id").val()+' => '+subject);
            $("#subject_id").val(0);
            
        }else{
            $(".btn-sb-" + subject).addClass("active");
        } 
    }
    if(level){console.log('lv-'+$(".btn-lv-" + level).hasClass('grayscale')+'-'+level);
        //if(!$(".btn-cs-" + board).hasClass('grayscale')){
            $(".btn-lv-" + level).addClass("active");
        //} 
    }
    
}

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();

    if (keystage_id != "") {
        $.ajax({
            url: resource_url,
            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) {
            if(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 checkNextlevel(button){
    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();
    $.ajax({
        url: next_level_url,
        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: 0,
            currentStage,
            _token: token,
        },
    }).done(function (data) {
        if(parseInt(data.response.length)>0) {
            $("#levelexist").val('Y');
        }
        else{
            $("#levelexist").val('N');
        }
       setNextLevel(button,data.response);  
       checkAllSet();
       disableButtonBasedSelection();
    });
}

const setNextLevel = (button,data) =>{
    if(data.length){
    data.forEach(element => {
        $(button+'-'+element).removeClass('grayscale');
        $(button).removeClass('active');
        $(button+'-'+element).prop('disabled', false);
      });
    }else{console.log(button);
         $(button).addClass('grayscale');
         $(button).removeClass('active');
         $(button).prop('disabled', true);
    }
    //setValues();
}


function disableButtonBasedSelection(){
    var levelexist = $("#levelexist").val();
    switch(currentStage) {
        case 1:
            $('.btn-qt').removeClass('grayscale');
            $('.btn-qt').addClass('grayscale');
            $('.btn-qt').prop('disabled', true);
            $('.btn-sb').removeClass('grayscale');
            $('.btn-sb').addClass('grayscale');
            $('.btn-sb').prop('disabled', true);
            $('.btn-lv').removeClass('grayscale');
            $('.btn-lv').addClass('grayscale');
            $('.btn-lv').prop('disabled', true);
            $("#resource-list").html("<span class='side_list_message_style'>Select your exam board</span>");
            isResources = false;
        break;
        case 2:
           
            var combinedStatus = $("#comSep_tr").html();
            var result = "";
            $.each($(combinedStatus), function(i){
                    result += $(this).html().trim();
            });
            result.trim();
            if(result == '') {
                    $("#resource-list").html("<span class='side_list_message_style'>Select the type of booklet</span>");
                    isResources = false;  
                    $('.btn-qt').removeClass('grayscale');
                    $('.btn-qt').prop('disabled', false);
                    $('.btn-sb').removeClass('grayscale');
                    $('.btn-sb').addClass('grayscale');
                    $('.btn-sb').prop('disabled', true);
                    $('.btn-lv').removeClass('grayscale');
                    $('.btn-lv').addClass('grayscale');
                    $('.btn-lv').prop('disabled', true );
            }
            else{
                   $("#resource-list").html("<span class='side_list_message_style'>Select combined or seperate science</span>");
                    isResources = false;  
                    $('.btn-qt').removeClass('grayscale');
                    $('.btn-qt').addClass('grayscale');
                    $('.btn-qt').prop('disabled', true);
                    $('.btn-sb').removeClass('grayscale');
                    $('.btn-sb').addClass('grayscale');
                    $('.btn-sb').prop('disabled', true);
                    $('.btn-lv').removeClass('grayscale');
                    $('.btn-lv').addClass('grayscale');
                    $('.btn-lv').prop('disabled', true); 
           }
         break;
        case 3:
            ////
            $('.btn-sb').removeClass('grayscale');
            $('.btn-sb').addClass('grayscale');
            $('.btn-sb').prop('disabled', true);
            ////
            $('.btn-lv').removeClass('grayscale');
            $('.btn-lv').addClass('grayscale');
            $('.btn-lv').prop('disabled', true);
            ////
            $("#resource-list").html("<span class='side_list_message_style'>Select the type of booklet</span>");
            ////
            isResources = false;
            ////
         break;
        case 4:
            ////
            $('.btn-lv').removeClass('grayscale');
            $('.btn-lv').addClass('grayscale');
            $('.btn-lv').prop('disabled', true);
            ////
            $("#resource-list").html("<span class='side_list_message_style'>Select the subject</span>");
            ////
            isResources = false;
            ////
         break;
         case 5:
                if(levelexist == 'Y') {
                $("#resource-list").html("<span class='side_list_message_style'>Select higher or foundation</span>");
                   ////
                   isResources = false;
                }
                              
                
            ////
         //break;
    }
}
    </script>
<!--     <script src="{{ url('js/resources/resources.js') }}"></script> -->
@endsection