@extends('layouts.front')

@section('content')
    <section id="page-banner" class="pt-105 pb-110 bg_cover" data-overlay="8"
        style="background-image: url(images/page-banner-2.jpg)">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="page-banner-cont">
                        <h2>Our Courses</h2>
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('front.index') }}">Home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">Topics</li>
                            </ol>
                        </nav>
                    </div> <!-- page banner cont -->
                </div>
            </div> <!-- row -->
        </div> <!-- container -->
    </section>

    <!--====== PAGE BANNER PART ENDS ======-->

    <!--====== COURSES PART START ======-->

    <section id="courses-part" class="pt-120 pb-120 gray-bg">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="courses-top-search">
                        <ul class="nav float-left" id="myTab" role="tablist">
                            <li class="nav-item">
                                <a class="active" id="courses-grid-tab" data-toggle="tab" href="#courses-grid"
                                    role="tab" aria-controls="courses-grid" aria-selected="true"><i
                                        class="fa fa-th-large"></i></a>
                            </li>
                            <li class="nav-item">
                                <a id="courses-list-tab" data-toggle="tab" href="#courses-list" role="tab"
                                    aria-controls="courses-list" aria-selected="false"><i class="fa fa-th-list"></i></a>
                            </li>
                        </ul> <!-- nav -->


                        <div class="courses-search float-right">
                            <form action="#">
                                <input type="text" placeholder="Search">
                                <button type="button"><i class="fa fa-search"></i></button>
                            </form>
                        </div> <!-- courses search -->
                        <form action="{{ route('front.topicslist') }}" method="GET">
                            <div class="row">
                                <div class="col-md-4">
                                    <label>Grade</label>
                                    <select class="form-control" name="grade">
                                        <option value="0">All</option>
                                        @foreach($allgrades as $allg)
                                        <option value="{{$allg->id}}" @if($allg->id == $cgrade) selected @endif>{{$allg->title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label>Subject</label>
                                    <select class="form-control" name="subject">
                                        <option value="0">All</option>
                                        @foreach($allsubjects as $alls)
                                        <option value="{{$alls->id}}" @if($alls->id == $csubject) selected @endif>{{$alls->title}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4" style="margin-top:35px;">
                                    <input type="submit" class="btn-sm btn-success" value="Find" />
                                </div>
                            </div>
                        </form>
                    </div> <!-- courses top search -->
                </div>
            </div> <!-- row -->
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="courses-grid" role="tabpanel" aria-labelledby="courses-grid-tab">
                    <div class="row">

                        @foreach ($alltopics as $atopic)
                            <div class="col-lg-4 col-md-6">
                                <div class="singel-course mt-30">
                                    <div class="thum">
                                        <div class="image">
                                            <img src="{{ asset('banners/' . $atopic->banner) }}" alt="Course" style="height: 250px;">
                                        </div>
                                        <div class="price">
                                            <span @if($atopic->is_paid == 1) style="background:red;color:white" @endif>{{ $atopic->is_paid == 1 ? 'Premium' : 'Free' }}</span>
                                        </div>
                                    </div>
                                    <div class="cont">
                                        <ul>
                                            <li><i class="fa fa-star"></i></li>
                                            <li><i class="fa fa-star"></i></li>
                                            <li><i class="fa fa-star"></i></li>
                                            <li><i class="fa fa-star"></i></li>
                                            <li><i class="fa fa-star"></i></li>
                                        </ul>
                                        <span>(20 Reviws)</span>
                                        <br>
                                        <a href="{{ route('front.topic', $atopic->slug) }}">
                                            <h4>{{ $atopic->title }}</h4>
                                        </a>
                                        <div class="course-teacher">
                                            <div class="name">
                                                <a href="{{ route('front.topic', $atopic->id)}}">
                                                    <h6>{{ $atopic->grade->title ?? (null . '/' . $atopic->subject->title ?? null) }}
                                                    </h6>
                                                </a>
                                            </div>
                                            <div class="admin">
                                                <ul>
                                                    <li><a href="#"><i class="fa fa-user"></i><span>{{$atopic->getstudents()->count()}}</span></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div> <!-- singel course -->
                            </div>
                        @endforeach
                    </div> <!-- row -->
                </div>
                <div class="tab-pane fade" id="courses-list" role="tabpanel" aria-labelledby="courses-list-tab">
                    <div class="row">
                        @foreach ($alltopics as $atopic)
                            <div class="col-lg-12">
                                <div class="singel-course mt-30">
                                    <div class="row no-gutters">
                                        <div class="col-md-6">
                                            <div class="thum">
                                                <div class="image">
                                                    <img src="{{ asset('banners/' . $atopic->banner) }}" alt="Course">
                                                </div>
                                                <div class="price">
                                                    <span @if($atopic->is_paid == 1) style="background:red;color:white" @endif>{{ $atopic->is_paid == 1 ? 'Premium' : 'Free' }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="cont">
                                                <ul>
                                                    <li><i class="fa fa-star"></i></li>
                                                    <li><i class="fa fa-star"></i></li>
                                                    <li><i class="fa fa-star"></i></li>
                                                    <li><i class="fa fa-star"></i></li>
                                                    <li><i class="fa fa-star"></i></li>
                                                </ul>
                                                <span>(20 Reviws)</span>
                                                <a href="{{ route('front.topic', $atopic->slug) }}">
                                                    <h4>{{ $atopic->title }}</h4>
                                                </a>
                                                <div class="course-teacher">

                                                    <div class="name">
                                                        <a href="#">
                                                            <h6>{{ $atopic->grade->title ?? (null . '/' . $atopic->subject->title ?? null) }}
                                                            </h6>
                                                        </a>
                                                    </div>
                                                    <div class="admin">
                                                        <ul>
                                                            <li><a href="#"><i
                                                                        class="fa fa-user"></i><span>{{$atopic->getstudents()->count()}}</span></a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div> <!--  row  -->
                                </div> <!-- singel course -->
                            </div>
                        @endforeach
                    </div> <!-- row -->
                </div>
            </div> <!-- tab content -->

        </div> <!-- container -->
    </section>
@endsection

@section('scripts')
@endsection