@extends('website.layout.master')
@section('content')

<div class="section top-courses-3-section mb-3">
    <div class="container">
        <div class="hero-content-5">
            <h2 class="title" data-aos="fade-up" data-aos-delay="400">Search Your <span>Teacher</span></h2>
        </div>
        <div class="hero-form col-md-6">
            <form method="post" action="{{route('search.teachers')}}">
                @csrf
                <input type="text" class="w-100" name="teacher_name" placeholder="What do you want to learn?" required>
                <button class="btn btn-hover-heading-color" type="submit"><i
                        class="fa fa-search text-white"></i></button>
            </form>
        </div>
        <div class="top-courses-wrapper mt-5">
            <div class="section-title text-center">
                <h2 class="title">Explore Popular Teacher</h2>
            </div>
            <div class="top-courses-content-wrapper">
                <div class="row">
                    @php
                    $count = 0;
                    @endphp
                    @if(isset($data))
                    @foreach($data as $d)
                    @php
                    $count++;
                    @endphp
                    <div class="col-lg-3 col-sm-6 course-cooking" @if($count> 12) style="display:none;" @endif>
                        <div class="single-course">
                            <div class="courses-image">

                                <a href="{{route('single.teachers',$d?$d->id:'')}}">
                                    @if($d->image)
                                    <img height="200" width="100" src="{{$d?$d->image:''}}" alt="Courses">
                                    @endif
                                    {{-- <img height="200" width="100" src="{{asset('assets/images/imagee.png')}}"
                                    alt="Courses"> --}}

                                </a>
                            </div>
                            <div class="courses-content">
                                <div class="courses-author">
                                    <h4 class="name mx-auto">{{$d?$d->firstname:''}} {{$d?$d->lastname:''}}</h4>
                                </div>
                            </div>
                            <div class="courses-meta">
                                <div class="course-enroll-rating mx-auto">
                                    <div class="cardicon mt-1">
                                        <div class="cardicon mt-1 d-flex">
                                            @if ($d->user && $d->user->rating)
                                            @for ($i = 1; $i <= $d->user->rating; $i++)
                                                <i class="color_star fa fa-star"></i>
                                                @endfor
                                                @for ($i = $d->user->rating + 1; $i <= 5; $i++) <i
                                                    class="color_star far fa-star"></i>
                                                    @endfor
                                                    <span class="rating">{{ $d->user->rating }}</span>
                                                    @else
                                                    @for ($i = 1; $i <= 5; $i++) <i class="color_star far fa-star"></i>
                                                        @endfor
                                                        @endif


                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                    @endif
                </div>
                <div class="row mx-auto mt-2" @if($count < 12) style="display:none;" @endif>
                    <div class="mx-auto col-2">
                        <button id="viewAllButton" class="btn">View All</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var viewAllButton = document.getElementById('viewAllButton');
    viewAllButton.addEventListener('click', function() {
        var hiddenItems = document.querySelectorAll('.course-cooking[style="display:none;"]');
        hiddenItems.forEach(function(item) {
            item.style.display = 'block';
        });
        viewAllButton.style.display = 'none';
    });
});
</script>
@endsection