@extends('layouts.dashboard')

@section('title', 'Portefeuille')
@section('page-title', '')

@push('styles')
<style>
    .page-header {
        margin-bottom: 2rem;
    }
    
    .page-title {
        font-size: 1.75rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 0.5rem;
    }
    
    .page-subtitle {
        color: #6b7280;
        font-size: 1rem;
    }
    
    .main-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 1.5rem;
        transition: all 0.2s ease;
    }
    
    .section-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 1.5rem;
    }
    
    .table {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        border: 1px solid #e5e7eb;
    }
    
    .table th {
        background: #f8fafc;
        border: none;
        border-bottom: 2px solid #e5e7eb;
        font-weight: 700;
        color: #1f2937;
        padding: 1.25rem 1rem;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }
    
    .table td {
        padding: 1.25rem 1rem;
        vertical-align: middle;
        border-bottom: 1px solid #f1f5f9;
        background: white;
    }
    
    .table td:nth-child(3),
    .table td:nth-child(4),
    .table td:nth-child(5),
    .table td:nth-child(6) {
        vertical-align: middle;
        text-align: center;
    }
    
    .table th:nth-child(3),
    .table th:nth-child(4),
    .table th:nth-child(5),
    .table th:nth-child(6) {
        text-align: center;
    }
    
    .table tbody tr:hover {
        background: linear-gradient(135deg, #e8f5ea 0%, #d4f0dd 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(111, 184, 125, 0.1);
    }
    
    /* Désactiver le hover sur la ligne quand un dropdown est ouvert */
    .table tbody tr.has-open-dropdown:hover {
        transform: none;
    }
    
    .prospect-info {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    
    .prospect-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid #6fb87d;
        box-shadow: 0 2px 8px rgba(111, 184, 125, 0.2);
    }
    
    .prospect-avatar-placeholder {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, #6fb87d 0%, #5da66d 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 1rem;
        text-transform: uppercase;
        border: 3px solid #6fb87d;
        box-shadow: 0 2px 8px rgba(111, 184, 125, 0.3);
    }
    
    .prospect-details h6 {
        margin: 0 0 0.5rem 0;
        font-weight: 700;
        color: #1f2937;
        font-size: 1rem;
        line-height: 1.3;
    }
    
    .prospect-details small {
        color: #6b7280;
        font-size: 0.85rem;
        font-weight: 500;
        line-height: 1.3;
        background: #f8fafc;
        padding: 0.25rem 0.75rem;
        border-radius: 6px;
        display: inline-block;
    }
    
    .action-buttons {
        display: flex;
        gap: 0.75rem;
        justify-content: center;
        align-items: center;
    }
    
    .action-btn {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        text-decoration: none;
        cursor: pointer;
        background: transparent;
        border: none;
        padding: 0;
    }
    
    .action-btn:hover {
        transform: scale(1.1);
    }
    
    .action-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .action-btn-delete {
        color: #ef4444;
    }
    
    .action-btn-delete:hover {
        color: #dc2626;
    }
    
    .search-container {
        position: relative;
    }
    
    .search-input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
    }
    
    .search-icon {
        position: absolute;
        left: 12px;
        color: #6b7280;
        z-index: 2;
    }
    
    .search-input {
        width: 100%;
        padding: 0.75rem 1rem 0.75rem 3rem;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 0.875rem;
        background: white;
        transition: all 0.2s ease;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    
    .search-input:focus {
        outline: none;
        border-color: #6fb87d;
        box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25);
    }
    
    
    .form-select {
        cursor: pointer;
    }
    
    .form-select:focus {
        outline: none;
        border-color: #6fb87d;
        box-shadow: 0 0 0 3px rgba(111, 184, 125, 0.1);
    }
    
    .form-control {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        transition: all 0.2s ease;
    }
    
    .form-control:focus {
        outline: none;
        border-color: #6fb87d;
        box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25);
    }
    
    .form-control:hover {
        border-color: #6fb87d;
    }
    
    .confirm-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999999;
    }
    
    .confirm-modal-content {
        background: white;
        padding: 2rem;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        max-width: 400px;
        width: 90%;
        text-align: center;
    }
    
    .confirm-modal h3 {
        margin-bottom: 1rem;
        color: #333;
        font-size: 1.25rem;
    }
    
    .confirm-modal p {
        margin-bottom: 2rem;
        color: #666;
        line-height: 1.5;
    }
    
    .confirm-modal-buttons {
        display: flex;
        gap: 1rem;
        justify-content: center;
    }
    
    .confirm-modal-btn {
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        transition: all 0.2s ease;
    }
    
    .confirm-modal-btn-cancel {
        background-color: #6c757d;
        color: white;
    }
    
    .confirm-modal-btn-cancel:hover {
        background-color: #5a6268;
    }
    
    .confirm-modal-btn-confirm {
        background-color: #dc3545;
        color: white;
    }
    
    .confirm-modal-btn-confirm:hover {
        background-color: #c82333;
    }
    
    .btn-primary {
        background-color: #6fb87d;
        border-color: #6fb87d;
        color: white;
    }
    
    .btn-primary:hover {
        background-color: #5da66d;
        border-color: #5da66d;
        color: white;
    }
    
    .btn-primary:focus {
        background-color: #5da66d;
        border-color: #5da66d;
        box-shadow: 0 0 0 0.2rem rgba(111, 184, 125, 0.25);
    }
</style>
@endpush

@section('content')
<div class="container-fluid px-4 py-4" style="padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem;">
    <!-- En-tête de la page -->
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="mb-2" style="color: #6fb87d; font-size: 2rem; font-weight: 600;">Portefeuille</h1>
            <p class="text-muted" style="font-size: 1.1rem;">Gérez vos clients</p>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="main-card">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h2 class="section-title mb-0">Gestion du Portefeuille</h2>
                </div>
                
                <!-- Barre de recherche et filtres -->
                <div class="row mb-4">
                    <div class="col-md-4">
                        <div class="search-container">
                            <div class="search-input-wrapper">
                                <svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <circle cx="11" cy="11" r="8"></circle>
                                    <path d="m21 21-4.35-4.35"></path>
                                </svg>
                                <input type="text" id="clientSearch" class="search-input" placeholder="Rechercher par nom, prénom, email ou source...">
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <select id="filterStatus" class="form-select" style="padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid #e5e7eb; font-size: 0.95rem; width: 100%;">
                            <option value="">Tous les états</option>
                            <option value="incomplet">Incomplet</option>
                            <option value="conforme">Conforme</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <select id="filterSource" class="form-select" style="padding: 0.75rem 1rem; border-radius: 8px; border: 1px solid #e5e7eb; font-size: 0.95rem; width: 100%;">
                            <option value="">Toutes les sources</option>
                            @foreach($sources ?? [] as $source)
                                <option value="{{ $source }}">{{ $source }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Nom / Prénom</th>
                                <th>Email</th>
                                <th>Source</th>
                                <th>Nombre de devis</th>
                                <th>État du dossier</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($clients ?? [] as $client)
                            <tr>
                                <td>
                                    <div style="font-weight: 600; color: #1f2937; font-size: 0.95rem;">
                                        {{ trim(($client->first_name ?? '') . ' ' . ($client->last_name ?? '')) ?: 'N/A' }}
                                    </div>
                                </td>
                                <td>
                                    <div style="font-size: 0.9rem; color: #1f2937;">{{ $client->email ?? 'N/A' }}</div>
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    @php
                                        $currentSource = $client->source ?? 'Manuel';
                                    @endphp
                                    <div class="dropdown portefeuille-source-dropdown-wrapper" style="display: inline-block; position: relative;">
                                        <span class="badge portefeuille-source-badge"
                                              data-client-id="{{ $client->id }}"
                                              data-current-source="{{ $currentSource }}"
                                              style="background-color: rgba(111, 184, 125, 0.2); color: #6fb87d; border: 1px solid rgba(111, 184, 125, 0.3); cursor: pointer;">
                                            {{ $currentSource }}
                                        </span>
                                        <div class="dropdown-menu portefeuille-source-dropdown"
                                             data-client-id="{{ $client->id }}"
                                             style="display: none; position: absolute; top: 100%; left: 0; background: white; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); z-index: 9999; min-width: 220px; padding: 0; margin-top: 0.25rem; overflow: hidden;">
                                            <a class="dropdown-item portefeuille-source-option" href="#"
                                               data-source="Général"
                                               style="padding: 0.75rem 1rem; color: #1f2937; text-decoration: none; display: flex; align-items: center; cursor: pointer; border-bottom: 1px solid #f1f5f9; margin: 0;">
                                                <span class="badge" style="background-color: #e5e7eb; color: #374151; border: none; font-weight: 600; margin-right: 0.5rem;">Général</span>
                                            </a>
                                            @if(isset($ambassadeurs) && $ambassadeurs->count() > 0)
                                                @foreach($ambassadeurs as $ambassadeur)
                                                    <a class="dropdown-item portefeuille-source-option" href="#"
                                                       data-source="{{ $ambassadeur->name }}"
                                                       style="padding: 0.75rem 1rem; color: #1f2937; text-decoration: none; display: flex; align-items: center; cursor: pointer; border-bottom: 1px solid #f1f5f9; margin: 0;">
                                                        <span class="badge" style="background-color: rgba(111, 184, 125, 0.2); color: #6fb87d; border: none; font-weight: 600; margin-right: 0.5rem;">
                                                            {{ $ambassadeur->name }}
                                                        </span>
                                                    </a>
                                                @endforeach
                                            @endif
                                        </div>
                                    </div>
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    <span style="font-weight: 600; color: #6fb87d; font-size: 1rem;">
                                        {{ $client->devis ? $client->devis->count() : 0 }}
                                    </span>
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    @if($client->dossier_complet)
                                        <span class="badge" style="background-color: #6fb87d; color: white; border: none;">
                                            Conforme
                                        </span>
                                    @else
                                        <span class="badge" style="background-color: #fbbf24; color: white; border: none;">
                                            Incomplet
                                        </span>
                                    @endif
                                </td>
                                <td style="text-align: center; vertical-align: middle;">
                                    <div class="action-buttons">
                                        <a href="{{ route('portefeuille.show', $client->id) }}" class="action-btn" title="Voir les détails" style="color: #6fb87d;">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                                                <circle cx="12" cy="12" r="3"/>
                                            </svg>
                                        </a>
                                        <button type="button" class="action-btn action-btn-delete js-delete-client"
                                                data-client-id="{{ $client->id }}"
                                                data-client-name="{{ ($client->first_name ?? '') . ' ' . ($client->last_name ?? '') }}"
                                                title="Supprimer">
                                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                <polyline points="3,6 5,6 21,6"/>
                                                <path d="M19,6v14a2,2 0 0,1 -2,2H7a2,2 0 0,1 -2,-2V6m3,0V4a2,2 0 0,1 2,-2h4a2,2 0 0,1 2,2v2"/>
                                                <line x1="10" y1="11" x2="10" y2="17"/>
                                                <line x1="14" y1="11" x2="14" y2="17"/>
                                            </svg>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6" class="text-center py-5">
                                    <p class="text-muted">Aucun client trouvé</p>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script nonce="{{ $cspNonce }}">
function showConfirmDialog(title, message, onConfirm) {
    const modal = document.createElement('div');
    modal.className = 'confirm-modal';
    modal.innerHTML = `
        <div class="confirm-modal-content">
            <h3>${title}</h3>
            <p>${message}</p>
            <div class="confirm-modal-buttons">
                <button class="confirm-modal-btn confirm-modal-btn-cancel">Annuler</button>
                <button class="confirm-modal-btn confirm-modal-btn-confirm">Confirmer</button>
            </div>
        </div>
    `;
    
    document.body.appendChild(modal);
    
    const cancelBtn = modal.querySelector('.confirm-modal-btn-cancel');
    const confirmBtn = modal.querySelector('.confirm-modal-btn-confirm');
    
    cancelBtn.addEventListener('click', () => {
        modal.remove();
    });
    
    confirmBtn.addEventListener('click', () => {
        modal.remove();
        onConfirm();
    });
    
    modal.addEventListener('click', (e) => {
        if (e.target === modal) {
            modal.remove();
        }
    });
}

function confirmDelete(clientId, clientName) {
    showConfirmDialog(
        'Supprimer le client',
        `Êtes-vous sûr de vouloir supprimer le client "${clientName}" ?\n\nCette action est irréversible.`,
        () => deleteClient(clientId)
    );
}

// Handler CSP-safe pour suppression client (remplace onclick=)
document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('click', function(e) {
        const btn = e.target.closest('.js-delete-client');
        if (!btn) return;
        const clientId = btn.getAttribute('data-client-id');
        const clientName = btn.getAttribute('data-client-name') || '';
        if (!clientId) return;
        confirmDelete(parseInt(clientId, 10), clientName);
    });
});

function deleteClient(clientId) {
    fetch(`/prospects/${clientId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            location.reload();
        } else {
            alert('Erreur lors de la suppression du client : ' + (data.message || 'Erreur inconnue'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Erreur lors de la suppression du client');
    });
}

function changePortefeuilleSource(clientId, newSource) {
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

    fetch('/prospects/' + clientId + '/source', {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': csrfToken,
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        body: JSON.stringify({ source: newSource })
    })
    .then(function(r) { return r.json().then(function(data) { return { ok: r.ok, data: data }; }); })
    .then(function(result) {
        if (result.ok && result.data.success) {
            const badge = document.querySelector('.portefeuille-source-badge[data-client-id="' + clientId + '"]');
            if (badge) {
                badge.setAttribute('data-current-source', newSource);
                badge.textContent = newSource;
            }
            const dropdown = document.querySelector('.portefeuille-source-dropdown[data-client-id="' + clientId + '"]');
            if (dropdown) dropdown.style.display = 'none';
        } else {
            alert('Erreur: ' + (result.data.message || 'Une erreur est survenue'));
        }
    })
    .catch(function(err) {
        console.error('Erreur lors de la mise à jour de la source:', err);
        alert('Erreur lors de la mise à jour de la source');
    });
}

function filterClients() {
    const searchTerm = document.getElementById('clientSearch').value.toLowerCase();
    const filterStatus = document.getElementById('filterStatus').value;
    const filterSource = document.getElementById('filterSource').value;
    const clientRows = document.querySelectorAll('tbody tr');
    
    clientRows.forEach(function(row) {
        // Recherche par nom, prénom, email ou source
        const nameCell = row.querySelector('td:first-child');
        const name = nameCell ? nameCell.textContent.toLowerCase() : '';
        const email = row.querySelector('td:nth-child(2)')?.textContent.toLowerCase() || '';
        const sourceCell = row.querySelector('td:nth-child(3)');
        const source = sourceCell ? sourceCell.textContent.toLowerCase().trim() : '';
        
        const matchesSearch = !searchTerm || 
            name.includes(searchTerm) || 
            email.includes(searchTerm) || 
            source.includes(searchTerm);
        
        // Filtre par état du dossier
        const statusBadge = row.querySelector('td:nth-child(5) .badge');
        const statusText = statusBadge ? statusBadge.textContent.toLowerCase().trim() : '';
        let matchesStatus = true;
        if (filterStatus) {
            if (filterStatus === 'incomplet') {
                matchesStatus = statusText === 'incomplet';
            } else if (filterStatus === 'conforme') {
                matchesStatus = statusText === 'conforme';
            }
        }
        
        // Filtre par source
        let matchesSource = true;
        if (filterSource) {
            matchesSource = source === filterSource.toLowerCase();
        }
        
        if (matchesSearch && matchesStatus && matchesSource) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}


document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('clientSearch');
    const filterStatus = document.getElementById('filterStatus');
    const filterSource = document.getElementById('filterSource');
    
    // Vérifier si des paramètres de filtre sont présents dans l'URL
    const urlParams = new URLSearchParams(window.location.search);
    const filterStatusParam = urlParams.get('filterStatus');
    const filterSourceParam = urlParams.get('filterSource');
    
    if (filterStatusParam && filterStatus) {
        filterStatus.value = filterStatusParam;
    }
    
    if (filterSourceParam && filterSource) {
        filterSource.value = filterSourceParam;
    }
    
    // Déclencher le filtre automatiquement si des paramètres sont présents
    if (filterStatusParam || filterSourceParam) {
        filterClients();
    }
    
    if (searchInput) {
        searchInput.addEventListener('input', filterClients);
    }
    
    if (filterStatus) {
        filterStatus.addEventListener('change', filterClients);
    }
    
    if (filterSource) {
        filterSource.addEventListener('change', filterClients);
    }

    // Dropdown Source (portefeuille) - logique inspirée de /prospects
    document.querySelectorAll('.portefeuille-source-badge').forEach(function(badge) {
        badge.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            const wrapper = this.closest('.portefeuille-source-dropdown-wrapper');
            const dropdown = wrapper ? wrapper.querySelector('.portefeuille-source-dropdown') : null;
            const row = badge.closest('tr');
            if (!dropdown) return;

            const isVisible = dropdown.style.display === 'block' || dropdown.style.display === '';

            // Fermer les autres dropdowns de source (portefeuille)
            document.querySelectorAll('.portefeuille-source-dropdown').forEach(function(d) {
                if (d !== dropdown) d.style.display = 'none';
            });

            const rect = badge.getBoundingClientRect();
            dropdown.style.position = 'fixed';
            dropdown.style.left = rect.left + 'px';
            dropdown.style.display = 'block';

            const dropdownHeight = dropdown.offsetHeight || 200;
            const spaceBelow = window.innerHeight - rect.bottom;
            const spaceAbove = rect.top;

            if (spaceBelow < dropdownHeight && spaceAbove > dropdownHeight) {
                dropdown.style.top = (rect.top - dropdownHeight - 5) + 'px';
                dropdown.style.bottom = 'auto';
            } else {
                dropdown.style.top = (rect.bottom + 5) + 'px';
                dropdown.style.bottom = 'auto';
            }

            if (isVisible) {
                dropdown.style.display = 'none';
                if (row) row.classList.remove('has-open-dropdown');
            } else {
                document.querySelectorAll('tbody tr').forEach(function(r) {
                    r.classList.remove('has-open-dropdown');
                });
                dropdown.style.display = 'block';
                if (row) row.classList.add('has-open-dropdown');
            }
        });
    });

    document.querySelectorAll('.portefeuille-source-option').forEach(function(option) {
        option.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            const newSource = this.getAttribute('data-source');
            const dropdown = this.closest('.portefeuille-source-dropdown');
            const clientId = dropdown.getAttribute('data-client-id');
            const badge = document.querySelector('.portefeuille-source-badge[data-client-id="' + clientId + '"]');
            const currentSource = badge ? badge.getAttribute('data-current-source') : '';

            if (newSource && newSource !== currentSource) {
                changePortefeuilleSource(clientId, newSource);
            } else {
                dropdown.style.display = 'none';
            }
        });
    });

    // Fermer les dropdowns source quand on clique ailleurs
    document.addEventListener('click', function(e) {
        const clickedSourceBadge = e.target.closest('.portefeuille-source-badge');
        const clickedSourceOption = e.target.closest('.portefeuille-source-option');
        const clickedRow = e.target.closest('tr');

        let shouldClose = true;
        if (clickedRow) {
            const rowSourceDropdown = clickedRow.querySelector('.portefeuille-source-dropdown');
            if (rowSourceDropdown && rowSourceDropdown.style.display === 'block') {
                shouldClose = false;
            }
        }

        if (shouldClose && !clickedSourceBadge && !clickedSourceOption) {
            document.querySelectorAll('.portefeuille-source-dropdown').forEach(function(d) { d.style.display = 'none'; });
            document.querySelectorAll('tbody tr').forEach(function(r) {
                r.classList.remove('has-open-dropdown');
            });
        }
    });

    document.querySelectorAll('.portefeuille-source-dropdown').forEach(function(dropdown) {
        dropdown.addEventListener('click', function(e) {
            e.stopPropagation();
        });
        dropdown.addEventListener('mouseenter', function(e) {
            e.stopPropagation();
        });
        dropdown.addEventListener('mouseleave', function(e) {
            e.stopPropagation();
        });
    });
    
});
</script>
@endpush