@extends('layouts.frontend')
@section('main-content')

    <section id="guru" class="py-16 bg-gray-100">
        <div class="container mx-auto px-4">
            <div class="relative rounded-lg overflow-hidden mb-8">
                <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('{{asset('assets/admin/images/breadcum.jpg')}}');"></div>
                <div class="absolute inset-0 bg-gradient-to-r from-yellow-400/70 via-yellow-200/30 to-emerald-600/70"></div>
                
                <div class="relative z-10 max-w-7xl mx-auto px-4 py-5 md:py-9 flex flex-col md:flex-row md:items-center md:justify-between">
                    
                    <div>
                        <h1 class="text-2xl md:text-4xl font-bold text-white">Data Guru & Karyawan</h1>
                        <p class="mt-2 text-white/85 max-w-xl">Daftar Guru & Karyawan lengkap dengan informasi singkat.</p>
                    </div>

                    <nav class="text-sm text-white/95 mt-4 md:mt-0" aria-label="Breadcrumb">
                        <ol class="list-reset flex items-center space-x-2 justify-start md:justify-end">
                            <li><a href="{{ url('/') }}" class="hover:underline text-white">Beranda</a></li>
                            <li class="text-white/60">/</li>
                            <li class="text-white font-semibold">Data Guru & Karyawan</li>
                        </ol>
                    </nav>
                </div>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                <!-- Guru 1 -->
                @foreach($employee as $v)
                <div class="bg-white rounded-lg shadow-lg overflow-hidden text-center">
                    @if ($v->source == NULL)
                        <img src="{{ asset('assets/admin/images/avatar.png') }}" alt="default image" class="w-full h-49 object-cover">
                    @else
                      <img src="{{ asset('storage/uploads/employee/'.$v->source) }}" alt="{{$v->title}}" class="w-full h-49 object-cover">
                    @endif
                    <div class="p-4">
                        <h3 class="text-lg font-bold">{{$v->fullname}}</h3>
                        <p class="text-primary-green">{{$v->position}}</p>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="mt-8 flex justify-center">
                {{ $employee->onEachSide(0)->links() }}
            </div>
        </div>
    </section>

@endsection