@extends('layouts.welcome')
@section('content')
<!-- Shape Start -->
<div class="relative py-3 bg-light">
    <div class="shape overflow-hidden text-white">
        <svg viewBox="0 0 2880 48" fill="none" xmsns="http://www.w3.org/2000/svg">
            <path d="M0 48H1437.5H2880V0H2160C1442.5 52 720 0 720 0H0V48Z" fill="#f5f4f9"></path>
        </svg>
    </div>
</div>
<!--Shape End-->

<!--User Profile-->
<section class="sptb  profile-1 d-flex">
    <div class="container">
        <div class="row justify-content-center">
            <div class="card col-md-10 py-xl-4 me-xl-5">
                <div class="card-body">
                    <div class="input-group">
                        <input type="search" id="searchbox"  class="form-control br-ts-7 br-bs-7" placeholder="Live Search">
                        <div class="input-group-text ">
                            <button type="button" class="btn btn-primary br-te-7 br-be-7" id="loader">
                                Search
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dimmer d-none" id="dimmer">
                <div class="spinner1">
                  <div class="double-bounce1"></div>
                  <div class="double-bounce2"></div>
                </div>
            </div>
            @foreach ($teachers as $teacher)
                <div class="card mb-3 col-md-3 me-xl-5 box">
                    <div class="card-body">
                        <a href="{{ route('homePage.teacher_profile',$teacher->id) }}">
                            <div class="d-flex">
                                @if ( !$teacher->image)
                                    <span class="avatar avatar-md d-block brround cover-image me-2" data-bs-image-src="{{$teacher->gender == 'male' ? env('SECURE_ASSETS').'/images/users/user-male.png' : env('SECURE_ASSETS').'/images/users/user-female.png'}}" ></span>
                                    @else
                                    <span class="avatar avatar-md d-block brround cover-image me-2" data-bs-image-src="{{ $teacher->getImage($teacher->image) }}" ></span>
                                @endif
                                <div class="my-auto"><a href="{{ route('homePage.teacher_profile',$teacher->id) }}" class="text-dark font-weight-semibold d-block">{{ $teacher->first_name.' '.$teacher->last_name }}</a></div>
                            </div>
                        </a>
                        <div class="ms-auto position-absolute end-0 bottom-0 mb-3">
                            <a class="viewmore-btn-icon viewmore-btn-icon-sm mx-1" href="{{ route('homePage.teacher_profile',$teacher->id) }}"><i class="fa fa-chevron-right"></i></a>
                        </div>
                    </div>
                </div>
            @endforeach
            <p class="text-center fw-bold d-none" id="empty">No results</p>
        </div>
    </div>
</section>
@endsection
@section('welcome-js')
<script>
    let cards = document.querySelectorAll('.box')

    function liveSearch() {
        let search_query = document.getElementById("searchbox").value;

        for (var i = 0; i < cards.length; i++) {
            if(cards[i].textContent.toLowerCase()
                    .includes(search_query.toLowerCase())) {
                $('#dimmer').addClass('d-none')
                $('#empty').addClass('d-none')
                cards[i].classList.remove("d-none");
                cards[i].classList.add('border-primary')

            }else {
                $('#dimmer').addClass('d-none')
                cards[i].classList.add("d-none");
            }
        }
    }


    //A little delay
    let typingTimer;
    let typeInterval = 500;
    let searchInput = document.getElementById('searchbox');

    searchInput.addEventListener('keyup', () => {
        $('#dimmer').removeClass('d-none')
        let loader = document.getElementById("loader");
        clearTimeout(typingTimer);
        typingTimer = setTimeout(liveSearch, typeInterval);
    });

</script>
@endsection