@extends('public.layout.app')
@section('title', 'Faculty Profiles')

@section('body')
<section class="section pt-5">
    <div class="container">
        <div class="glass shadow-soft p-4 p-lg-5 mb-4">
            <div class="row g-4 align-items-end">
                <div class="col-lg-8">
                    <div class="badge-soft d-inline-flex align-items-center gap-2 mb-2">
                        <i class="fa-solid fa-chalkboard-user"></i> Faculty Profiles
                    </div>
                    <h1 class="fw-bold mb-2">Meet the academic team</h1>
                    <p class="text-muted2 mb-0">Browse instructors by department, qualification, and specialization.</p>
                </div>
                <div class="col-lg-4">
                    <form method="GET" action="{{ route('front.faculty_profiles.index') }}" class="d-flex gap-2">
                        <input name="q" value="{{ $q }}" class="form-control" placeholder="Search faculty">
                        <button class="btn btn-accent"><i class="fa-solid fa-search"></i></button>
                    </form>
                </div>
            </div>
        </div>

        <div class="row g-4">
            @forelse($teachers as $teacher)
                <div class="col-md-6 col-xl-4">
                    <div class="card-soft shadow-soft p-4 h-100">
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <div class="faculty-avatar">{{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($teacher->name, 0, 1)) }}</div>
                            <div>
                                <h5 class="fw-bold mb-0">{{ $teacher->name }}</h5>
                                <span class="text-muted2 small">{{ $teacher->department ?? 'Academic faculty' }}</span>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap gap-2 mb-3">
                            @if($teacher->qualification)<span class="badge-soft">{{ $teacher->qualification }}</span>@endif
                            @if($teacher->specialization)<span class="badge-soft">{{ $teacher->specialization }}</span>@endif
                        </div>
                        <div class="text-muted2 small">
                            @if($teacher->email)<div><i class="fa-regular fa-envelope me-2"></i>{{ $teacher->email }}</div>@endif
                            @if($teacher->phone)<div><i class="fa-solid fa-phone me-2"></i>{{ $teacher->phone }}</div>@endif
                            @if($teacher->joining_date)<div><i class="fa-regular fa-calendar me-2"></i>Joined {{ \Carbon\Carbon::parse($teacher->joining_date)->format('Y') }}</div>@endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12"><div class="alert alert-soft">No faculty profiles found yet.</div></div>
            @endforelse
        </div>

        @if($teachers->hasPages())
            <div class="d-flex justify-content-center mt-4">{{ $teachers->links('pagination::bootstrap-4') }}</div>
        @endif
    </div>
</section>
@endsection

@push('styles')
<style>
    .faculty-avatar{width:58px;height:58px;border-radius:18px;background:rgba(245,158,11,.16);color:#7c4a03;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:24px;flex:0 0 58px}
</style>
@endpush