@php
    $current_page = Route::currentRouteName();
@endphp

@php
    $customerData = \App\Models\Tenant\CustomerPortalConfiguration::first();
@endphp

<style>
    .active {
        color: {{ $customerData->primary }};
    }

    .inactive {
        color: #505050;
    }
</style>

<div class="sidebar shadow">
    <a href="#" class="logo pb-4">
        <img src="{{ asset('customer_portal/' . $customerData->sidebar_logo) }}" width="60px" alt="">
    </a>

    <div class="scroll-bar-supervisor" style="height: 87%; width: fit-content; overflow-y: scroll;">
        <!-- Dashboard Link -->
        <a href="{{ route('customer.dashboard.index') }}"
           class="@if($current_page == 'customer.dashboard.index' || $current_page == 'customer.index') active @else inactive @endif mb-4"
           style="padding: 0px 23px;"
           data-bs-toggle="tooltip"
           data-bs-placement="right"
           data-bs-title="Dashboard">
            @if($current_page == 'customer.dashboard.index' || $current_page == 'customer.index')
                <div class="arrow">
                    <i class="fa-solid fa-caret-right active" style="font-size: 26px;"></i>
                </div>
            @endif
            <i class="
                @if($current_page == 'customer.dashboard.index' || $current_page == 'customer.index')
                fa-solid fa-gauge-high active
                @else
                fa-solid fa-gauge-high inactive
                @endif"
               style="font-size: 25px; padding: 0;">
            </i>
        </a>

        <!-- Tickets Link -->
        <a href="{{ route('customer.tickets.index') }}"
           class="@if($current_page == 'customer.tickets.index') active @else inactive @endif mb-4"
           style="padding: 0px 23px;"
           data-bs-toggle="tooltip"
           data-bs-placement="right"
           data-bs-title="Tickets">
            @if($current_page == 'customer.tickets.index')
                <div class="arrow">
                    <i class="fa-solid fa-caret-right active" style="font-size: 26px;"></i>
                </div>
            @endif
            <i class="
                @if($current_page == 'customer.tickets.index')
                fa-solid fa-inbox active
                @else
                fa-solid fa-inbox inactive
                @endif"
               style="font-size: 25px; padding: 0;">
            </i>
        </a>

        <!-- Appointment Link -->
        <a href="{{ route('customer.appointment.index') }}"
           class="@if($current_page == 'customer.appointment.index' || $current_page == 'customer.appointment.create' || $current_page == 'customer.appointment.edit') active @else inactive @endif mb-4"
           style="padding: 0px 23px;"
           data-bs-toggle="tooltip"
           data-bs-placement="right"
           data-bs-title="Appointment">
            @if($current_page == 'customer.appointment.index' || $current_page == 'customer.appointment.create' || $current_page == 'customer.appointment.edit')
                <div class="arrow">
                    <i class="fa-solid fa-caret-right active" style="font-size: 26px;"></i>
                </div>
            @endif
            <i class="
                @if($current_page == 'customer.appointment.index' || $current_page == 'customer.appointment.create' || $current_page == 'customer.appointment.edit')
                fa-regular fa-calendar-check active
                @else
                fa-regular fa-calendar-check inactive
                @endif"
               style="font-size: 26px; padding: 0;">
            </i>
        </a>
    </div>
</div>