@stack('navbar_start')
    <nav class="navbar navbar-top navbar-expand navbar-dark border-bottom">
        <div class="container-fluid">
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                @if (user()->can('read-common-search'))
                    <form class="navbar-search navbar-search-light form-inline mb-0" id="navbar-search-main" autocomplete="off">
                        <div id="global-search" class="form-group mb-0 mr-sm-3">
                            <div class="input-group input-group-alternative input-group-merge">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fa fa-search"></i></span>
                                </div>
                                <input type="text" name="search" v-model="keyword" @input="onChange" v-click-outside="closeResult" class="form-control" autocomplete="off" placeholder="Search">
                                <div class="dropdown-menu dropdown-menu-xl dropdown-menu-center" ref="menu" :class="[{show: show}]">
                                    <div class="list-group list-group-flush">
                                        <a class="list-group-item list-group-item-action" :href="item.href" v-for="(item, index) in items">
                                            <div class="row align-items-center">
                                                <div class="col ml--2">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div>
                                                            <div class="name" v-text="item.name"></div>
                                                        </div>
                                                        <div class="text-muted">
                                                            <span class="type" v-text="item.type"></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button type="button" class="close" data-action="search-close" data-target="#navbar-search-main" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </form>
                @endif

                <ul class="navbar-nav align-items-center ml-md-auto">
                    <li class="nav-item d-xl-none">
                        <div class="pr-3 sidenav-toggler sidenav-toggler-dark" data-action="sidenav-pin" data-target="#sidenav-main">
                            <div class="sidenav-toggler-inner">
                                <i class="sidenav-toggler-line"></i>
                                <i class="sidenav-toggler-line"></i>
                                <i class="sidenav-toggler-line"></i>
                            </div>
                        </div>
                    </li>

                    <li class="nav-item d-sm-none">
                        <a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
                            <i class="fa fa-search"></i>
                        </a>
                    </li>

                    @if (user()->can(['create-incomes-invoices', 'create-incomes-revenues', 'create-incomes-customers', 'create-expenses-bills', 'create-expenses-payments', 'create-expenses-vendors']))
                        <li class="nav-item dropdown">
                            <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="fas fa-plus"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-lg dropdown-menu-dark dropdown-menu-right">
                                <div class="row shortcuts px-4">
                                    @permission('create-incomes-invoices')
                                        <a href="{{ route('invoices.create') }}" class="col-4 shortcut-item">
                                            <span class="shortcut-media avatar rounded-circle bg-gradient-info">
                                            <i class="fa fa-money-bill"></i>
                                            </span>
                                            <small class="text-info">{{ trans_choice('general.invoices', 1) }}</small>
                                        </a>
                                    @endpermission

                                    @permission('create-incomes-revenues')
                                        <a href="{{ route('revenues.create') }}" class="col-4 shortcut-item">
                                            <span class="shortcut-media avatar rounded-circle bg-gradient-info">
                                                <i class="fas fa-hand-holding-usd"></i>
                                            </span>
                                            <small class="text-info">{{ trans_choice('general.revenues', 1) }}</small>
                                        </a>
                                    @endpermission

                                    @permission('create-incomes-customers')
                                        <a href="{{ route('customers.create') }}" class="col-4 shortcut-item">
                                            <span class="shortcut-media avatar rounded-circle bg-gradient-info">
                                            <i class="fas fa-user"></i>
                                            </span>
                                            <small class="text-info">{{ trans_choice('general.customers', 1) }}</small>
                                        </a>
                                    @endpermission

                                    @permission('create-expenses-bills')
                                        <a href="{{ route('bills.create') }}" class="col-4 shortcut-item">
                                            <span class="shortcut-media avatar rounded-circle bg-gradient-danger">
                                            <i class="fa fa-shopping-cart"></i>
                                            </span>
                                            <small class="text-danger">{{ trans_choice('general.bills', 1) }}</small>
                                        </a>
                                    @endpermission

                                    @permission('create-expenses-payments')
                                        <a href="{{ route('payments.create') }}" class="col-4 shortcut-item">
                                            <span class="shortcut-media avatar rounded-circle bg-gradient-danger">
                                                <i class="fas fa-hand-holding-usd"></i>
                                            </span>
                                            <small class="text-danger">{{ trans_choice('general.payments', 1) }}</small>
                                        </a>
                                    @endpermission

                                    @permission('create-expenses-vendors')
                                        <a href="{{ route('vendors.create') }}" class="col-4 shortcut-item">
                                            <span class="shortcut-media avatar rounded-circle bg-gradient-danger">
                                            <i class="fas fa-user"></i>
                                            </span>
                                            <small class="text-danger">{{ trans_choice('general.vendors', 1) }}</small>
                                        </a>
                                    @endpermission
                                </div>
                            </div>
                        </li>
                    @endif

                    <li class="nav-item dropdown">
                        <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <span>
                                <i class="far fa-bell"></i>
                            </span>
                            @if ($notifications)
                                <span class="badge badge-md badge-circle badge-floating badge-warning">{{ $notifications }}</span>
                            @endif
                        </a>

                        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right py-0 overflow-hidden">
                            <div class="px-3 py-3">
                                <a class="text-sm text-muted m-0">{{ trans_choice('header.notifications.counter', $notifications, ['count' => $notifications]) }}</a>
                            </div>

                            <div class="list-group list-group-flush">
                                @if (count($bills))
                                    <a href="{{ route('users.read.bills', $user->id) }}" class="list-group-item list-group-item-action">
                                        <div class="row align-items-center">
                                            <div class="col-auto">
                                                <i class="fa fa-shopping-cart"></i>
                                            </div>
                                            <div class="col ml--2">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <h4 class="mb-0 text-sm">{{ trans_choice('header.notifications.upcoming_bills', count($bills), ['count' => count($bills)]) }}</h4>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                @endif

                                @if (count($invoices))
                                    <a href="{{ route('users.read.invoices', $user->id) }}" class="list-group-item list-group-item-action">
                                        <div class="row align-items-center">
                                            <div class="col-auto">
                                                <i class="fa fa-money-bill-alt"></i>
                                            </div>
                                            <div class="col ml--2">
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <h4 class="mb-0 text-sm">{{ trans_choice('header.notifications.overdue_invoices', count($invoices), ['count' => count($invoices)]) }}</h4>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                @endif
                            </div>

                            <a href="#" class="dropdown-item text-center text-success font-weight-bold py-3">{{ trans('header.notifications.view_all') }}</a>
                        </div>
                    </li>

                    @permission('read-install-updates')
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('updates.index') }}" title="{{ $updates }} Updates Available" role="button" aria-haspopup="true" aria-expanded="false">
                                <span>
                                    <i class="fa fa-sync-alt"></i>
                                </span>
                                @if ($updates)
                                    <span class="badge badge-md badge-circle badge-floating badge-warning">{{ $updates }}</span>
                                @endif
                            </a>
                        </li>
                    @endpermission

                    <li class="nav-item hidden-md">
                        <a class="nav-link" href="{{ url(trans('header.support_link')) }}" target="_blank" title="{{ trans('general.help') }}" role="button" aria-haspopup="true" aria-expanded="false">
                            <i class="far fa-life-ring"></i>
                        </a>
                    </li>
                </ul>

                <ul class="navbar-nav align-items-center ml-auto ml-md-0">
                    <li class="nav-item dropdown">
                        <a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                            <div class="media align-items-center">
                                <span class="avatar avatar-sm rounded-circle bg-default font-size-1">
                                    <i class="fas fa-user-alt"></i>
                                </span>
                                <div class="media-body ml-2 d-none d-lg-block">
                                    <span class="mb-0 text-sm  font-weight-bold">
                                        @if (!empty($user->name))
                                            {{ $user->name }}
                                        @endif
                                    </span>
                                </div>
                            </div>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <div class="dropdown-header noti-title">
                                <h6 class="text-overflow m-0">{{ trans('general.welcome') }}</h6>
                            </div>
                            @permission('update-auth-users')
                                <a href="{{ route('users.edit', $user->id) }}" class="dropdown-item">
                                    <i class="fas fa-user"></i>
                                    <span>{{ trans('auth.profile') }}</span>
                                </a>
                            @endpermission
                            @permission('read-auth-users')
                                <div class="dropdown-divider"></div>
                                <a href="{{ route('users.index') }}" class="dropdown-item">
                                    <i class="fas fa-users"></i>
                                    <span>{{ trans_choice('general.users', 2) }}</span>
                                </a>
                            @endpermission
                            @permission('read-auth-roles')
                                <a href="{{ route('roles.index') }}" class="dropdown-item">
                                    <i class="fas fa-list"></i>
                                    <span>{{ trans_choice('general.roles', 2) }}</span>
                                </a>
                            @endpermission
                            @permission('read-auth-permissions')
                                <a href="{{ route('permissions.index') }}" class="dropdown-item">
                                    <i class="fas fa-key"></i>
                                    <span>{{ trans_choice('general.permissions', 2) }}</span>
                                </a>
                            @endpermission
                            <div class="dropdown-divider"></div>
                            <a href="{{ route('logout') }}" class="dropdown-item">
                                <i class="fas fa-power-off"></i>
                                <span>{{ trans('auth.logout') }}</span>
                            </a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
@stack('navbar_end')