<nav class="navbar navbar-default navbar-static-top navbar-custom">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @if (Request::segment(2) == "hi-five-sports-club" || Request::segment(2) == "hi-five-sports-zone")
                <a class="navbar-brand" href="#"></a>
            @else
                <a class="navbar-brand" href="{{ url('/') }}">
                    <img src="{{asset('/images/logo.png')}}" />
                </a>
            @endif
                
                {{-- <small>JAC Printing & Graphics Co.</small> --}}
           
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right navbar-nav-custom">
                @if (Request::segment(2) == "hi-five-sports-club" || Request::segment(2) == "hi-five-sports-zone")
                    <li style="font-size: 14px;"></li>
                @else
                <li style="font-size: 14px;">
                    
                    <a href="{{ url('teamstore') }}"><span style="text-transform:uppercase;">Team Store</span></a>
                    
                </li>
                @endif
               
                <li style="font-size: 14px;"> 
                    <a href="{{ url('cart') }}"><span style="text-transform:uppercase;">My Cart</span> <i class="fa fa-shopping-cart"></i> 
                        <span class="badge" id="my-cart-count">{{ \App\Http\Controllers\MainController::getCountCart() }}</span>
                    </a>
                    
                </li>
                <li>
                <a href="#" class="dropdown-toggle user-profile" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-bars" style="font-size: 21px;"></i></a>
                <ul class="dropdown-menu">      
                    @if (Auth::guest())

                        @if(Request::segment(1) == "designer")
                            <li>
                                <a href="#" data-toggle="modal" data-target="#modalLogin" title="Login">Sign in</a>
                            </li>
                            <li>
                                <a href="#" data-toggle="modal" data-target="#modalLogin" title="Register">Register</a>
                            </li>
                        @else
                            <li>
                                <a href="{{ url('/auth/login') }}" title="Login">Sign in</a>
                            </li>
                            <li>
                                <a href="{{ url('/auth/register') }}" title="Register">Register</a>
                            </li>
                        @endif
                       
                    @else
                        @if(Auth::user()->role == "admin")
                            <li class="dropdown-header"><i class="fa fa-user"></i> {{ Auth::user()->username }} </li>
                            <li><a href="{{ url('admin') }}">Dashboard</a></li>
                        @elseif(Auth::user()->role == "store_owner")
                            <li class="dropdown-header"><i class="fa fa-user"></i> {{ Auth::user()->username }} </li>
                            <li><a href="{{ url('user') }}">Dashboard</a></li>
                        @else
                            <li class="dropdown-header"><i class="fa fa-user"></i> {{ Auth::user()->username }} </li>
                            <li><a href="{{ url('user') }}">Dashboard</a></li>
                        @endif
                        <li role="separator" class="divider"></li>
                        <li><a href="{{ url('/auth/logout') }}"><i class="fa fa-sign-out"></i> Logout</a></li>
                    @endif
                        <li role="separator" class="divider"></li>
                        <li><a href="#" data-toggle="modal" data-target="#privacy_modal">Privacy</a></li>
                        <li><a href="#" data-toggle="modal" data-target="#terms_of_use_modal">Terms of Use</a></li>
                        <li><a href="#" data-toggle="modal" data-target="#about_us_modal">About Us</a></li>
                        <li><a href="#" data-toggle="modal" data-target="#contact_us_modal">Contact Us</a></li>
                        <!-- <li>
                            <i class="fa fa-instagram"></i>
                            <i class="fa fa-facebook-square"></i>
                        </li> -->
                </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<style>
    #nav{
        list-style:none;
        margin-bottom:10px;
    }

    #nav li{
        float:left;
        margin-right:10px;
        position:relative;
    }
    #nav a{
        display:block;
        padding:10px;
        color:#f2f2f2;
        background-color:#292c2f;
        text-decoration:none;
    }
    #nav a:hover{
        color:#fff;
        /* background:#6b0c36; */
        text-decoration:underline;
    }

    /*--- DROPDOWN ---*/
    #nav ul{
        background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
        background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
        list-style:none;
        position:absolute;
        left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
        z-index: 9999;
    }
    #nav ul li{
    /*	padding-top:1px;  Introducing a padding between the li and the a give the illusion spaced items */
        float:none;
    }
    #nav ul a{
        white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
    }
    #nav li:hover ul{ /* Display the dropdown on hover */
        left:auto; /* Bring back on-screen when needed */
        right:0;
        margin-right:-10px;
    }
    #nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
        /* background:#6b0c36; */
        text-decoration:underline;
    }
    #nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
        text-decoration:none;
    }
    #nav li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
        background:#3d4248;
    }

    .navbar-brand {
    padding: 0px; /* firefox bug fix */
    }
    .navbar-brand>img {
    height: 200%;
    padding: 15px; /* firefox bug fix */
    width: auto;
    }

    .navbar-custom{
        min-height: 100px;
    }

    @media (max-width: 768px){
        .navbar-default .navbar-collapse, .navbar-default .navbar-form{
            margin-top: 50px;
        }
    
    }

    @media (min-width: 768px){
        .navbar-default .navbar-nav>li>a{
        margin-top: 23px;
    }
    
    }

    .badge{
        font-size: 14px;
        width:35px;
        border-radius: 0px;
    }

    .navbar-default .navbar-nav>li>a:hover {
        background-color: #777;
    }

    .modal {
        text-align: center;
        padding: 0!important;
    }

    .modal:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px;
    }

    .modal-dialog {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
    }
</style>

<!-- Privacy Modal -->
<div id="privacy_modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Privacy Policy</h4>
            </div>
            <div class="modal-body">
                @include('layout.privacy')
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Term of Use Modal  -->
<div id="terms_of_use_modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Terms of Use</h4>
            </div>
            <div class="modal-body">
                <p>Coming soon.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- About Us Modal  -->
<div id="about_us_modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">About Us</h4>
            </div>
            <div class="modal-body">
                <p>Coming soon.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Contact Us Modal  -->
<div id="contact_us_modal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Contact Us</h4>
            </div>
            <div class="modal-body text-center">
                <h1>Contact Us</h1>
                <hr>
                <h3>Email Address: <small><a href="#">customer-service@crewsportswear.com</a></small></h3>
                <h3>Address: <small><a href="#">1281 Humbracht Circle
                    Suite J
                    Bartlett, Illinois
                    60103</a></small>
                </h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>