@section('custom-css')
    <style>
        .container {
            margin-top: 9rem;
        }

        a.profile-anchor, a.profile-anchor:hover, a.profile-anchor:focus, a.profile-anchor:active {
            text-decoration: none !important;
            color: gray !important;
        }

        .account-sidebar-list > li > a {
            display: flex !important;
            padding-top: 12px;
            margin-top: 0;
            padding-left: 0;
        }

        .account-sidebar-list > li {
            border-bottom: 1px solid lightgrey;
            align-items: center;
        }

        .account-sidebar-list > li > a:hover {
            text-decoration: none !important;
        }

        .account-sidebar-list > li > img {
            max-height: 15px;
            -webkit-filter: grayscale(1);
            filter: grayscale(1);
        }

        input.address-modal-input {
            height: 70px;
            border-radius: 10px;
            border: 1px solid #cacaca;
            padding-left: 4rem;
        }

        .pac-container {
            z-index: 10000 !important;
        }

        .selected-route {
            background: lightgrey;
        }
    </style>
@endsection

@php($routeName = \Request::route()->getName())

<nav>
    <h1>{{$user['name']}} {{$user['surname']}}</h1>
    <h4>
        <a class="profile-anchor" href="{{route('user.account.show', 1)}}">
            Modifiko profilin <img style="max-height: 23px" src="{{asset('images/cog.svg')}}">
        </a>
    </h4>
</nav>

<div class="row">
    <div class="col-xs-4" style="padding-right: unset">
        <h3 style="color: black">{{$user['totalOrdersNo']}}</h3>
        <p>Porosi</p>
    </div>
    <div class="col-xs-4" style="padding: unset">
        <h3 style="color: black">{{isset($user['balance']) ? $user['balance'] : 0}}</h3>
        <p>Balanca (lek)</p>
    </div>
    <div class="col-xs-4" style="padding: unset">
        <h3 style="color: black">{{isset($user['activeBonus']) ? $user['activeBonus'] : 0}}</h3>
        <p>Bonus aktiv</p>
    </div>
</div>

<nav class="mt-4">
    <h4>Settings</h4>
    <ul class="account-list account-sidebar-list list-unstyled">
        <li>
            <a class="justify-space-between" href="{{ route('address_book.index') }}">
                <span>Adresat e tua</span>
                <img src="{{asset('images/arrow-right.png')}}">
            </a>
        </li>
        <li>
            <a class="justify-space-between" href="{{route('order.index')}}">
                <span>
                    Porositë e shkuara
                </span>
                <img src="{{asset('images/arrow-right.png')}}">
            </a>
        </li>
        <li>
            <a class="justify-space-between" href="{{route('account.wishlist')}}">
                <span>
                    Lista e dëshirave
                </span>
                <img src="{{asset('images/arrow-right.png')}}">
            </a>
        </li>
        <li>
            <a href="{{route('account.saleBusinesses')}}" class="justify-space-between">
                <span>Biznese që kanë ulje</span>
                <img src="{{asset('images/arrow-right.png')}}" alt="arrow-right">
            </a>
        </li>
    </ul>
</nav>

<nav class="mt-4">
    <h4>Ke nevojë?</h4>
    <ul class="account-list account-sidebar-list list-unstyled">
        <li>
            <a class="justify-space-between" href="javascript:void(0)">
                <span>
                    Kuponat e tua
                </span>
                <img src="{{asset('images/arrow-right.png')}}">
            </a>
        </li>
        <li>
            <a class="justify-space-between" href="javascript:void(0)">
                <span>
                    Live Chat Support
                </span>
                <img src="{{asset('images/arrow-right.png')}}">
            </a>
        </li>
    </ul>
</nav>