@extends('layouts.frontend')

@section('title', 'Teacher Directory - Kidscholl Academy')

@section('content')
    <!-- Page Header -->
    <section class="page-header text-center">
        <div class="container">
            <h1 class="page-header-title">Teacher Directory</h1>
            <p class="lead text-muted">Meet our qualified educators, trainers, and child counselors.</p>
        </div>
    </section>

    <!-- Teachers list -->
    <section class="section-padding bg-white pt-0">
        <div class="container">
            <div class="row">
                @forelse($teachers as $teacher)
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="kids-card card text-center p-4">
                            <div class="position-relative d-inline-block mx-auto mb-3">
                                @if($teacher->photo)
                                    <img src="{{ asset('storage/' . $teacher->photo) }}" alt="{{ $teacher->name }}" class="rounded-circle border border-5 border-white shadow-sm" style="width: 140px; height: 140px; object-fit: cover;">
                                @else
                                    <div class="rounded-circle bg-pastel-blue border border-5 border-white shadow-sm d-flex align-items-center justify-content-center mx-auto text-primary" style="width: 140px; height: 140px; font-size: 3rem;">
                                        <i class="bi bi-person-fill"></i>
                                    </div>
                                @endif
                                <span class="badge bg-danger position-absolute bottom-0 start-50 translate-middle-x rounded-pill px-3 py-1 text-sm">{{ $teacher->designation }}</span>
                            </div>
                            <h4 class="text-primary mt-2 mb-1">{{ $teacher->name }}</h4>
                            <p class="text-muted small fw-bold mb-3"><i class="bi bi-geo-alt-fill text-danger me-1"></i> {{ $teacher->branch->name }}</p>
                            
                            <div class="pt-3 border-top d-flex justify-content-around text-secondary small">
                                <div>
                                    <i class="bi bi-envelope-fill text-info"></i> {{ $teacher->email ?: 'N/A' }}
                                </div>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="col-12 text-center py-5">
                        <i class="bi bi-people-fill text-muted fs-1"></i>
                        <p class="text-muted mt-2">No teachers registered in directory.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </section>
@endsection