@extends('layout.default')
@section('page_toolbar')
    &nbsp;<a class="btn btn-success px-2 font-weight-bold btn-sm" href="{{ URL::previous() }}">
        <i class="fa fa-angle-double-left" aria-hidden="true"></i> Back
    </a>
@endsection
@section('content')
    <div class="loader" style="display: none;">
        <div class="loading"></div>
    </div>
    <!--begin::Content-->
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="container">
        <div class="row">
            @include('layout.top-ads')
            <div class="col-12 mb-5">
                <div class="subject-right-side">
                    <div class="subject-hed-section {{ $page->style_class }}">
                        <div class="col-md-12 pb-3">
                            <div class="row">
                                <div class="col-md-5">
                                    @php
                                        $allSubjects = App\Models\Subject::get();
                                    @endphp
                                    <ul>
                                        @foreach ($allSubjects as $sub)
                                            <li><a class="btn @if ($page->slug == $sub->slug) active @endif"
                                                    href="{{ url('teacher/video-quiz/' . $sub->slug) }}">
                                                    {{ $sub->name }}</a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                                <div class="col-md-7 search-newtop">
                                    <input class="form-control form-control-borderless" type="search" id="search"
                                        placeholder="Search">
                                    <button class="btn btn-success button-search" type="button"><i
                                            class="fa fa-search"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                    <!-- <h4>Browse resources by Topic </h4> -->
                    <div class="topic-list {{ $page->slug }}-topic-list overflow-auto">
                        <ul id="topicDiv">

                        </ul>
                    </div>
                </div>

                <div class="row syllubus-div mt-2 syllubus-divpad">

                </div>
            </div>
            @include('layout.bottom-ads')
        </div>
    </div>
@endsection
@section('styles')
    <style type="text/css">
        .header-fixed.subheader-fixed.subheader-enabled .wrapper {
            padding-top: 65px;
        }

        .subject-right-side {
            top: 65px;
        }

        @media(max-width: 990px) and (min-width: 768px) {
            .subject-right-side {
                top: 55px;
            }
        }

        @media(max-width: 767px) {
            .subject-right-side {
                top: 55px;
            }

            .row.syllubus-div {
                padding-top: 90px;
            }
        }

        .paid {
            color: #B2ACAB !important;
        }

    </style>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            var curriculum_id = '{{ $selcurriculum }}';
            $(".loader").show();
            setTopics(curriculum_id);
        });

        function setTopics(curriculum_id) {

            var country_id = 1;
            var curriculum_id = curriculum_id;
            var subject_id = '{{ $subject_id }}';
            var token = "{{ csrf_token() }}";
            var style_class = '{{ $page->style_class }}';
            $.ajax({
                url: "{{ url('teacher/subjects/topic/get') }}",
                type: "POST",
                data: {
                    'country_id': country_id,
                    'curriculum_id': curriculum_id,
                    'subject_id': subject_id,
                    'style_class': style_class,
                    _token: token
                },
            }).done(function(data) {

                if (data.status == true) {
                    $('#topicDiv').html(data.html);
                    $(".checkcurriculum").removeClass("active");
                    $("#curriculum_" + curriculum_id).addClass("active");
                    getSyllubus(curriculum_id);
                }
            })
        }

        function getSyllubus(curriculum_id) {
            var country_id = 1;
            var curriculum_id = curriculum_id;
            var subject_id = '{{ $subject_id }}';
            var token = "{{ csrf_token() }}";
            var style_class = '{{ $page->style_class }}';
            var search = $('#search').val();
            if (country_id != '' && curriculum_id != '' && subject_id != '') {
                $.ajax({
                    url: "{{ url('teacher/video-quiz/getSyllubus') }}",
                    type: "POST",
                    data: {
                        'country_id': country_id,
                        'curriculum_id': curriculum_id,
                        'subject_id': subject_id,
                        'search': search,
                        _token: token
                    },
                    dataType: "html"
                }).done(function(data) {
                    $(".syllubus-div").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');
                    $('#overlay').fadeOut();
                    $(".loader").hide();

                })
            }

        }

        $('.button-search').click(function() {
            var curriculum_id = '{{ $selcurriculum }}';
            setTopics(curriculum_id);

        });

        $('#search').keyup(function(e) {
            str = $('#search').val();
            if (str.length >= 0 || e.which == 13) {
                var curriculum_id = '{{ $selcurriculum }}';
                setTopics(curriculum_id);
            }
        });


        function gotoTopic(id) {
            var scrollPos = $("#topic-" + id).offset().top;
            $(window).scrollTop(scrollPos - 350);
        }

        var s = $(".topic-finder-search-section-wrapper");
        var pos = s.position();
        if (pos) {
            $(window).scroll(function() {
                var windowpos = $(window).scrollTop();
                if (windowpos >= pos.top) {
                    $('body.sticky-top-filters').addClass("stick");
                } else {
                    $('body.sticky-top-filters').removeClass("stick");
                }
            });
        }
        $(document).ready(function() {
            $('.filter-wrap .title').click(function() {
                $(this).parent().toggleClass('active');
            });

            $(".topic-list li").on("click", function() {
                $(this).addClass("active");
                $(this).siblings().removeClass("active");
                var href = $("a", this).attr('href');
                $(href).addClass('active');
                $(href).siblings().removeClass('active');
            });


            $('.mob-btns .btn-search').click(function() {
                $(this).toggleClass('active');
                $('.topic-finder-search-section-wrapper').toggleClass('active');
            });

            $('.mob-btns .btn-filter').click(function() {
                $(this).toggleClass('active');
                $('.sidebar-left').toggleClass('active');
            });

        });

        $(".cart_inner_row").click(function() {
            $(this).toggleClass("tog");
        });
    </script>
@endsection