@props([
    'modemStatus' => false, 
    'databaseStatus' => false, 
    'remoteConnectivityStatus' => false, 
    'connectedRemoteHost' => false, 
    'modemImei' => '', 
    'modemRevision' => '', 
    'networkAccessTechnology' => '', 
    'networkSignalStrength' => ''
])

<div 
    x-show="openBottomBar"
    x-transition 
    class="fixed bottom-0 h-[200px] pt-6 transition-all duration-300 bg-white shadow-[0_-4px_8px_-5px_#5A78AF] flex items-center px-5 flex-col [@media(min-width:991px)]:flex-row [@media(min-width:991px)]:h-[100px] [@media(min-width:991px)]:pt-0"
    x-bind:style="'width: calc(100vw - ' + (openMenu ? '200px' : '60px') + ')'"
    x-bind:class="openMenu ? 'left-[200px]' : 'left-[60px]'">
    <button @click="openBottomBar = false"
        class="absolute top-0 left-1/2 transform -translate-x-1/2">
        <img src="{{ asset('icons/menu/arrow-right.svg') }}" class="w-6 h-6 transform rotate-90 transition-transform duration-300">
    </button>
    <div class="flex gap-2 flex-1">
        <div class="flex flex-col gap-y-2">
            <div class="{{ $modemStatus ? 'success-message' : 'danger-message' }}">Modem Status</div>
            <div class="{{ $remoteConnectivityStatus ? 'success-message' : 'danger-message' }}">Remote Connectivity Status</div>
        </div>
        <div class="flex flex-col gap-y-2">
            <div class="{{ $databaseStatus ? 'success-message' : 'danger-message' }}">Database Status</div>
            <div class="{{ $connectedRemoteHost ? 'success-message' : 'danger-message' }}">Connected Remote Host</div>
        </div>
    </div>
    <div class="text-center flex-1 flex flex-col justify-center">
        <p class="text-sm font-semibold">{{ $modemImei }}</p>
        <p class="text-sm font-semibold">{{ $modemRevision }}</span></p>
    </div>
    <div class="flex items-center gap-2 flex-1 justify-end">
        <p class="text-sm font-semibold">{{ $networkAccessTechnology }}</p>
        <span id="signal-strength" class="text-sm font-semibold">Strength: {{ $networkSignalStrength }}</span>
        <div class="flex gap-[1px] items-end mt-[-13px]" id="signal-bars"></div>
    </div>
</div>
<script>
    const strength = '{{ $networkSignalStrength }}';
    const barHeights = ["h-2", "h-3", "h-4", "h-5", "h-6"];
    const signalBars = document.getElementById("signal-bars");
    for (let i = 0; i < 5; i++) {
        const bar = document.createElement("div");
        bar.classList.add("w-2", "rounded-sm", "bg-gray-300", barHeights[i]);
        if (i < strength) {
            if (strength <= 2) {
                bar.classList.replace("bg-gray-300", "bg-danger");
            } else {
                bar.classList.replace("bg-gray-300", "bg-success");
            }
        }
        signalBars.appendChild(bar);
    }
</script>