@extends('front.layouts.app')
@section('title', 'Evêques et Archevêques de CI')

@push('css')
    <style>
        /* Card Design (Uniforme avec le clergé) */
        .avatar-img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            border: 2px solid #fff;
            transition: transform 0.3s ease;
        }

        .avatar-img:hover {
            transform: scale(1.1);
        }

        .clergy-card {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            padding: 30px;
            border-top: 5px solid #cf081b; /* Border Top Rouge conservé */
            margin-bottom: 30px;
        }

        .clergy-card h3 {
            font-size: 1.5rem;
            color: #333;
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
            text-transform: uppercase;
        }

        /* Table Styling */
        .clergy-card table th {
            color: #fff; /* Texte blanc sur fond coloré */
            font-weight: 700;
            text-transform: uppercase;
            font-size: 1rem;
            letter-spacing: 0.5px;
            padding: 15px !important;
            vertical-align: middle !important;
            border-bottom: none !important;
        }

        .clergy-card table td {
            vertical-align: middle !important;
            padding: 12px 15px !important;
            border-bottom: 1px solid #f9f9f9;
            font-size: 1.2rem;
            color: #555;
        }

        .clergy-card table tr:hover td {
            background-color: #fafafa;
        }
    </style>
@endpush

@section('content')
    <!--== Start Page Title Area ==-->
    <x-title image="assets/img/sector.jpg" page="Évêques et Archevêques de Côte d'Ivoire" />
    <!--== End Page Title Area ==-->

    @foreach($dioceses as $diocese)
        {{-- Afficher la section uniquement si le diocèse a des évêques ou archevêques --}}
        @if($diocese->bishops->isNotEmpty())
            {{-- Alternance couleur fond --}}
            <div class="{{ $loop->iteration % 2 == 0 ? 'bg-gray' : '' }} help-step-area default-padding">
                <div class="container">
                    <div class="row">
                        {{-- 1. NOM DU DIOCESE --}}
                        <div class="site-heading text-center">
                            <div class="col-md-8 col-md-offset-2">
                                <h2>{{ strtoupper($diocese->full_name) }}</h2>
                                {{-- 2. DESCRIPTION --}}
                                @if($diocese->description)
                                    <p>{{ $diocese->description }}</p>
                                @endif
                            </div>
                        </div>

                        <div class="col-md-12 items">
                            <div class="row">
                                {{-- 3. TABLEAU ARCHEVEQUES (si le diocèse en a) --}}
                                @if($diocese->archbishops->isNotEmpty())
                                    <div class="col-md-10 col-md-offset-1">
                                        <div class="clergy-card">
                                            <h3 class="text-center">
                                                <strong>ARCHEVÊQUES</strong>
                                            </h3>
                                            <div class="table-responsive">
                                                <table class="table table-hover dt-responsive nowrap">
                                                    <thead style="background-color: #cf081b;">
                                                    <tr>
                                                        <th class="text-center">PHOTO</th>
                                                        <th class="text-center">NOM</th>
                                                        <th class="text-center">DATE NAISSANCE</th>
                                                        <th class="text-center">ORD. SACERDOTALE</th>
                                                        <th class="text-center">ORD. EPISCOPALE</th>
                                                        <th class="text-center">SIÈGE</th>
                                                        <th class="text-center">CONTACT</th>
                                                        <th class="text-center">EMAIL</th>
                                                        @if($diocese->archbishops->first()->custom_fields)
                                                            @foreach($diocese->archbishops->first()->custom_fields ?? [] as $field)
                                                                <th class="text-center">{{ strtoupper($field['label'] ?? '') }}</th>
                                                            @endforeach
                                                        @endif
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($diocese->archbishops as $archbishop)
                                                        <tr>
                                                            <td class="text-center">
                                                                @if(empty($archbishop->getFirstMediaUrl('bishop-img')))
                                                                    <img src="{{asset('assets/img/priest.png')}}" class="avatar-img" alt="Avatar" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;">
                                                                @else
                                                                    <img src="{{$archbishop->getFirstMediaUrl('bishop-img')}}" class="avatar-img" alt="{{ $archbishop->name }}" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;">
                                                                @endif
                                                            </td>
                                                            <td class="text-center" style="font-weight: 600; color: #333;">
                                                                @if($archbishop->title){{ $archbishop->title }}
                                                                @endif{{ $archbishop->name }}
                                                            </td>
                                                            <td class="text-center">{{ $archbishop->birth_date?->format('d/m/Y') ?? '-' }}
                                                            </td>
                                                            <td class="text-center">
                                                                {{ $archbishop->ordination_sacerdotale?->format('d/m/Y') ?? '-' }}</td>
                                                            <td class="text-center">
                                                                {{ $archbishop->ordination_episcopale?->format('d/m/Y') ?? '-' }}</td>
                                                            <td class="text-center">{{ $archbishop->episcopal_seat ?? '-' }}</td>
                                                            <td class="text-center">{{ $archbishop->contact_secretariat ?? '-' }}</td>
                                                            <td class="text-center">{{ $archbishop->email ?? '-' }}</td>
                                                            @foreach($archbishop->custom_fields ?? [] as $field)
                                                                <td class="text-center">{{ $field['value'] ?? '-' }}</td>
                                                            @endforeach
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                {{-- 4. TABLEAU EVEQUES (si le diocèse en a) --}}
                                @if($diocese->bishops_only->isNotEmpty())
                                    <div class="col-md-10 col-md-offset-1" style="margin-top: {{ $diocese->archbishops->isNotEmpty() ? '10px' : '0' }}">
                                        <div class="clergy-card" style="border-top-color: #feac05;">
                                            <h3 class="text-center">
                                                <strong>ÉVÊQUES</strong>
                                            </h3>
                                            <div class="table-responsive">
                                                <table class="table table-hover dt-responsive nowrap">
                                                    <thead style="background-color: #feac05;">
                                                    <tr>
                                                        <th class="text-center">PHOTO</th>
                                                        <th class="text-center">NOM</th>
                                                        <th class="text-center">DATE NAISSANCE</th>
                                                        <th class="text-center">ORD. SACERDOTALE</th>
                                                        <th class="text-center">ORD. EPISCOPALE</th>
                                                        <th class="text-center">SIÈGE</th>
                                                        <th class="text-center">CONTACT</th>
                                                        <th class="text-center">EMAIL</th>
                                                        @if($diocese->bishops_only->first()->custom_fields)
                                                            @foreach($diocese->bishops_only->first()->custom_fields ?? [] as $field)
                                                                <th class="text-center">{{ strtoupper($field['label'] ?? '') }}</th>
                                                            @endforeach
                                                        @endif
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($diocese->bishops_only as $bishop)
                                                        <tr>
                                                            <td class="text-center">
                                                                @if(empty($bishop->getFirstMediaUrl('bishop-img')))
                                                                    <img src="{{asset('assets/img/priest.png')}}" class="avatar-img" alt="Avatar" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;">
                                                                @else
                                                                    <img src="{{$bishop->getFirstMediaUrl('bishop-img')}}" class="avatar-img" alt="{{ $bishop->name }}" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;">
                                                                @endif
                                                            </td>
                                                            <td class="text-center" style="font-weight: 600; color: #333;">
                                                                @if($bishop->title){{ $bishop->title }} @endif{{ $bishop->name }}
                                                            </td>
                                                            <td class="text-center">{{ $bishop->birth_date?->format('d/m/Y') ?? '-' }}</td>
                                                            <td class="text-center">
                                                                {{ $bishop->ordination_sacerdotale?->format('d/m/Y') ?? '-' }}</td>
                                                            <td class="text-center">
                                                                {{ $bishop->ordination_episcopale?->format('d/m/Y') ?? '-' }}</td>
                                                            <td class="text-center">{{ $bishop->episcopal_seat ?? '-' }}</td>
                                                            <td class="text-center">{{ $bishop->contact_secretariat ?? '-' }}</td>
                                                            <td class="text-center">{{ $bishop->email ?? '-' }}</td>
                                                            @foreach($bishop->custom_fields ?? [] as $field)
                                                                <td class="text-center">{{ $field['value'] ?? '-' }}</td>
                                                            @endforeach
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                @endif

                                {{-- 5. TABLEAU EVEQUES EMERITES (si le diocèse en a) --}}
                                @if($diocese->emeritus_bishops->isNotEmpty())
                                    <div class="col-md-10 col-md-offset-1" style="margin-top: {{ $diocese->bishops_only->isNotEmpty() || $diocese->archbishops->isNotEmpty() ? '30px' : '0' }}">
                                        <div class="clergy-card" style="border-top-color: #6c757d;">
                                            <h3 class="text-center">
                                                <strong>ÉVÊQUES ÉMÉRITES</strong>
                                            </h3>
                                            <div class="table-responsive">
                                                <table class="table table-hover dt-responsive nowrap">
                                                    <thead style="background-color: #6c757d;">
                                                    <tr>
                                                        <th class="text-center">PHOTO</th>
                                                        <th class="text-center">NOM</th>
                                                        <th class="text-center">DATE NAISSANCE</th>
                                                        <th class="text-center">ORD. SACERDOTALE</th>
                                                        <th class="text-center">ORD. EPISCOPALE</th>
                                                        <th class="text-center">SIÈGE</th>
                                                        <th class="text-center">CONTACT</th>
                                                        <th class="text-center">EMAIL</th>
                                                        @if($diocese->emeritus_bishops->first()->custom_fields)
                                                            @foreach($diocese->emeritus_bishops->first()->custom_fields ?? [] as $field)
                                                                <th class="text-center">{{ strtoupper($field['label'] ?? '') }}</th>
                                                            @endforeach
                                                        @endif
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    @foreach($diocese->emeritus_bishops as $bishop)
                                                        <tr>
                                                            <td class="text-center">
                                                                @if(empty($bishop->getFirstMediaUrl('bishop-img')))
                                                                    <img src="{{asset('assets/img/priest.png')}}" class="avatar-img" alt="Avatar" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;">
                                                                @else
                                                                    <img src="{{$bishop->getFirstMediaUrl('bishop-img')}}" class="avatar-img" alt="{{ $bishop->name }}" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover;">
                                                                @endif
                                                            </td>
                                                            <td class="text-center" style="font-weight: 600; color: #333;">
                                                                @if($bishop->title){{ $bishop->title }} @endif{{ $bishop->name }}
                                                            </td>
                                                            <td class="text-center">{{ $bishop->birth_date?->format('d/m/Y') ?? '-' }}</td>
                                                            <td class="text-center">
                                                                {{ $bishop->ordination_sacerdotale?->format('d/m/Y') ?? '-' }}</td>
                                                            <td class="text-center">
                                                                {{ $bishop->ordination_episcopale?->format('d/m/Y') ?? '-' }}</td>
                                                            <td class="text-center">{{ $bishop->episcopal_seat ?? '-' }}</td>
                                                            <td class="text-center">{{ $bishop->contact_secretariat ?? '-' }}</td>
                                                            <td class="text-center">{{ $bishop->email ?? '-' }}</td>
                                                            @foreach($bishop->custom_fields ?? [] as $field)
                                                                <td class="text-center">{{ $field['value'] ?? '-' }}</td>
                                                            @endforeach
                                                        </tr>
                                                    @endforeach
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    @endforeach

@endsection