@extends('layouts.student')
@section('content')
<div class="app-content my-3 my-md-5 profile-1">
    <div class="side-app">
        <x-page.header>Our Teachers</x-page.header>
        <!-- Search Section -->
        <form action="{{ route('student.teacher.index') }}" method="get">
            <div class="mb-5">
                <div class="p-5 bg-white">
                    <div class="mt-3 item2-gl-nav">
                        <div class="d-block ">
                            <h5 class="mb-2 mt-0">@lang('student.filter by')</h5>
                            <div class="row">
                                <div class="col-md-8">
                                    <label class=" mt-3 mb-sm-1"> Course:</label>
                                    <select id="course" class="form-control select2-show-search" name="course">
                                        <option value="0" disabled selected>Select</option>
                                        @foreach ($courses as $course)
                                            <option value="{{ $course->cid }}">{{ $course->bname.'_'.$course->cname.' ( '.$course->lshort_name.' )' }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-2 mt-6">
                                    <input type="submit" id="submit" class="btn btn-primary br-te-7 br-be-7 "
                                        value="@lang('student.apply filter')">
                                        <a href="{{ route('student.teacher.index') }}" class="btn btn-danger br-te-7 br-be-7 ">
                                            Reset
                                        </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <!--End Search Section -->
        @if (request()->course)
        <div class="row py-5">
            @forelse ($teachers as $teacher)
                <div class="col-lg-4 col-md-12">
                    <div class="card">
                        <div class="product-item2">
                            <div class="product-item2-img text-center p-0">
                                @if ( !$teacher->image)
                                <img src="{{env('SECURE_ASSETS').'/images/users/instructor.png'}}" alt="img" class="w-100 h-20">
                                @else
                                    <img src="{{ $teacher->getImage($teacher->image) }}" alt="img" class="w-100 h-100">
                                @endif
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="product-item2-desc ">
                                <h3 class="font-weight-semibold text-dark"><a href="{{ route('student.teacher.teacherProfile',$teacher->ttid) }}" class=" text-default-dark">{{ $teacher->ttname }}</a></h3>
                                <p class="pt-2">{{ Str::limit(strip_tags($teacher->body), 80,'....') }}</p>
                                <div class="ms-auto position-absolute end-0 me-3 bottom-0 mb-3">
                                    <a class="viewmore-btn-icon viewmore-btn-icon-sm mx-1" href="{{ route('student.teacher.teacherProfile',$teacher->ttid) }}"><i class="fa fa-chevron-right"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
							<div class="item-card2-footer d-flex">
								<div class="item-card2-rating">
                                    @for ($r=1;$r <= 5; $r++)
									<a href="javascript:void(0)"><i class="fa fa-star{{ $r <= $teacher->rating ? '':'-o' }} text-warning"></i></a>
                                    @endfor
								</div>
								<div class="ms-auto">
									<a href="javascript:void(0)" class="location">({{ $teacher->teacher_courses_count }}) Courses</a>
								</div>
							</div>
						</div>
                    </div>
                </div>
                @empty
                <p class="text-center fw-bold" id="empty">No result</p>
            @endforelse
        </div>
        @endif
    </div>
</div>
@endsection