@extends('master')
@section('content')
<main class="p-6 flex-1">
    <header>
        <h2 class="text-xl font-bold text-gray-900">
            {{ __('Barangay Officials') }}
        </h2>
        <p class="mt-1 text-md text-gray-600">
            {{ __('View the official members of the barangay') }}
        </p>
    </header>

    <section class="mt-4 p-4 mb-6">
        @foreach ($officials as $layer => $layerOfficials)
            <div class="layer-group mb-10">
                <div class="flex flex-wrap justify-center gap-4 mb-6">
                    @foreach ($layerOfficials as $official)
                        <div class="bg-white p-4 rounded shadow w-fit text-center">
                            <img src="{{ $official->image ? asset('storage/official/images/' . $official->image) : asset('storage/official/images/default.jpg') }}"
                                    onerror="this.onerror=null;this.src='{{ asset('storage/official/images/default.jpg') }}';"
                                    alt=""
                                    alt="{{ $official->position }}"
                                    class="rounded-sm border w-40 h-40 object-cover mx-auto">
                            <h4 class="font-semibold mt-2">{{ $official->name }}</h4>
                            <p class="text-gray-600">{{ $official->position }}</p>
                            <p class="text-gray-600 text-xs">{{ $official->start_term ? date('M. d, Y', strtotime($official->start_term)) : ''  }} to {{ $official->end_term ? date('M. d, Y', strtotime($official->end_term)) : ''   }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    </section>
</main>
@endsection