@props(['class' => ''])
@php
    $user = Auth::user();
    $userId = $user->id;
    $user->user_type_id=='1' ? $isAdmin = true : $isAdmin = false;

@endphp

@if($isAdmin)
<div class="theme-switch-container {{ $class }}">
    <label for="theme-switch" class="theme-switch-label">
        <input
            type="checkbox"
            id="theme-switch"
            class="theme-switch-input"
            aria-label="Cambiar entre modo claro y oscuro"
        >
        <span class="theme-switch-slider">
            <!-- Icono sol para modo claro -->
            <svg class="theme-switch-icon theme-switch-icon-light" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="12" cy="12" r="5" stroke="currentColor" stroke-width="2"/>
                <line x1="12" y1="1" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <line x1="12" y1="21" x2="12" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <line x1="1" y1="12" x2="3" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <line x1="21" y1="12" x2="23" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
            <!-- Icono luna para modo oscuro -->
            <svg class="theme-switch-icon theme-switch-icon-dark" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </span>
    </label>
    <span style="padding-left: 10px;" class="fi-wi-stats-overview-stat-label text-sm font-medium"></span>
</div>
@endif
<style>
.theme-switch-container {
    display: inline-flex;
    align-items: center;
    height: 60px;
    padding-left: 10px;
}

.theme-switch-label {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 32px;
    cursor: pointer;
    user-select: none;
}

.theme-switch-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-switch-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    border: 2px solid #d1d5db;
    border-radius: 32px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
}

.theme-switch-slider:before {
    content: '';
    position: absolute;
    height: 24px;
    width: 24px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.theme-switch-input:checked + .theme-switch-slider {
    background-color: #374151;
    border-color: #4b5563;
}

.theme-switch-input:checked + .theme-switch-slider:before {
    transform: translateX(28px);
}

.theme-switch-icon {
    color: #6b7280;
    transition: all 0.3s ease;
    z-index: 1;
}

.theme-switch-icon-light {
    margin-left: 6px;
}

.theme-switch-icon-dark {
    margin-right: 6px;
}

.theme-switch-input:checked ~ .theme-switch-slider .theme-switch-icon-light {
    color: #fbbf24;
}

.theme-switch-input:not(:checked) ~ .theme-switch-slider .theme-switch-icon-dark {
    color: #6b7280;
}

.theme-switch-input:checked ~ .theme-switch-slider .theme-switch-icon-dark {
    color: #e5e7eb;
}

.theme-switch-input:not(:checked) ~ .theme-switch-slider .theme-switch-icon-light {
    color: #f59e0b;
}

/* Hover effects */
.theme-switch-label:hover .theme-switch-slider {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.theme-switch-input:focus + .theme-switch-slider {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Dark mode styles */
.dark .theme-switch-slider {
    background-color: #374151;
    border-color: #4b5563;
}

.dark .theme-switch-slider:before {
    background-color: #1f2937;
}

.dark .theme-switch-icon {
    color: #9ca3af;
}

.dark .theme-switch-input:checked ~ .theme-switch-slider .theme-switch-icon-light {
    color: #fbbf24;
}

.dark .theme-switch-input:checked ~ .theme-switch-slider .theme-switch-icon-dark {
    color: #e5e7eb;
}
</style>