@extends('frontend.layouts.app')
@section('title')
    Teacher List
@endsection
@push('style')
@endpush
@section('content')
    @include('frontend.layouts.include.breadcrumb', [
        'items' => [['name' => 'Teacher List', 'url' => null]],
    ])
    <div class="main-content">
        <div class="container-fluid my-4">
            <div class="row justify-content-center">
                @foreach ($top_staffs as $tstaff)
                    <div class="col-12 col-md-2 mb-5">
                        <div class="team-card">
                            <img src="{{ asset($tstaff->photo) }}" alt="{{ $tstaff->name }}" />
                            <div class="team-name">
                                <h5>{{ $tstaff->name }}</h5>
                                <div class="designation">{{ $tstaff->designation->name }}</div>
                            </div>
                            <div class="team-overlay">
                                <h5>{{ $tstaff->name }}</h5>
                                <p>{{ $tstaff->designation->name }}</p>
                                <p>{{ $tstaff->qualification }}</p>
                                <p>{{ $tstaff->phone }}</p>
                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
        <div class="container-fluid my-4">
            @foreach ($departments as $department)
                <h4 style="text-transform: uppercase;">{{ $department->name }}</h4>
                <div class="row justify-content-center">
                    @foreach ($department->member as $member)
                        <div class="col-12 col-md-2 mb-5">
                            <div class="team-card">
                                <img src="{{ asset($member->photo) }}" alt="{{ $member->name }}" />
                                <div class="team-name">
                                    <h5>{{ $member->name }}</h5>
                                    <div class="designation">
                                        {{ $member->designation->name }}
                                    </div>
                                </div>
                                <div class="team-overlay">
                                    <h5>{{ $member->name }}</h5>
                                    <p>{{ $member->designation->name }}</p>
                                    <p>{{ $member->qualification }}</p>
                                    <p>{{ $member->phone }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach

                </div>
            @endforeach
        </div>
        <div class="mb-5">
            {{ $departments->links('vendor.pagination.frontend') }}
        </div>
    </div>
@endsection
@push('script')
@endpush