@extends('front.layouts.app')
@section('title', 'Prêtres du Diocèse')

@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;
            /* Le fameux border rouge */
        }

        .clergy-card-header {
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .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 - Barre de recherche etc */
        .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 - START */
        .dataTables_wrapper .dataTables_paginate {
            margin-top: 20px;
            padding-top: 10px;
            text-align: right;
            border-top: 1px solid #f9f9f9;
        }

        /* Forcer l'affichage INLINE des boutons */
        .dataTables_wrapper .dataTables_paginate .paginate_button {
            display: inline-block !important;
            /* L'astuce cruciale */
            padding: 0;
            margin: 0 4px;
            /* Espace entre les boutons */
            width: 35px;
            height: 35px;
            line-height: 33px;
            /* Centrer verticalement le texte/icone */
            text-align: center;
            border-radius: 5px !important;
            border: 1px solid #eee;
            background: #fff;
            color: #555 !important;
            cursor: pointer;
            text-decoration: none !important;
        }

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

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

        /* Cacher les boutons Previous/Next texte et mettre des icones */
        .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
        .dataTables_wrapper .dataTables_paginate .paginate_button.next {
            font-size: 0;
            /* Cache le texte */
            position: relative;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.previous:before {
            content: "\f053";
            /* Icone < */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 14px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.next:before {
            content: "\f054";
            /* Icone > */
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 14px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        /* PAGINATION FIX - END */

        .dataTables_wrapper .dataTables_info {
            padding-top: 25px;
            color: #888;
            font-size: 0.9rem;
            float: left;
        }
    </style>
@endpush

@section('content')
    <!--== Start Page Title Area ==-->
    <x-title image="assets/img/sector.jpg" page="Prêtres 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-users"></i> Liste des Prêtres</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>Ordination</th>
                        <th>Fonction / Rôle</th>
                        <th>Email</th>
                        <th>Mobile</th>
                    </tr>
                    </thead>

                    <tbody>
                    @foreach($pds as $pd)
                        <tr>
                            <td class="text-center">
                                @if(empty($pd->getFirstMediaUrl('pd-img')))
                                    <img src="{{asset('assets/img/priest.png')}}" class="avatar-img" alt="Avatar">
                                @else
                                    <img src="{{ $pd->getFirstMediaUrl('pd-img') }}" class="avatar-img" alt="{{ $pd->name }}">
                                @endif
                            </td>
                            <td style="font-weight: 600; color: #333;">{{$pd->name}}</td>
                            <td><span style="color: #666; font-size: 0.95rem;">{{$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; color: #555;">{{$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", // Le CSS va le cacher
                        "sNext": "Suivant",   // Le CSS va le cacher
                        "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 un prêtre..."
                },
                columnDefs: [
                    { responsivePriority: 1, targets: 0 }, // Photo
                    { responsivePriority: 2, targets: 1 }, // Nom
                    { responsivePriority: 3, targets: 3 }, // Fonction
                    { orderable: false, targets: 0 } // Pas de tri sur photo
                ]
            });
        });
    </script>
@endpush