@include('frontend.include.header-files')

<style>
.headerLogo{
    width: 24%;
}
.headerLogo img{
    width: 100%;
}
.headerSection{
    padding: 20px 60px;
}
.headerBtn{
color: #333;
  border-radius: 10px;
  background-color: #ece5e5;
  margin-right: 16px;
  padding: 6px 20px;
  text-decoration: none;
  font-size: 16px;
}
.headerBtn:hover{
    color: #333;
}
.headerBtn i{
margin-right: 4px;
}
.logoutBtn{
    background: #7db43f;
    color: #fff;
}
.paddingend{
    padding: 0px;
}
.getstartedStepsSection{
    padding:  80px 60px;
}
.getStartedContent h2{
    color: #000;
    font-weight: Bold;
    font-size: 56px;
    padding: 30px 0px;

}
.getstartedStepsimg{
    margin: 0 auto;
}
#getstartedStepsimg1{
    width: 138px;
}
#getstartedStepsimg2{
    width: 120px;
}
#getstartedStepsimg3{
    width: 212px;
}
#getstartedStepsimg4{
    width: 112px;
}
.getstartedStepsimg img{
    width: 100%;
}
.getstartedStepsBtn{
    padding: 30px;
}
.getstartedStepsBtn a{
    color: #fff;
    background: #7db43f;
    font-size: 30px;
    padding: 22px 44px;
    font-weight: bold;
    border-radius: 10px;
}
@media screen and (max-width: 767px) and (min-width: 224px)
{

    .header-logo img{
        margin-left: 0px !important;
    }
.getstartedStepsBtn a{
    font-size: 24px;
}
    .getstartedStepsSection {
        padding: 80px 0px;
      }
    .headerSection{
        padding: 20px 0px;
    }
    .headerBtn{
        font-size: 14px;
        margin-right: 4px;
  padding: 4px 12px;
    }
    .headerLogo{
        width: 24%;
    }
}
.searchBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform:  translate(-50%,50%);
    background: #2f3640;
    height: 40px;
    border-radius: 40px;
    padding: 10px;

}

.searchBox:hover > .searchInput {
    width: 240px;
    padding: 0 6px;
}

.searchBox:hover > .searchButton {
  background: white;
  color : #2f3640;
}

.searchButton {
    color: white;
    float: right;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #2f3640;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s;
}

.searchInput {
    border:none;
    background: none;
    outline:none;
    float:left;
    padding: 0;
    color: white;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
    width: 0px;

}

@media screen and (max-width: 620px) {
.searchBox:hover > .searchInput {
    width: 150px;
    padding: 0 6px;
}
}
.header-fixed{
    background: #fff
}
.header-widget i:hover{
    background: #7db43f
}
.sidebar-cross i:hover{
    background: #7db43f;
}
.btn-inline{
    background: #7db43f;
    border: none;
}
.btn-inline:hover{
    background: #7db43f;
}
.navbar-link:hover{
color: #7db43f;
}
.dropdown-link:hover{
color: #7db43f !important;
}
.dropdown-list{
    border-top: 2px solid #7db43f;
}
.sidebar-name:hover{
color: #7db43f
}
.header-logo img{
    margin-bottom: 10px;
    height: 50px;
    margin-left: 270px;
}
.header-content{
    display: inherit;
}
.headertextRight{
    /* position: absolute;
  left: 36%; */
}

#overlay2 {
  background: #ffffff;
  color: #666666;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 5000;
  top: 0;
  left: 0;
  float: left;
  text-align: center;
  padding-top: 25%;
  opacity: .80;
}

.spinner {
    margin: 0 auto;
    height: 64px;
    width: 64px;
    animation: rotate 0.8s infinite linear;
    border: 5px solid firebrick;
    border-right-color: transparent;
    border-radius: 50%;
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.sidebar-content {
  overflow-y: auto !important;
}
.sidebar-body{
    overflow-y: auto;
}
</style>

<div id="overlay2" style="display:none;">
    <div class="spinner"></div>
    <br/>
    <span style="font-weight:900;">Processing...</span>
</div>
<div class="d-xl-block d-lg-block d-md-block d-sm-block d-block">
    <!-- web header -->
    <header class="header-part">
        <div class="container-fluid" style="padding: 5px;">
            <div class="header-content">
                <div class="header-left justify-content-between"> 
                    @if(Session::has('user_id') && !Session::has('isAdmin'))
                    <button type="button" class="header-widget sidebar-btn"><i
                        class="fas fa-align-left"></i>
                    </button>
                    @else
                    <i
                        class="fas fa-align-left"></i>
                    @endif
                    <div>
                    <a href="#" class="header-logo"><img src="{{ asset('frontend/images/logo1.png') }}" alt="logo"></a>
                        <a href="#" class="header-widget header-user"><span></span>
                        </a>
                    </div>
                    <div class="headertextRight d-xl-block d-lg-block d-md-block d-sm-none d-none">    
                        @if(Session::has('user_id'))
                                @if(Session::has('balance') && Session::get('balance') > 0  && Session::get('LimitedAccess') != 1 )
                                <a href="#" class="headerBtn priceBtn">$ {{ Session::get('balance') }}</a>
                            @endif
                    
                            <a href="#" class="headerBtn nameBtn">{{ Session::get('name') }}</a>
                            <a href="{{ route('logout') }}" class="headerBtn logoutBtn "><i class="fas fa-plus-circle"></i>Logout</a>
                        @else
                            <a href="{{ route('login') }}" class="headerBtn loginBtn"><i class="fas fa-plus-circle"></i>Login/Register</a>
                        @endif
                    </div>
                       
                </div>
            </div>
        </div>
    </header>
    
    <aside class="sidebar-part">
        <div class="sidebar-body">
            <div class="sidebar-header" style="background: white;"><a href="" class="sidebar-logo"><img src="{{ asset('frontend/images/businesslogo.png') }}"
                        alt="logo"></a><button class="sidebar-cross"><i class="fas fa-times"></i></button></div>
            <div class="sidebar-content">
                <div class="sidebar-profile">
                   
                    <h4><a href="#" class="sidebar-name">{{  Session::get('name') }}</a></h4>
                    @if(Session::has('LimitedAccess') && Session::get('LimitedAccess') != 1)
                        <a href="#"
                            class="btn btn-inline sidebar-post"><span>$ {{  Session::get('balance') }}</span>
                        </a>
                    @endif
                </div>
                <div class="sidebar-menu">
                 
                    <div class="tab-pane active" id="main-menu">
                        <ul class="navbar-list">  
                            <li class="navbar-item"><a class="navbar-link" href="{{ route('editprofile') }}">Edit Profile</a></li>
                            @if(Session::has('LimitedAccess') && Session::get('LimitedAccess') != 1)
                                <li class="navbar-item"><a class="navbar-link" href="{{ route('MyWallet') }}">My Wallet</a></li>
                                <li class="navbar-item"><a class="navbar-link" href="{{ route('RequestAWebPage') }}">Affiliate Programming</a></li>
                                <li class="navbar-item"><a class="navbar-link" href="{{ route('business') }}">Create a Project</a></li>
                                <li class="navbar-item"><a class="navbar-link" href="{{ route('viewbusinessprofile') }}">My Projects</a></li>
                                <li class="navbar-item"><a class="navbar-link" href="{{ route('TransferAccount') }}">Transfer Account</a></li>
                                <li class="navbar-item"><a class="navbar-link" href="{{ route('BusinessFrontOrderListing') }}">Order Listing</a></li>
                                <li class="navbar-item"><a class="navbar-link" href="#">Digital Designer</a></li>
                                <li class="navbar-item"><a class="navbar-link" href="{{ route('transaction') }}">Transaction History</a></li>
                            @endif
                            <li class="navbar-item"><a class="navbar-link" href="{{ route('logout') }}">Logout</a></li>
                       
                            
                            {{-- 
                            <li class="navbar-item navbar-dropdown"><a class="navbar-link" href="#"><span>Pages</span><i
                                        class="fas fa-plus"></i></a>
                                <ul class="dropdown-list">
                                    <li><a class="dropdown-link" href="">About Us</a></li>
                                    <li><a class="dropdown-link" href="">Ad Compare</a></li>
                                    <li><a class="dropdown-link" href="">Ad by Cities</a></li>
                                    <li><a class="dropdown-link" href="">Pricing Plan</a></li>
                                    <li><a class="dropdown-link" href="">User Form</a></li>
                                    <li><a class="dropdown-link" href="">404</a></li>
                                </ul> 
                            </li>
                            --}}

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </aside>
</div>