<style>
    .instructor-img-holder{
        width:100%;
        height:14em;
        overflow:hidden;
    }
    .instructor-img{
        width:100%;
        height:100%;
        object-fit: cover;
        object-position: center center;
        transition: all .3s ease-in-out;
    }
    .instructor-item:hover .instructor-img{
        transform: scale(1.2)
    }
    #search:empty{
        font-style:italic;
    }
    #search{
        border-right:unset !important;
        border-top-right-radius:0px !important;
        border-bottom-right-radius:0px !important;
    }
    #search-icon{
        border-left:unset !important;
        border-top-left-radius:0px !important;
        border-bottom-left-radius:0px !important;
    }
    #search:focus{

    }
</style>
<section class="py-2">
	<div class="container">
		<div class="bg-gradient-primary py-5 px-3">
            <div class="clear-flex my-5"></div>
		</div>
		<div class="row justify-content-center" style="margin-top:-6em">
            <div class="col-lg-10 col-md-11 col-sm-11 col-sm-11">
                <div class="card card-outline rounded-0">
                    <div class="card-body">
			            <h2 class="mt-3 text-center">List of Music Instructors</h2>
                        <center>
                            <hr class="bg-primary" style="opacity:1;height:2px;width:5em">
                        </center>
                        <br>
                        <div class="row justify-content-center my-3">
                            <div class="col-lg-8 col-md-10 col-xs-12 col-sm-12">
                                <div class="input-group input-group-lg">
                                    <input type="search" id="search" class="form-control rounded-pill px-3 border-light" placeholder="Find instructor by name or description">
                                    <span class="btn btn-outline border rounded-pill text-light" id="search-icon" type="button"><i class="fa fa-search"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="row row-cols-xl-4 row-md-3 col-sm-12 col-xs-12 gy-3 gx-3 align-items-center justify-content-center">
                            <?php 
                                $qry = $conn->query("SELECT *, CONCAT(lastname,', ', firstname,COALESCE(concat(' ',middlename),'')) as `name` FROM `instructor_list` where delete_flag = 0 and `status` = 1 order by `name` asc");
                                while($row = $qry->fetch_assoc()):
                            ?>
                            <div class="col instructor-item">
                                <a class="card rounded-0 shadow instructor-item text-decoration-none text-reset" href="./?p=instructors/view_instructor&id=<?= $row['id'] ?>">
                                    <div class="position-relative">
                                        <div class="img-top position-relative instructor-img-holder">
                                            <img src="<?= validate_image($row['image_path']) ?>" alt="" class="instructor-img">
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <div style="line-height:1em">
                                            <div class="card-title w-100"><?= $row['name'] ?></div>
                                            <div class="card-description w-100 truncate-3"><small class="text-muted">Instructor for: <?= strip_tags(htmlspecialchars_decode($row['instructor_for'])) ?></small></div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <?php endwhile; ?>
                        </div>
                    </div>
                </div>
            </div>
		</div>
	</div>
</section>
<script>
    $(function(){
        $('#search').on('input change', function(){
            var _f = $(this).val().toLowerCase()
            $('.instructor-item').each(function(){
                var txt = $(this).text().toLowerCase()
                if(txt.includes(_f)){
                    $(this).toggle(true)
                }else{
                    $(this).toggle(false)
                }
            })
        })
    })
</script>