@extends('admin.layouts.admin')

@section('title', 'Détails du message - Admin KONTIXX')
@section('page-title', 'Détails du message')
@section('page-description', 'Informations complètes sur le message')

@section('content')
<div class="space-y-3 sm:space-y-4">
    {{-- HEADER AVEC BOUTON RETOUR --}}
    <div class="flex items-center justify-between">
        <a href="{{ route('admin.contacts.index') }}" class="flex items-center text-gray-600 hover:text-gray-900 font-semibold transition-colors group text-sm">
            <svg class="w-4 h-4 mr-1.5 group-hover:-translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
            Retour à la liste
        </a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-4">
        <div class="lg:col-span-2 space-y-3 sm:space-y-4">
            {{-- INFORMATIONS EXPÉDITEUR --}}
            <div class="card-premium rounded-xl p-4">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 bg-gradient-to-br from-purple-400 to-purple-600 rounded-lg flex items-center justify-center text-white font-bold text-lg mr-3">
                        {{ strtoupper(substr($contact->name, 0, 1)) }}
                    </div>
                    <div>
                        <h2 class="text-lg font-bold text-gray-900">Expéditeur</h2>
                        <p class="text-xs text-gray-500">Informations du contact</p>
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div class="bg-gray-50 rounded-lg p-3">
                        <p class="text-xs font-semibold text-gray-500 uppercase mb-0.5">Nom</p>
                        <p class="text-base font-bold text-gray-900">{{ $contact->name }}</p>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-3">
                        <p class="text-xs font-semibold text-gray-500 uppercase mb-0.5">Email</p>
                        <a href="mailto:{{ $contact->email }}" class="text-base font-semibold text-blue-600 hover:text-blue-700">{{ $contact->email }}</a>
                    </div>
                    @if($contact->phone)
                        <div class="bg-gray-50 rounded-lg p-3">
                            <p class="text-xs font-semibold text-gray-500 uppercase mb-0.5">Téléphone</p>
                            <a href="tel:{{ $contact->phone }}" class="text-base font-semibold text-gray-900">{{ $contact->phone }}</a>
                        </div>
                    @endif
                    <div class="bg-gray-50 rounded-lg p-3">
                        <p class="text-xs font-semibold text-gray-500 uppercase mb-0.5">Reçu le</p>
                        <p class="text-sm font-semibold text-gray-900">{{ $contact->created_at->locale('fr')->isoFormat('dddd D MMMM YYYY') }}</p>
                        <p class="text-xs text-gray-500 mt-0.5">{{ $contact->created_at->format('à HH:mm') }}</p>
                    </div>
                </div>
            </div>

            {{-- TYPE DE PROJET --}}
            <div class="card-premium rounded-xl p-4">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 bg-gradient-to-br from-indigo-400 to-indigo-600 rounded-lg flex items-center justify-center mr-3">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-lg font-bold text-gray-900">Type de projet</h2>
                        <p class="text-xs text-gray-500">Catégorie du projet</p>
                    </div>
                </div>
                <div class="bg-gradient-to-r from-indigo-50 to-purple-50 rounded-lg p-4 border border-indigo-200">
                    <span class="px-3 py-1.5 bg-indigo-600 text-white rounded-lg font-bold text-sm">{{ ucfirst($contact->project_type) }}</span>
                </div>
            </div>

            {{-- MESSAGE --}}
            <div class="card-premium rounded-xl p-4">
                <div class="flex items-center mb-4">
                    <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center mr-3">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-lg font-bold text-gray-900">Message</h2>
                        <p class="text-xs text-gray-500">Contenu du message</p>
                    </div>
                </div>
                <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                    <p class="text-sm text-gray-700 whitespace-pre-wrap leading-relaxed">{{ $contact->message }}</p>
                </div>
            </div>
        </div>

        {{-- ACTIONS --}}
        <div class="lg:col-span-1">
            <div class="card-premium rounded-xl p-4 sticky top-4">
                <h2 class="text-lg font-bold text-gray-900 mb-4">Actions</h2>
                <div class="space-y-3">
                    <form action="{{ route('admin.contacts.toggleRead', $contact->id) }}" method="POST">
                        @csrf
                        <button type="submit" class="w-full btn-premium bg-gradient-to-r from-gray-600 to-gray-700 text-white font-semibold py-2.5 px-4 rounded-lg hover:from-gray-700 hover:to-gray-800 transition-all duration-300 shadow-lg hover:shadow-xl flex items-center justify-center text-sm">
                            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                            </svg>
                            {{ $contact->is_read ? 'Marquer non lu' : 'Marquer lu' }}
                        </button>
                    </form>
                    <form action="{{ route('admin.contacts.destroy', $contact->id) }}" method="POST" onsubmit="return confirm('Supprimer ce message ?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="w-full btn-premium bg-gradient-to-r from-red-600 to-red-700 text-white font-semibold py-2.5 px-4 rounded-lg hover:from-red-700 hover:to-red-800 transition-all duration-300 shadow-lg hover:shadow-xl flex items-center justify-center text-sm">
                            <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                            </svg>
                            Supprimer
                        </button>
                    </form>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-200">
                    <div class="bg-gray-50 rounded-lg p-3">
                        <p class="text-xs font-semibold text-gray-500 uppercase mb-1.5">Statut</p>
                        <span class="inline-block px-3 py-1.5 text-xs font-bold rounded-full 
                            {{ $contact->is_read ? 'bg-gray-100 text-gray-800 border border-gray-200' : 'bg-blue-100 text-blue-800 border border-blue-200' }}">
                            {{ $contact->is_read ? 'Lu' : 'Non lu' }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection