@extends('front.layouts.app')
@section('title', 'Diacres ')

@push('css')
    {{-- CSS DataTables Responsive --}}
    <link href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .church-info {
            padding: 50px 0;
        }

        /* Card Design */
        .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;
        }

        .clergy-card-header {
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .clergy-card-header h3 {
            font-size: 1.5rem;
            color: #333;
            font-weight: 700;
            margin: 0;
            display: flex;
            align-items: center;
        }

        .clergy-card-header h3 i {
            margin-right: 12px;
            color: #cf081b;
            background: rgba(207, 8, 27, 0.1);
            padding: 10px;
            border-radius: 50%;
            font-size: 1.1rem;
        }

        /* Table Styling */
        .church-info table th {
            background-color: #fff;
            color: #444;
            font-weight: 700;
            border-bottom: 2px solid #cf081b;
            text-transform: uppercase;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
            padding: 15px !important;
            vertical-align: middle !important;
        }

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

        .church-info table tr:hover td {
            background-color: #fafafa;
        }

        .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);
        }

        /* Badge role */
        .badge-role {
            background: rgba(207, 8, 27, 0.05);
            color: #cf081b;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            display: inline-block;
        }

        /* DataTables Controls */
        .dataTables_wrapper .dataTables_filter {
            float: right;
            text-align: right;
            margin-bottom: 15px;
        }

        .dataTables_wrapper .dataTables_filter input {
            border: 1px solid #ddd;
            background: #fff;
            padding: 6px 12px;
            border-radius: 20px;
            outline: none;
            width: 200px;
            transition: all 0.2s;
            margin-left: 10px;
        }

        .dataTables_wrapper .dataTables_filter input:focus {
            border-color: #cf081b;
            box-shadow: 0 0 0 2px rgba(207, 8, 27, 0.1);
        }

        /* PAGINATION FIX - FLEXBOX METHOD */
        .dataTables_wrapper .dataTables_paginate {
            margin-top: 15px;
            display: flex !important;
            justify-content: flex-end !important;
            gap: 5px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            padding: 0;
            margin: 0;
            width: 36px;
            height: 36px;
            border-radius: 50% !important;
            border: 1px solid #e0e0e0;
            background: #fff;
            color: #555 !important;
            cursor: pointer;
            text-decoration: none !important;
            transition: all 0.2s;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background: #cf081b !important;
            color: #fff !important;
            border-color: #cf081b;
            font-weight: bold;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
            background: #f8f9fa !important;
            color: #cf081b !important;
            border-color: #cf081b;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background: #fff !important;
            color: #ccc !important;
        }

        .dataTables_wrapper .dataTables_info {
            padding-top: 20px;
            color: #888;
            font-size: 0.85rem;
        }

        /* Icons for Prev/Next */
        .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
        .dataTables_wrapper .dataTables_paginate .paginate_button.next {
            font-size: 0;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.previous::before {
            content: "\f053";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 14px;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.next::before {
            content: "\f054";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 14px;
        }
    </style>
@endpush

@section('content')
    <!--== Start Page Title Area ==-->
    <x-title image="assets/img/sector.jpg" page="Diacres du Diocèse de Grand-Bassam" />
    <!--== End Page Title Area ==-->


    <div class="container church-info">
        <div class="clergy-card">
            <div class="clergy-card-header">
                <h3><i class="fas fa-cross"></i> Liste des Diacres</h3>
            </div>

            <div class="table-responsive">
                <table id="example" class="table table-hover dt-responsive nowrap" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th class="text-center" style="width: 70px;">Photo</th>
                        <th>Nom & prénoms</th>
                        <th>Année ordination</th>
                        <th>Fonction</th>
                        <th>Email</th>
                        <th>Contact</th>
                    </tr>
                    </thead>

                    <tbody>
                    @foreach($pds as $pd)
                        <tr>
                            <td class="text-center">
                                @if(empty($pd->getFirstMediaUrl('diacres')))
                                    <img src="{{asset('assets/img/priest.png')}}" class="avatar-img" alt="Avatar">
                                @else
                                    <img src="{{asset($pd->getFirstMediaUrl('diacres'))}}" class="avatar-img"
                                         alt="{{ $pd->name }}">
                                @endif
                            </td>
                            <td style="font-weight: 600; color: #333;">{{$pd->name}}</td>
                            <td><span style="color: #666;">{{$pd->ordination}}</span></td>
                            <td>
                                @if($pd->office)
                                    <span class="badge-role">{{$pd->office}}</span>
                                @else
                                    <span style="color: #ccc;">-</span>
                                @endif
                            </td>
                            <td style="color: #555;">{{$pd->email}}</td>
                            <td style="font-weight: 500;">{{$pd->phone}}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

@endsection

@push('javascript')
    {{-- DataTables Responsive JS --}}
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#example').DataTable({
                responsive: true,
                language: {
                    "sProcessing": "Traitement en cours...",
                    "sSearch": "Rechercher&nbsp;:",
                    "sLengthMenu": "Afficher _MENU_ éléments",
                    "sInfo": "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
                    "sInfoEmpty": "Affichage de l'élément 0 à 0 sur 0 élément",
                    "sInfoFiltered": "(filtré de _MAX_ éléments au total)",
                    "sInfoPostFix": "",
                    "sLoadingRecords": "Chargement en cours...",
                    "sZeroRecords": "Aucun élément à afficher",
                    "sEmptyTable": "Aucune donnée disponible dans le tableau",
                    "oPaginate": {
                        "sFirst": "Premier",
                        "sPrevious": "Précédent",
                        "sNext": "Suivant",
                        "sLast": "Dernier"
                    },
                    "oAria": {
                        "sSortAscending": ": activer pour trier la colonne par ordre croissant",
                        "sSortDescending": ": activer pour trier la colonne par ordre décroissant"
                    },
                    search: "_INPUT_",
                    searchPlaceholder: "Rechercher..."
                },
                // DOM SIMPLIFIÉ
                dom: '<"row mb-3"<"col-md-6"l><"col-md-6"f>>' +
                    'rt' +
                    '<"row mt-3 align-items-center"<"col-md-6"i><"col-md-6 d-flex justify-content-end"p>>',
                columnDefs: [
                    { responsivePriority: 1, targets: 0 },
                    { responsivePriority: 2, targets: 1 },
                    { orderable: false, targets: 0 }
                ]
            });
        });
    </script>
@endpush