@php
use App\Helpers\Helper;
@endphp
<nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme" id="layout-navbar">
    <div class="d-flex align-items-center flex-shrink-0 order-md-0 order-0 w-30">
        <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
            <a class="nav-item nav-link px-0 me-xl-4 py-0 mt-n1" href="javascript:void(0)">
                <i class="ti ti-menu-2 ti-sm"></i>
            </a>
        </div>

        @yield('breadcrumbs')

    </div>

    <div class="flex-grow-1 text-center order-md-2 order-2 logocenter-block">
        @if (auth()->user()->roles[0]->id != config('const.roleSuperAdmin'))
        <span>
            @if (auth()->user()->roles[0]->id == config('const.roleAgency'))
            <b class="companyname">{{Auth::user()->name}}</b>
            @else
            <b class="companyname">{{Auth::user()->agencyUser()->first()->name}}</b>
            @endif
        </span>
        @endif
    </div>

    <div class="d-flex align-items-center order-md-2 order-1 w-30" id="navbar-collapse">
        <!-- Search -->
        <!--        <div class="navbar-nav align-items-center">
            <div class="nav-item navbar-search-wrapper mb-0">
                <a class="nav-item nav-link search-toggler d-flex align-items-center px-0" href="javascript:void(0);">
                    <i class="ti ti-search ti-md me-2"></i>
                    <span class="d-none d-md-inline-block text-muted">Search (Ctrl+/)</span>
                </a>
            </div>
        </div>-->
        <!-- /Search -->

        <ul class="navbar-nav flex-row align-items-center ms-auto">
            <!-- Style Switcher -->
            <li class="nav-item me-2 me-xl-0">
                <a class="nav-link style-switcher-toggle hide-arrow" href="javascript:void(0);">
                    <i class="ti ti-md"></i>
                </a>
            </li>



            @if (auth()->user()->roles[0]->id !== config('const.roleSuperAdmin'))
            <li class="nav-item me-2 me-xl-0" id="time_start_stop_li">
                @if(!session('is_timer_running'))
                <!-- start timer button -->
                <button class="btn btn-primary playpause-btn rounded d-flex justify-content-start rounded-pill shadow" id="timer_start">
                    <span class="play-icon me-1 flex-shrink-0"><i class="fa fa-play"></i></span> <span class="in_out_timer_text">Clock In</span>
                </button>
                @elseif (session('is_timer_running') && !Helper::lastTimerStopDateAndCurrentDateSame())
                <!-- start timer button -->
                <button class="btn btn-primary playpause-btn rounded d-flex justify-content-start rounded-pill shadow" id="timer_start">
                    <span class="play-icon me-1 flex-shrink-0"><i class="fa fa-play"></i></span> <span class="in_out_timer_text">Clock In</span>
                </button>
                @else
                <!-- stop timer button -->
                <button class="btn btn-primary playpause-btn rounded d-flex justify-content-start rounded-pill shadow" id="timer_stop">
                    <span class="play-icon me-1 flex-shrink-0"><i class="fa fa-pause"></i></span> <span class="in_out_timer_text">Clock Out</span>
                </button>
                @endif
            </li>
            @endif

            <li class="nav-item me-2 me-xl-0" style="width: 40px;">
            @if(auth()->user()->roles[0]->id !== config('const.roleSuperAdmin'))
                <a class="nav-link style-switcher-toggle hide-arrow" href="{{route('admin.timeline-feed.index')}}">
                    <img src="{{asset('images/activity.svg')}}" alt="activity logo">
                </a>
            @endif
            </li>
            <!--/ Style Switcher -->

            <!-- Notification -->
            @if(auth()->user()->roles[0]->id !== config('const.roleSuperAdmin'))
            <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-1" >
                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                    <i class="ti ti-message-2 ti-md" style="color:#FF851B"></i>
                    <span class="badge bg-danger rounded-pill badge-notifications alert-dots" style="display:none;"></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-end py-0">
                    <li class="dropdown-menu-header border-bottom">
                        <div class="dropdown-header d-flex align-items-center py-3">
                            <h5 class="text-body mb-0 me-auto">Notifications</h5>
                            <a style="display:none;" href="javascript:void(0)" class="dropdown-notifications-all text-body mask-as-all-read" data-bs-toggle="tooltip" data-bs-placement="top" title="Mark all as read"><i class="ti ti-mail-opened fs-4"></i></a>
                        </div>
                    </li>
                    <li class="dropdown-notifications-list scrollable-container">
                        <ul class="list-group list-group-flush custom-notifications">

                        </ul>
                    </li>
                    <li class="dropdown-menu-footer border-top">
                        <a href="{{route('admin.notification.all')}}" class="dropdown-item d-flex justify-content-center text-primary p-2 h-px-40 mb-1 align-items-center">
                            View all notifications
                        </a>
                    </li>
                </ul>
            </li>
            @endif
            <!--/ Notification -->

            <!-- Quick links  -->
            @if (auth()->user()->roles[0]->id !== config('const.roleSuperAdmin') &&
            (auth()->user()->can('create-contact') ||
            auth()->user()->can('create-ticket') ||
            auth()->user()->can('create-saleslead') ||
            auth()->user()->can('create-task')||
            auth()->user()->can('create-knowledgebase')))
            <li class="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                    <i class="ti ti-layout-grid-add ti-md" style="color:#FF851B"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-end py-0">
                    <div class="dropdown-menu-header border-bottom">
                        <div class="dropdown-header d-flex align-items-center py-3">
                            <h5 class="text-body mb-0 me-auto">Shortcuts</h5>
                            <a href="javascript:void(0)" class="dropdown-shortcuts-add text-body" data-bs-toggle="tooltip" data-bs-placement="top" title="Add shortcuts"></a>
                        </div>
                    </div>
                    <div class="dropdown-shortcuts-list scrollable-container ps">

                        <div class="row row-bordered overflow-visible g-0">
                            @if (auth()->user()->can('create-contact'))
                            <div class="dropdown-shortcuts-item col">
                                <span class="dropdown-shortcuts-icon rounded-circle mb-2 shotcutspan">
                                    <i class="ti ti-address-book fs-4 shotcuticoncolor"></i>
                                </span>
                                <a href="{{ route('admin.contact.create') }}" class="stretched-link">New
                                    Contact</a>
                                <!--                                <small class="text-muted mb-0">Manage Contacts</small>-->
                            </div>
                            @endif

                            @if (auth()->user()->can('create-task'))
                            <div class="dropdown-shortcuts-item col">
                                <span class="dropdown-shortcuts-icon rounded-circle mb-2 shotcutspan">
                                    <i class="ti ti-checklist fs-4 shotcuticoncolor"></i>
                                </span>
                                <a href="{{ route('admin.task.create') }}" class="stretched-link">New
                                    Task</a>
                                <!--                                <small class="text-muted mb-0">Manage Tasks</small>-->
                            </div>
                            @endif


                        </div>

                        <div class="row row-bordered overflow-visible g-0">
                            @if (auth()->user()->can('create-ticket'))
                            <div class="dropdown-shortcuts-item col">
                                <span class="dropdown-shortcuts-icon rounded-circle mb-2 shotcutspan">
                                    <i class="ti ti-ticket fs-4 shotcuticoncolor"></i>
                                </span>
                                <a href="{{ route('admin.ticket.create') }}" class="stretched-link">New
                                    Ticket</a>
                                <!--                                <small class="text-muted mb-0">Manage Tickets</small>-->
                            </div>
                            @endif

                            @if (auth()->user()->can('create-saleslead'))
                            <div class="dropdown-shortcuts-item col">
                                <span class="dropdown-shortcuts-icon rounded-circle mb-2 shotcutspan">
                                    <i class="ti ti-report-money fs-4 shotcuticoncolor"></i>
                                </span>
                                <a href="{{ route('admin.saleslead.create') }}" class="stretched-link">New Sales Lead</a>
                                <!--                                <small class="text-muted mb-0">Manage Sales Leads</small>-->
                            </div>
                            @endif


                        </div>
                        <div class="row row-bordered overflow-visible g-0">
                            @if (auth()->user()->can('create-knowledgebase'))
                            <div class="dropdown-shortcuts-item col">
                                <span class="dropdown-shortcuts-icon rounded-circle mb-2 shotcutspan">
                                    <i class="ti ti-book-2 fs-4 shotcuticoncolor"></i>
                                </span>
                                <a href="{{ route('admin.knowledgebasearea.index') }}" class="stretched-link">New
                                    Knowledge Base Area</a>
                                <!--                                <small class="text-muted mb-0">Manage Knowledge Base Area</small>-->
                            </div>
                            @endif
                            @if (auth()->user()->can('create-user'))
                            <div class="dropdown-shortcuts-item col">
                                <span class="dropdown-shortcuts-icon rounded-circle mb-2 shotcutspan">
                                    <i class="ti ti-user fs-4 shotcuticoncolor"></i>
                                </span>
                                <a href="{{ route('admin.user.create') }}" class="stretched-link">New
                                    User</a>
                                <!--                                <small class="text-muted mb-0">Manage Users</small>-->
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </li>
            @endif
            <!-- Quick links -->

            <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-1 profile-text-truncate" style="white-space: nowrap;">
                {{ Auth::user()->owner_name }}
            </li>

            <!-- User -->
            <li class="nav-item navbar-dropdown dropdown-user dropdown">
                <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                    <div class="avatar avatar-online">
                        <img src="{{ auth()->user()->profile_pic }}" alt class="rounded-circle profile-pic-image" id="profile_pic_nav" height="40" width="40" />
                    </div>
                </a>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <a class="dropdown-item" href="{{ route('admin.profile.index') }}">
                            <div class="d-flex">
                                <div class="flex-shrink-0 me-3">
                                    <div class="avatar avatar-online">
                                        <img src="{{ auth()->user()->profile_pic }}" alt class="rounded-circle profile-pic-image" height="40" width="40" />
                                    </div>
                                </div>
                                <div class="flex-grow-1">
                                    <span class="fw-semibold d-block">{{ auth()->user()->owner_name }}</span>
                                    <small class="text-muted">{{ auth()->user()->roles[0]->name }}</small>
                                </div>
                            </div>
                        </a>
                    </li>
                    <li>
                        <div class="dropdown-divider"></div>
                    </li>
                    <li>
                        <a class="dropdown-item" href="{{ route('admin.profile.index') }}">
                            <i class="ti ti-user-check me-2 ti-sm"></i>
                            <span class="align-middle">My Profile</span>
                        </a>
                    </li>

                    <li>
                        <button class="dropdown-item" data-bs-toggle="modal" data-original-title="test" data-bs-target="#logout-modal">
                            <i class="ti ti-logout me-2 ti-sm"></i>
                            <span class="align-middle">Log Out</span>
                        </button>

                    </li>
                </ul>
            </li>
            <!--/ User -->
        </ul>
    </div>



    <!-- Search Small Screens -->
    <div class="navbar-search-wrapper search-input-wrapper d-none">
        <input type="text" class="form-control search-input container-xxl border-0" placeholder="Search..." aria-label="Search..." />
        <i class="ti ti-x ti-sm search-toggler cursor-pointer"></i>
    </div>
</nav>