@extends('layouts.public')

@section('title', 'Suivre ma plainte - UAC-eServices')

@push('styles')
<style>
@keyframes fill-progress {
    0% { width: 0%; }
    100% { width: var(--progress-width); }
}

@keyframes fill-progress-delayed {
    0% { width: 0%; }
    50% { width: 0%; }
    100% { width: var(--progress-width); }
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.animate-fill-progress {
    animation: fill-progress 1.5s ease-out forwards;
}

.animate-fill-progress-delayed {
    animation: fill-progress-delayed 2s ease-out forwards;
}

.animate-shimmer {
    animation: shimmer 2s infinite;
}

/* Styles pour les étapes */
.step-completed {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}

.step-current {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
    animation: pulse 2s infinite;
}

.step-pending {
    background: #e5e7eb;
    color: #6b7280;
}

/* Barre de progression principale */
.progress-fill {
    position: relative;
    overflow: hidden;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 2s infinite;
}

/* Indicateur de pourcentage */
.percentage-indicator {
    font-weight: 600;
    color: #374151;
    background: white;
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid #e5e7eb;
}

/* Messages de statut */
.status-message {
    border-left: 4px solid;
}

.status-en-attente {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
}

.status-en-cours {
    border-left-color: #3b82f6;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}

.status-traitee {
    border-left-color: #10b981;
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
}

.status-rejetee {
    border-left-color: #ef4444;
    background: linear-gradient(135deg, #fee2e2, #fecaca);
}

/* Animations personnalisées */
@keyframes bounce-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.animate-bounce-gentle {
    animation: bounce-gentle 1s ease-in-out infinite;
}

/* Responsive */
@media (max-width: 640px) {
    .progress-steps {
        flex-direction: column;
        align-items: stretch;
    }

    .progress-line {
        width: 2px;
        height: 20px;
        margin: 8px 0;
    }
}
</style>
@endpush

@section('content')
    <div class="bg-white py-8 px-6 shadow-lg rounded-lg sm:px-10">
        <div class="mb-8">
            <h2 class="text-center text-3xl font-bold text-gray-900">
                Suivre ma plainte
            </h2>
            <p class="mt-2 text-center text-sm text-gray-600">
                Entrez votre code de suivi pour connaître l'état de votre plainte
            </p>
        </div>

        @if(session('success'))
            <div class="mb-4 rounded-md bg-green-50 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-green-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-green-800">
                            {{ session('success') }}
                        </p>
                    </div>
                </div>
            </div>
        @endif

        @if(session('error'))
            <div class="mb-4 rounded-md bg-red-50 p-4">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                        </svg>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium text-red-800">
                            {{ session('error') }}
                        </p>
                    </div>
                </div>
            </div>
        @endif

        <!-- Bouton Quitter -->
        <div class="mb-6 text-center">
            <a href="{{ url('/') }}"
                class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
                <svg class="mr-2 -ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd" />
                    <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
                    <path fill-rule="evenodd" d="M4 5a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1z" clip-rule="evenodd" />
                    <path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1z" clip-rule="evenodd" />
                    <path fill-rule="evenodd" d="M17 3a1 1 0 00-1-1H6a1 1 0 000 2h10a1 1 0 001-1z" clip-rule="evenodd" />
                </svg>
                Retour à l'accueil
            </a>
        </div>

        <!-- Formulaire de recherche -->
        <form method="GET" action="{{ route('plaintes.suivre') }}" class="mb-8">
            <div class="flex flex-col sm:flex-row gap-4">
                <div class="flex-1">
                    <label for="code_suivi" class="block text-sm font-medium text-gray-700">
                        Code de suivi
                    </label>
                    <input type="text"
                        id="code_suivi"
                        name="code_suivi"
                        value="{{ $codeSuivi ?? '' }}"
                        placeholder="Ex: ABC-1234"
                        class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
                        required>
                </div>
                <div class="flex items-end">
                    <button type="submit"
                            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        <svg class="mr-2 -ml-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
                        </svg>
                        Rechercher
                    </button>
                </div>
            </div>
        </form>

        @if($plainte)
            <!-- Résultats de la recherche -->
            <div class="border-t border-gray-200 pt-8">
                <div class="bg-gray-50 rounded-lg p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-medium text-gray-900">
                            Statut de votre plainte
                        </h3>
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                            @if($plainte->statut === 'en_attente') bg-yellow-100 text-yellow-800
                            @elseif($plainte->statut === 'en_cours') bg-blue-100 text-blue-800
                            @elseif($plainte->statut === 'traitee') bg-green-100 text-green-800
                            @else bg-red-100 text-red-800
                            @endif">
                            {{ $statuts[$plainte->statut] }}
                        </span>
                    </div>

                    <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Code de suivi</dt>
                            <dd class="mt-1 text-sm text-gray-900 font-mono">{{ $plainte->code_suivi }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Date de soumission</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ $plainte->created_at->format('d/m/Y H:i') }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Poste de la personne impliquée</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                @if($plainte->poste)
                                    @php
                                        $postes = \App\Models\Plainte::getPostes();
                                        $posteTrouve = false;
                                        foreach($postes as $categorie => $listePostes) {
                                            if(isset($listePostes[$plainte->poste])) {
                                                echo $listePostes[$plainte->poste];
                                                $posteTrouve = true;
                                                break;
                                            }
                                        }
                                        if(!$posteTrouve) {
                                            echo ucfirst(str_replace('_', ' ', $plainte->poste));
                                        }
                                    @endphp
                                @else
                                    <span class="text-muted">Non spécifié</span>
                                @endif
                            </dd>
                        </div>
                        @if($plainte->poste !== 'vice_recteur_affaires_academiques')
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Organisme concerné</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                @if($plainte->categorie === 'unites_formation_recherche')
                                    Unités de formation et de recherche
                                @elseif($plainte->categorie === 'ecoles_doctorales')
                                    Écoles doctorales
                                @endif
                                @if($plainte->centre)
                                    <br><small class="text-muted">{{ \App\Models\Plainte::getCentres()[$plainte->centre] ?? $plainte->centre }}</small>
                                @endif
                                @if($plainte->organisme_specifique)
                                    <br><small class="text-muted">{{ $plainte->organisme_specifique }}</small>
                                @endif
                            </dd>
                        </div>
                        @endif
                        @if($plainte->date_traitement)
                        <div>
                            <dt class="text-sm font-medium text-gray-500">Date de traitement</dt>
                            <dd class="mt-1 text-sm text-gray-900">{{ $plainte->date_traitement->format('d/m/Y H:i') }}</dd>
                        </div>
                        @endif

                        @if($plainte->document_path || $plainte->commentaireDocuments->count() > 0)
                        <div class="sm:col-span-2">
                            <dt class="text-sm font-medium text-gray-500">Documents joints</dt>
                            <dd class="mt-1 text-sm text-gray-900">
                                <div class="space-y-2">
                                    @if($plainte->document_path)
                                    <div class="flex items-center justify-between p-2 bg-blue-50 border border-blue-200 rounded-md">
                                        <div class="flex items-center space-x-2">
                                            <svg class="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" />
                                            </svg>
                                            <div>
                                                <span class="font-medium">Document original</span>
                                                <div class="text-xs text-gray-600">Joint lors de la création de la plainte</div>
                                            </div>
                                        </div>
                                        <a href="{{ route('plaintes.suivre') }}?code_suivi={{ $codeSuivi }}&download=1"
                                            class="inline-flex items-center px-2 py-1 text-xs font-medium text-blue-700 bg-blue-100 rounded-md hover:bg-blue-200 transition-colors duration-200">
                                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586 14.293 5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 011.414-1.414L9 10.586 7.707 8.293z" clip-rule="evenodd" />
                                            </svg>
                                            Télécharger
                                        </a>
                                    </div>
                                    @endif

                                    @foreach($plainte->commentaireDocuments as $document)
                                    <div class="flex items-center justify-between p-2 bg-gray-50 border border-gray-200 rounded-md">
                                        <div class="flex items-center space-x-2">
                                            <svg class="w-4 h-4 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd" />
                                            </svg>
                                            <div>
                                                <span class="font-medium">{{ $document->original_filename }}</span>
                                                <div class="text-xs text-gray-600">
                                                    Joint par {{ $document->user->name }} le {{ $document->created_at->format('d/m/Y H:i') }}
                                                    @if($document->commentaire)
                                                        - {{ Str::limit($document->commentaire, 50) }}
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                        <a href="{{ route('plaintes.suivre') }}?code_suivi={{ $codeSuivi }}&download_commentaire={{ $document->id }}"
                                            class="inline-flex items-center px-2 py-1 text-xs font-medium text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors duration-200">
                                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586 14.293 5.293a1 1 0 111.414 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 011.414-1.414L9 10.586 7.707 8.293z" clip-rule="evenodd" />
                                            </svg>
                                            Télécharger
                                        </a>
                                    </div>
                                    @endforeach
                                </div>
                            </dd>
                        </div>
                        @endif
                    </dl>

                    @if($plainte->commentaire_admin)
                    <div class="mt-6">
                        <dt class="text-sm font-medium text-gray-500">Commentaire de l'administration</dt>
                        <dd class="mt-2 text-sm text-gray-900 bg-white p-3 rounded border">
                            {{ $plainte->commentaire_admin }}
                        </dd>
                    </div>
                    @endif

                    <!-- Barre de progression améliorée -->
                    <div class="mt-8">
                        <div class="flex items-center justify-between text-sm font-medium text-gray-700 mb-4">
                            <span class="flex items-center">
                                <svg class="w-4 h-4 mr-2 text-indigo-600" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.293l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 010 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                                </svg>
                                Progression du traitement
                            </span>
                            <span class="font-semibold">
                                @switch($plainte->statut)
                                    @case('en_attente')
                                    @case('en_cours')
                                    @case('traitee')
                                    @case('rejetee')
                                @endswitch
                            </span>
                        </div>

                        <!-- Étapes de progression -->
                        <div class="flex items-center justify-between mb-3">
                            <div class="flex flex-col items-center">
                                <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold
                                    @if($plainte->statut === 'en_attente' || $plainte->statut === 'en_cours' || $plainte->statut === 'traitee' || $plainte->statut === 'rejetee')
                                        bg-green-500 text-white animate-pulse
                                    @else
                                        bg-gray-300 text-gray-600
                                    @endif">
                                    ✓
                                </div>
                                <span class="text-xs text-gray-600 mt-1">Reçue</span>
                            </div>

                            <div class="flex-1 h-1 mx-2 bg-gray-200 rounded">
                                <div class="h-full bg-gradient-to-r from-green-400 to-green-500 rounded animate-fill-progress"
                                    style="width:
                                    @switch($plainte->statut)
                                        @case('en_attente') 0%
                                        @case('en_cours') 50%
                                        @case('traitee') 100%
                                        @case('rejetee') 100%
                                    @endswitch">
                                </div>
                            </div>

                            <div class="flex flex-col items-center">
                                <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold
                                    @if($plainte->statut === 'en_cours' || $plainte->statut === 'traitee' || $plainte->statut === 'rejetee')
                                        bg-blue-500 text-white animate-pulse
                                    @else
                                        bg-gray-300 text-gray-600
                                    @endif">
                                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.293l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 010 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                                <span class="text-xs text-gray-600 mt-1">En cours</span>
                            </div>

                            <div class="flex-1 h-1 mx-2 bg-gray-200 rounded">
                                <div class="h-full
                                    @if($plainte->statut === 'traitee')
                                        bg-gradient-to-r from-blue-400 to-green-500 animate-fill-progress-delayed
                                    @elseif($plainte->statut === 'rejetee')
                                        bg-gradient-to-r from-blue-400 to-red-500 animate-fill-progress-delayed
                                    @else
                                        bg-gray-200
                                    @endif rounded"
                                    style="width:
                                    @switch($plainte->statut)
                                        @case('en_attente') 0%
                                        @case('en_cours') 0%
                                        @case('traitee') 100%
                                        @case('rejetee') 100%
                                    @endswitch">
                                </div>
                            </div>

                            <div class="flex flex-col items-center">
                                <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold
                                    @if($plainte->statut === 'traitee')
                                        bg-green-500 text-white animate-bounce
                                    @elseif($plainte->statut === 'rejetee')
                                        bg-red-500 text-white animate-bounce
                                    @else
                                        bg-gray-300 text-gray-600
                                    @endif">
                                    @if($plainte->statut === 'traitee')
                                        ✓
                                    @elseif($plainte->statut === 'rejetee')
                                        ✗
                                    @else
                                        ?
                                    @endif
                                </div>
                                <span class="text-xs text-gray-600 mt-1">
                                    @if($plainte->statut === 'rejetee')
                                        Rejetée
                                    @else
                                        Résolue
                                    @endif
                                </span>
                            </div>
                        </div>

                        <!-- Message de statut -->
                        <div class="mt-4 p-3 rounded-lg text-sm
                            @if($plainte->statut === 'en_attente')
                                bg-yellow-50 border border-yellow-200 text-yellow-800
                            @elseif($plainte->statut === 'en_cours')
                                bg-blue-50 border border-blue-200 text-blue-800
                            @elseif($plainte->statut === 'traitee')
                                bg-green-50 border border-green-200 text-green-800
                            @elseif($plainte->statut === 'rejetee')
                                bg-red-50 border border-red-200 text-red-800
                            @endif">
                            <div class="flex items-center">
                                @if($plainte->statut === 'en_attente')
                                    <svg class="w-4 h-4 mr-2 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                    </svg>
                                    <strong>En attente :</strong> Votre plainte a été reçue et est en cours d'examen.
                                @elseif($plainte->statut === 'en_cours')
                                    <svg class="w-4 h-4 mr-2 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.293l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 010 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                                    </svg>
                                    <strong>En cours :</strong> Votre plainte est actuellement en cours de traitement.
                                @elseif($plainte->statut === 'traitee')
                                    <svg class="w-4 h-4 mr-2 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                    </svg>
                                    <strong>Résolue :</strong> Votre plainte a été traitée avec succès.
                                @elseif($plainte->statut === 'rejetee')
                                    <svg class="w-4 h-4 mr-2 text-red-600" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                                    </svg>
                                    <strong>Rejetée :</strong> Votre plainte a été examinée mais ne peut être traitée.
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- <div class="mt-8 text-center">
            <p class="text-sm text-gray-500">
                Pour toute question supplémentaire, contactez-nous à l'adresse :
                <a href="mailto:plaintes@UAC eservices.com" class="text-indigo-600 hover:text-indigo-500">
                    plaintes@UAC eservices.com
                </a>
            </p>
        </div> --}}
    </div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Animation de la barre de progression au chargement de la page
    const progressBars = document.querySelectorAll('.animate-fill-progress, .animate-fill-progress-delayed');

    progressBars.forEach((bar, index) => {
        bar.style.width = '0%';

        setTimeout(() => {
            const targetWidth = bar.style.getPropertyValue('--progress-width') || bar.style.width;
            bar.style.width = targetWidth;
        }, 300 + (index * 200));
    });

    const steps = document.querySelectorAll('.step-completed, .step-current');
    steps.forEach((step, index) => {
        setTimeout(() => {
            step.classList.add('animate-pulse');
        }, 500 + (index * 300));
    });

    // Animation du message de statut
    const statusMessage = document.querySelector('.status-message');
    if (statusMessage) {
        statusMessage.style.opacity = '0';
        statusMessage.style.transform = 'translateY(10px)';

        setTimeout(() => {
            statusMessage.style.transition = 'all 0.6s ease-out';
            statusMessage.style.opacity = '1';
            statusMessage.style.transform = 'translateY(0)';
        }, 1000);
    }

    const stepElements = document.querySelectorAll('[class*="step-"]');
    stepElements.forEach(step => {
        step.addEventListener('mouseenter', function() {
            this.style.transform = 'scale(1.1)';
            this.style.transition = 'transform 0.2s ease';
        });

        step.addEventListener('mouseleave', function() {
            this.style.transform = 'scale(1)';
        });
    });
});
</script>
@endpush