@extends('layouts.public')

@section('title', 'Détails - ' . $ticketType->name . ' - ' . $event->title)

@section('content')
    <div class="min-h-screen bg-gray-50 py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

            <!-- Header -->
            <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                <nav class="flex items-center space-x-2 text-sm text-gray-500 mb-2">
                    <a href="{{ route('dashboard') }}" class="hover:text-gray-700">Dashboard</a>
                    <span>/</span>
                    <a href="{{ route('admin.events.show', $event) }}"
                        class="hover:text-gray-700">{{ Str::limit($event->title, 30) }}</a>
                    <span>/</span>
                    <a href="{{ route('organizer.events.tickets.index', $event) }}" class="hover:text-gray-700">Billets</a>
                    <span>/</span>
                    <span class="text-gray-900">{{ $ticketType->name }}</span>
                </nav>
                <div class="flex items-center justify-between">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-900">{{ $ticketType->name }}</h1>
                        <p class="text-gray-600 mt-1">{{ $event->title }}</p>
                    </div>
                    <div class="flex items-center space-x-3">
                        <a href="{{ route('organizer.events.tickets.edit', [$event, $ticketType]) }}"
                            class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                            </svg>
                            Modifier
                        </a>
                        <a href="{{ route('organizer.events.tickets.index', $event) }}"
                            class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
                            <svg class="w-4 h-4 mr-2" 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" />
                            </svg>
                            Retour aux billets
                        </a>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

                <!-- Statistiques principales -->
                <div class="lg:col-span-2 space-y-6">

                    <!-- KPIs -->
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div class="bg-white rounded-lg shadow-sm p-6">
                            <div class="text-center">
                                <div class="text-2xl font-bold text-blue-600">{{ $stats['total_sold'] }}</div>
                                <div class="text-sm text-gray-600">Billets vendus</div>
                            </div>
                        </div>

                        <div class="bg-white rounded-lg shadow-sm p-6">
                            <div class="text-center">
                                <div class="text-2xl font-bold text-green-600">{{ number_format($stats['total_revenue']) }}
                                </div>
                                <div class="text-sm text-gray-600">FCFA générés</div>
                            </div>
                        </div>

                        @if ($ticketType->quantity)
                            <div class="bg-white rounded-lg shadow-sm p-6">
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-orange-600">{{ $stats['remaining'] ?? 0 }}</div>
                                    <div class="text-sm text-gray-600">Places restantes</div>
                                </div>
                            </div>

                            <div class="bg-white rounded-lg shadow-sm p-6">
                                <div class="text-center">
                                    @php $percentage = $ticketType->quantity > 0 ? round(($stats['total_sold'] / $ticketType->quantity) * 100) : 0; @endphp
                                    <div class="text-2xl font-bold text-purple-600">{{ $percentage }}%</div>
                                    <div class="text-sm text-gray-600">Taux de vente</div>
                                </div>
                            </div>
                        @else
                            <div class="bg-white rounded-lg shadow-sm p-6">
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-gray-600">∞</div>
                                    <div class="text-sm text-gray-600">Places illimitées</div>
                                </div>
                            </div>

                            <div class="bg-white rounded-lg shadow-sm p-6">
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-green-600">{{ number_format($ticketType->price) }}
                                    </div>
                                    <div class="text-sm text-gray-600">Prix unitaire FCFA</div>
                                </div>
                            </div>
                        @endif
                    </div>

                    <!-- Graphique de progression si on a une quantité limitée -->
                    @if ($ticketType->quantity)
                        <div class="bg-white rounded-lg shadow-sm p-6">
                            <h3 class="text-lg font-medium text-gray-900 mb-4">Progression des ventes</h3>
                            <div class="space-y-2">
                                <div class="flex justify-between text-sm">
                                    <span>{{ $stats['total_sold'] }} / {{ $ticketType->quantity }} vendus</span>
                                    <span>{{ $percentage }}%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-3">
                                    <div class="bg-blue-600 h-3 rounded-full transition-all duration-300"
                                        style="width: {{ $percentage }}%"></div>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Liste des inscriptions -->
                    <div class="bg-white rounded-lg shadow-sm">
                        <div class="px-6 py-4 border-b border-gray-200">
                            <div class="flex items-center justify-between">
                                <h3 class="text-lg font-medium text-gray-900">Inscriptions</h3>
                                <span class="text-sm text-gray-500">{{ $registrations->total() }} au total</span>
                            </div>
                        </div>

                        @if ($registrations->count() > 0)
                            <div class="overflow-x-auto">
                                <table class="min-w-full divide-y divide-gray-200">
                                    <thead class="bg-gray-50">
                                        <tr>
                                            <th
                                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                Participant
                                            </th>
                                            <th
                                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                Date
                                            </th>
                                            <th
                                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                Quantité
                                            </th>
                                            <th
                                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                Montant
                                            </th>
                                            <th
                                                class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                Statut
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-gray-200">
                                        @foreach ($registrations as $registration)
                                            <tr class="hover:bg-gray-50">
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    <div>
                                                        <div class="text-sm font-medium text-gray-900">
                                                            {{ $registration->full_name }}</div>
                                                        <div class="text-sm text-gray-500">{{ $registration->email }}</div>
                                                    </div>
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                                    {{ $registration->created_at->format('d/m/Y H:i') }}
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                                    {{ $registration->quantity }}
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                                    {{ number_format($registration->total_amount) }} FCFA
                                                </td>
                                                <td class="px-6 py-4 whitespace-nowrap">
                                                    @switch($registration->status)
                                                        @case('confirmed')
                                                            <span
                                                                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                                                Confirmé
                                                            </span>
                                                        @break

                                                        @case('pending')
                                                            <span
                                                                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                                En attente
                                                            </span>
                                                        @break

                                                        @case('cancelled')
                                                            <span
                                                                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                                                Annulé
                                                            </span>
                                                        @break

                                                        @default
                                                            <span
                                                                class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                                                {{ ucfirst($registration->status) }}
                                                            </span>
                                                    @endswitch
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <!-- Pagination -->
                            @if ($registrations->hasPages())
                                <div class="px-6 py-4 border-t border-gray-200">
                                    {{ $registrations->links() }}
                                </div>
                            @endif
                        @else
                            <div class="text-center py-12">
                                <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor"
                                    viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v2c0 .656.126 1.283.356 1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                                </svg>
                                <h3 class="mt-4 text-lg font-medium text-gray-900">Aucune inscription</h3>
                                <p class="mt-2 text-sm text-gray-500">
                                    Aucun participant ne s'est encore inscrit avec ce type de billet.
                                </p>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Panneau latéral avec informations du type de billet -->
                <div class="space-y-6">

                    <!-- Informations du billet -->
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Informations du billet</h3>

                        <div class="space-y-4">
                            <div>
                                <dt class="text-sm font-medium text-gray-500">Prix</dt>
                                <dd class="mt-1 text-lg font-bold text-gray-900">
                                    @if ($ticketType->price > 0)
                                        {{ number_format($ticketType->price) }} FCFA
                                    @else
                                        <span class="text-green-600">Gratuit</span>
                                    @endif
                                </dd>
                            </div>

                            @if ($ticketType->description)
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Description</dt>
                                    <dd class="mt-1 text-sm text-gray-900">{{ $ticketType->description }}</dd>
                                </div>
                            @endif

                            <div>
                                <dt class="text-sm font-medium text-gray-500">Statut</dt>
                                <dd class="mt-1">
                                    @if ($ticketType->is_active)
                                        <span
                                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                            Actif
                                        </span>
                                    @else
                                        <span
                                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                            Inactif
                                        </span>
                                    @endif
                                </dd>
                            </div>

                            @if ($ticketType->min_quantity > 1 || $ticketType->max_quantity)
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Contraintes de quantité</dt>
                                    <dd class="mt-1 text-sm text-gray-900">
                                        @if ($ticketType->min_quantity > 1)
                                            Min: {{ $ticketType->min_quantity }}
                                        @endif
                                        @if ($ticketType->min_quantity > 1 && $ticketType->max_quantity)
                                            •
                                        @endif
                                        @if ($ticketType->max_quantity)
                                            Max: {{ $ticketType->max_quantity }}
                                        @endif
                                    </dd>
                                </div>
                            @endif

                            @if ($ticketType->sale_start_date || $ticketType->sale_end_date)
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Période de vente</dt>
                                    <dd class="mt-1 text-sm text-gray-900">
                                        @if ($ticketType->sale_start_date)
                                            À partir du {{ $ticketType->sale_start_date->format('d/m/Y H:i') }}
                                        @endif
                                        @if ($ticketType->sale_start_date && $ticketType->sale_end_date)
                                            <br>
                                        @endif
                                        @if ($ticketType->sale_end_date)
                                            Jusqu'au {{ $ticketType->sale_end_date->format('d/m/Y H:i') }}
                                        @endif
                                    </dd>
                                </div>
                            @endif

                            <div>
                                <dt class="text-sm font-medium text-gray-500">Créé le</dt>
                                <dd class="mt-1 text-sm text-gray-900">{{ $ticketType->created_at->format('d/m/Y H:i') }}
                                </dd>
                            </div>

                            @if ($ticketType->updated_at->ne($ticketType->created_at))
                                <div>
                                    <dt class="text-sm font-medium text-gray-500">Dernière modification</dt>
                                    <dd class="mt-1 text-sm text-gray-900">
                                        {{ $ticketType->updated_at->format('d/m/Y H:i') }}</dd>
                                </div>
                            @endif
                        </div>
                    </div>

                    <!-- Actions rapides -->
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Actions rapides</h3>

                        <div class="space-y-3">
                            <a href="{{ route('organizer.events.tickets.edit', [$event, $ticketType]) }}"
                                class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
                                Modifier ce type
                            </a>

                            <form method="POST"
                                action="{{ route('organizer.events.tickets.toggle', [$event, $ticketType]) }}"
                                class="w-full">
                                @csrf
                                @method('PATCH')
                                <button type="submit"
                                    class="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                                    {{ $ticketType->is_active ? 'Désactiver' : 'Activer' }}
                                </button>
                            </form>

                            @if ($ticketType->sold === 0)
                                <form method="POST"
                                    action="{{ route('organizer.events.tickets.destroy', [$event, $ticketType]) }}"
                                    class="w-full"
                                    onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce type de billet ?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit"
                                        class="w-full flex justify-center py-2 px-4 border border-red-300 rounded-md shadow-sm text-sm font-medium text-red-700 bg-white hover:bg-red-50">
                                        Supprimer
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>

                    <!-- Aperçu pour les participants -->
                    <div class="bg-white rounded-lg shadow-sm p-6">
                        <h3 class="text-lg font-medium text-gray-900 mb-4">Aperçu participant</h3>

                        <div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
                            <div class="flex justify-between items-start mb-2">
                                <h4 class="font-medium text-gray-900">{{ $ticketType->name }}</h4>
                                <span class="text-lg font-bold text-blue-600">
                                    @if ($ticketType->price > 0)
                                        {{ number_format($ticketType->price) }} FCFA
                                    @else
                                        Gratuit
                                    @endif
                                </span>
                            </div>
                            @if ($ticketType->description)
                                <p class="text-sm text-gray-600 mb-2">{{ $ticketType->description }}</p>
                            @endif
                            <div class="text-xs text-gray-500">
                                @if ($ticketType->quantity)
                                    {{ $ticketType->remainingQuantity() }} places restantes
                                @else
                                    Places illimitées
                                @endif
                            </div>
                        </div>

                        <p class="mt-2 text-xs text-gray-500">
                            Ceci est ce que verront les participants lors de l'inscription
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection