@if ($servicesModuleEnabled ?? false)
<style>
    .pos-mode-switch {
        display: inline-flex !important;
        align-items: stretch;
        padding: 3px;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        background: #fff;
        gap: 2px;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .pos-mode-switch .pos-mode-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 100px;
        padding: 0.45rem 1rem;
        border-radius: 6px;
        font-size: 0.875rem;
        font-weight: 600;
        color: #6c757d !important;
        text-decoration: none !important;
        background: transparent;
        border: 0;
        line-height: 1.2;
    }
    .pos-mode-switch .pos-mode-btn:hover {
        color: #212529 !important;
        background: #f8f9fa;
    }
    .pos-mode-switch .pos-mode-btn.active {
        color: #fff !important;
        background: #0039BA !important;
    }
</style>
<div class="pos-mode-switch" role="group" aria-label="Mode de caisse">
    <a href="{{ route('sales.pos') }}" class="pos-mode-btn {{ ($posMode ?? '') === 'product' ? 'active' : '' }}">Produits</a>
    <a href="{{ route('services.pos') }}" class="pos-mode-btn {{ ($posMode ?? '') === 'service' ? 'active' : '' }}">Services</a>
</div>
@endif