@extends('layouts.admin-layout')

@section('title', 'Détails du Membre')

@section('content')
    <div class="p-6">
        <!-- Page Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <div class="flex items-center">
                    <a href="{{ route('admin.members.index') }}" class="text-blue-600 hover:text-blue-800 mr-4">
                        <i class="fas fa-arrow-left text-xl"></i>
                    </a>
                    <div>
                        <h1 class="text-3xl font-bold text-gray-900">Détails du Membre</h1>
                        <p class="mt-2 text-gray-600">{{ $member->full_name }}</p>
                    </div>
                </div>
                <div class="flex gap-3">
                    <a href="{{ route('admin.members.card.preview', $member) }}" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-lg transition">
                        <i class="fas fa-id-card mr-2"></i>Carte de Membre
                    </a>
                    <a href="{{ route('admin.members.edit', $member) }}" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg transition">
                        <i class="fas fa-edit mr-2"></i>Modifier
                    </a>
                </div>
            </div>
        </div>

        <div class="max-w-6xl mx-auto">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Photo et Statut -->
                <div class="lg:col-span-1">
                    <div class="bg-white rounded-xl shadow-md overflow-hidden">
                        <!-- Photo -->
                        <div class="bg-gradient-to-br from-blue-500 to-purple-500 p-6 text-center">
                            <div class="w-48 h-48 mx-auto rounded-full bg-white bg-opacity-20 flex items-center justify-center border-4 border-white">
                                <i class="fas fa-user text-white text-6xl"></i>
                            </div>
                        </div>

                        <!-- Informations rapides -->
                        <div class="p-6">
                            <div class="text-center mb-6">
                                <h2 class="text-2xl font-bold text-gray-900">{{ $member->full_name }}</h2>
                                <p class="text-gray-600 mt-1">{{ $member->email }}</p>
                            </div>

                            <!-- Numéro de membre -->
                            <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-lg p-4 mb-4">
                                <div class="text-sm text-gray-600 mb-1">Numéro de Membre</div>
                                <div class="text-xl font-mono font-bold text-blue-600">{{ $member->membership_number }}</div>
                            </div>

                            <!-- Statut -->
                            <div class="mb-4">
                                <div class="text-sm text-gray-600 mb-2">Statut</div>
                                @if($member->status === 'active')
                                    <span class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium bg-green-100 text-green-800 w-full justify-center">
                                        <i class="fas fa-check-circle mr-2"></i>Actif
                                    </span>
                                @elseif($member->status === 'pending')
                                    <span class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium bg-yellow-100 text-yellow-800 w-full justify-center">
                                        <i class="fas fa-clock mr-2"></i>En attente
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-4 py-2 rounded-lg text-sm font-medium bg-gray-100 text-gray-800 w-full justify-center">
                                        <i class="fas fa-ban mr-2"></i>Inactif
                                    </span>
                                @endif
                            </div>

                            <!-- Carte générée -->
                            <div>
                                <div class="text-sm text-gray-600 mb-2">Carte de Membre</div>
                                @if($member->card_generated)
                                    <div class="bg-purple-50 rounded-lg p-3 text-center">
                                        <i class="fas fa-check-circle text-purple-600 text-2xl mb-2"></i>
                                        <div class="text-sm font-medium text-purple-900">Générée</div>
                                        <div class="text-xs text-purple-700 mt-1">
                                            {{ $member->card_generated_at->format('d/m/Y à H:i') }}
                                        </div>
                                    </div>
                                @else
                                    <div class="bg-gray-50 rounded-lg p-3 text-center">
                                        <i class="fas fa-times-circle text-gray-400 text-2xl mb-2"></i>
                                        <div class="text-sm font-medium text-gray-600">Non générée</div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Détails complets -->
                <div class="lg:col-span-2">
                    <div class="bg-white rounded-xl shadow-md p-6 mb-6">
                        <h3 class="text-xl font-bold text-gray-900 mb-6 border-b pb-3">
                            <i class="fas fa-user-circle text-blue-600 mr-2"></i>Informations Personnelles
                        </h3>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-semibold text-gray-600 mb-1">Prénom</label>
                                <div class="text-gray-900">{{ $member->first_name }}</div>
                            </div>

                            <div>
                                <label class="block text-sm font-semibold text-gray-600 mb-1">Nom</label>
                                <div class="text-gray-900">{{ $member->last_name }}</div>
                            </div>

                            <div>
                                <label class="block text-sm font-semibold text-gray-600 mb-1">Email</label>
                                <div class="text-gray-900">
                                    <a href="mailto:{{ $member->email }}" class="text-blue-600 hover:underline">
                                        <i class="fas fa-envelope mr-1"></i>{{ $member->email }}
                                    </a>
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-semibold text-gray-600 mb-1">Téléphone</label>
                                <div class="text-gray-900">
                                    @if($member->phone)
                                        <a href="tel:{{ $member->phone }}" class="text-blue-600 hover:underline">
                                            <i class="fas fa-phone mr-1"></i>{{ $member->phone }}
                                        </a>
                                    @else
                                        <span class="text-gray-400">Non renseigné</span>
                                    @endif
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-semibold text-gray-600 mb-1">Date de Naissance</label>
                                <div class="text-gray-900">
                                    @if($member->date_of_birth)
                                        <i class="fas fa-calendar mr-1 text-gray-400"></i>
                                        {{ $member->date_of_birth->format('d/m/Y') }}
                                        <span class="text-sm text-gray-500">({{ $member->date_of_birth->age }} ans)</span>
                                    @else
                                        <span class="text-gray-400">Non renseignée</span>
                                    @endif
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-semibold text-gray-600 mb-1">Date d'Inscription</label>
                                <div class="text-gray-900">
                                    <i class="fas fa-calendar-check mr-1 text-gray-400"></i>
                                    {{ $member->registration_date->format('d/m/Y') }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Adresse -->
                    <div class="bg-white rounded-xl shadow-md p-6 mb-6">
                        <h3 class="text-xl font-bold text-gray-900 mb-6 border-b pb-3">
                            <i class="fas fa-map-marker-alt text-blue-600 mr-2"></i>Adresse
                        </h3>

                        <div class="space-y-4">
                            @if($member->address)
                                <div>
                                    <label class="block text-sm font-semibold text-gray-600 mb-1">Rue</label>
                                    <div class="text-gray-900">{{ $member->address }}</div>
                                </div>
                            @endif

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label class="block text-sm font-semibold text-gray-600 mb-1">Ville</label>
                                    <div class="text-gray-900">{{ $member->city ?? 'Non renseignée' }}</div>
                                </div>

                                <div>
                                    <label class="block text-sm font-semibold text-gray-600 mb-1">Pays</label>
                                    <div class="text-gray-900">{{ $member->country }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Église -->
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-xl font-bold text-gray-900 mb-6 border-b pb-3">
                            <i class="fas fa-church text-blue-600 mr-2"></i>Église Locale
                        </h3>

                        <div class="bg-gradient-to-br from-blue-50 to-purple-50 rounded-lg p-6">
                            <div class="flex items-start">
                                <div class="flex-shrink-0 h-12 w-12 bg-gradient-to-br from-blue-500 to-purple-500 rounded-lg flex items-center justify-center mr-4">
                                    <i class="fas fa-church text-white text-xl"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="text-lg font-bold text-gray-900 mb-2">{{ $member->church->name }}</h4>
                                    <div class="text-gray-700 space-y-1">
                                        <div>
                                            <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
                                            {{ $member->church->address }}
                                        </div>
                                        <div>
                                            <i class="fas fa-city text-gray-400 mr-2"></i>
                                            {{ $member->church->city }}, {{ $member->church->country }}
                                        </div>
                                        @if($member->church->phone)
                                            <div>
                                                <i class="fas fa-phone text-gray-400 mr-2"></i>
                                                {{ $member->church->phone }}
                                            </div>
                                        @endif
                                    </div>
                                    <div class="mt-4">
                                        <a href="{{ route('admin.churches.show', $member->church) }}" class="text-blue-600 hover:text-blue-700 font-semibold text-sm">
                                            Voir l'église <i class="fas fa-arrow-right ml-1"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Actions de suppression -->
            <div class="mt-8 bg-red-50 border border-red-200 rounded-lg p-6">
                <h3 class="text-lg font-bold text-red-900 mb-3">
                    <i class="fas fa-exclamation-triangle mr-2"></i>Zone Dangereuse
                </h3>
                <p class="text-red-700 mb-4">
                    La suppression de ce membre est irréversible. Toutes ses données, y compris sa photo et l'historique de sa carte, seront définitivement supprimées.
                </p>
                <button onclick="confirmDelete('{{ $member->id }}', '{{ $member->full_name }}')" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-lg transition">
                    <i class="fas fa-trash-alt mr-2"></i>Supprimer ce Membre
                </button>
            </div>
        </div>
    </div>

    <!-- Hidden delete form -->
    <form id="delete-form-{{ $member->id }}" action="{{ route('admin.members.destroy', $member) }}" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>

    <!-- Modal de confirmation de suppression -->
    <div id="deleteModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-xl bg-white">
            <div class="mt-3">
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                    <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                </div>
                <div class="mt-4 text-center">
                    <h3 class="text-lg font-semibold text-gray-900">Confirmer la suppression</h3>
                    <div class="mt-2 px-4 py-3">
                        <p class="text-sm text-gray-600">
                            Êtes-vous sûr de vouloir supprimer le membre "<span id="memberName" class="font-semibold"></span>" ?
                        </p>
                        <p class="text-sm text-red-600 mt-2">
                            Cette action est irréversible.
                        </p>
                    </div>
                    <div class="flex gap-4 mt-4">
                        <button onclick="closeDeleteModal()"
                                class="flex-1 px-4 py-2 bg-gray-300 text-gray-800 rounded-lg hover:bg-gray-400 transition">
                            Annuler
                        </button>
                        <button onclick="submitDelete()"
                                class="flex-1 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition">
                            Supprimer
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        let memberIdToDelete = null;

        function confirmDelete(memberId, memberName) {
            memberIdToDelete = memberId;
            document.getElementById('memberName').textContent = memberName;
            document.getElementById('deleteModal').classList.remove('hidden');
        }

        function closeDeleteModal() {
            memberIdToDelete = null;
            document.getElementById('deleteModal').classList.add('hidden');
        }

        function submitDelete() {
            if (memberIdToDelete) {
                document.getElementById('delete-form-' + memberIdToDelete).submit();
            }
        }

        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeDeleteModal();
            }
        });
    </script>
    @endpush
@endsection