@include('frontend.header')

   <!-- popup search -->
   <div class="search-popup">
       <button class="close-search"><span class="far fa-times"></span></button>
       <form action="#">
           <div class="form-group">
               <input type="search" name="search-field" placeholder="Search Here..." required />
               <button type="submit"><i class="far fa-search"></i></button>
           </div>
       </form>
   </div>
   <!-- popup search end -->

   <main class="main">
       <!-- breadcrumb -->
       <div class="site-breadcrumb" style="background: url(assets/img/breadcrumb/01.png)">
           <div class="container">
               <h2 class="breadcrumb-title">Academic Leadership</h2>
               <ul class="breadcrumb-menu">
                   <li><a href="#">Home</a></li>
                   <li class="active">Academic Leadership</li>
               </ul>
           </div>
       </div>
       <!-- breadcrumb end -->

       <section class="tgasc-hods-section">
           <div class="container">
               <div class="tgasc-hods-header">
                   <h2>Academic Leadership - Heads of Departments</h2>
                   <p class="text-muted">
                       Tagore Government Arts and Science College, Puducherry
                   </p>
               </div>

               <div class="row g-4">

    @foreach($departments as $department)
        @foreach($department->faculties as $hod)

            <div class="col-12 col-sm-6 col-lg-4">
                <div class="tgasc-hods-card">
                    <div class="tgasc-hods-card-top"></div>

                    <div class="tgasc-hods-card-body text-center">
                        <h5>{{ $hod->name }}</h5>
                        <p>HOD of {{ $department->department }}</p>

                        <a href="{{ route('faculty.profile', $hod->id) }}"
                           class="tgasc-hods-btn">
                           View More
                        </a>
                    </div>
                </div>
            </div>

        @endforeach
    @endforeach

</div>

           </div>
       </section>
   </main>

   @include('frontend.footer')