@extends('admin.layouts.admin')

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

@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.appointments.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 CLIENT --}}
            <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 text-white font-bold text-lg mr-3">
                        {{ strtoupper(substr($appointment->full_name, 0, 1)) }}
                    </div>
                    <div>
                        <h2 class="text-lg font-bold text-gray-900">Informations client</h2>
                        <p class="text-xs text-gray-500">Détails 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 complet</p>
                        <p class="text-base font-bold text-gray-900">{{ $appointment->full_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:{{ $appointment->email }}" class="text-base font-semibold text-blue-600 hover:text-blue-700">{{ $appointment->email }}</a>
                    </div>
                    <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:{{ $appointment->phone }}" class="text-base font-semibold text-gray-900">{{ $appointment->phone }}</a>
                    </div>
                    <div class="bg-gray-50 rounded-lg p-3">
                        <p class="text-xs font-semibold text-gray-500 uppercase mb-0.5">Date de demande</p>
                        <p class="text-sm font-semibold text-gray-900">{{ $appointment->created_at->locale('fr')->isoFormat('dddd D MMMM YYYY à HH:mm') }}</p>
                    </div>
                </div>
            </div>

            {{-- DÉTAILS DU RENDEZ-VOUS --}}
            <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 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 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-lg font-bold text-gray-900">Détails du rendez-vous</h2>
                        <p class="text-xs text-gray-500">Informations sur la demande</p>
                    </div>
                </div>
                <div class="space-y-3">
                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                        <div>
                            <p class="text-xs font-semibold text-gray-500 uppercase mb-0.5">Type de rendez-vous</p>
                            <p class="text-base font-bold text-gray-900">{{ ucfirst($appointment->appointment_type) }}</p>
                        </div>
                        <div class="px-3 py-1.5 bg-blue-100 text-blue-800 rounded-lg font-semibold text-xs">
                            {{ ucfirst($appointment->appointment_format) }}
                        </div>
                    </div>
                    @if($appointment->project_type)
                        <div class="p-3 bg-gray-50 rounded-lg">
                            <p class="text-xs font-semibold text-gray-500 uppercase mb-0.5">Type de projet</p>
                            <p class="text-base font-bold text-gray-900">{{ ucfirst($appointment->project_type) }}</p>
                        </div>
                    @endif
                    @php
                        $slot = \App\Models\AppointmentSlot::where('appointment_id', $appointment->id)->first();
                    @endphp
                    @if($slot)
                        <div class="p-3 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-200">
                            <p class="text-xs font-semibold text-blue-600 uppercase mb-1.5">Créneau sélectionné</p>
                            <div class="flex items-center space-x-3 flex-wrap gap-2">
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 text-blue-600 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                    </svg>
                                    <p class="text-sm font-bold text-gray-900">{{ $slot->date->locale('fr')->isoFormat('dddd D MMMM YYYY') }}</p>
                                </div>
                                <div class="flex items-center">
                                    <svg class="w-4 h-4 text-blue-600 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    <p class="text-sm font-bold text-gray-900">
                                        {{ \Carbon\Carbon::createFromFormat('H:i:s', $slot->start_time)->format('H:i') }} - 
                                        {{ \Carbon\Carbon::createFromFormat('H:i:s', $slot->end_time)->format('H:i') }}
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endif
                    <div class="p-3 bg-gray-50 rounded-lg">
                        <p class="text-xs font-semibold text-gray-500 uppercase mb-1">Statut</p>
                        <span class="inline-block px-3 py-1.5 text-xs font-bold rounded-full 
                            {{ $appointment->status === 'pending' ? 'bg-orange-100 text-orange-800 border border-orange-200' : '' }}
                            {{ $appointment->status === 'accepted' ? 'bg-green-100 text-green-800 border border-green-200' : '' }}
                            {{ $appointment->status === 'rejected' ? 'bg-red-100 text-red-800 border border-red-200' : '' }}">
                            {{ ucfirst($appointment->status) }}
                        </span>
                    </div>
                </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-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="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">Message du client</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">{{ $appointment->message ?: 'Aucun 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>
                @if($appointment->status === 'pending')
                    <button type="button" onclick="openAcceptModal({{ $appointment->id }})" 
                        class="w-full btn-premium bg-gradient-to-r from-green-600 to-green-700 text-white font-semibold py-2.5 px-4 rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-300 shadow-lg hover:shadow-xl flex items-center justify-center text-sm mb-3">
                        <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="M5 13l4 4L19 7"></path>
                        </svg>
                        Accepter
                    </button>
                    <button type="button" onclick="openRejectModal({{ $appointment->id }})" 
                        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="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                        Refuser
                    </button>
                @else
                    <div class="text-center py-6">
                        <div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3">
                            <svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <p class="text-sm text-gray-600 font-medium">Ce rendez-vous a déjà été traité.</p>
                        <p class="text-xs text-gray-500 mt-1.5">Statut: <span class="font-semibold">{{ ucfirst($appointment->status) }}</span></p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

@if($appointment->status === 'pending')
{{-- MODAL ACCEPTER RENDEZ-VOUS --}}
<div id="acceptModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
    <div class="bg-white rounded-2xl shadow-xl p-6 max-w-md w-full mx-4">
        <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mr-4">
                <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <div>
                <h3 class="text-lg font-bold text-gray-900">Accepter ce rendez-vous</h3>
                <p class="text-sm text-gray-500 mt-1">Un email de confirmation sera envoyé au client.</p>
            </div>
        </div>
        <div class="flex items-center justify-end space-x-3">
            <button type="button" onclick="closeAcceptModal()" class="px-4 py-2 text-sm font-semibold text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                Annuler
            </button>
            <form id="acceptAppointmentForm" method="POST" action="">
                @csrf
                <button type="submit" class="px-4 py-2 text-sm font-semibold text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors">
                    Accepter
                </button>
            </form>
        </div>
    </div>
</div>

{{-- MODAL REFUSER RENDEZ-VOUS --}}
<div id="rejectModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
    <div class="bg-white rounded-2xl shadow-xl p-6 max-w-md w-full mx-4">
        <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mr-4">
                <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <div>
                <h3 class="text-lg font-bold text-gray-900">Refuser ce rendez-vous</h3>
                <p class="text-sm text-gray-500 mt-1">Un email sera envoyé au client et le créneau sera libéré.</p>
            </div>
        </div>
        <div class="flex items-center justify-end space-x-3">
            <button type="button" onclick="closeRejectModal()" class="px-4 py-2 text-sm font-semibold text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                Annuler
            </button>
            <form id="rejectAppointmentForm" method="POST" action="">
                @csrf
                <button type="submit" class="px-4 py-2 text-sm font-semibold text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors">
                    Refuser
                </button>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const acceptUrlTemplate = "{{ route('admin.appointments.accept', 0) }}";
        const rejectUrlTemplate = "{{ route('admin.appointments.reject', 0) }}";

        window.openAcceptModal = function(id) {
            const modal = document.getElementById('acceptModal');
            const form = document.getElementById('acceptAppointmentForm');
            if (!modal || !form) return;
            form.action = acceptUrlTemplate.replace(/\/0\//, '/' + id + '/');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            document.body.style.overflow = 'hidden';
        };
        window.closeAcceptModal = function() {
            const modal = document.getElementById('acceptModal');
            if (modal) {
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }
            document.body.style.overflow = '';
        };
        window.openRejectModal = function(id) {
            const modal = document.getElementById('rejectModal');
            const form = document.getElementById('rejectAppointmentForm');
            if (!modal || !form) return;
            form.action = rejectUrlTemplate.replace(/\/0\//, '/' + id + '/');
            modal.classList.remove('hidden');
            modal.classList.add('flex');
            document.body.style.overflow = 'hidden';
        };
        window.closeRejectModal = function() {
            const modal = document.getElementById('rejectModal');
            if (modal) {
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }
            document.body.style.overflow = '';
        };

        document.getElementById('acceptModal')?.addEventListener('click', function(e) {
            if (e.target === this) closeAcceptModal();
        });
        document.getElementById('rejectModal')?.addEventListener('click', function(e) {
            if (e.target === this) closeRejectModal();
        });
    });
</script>
@endpush
@endif
@endsection