@extends("layouts.app_new")
@section("title")
    CCKH Courses
@endsection
@section("content")
 <section class="courses-area ptb-70">
            <div class="container">
                <div class="tab products-details-tab">
                        <div class="row">
                            <div class="col-md-3 order-details">
                                <div class="courses-topbar">
                                    <div class="topbar-search">
                                        <div class="search-overlay-form filter-s">
                                            <form method="get">
                                                <input class="input-search q"  type="search" value="{{isset($_GET['q']) ?$_GET['q'] : ''}}" name="q" id="q" placeholder="Search here..." />
                                                <input 
                                                type="hidden" 
                                                name="order" 
                                                value="{{isset($_GET['order']) ?$_GET['order'] : ''}}" 
                                                id="order2"
                                                >


                                                <input 
                                                    type="hidden" 
                                                    name="course_language_id" 
                                                    value="{{isset($_GET['course_language_id']) ?$_GET['course_language_id'] : ''}}" 
                                                    class="course_language_id"
                                                >
                                        <input 
                                                type="hidden" 
                                                name="course_category_id" 
                                                value="{{isset($_GET['course_category_id']) ?$_GET['course_category_id'] : ''}}" 
                                                class="course_category_id"
                                        >
                                                <button type="submit" class="save_btn"><i class="bx bx-search-alt"></i></button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <form method="http://cckhdev.intrazero.com/experts" id="Institution-form">
                                    <div class="payment-box courses-details-desc">
                                        <div class="courses-accordion">
                                            <h5 class="title-filter">Language</h5>
                                
                                                <select class="form-control" id="option">    
                                                        <option value=""> language</option>
                                                        @foreach($CourseLanguages as $CourseLanguage)
                                                        <option value="{{$CourseLanguage->id}}" {{isset($_GET['course_language_id']) && $_GET['course_language_id']==$CourseLanguage->id ?'selected' :''}}> {{$CourseLanguage->name}}  </option>
                                                        @endforeach

                                                </select>
                                            <h5 class="title-filter">Choose Category</h5>
                                                <select class="form-control" id="option2">    
                                                        <option value=""> category</option>
                                                        @foreach($CourseCategories as $category)
                                                        <option value="{{$category->id}}" {{isset($_GET['course_category_id']) && $_GET['course_category_id']==$category->id ?'selected' :''}}> {{$category->name}}  </option>
                                                        @endforeach

                                                </select>
                                        </div>
                                        <input 
                                                type="hidden" 
                                                name="course_language_id" 
                                                value="{{isset($_GET['course_language_id']) ?$_GET['course_language_id'] : ''}}" 
                                                id="course_language_id"
                                        >
                                        <input 
                                                type="hidden" 
                                                name="q" 
                                                value="{{isset($_GET['q']) ?$_GET['q'] : ''}}" 
                                        >

                                        <input 
                                                type="hidden" 
                                                name="course_category_id" 
                                                value="{{isset($_GET['course_category_id']) ?$_GET['course_category_id'] : ''}}" 
                                                id="course_category_id"
                                        >
                                        <input 
                                                type="hidden" 
                                                name="order" 
                                                value="{{isset($_GET['order']) ?$_GET['order'] : ''}}" 
                                                id="order"
                                        >

                                        <button class="filter_btn" type="submit">Filter</button>
                                    </div>
                                </form>
                            </div>

                            <div class="col-md-9">
                                <div class="col-lg-12 col-md-12">
                                    <ul class="tabs active">
                                        <li class="current">
                                            <a href="{{url('courses')}}">
                                                <i class="bx bx-pin"></i>
                                                CCKH Courses
                                            </a>
                                        </li>

                                        <li >
                                            <a href="{{url('courses-search')}}">
                                                <i class="bx bx-pin"></i>
                                                External Courses
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="col-lg-12 col-md-12">
                                    <br>
                                    <div class="">
                                        <div class="tabs-item">
                                            <div class="courses-topbar">
                                                <div class="row align-items-center">
                                                    <div class="col-lg-4 col-md-4">
                                                        <div class="topbar-result-count">
                                                            <p>Showing ( {{$courses->total()}} ) results</p>
                                                        </div>
                                                    </div>

                                                    <div class="col-lg-8 col-md-8">
                                                        <div class="topbar-ordering-and-search">
                                                            <div class="row align-items-center">
                                                                <div class="col-md-6">
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="topbar-ordering">
                                                                        <select id="orderSelect" name="order" class="form-control">
                                                                            <option selected value="latest">Latest</option>
                                                                            <option {{isset($_GET['order']) && $_GET['order']=='oldest' ?'selected' :''}} value="oldest">Oldest</option>
                                                                            <option {{isset($_GET['order']) && $_GET['order']=='popularity' ?'selected' :''}} value="popularity">Popularity</option>
                                                                        </select>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">


                                                @foreach($courses as $course)
                                                    @include("user.courses.partials.courses.CourseCard",["course"=>$course,"col_md"=>6])
                                                @endforeach


                                                <div class="col-lg-12 col-md-12 col-sm-12">
                                                    <div class="pagination-area text-center">
                                                        {{ $courses->links() }}

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


                                    </div>
                                </div>
                            </div>
                        </div>
                </div>
            </div>
        </section>
@endsection
@section("script")
<script type="text/javascript">
    

$("#option").on("change",function(){

value = $(this).val()
$("#course_language_id").val(value)
})

$("#option2").on("change",function(){

value = $(this).val()
$("#course_category_id").val(value)
})


$("#orderSelect").on("change",function(){

    value = $(this).val()
    $("#order").val(value)
    $("#order2").val(value)
    $(".filter_btn").trigger("click")
})

</script>
@endsection