<!-- NAVBAR-STARTS -->

<nav class="navbar navbar-expand-md navbar-dark">
    <div class="container-fluid">

        <!-- Brand -->

        <a class="navbar-brand" (click)="goToPage('index')">
            <img src="assets/images/asset_logo.png">
        </a>

        <!-- Toggler/collapsibe Button -->

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Navbar links -->

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link base_arrow dropdown">
                        <div class="dropdown-toggle" data-toggle="dropdown">
                            CAR OWNERS
                        </div>
                        <div class="dropdown-menu">
                            <a class="dropdown-item">My Dashboard</a>
                            <a class="dropdown-item">Find parts and accessories</a>
                            <a class="dropdown-item">Rewards</a>
                            <a class="dropdown-item">Messages</a>
                            <a class="dropdown-item">Request a Service </a>
                            <a class="dropdown-item">Repair/Maintenance Service reminder</a>
                            <a class="dropdown-item">Road Service </a>
                        </div>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link base_arrow dropdown" href="#">
                        <div class="dropdown-toggle" data-toggle="dropdown">
                            AUTO SERVICE PROVIDER
                        </div>
                        <div class="dropdown-menu">
                                <a class="dropdown-item">Option menu 1</a>
                                <a class="dropdown-item">Option menu 2</a>
                                <a class="dropdown-item">Option menu 3</a>
                                <a class="dropdown-item">Option menu 4</a>
                                <a class="dropdown-item">Option menu 5</a>
                            </div>
                    </a>
                </li>
                <li class="nav-item" *ngIf="!loginDetails">
                    <button (click)="resetForm()" class="sign_btn" data-toggle="modal" data-target="#login">
                        <img src="assets/images/asset_signin.png">SIGN IN
                    </button>
                </li>
                <li class="nav-item" *ngIf="!loginDetails">
                    <button (click)="resetForm()" class="sign_btn" data-toggle="modal" data-target="#signup">
                        <img src="assets/images/asset_signup.png">SIGN UP
                    </button>
                </li>

                <li class="nav-item" *ngIf="loginDetails">
                    <a class="nav-link dropdown">
                        <div class="account_div dropdown-toggle" data-toggle="dropdown">
                            <div class="account_name">
                                Welcome back,&nbsp;&nbsp;{{ loginDetails.first_name | titlecase }}
                            </div>
                            <div class="account_pic">
                                <img src="{{imageServer + loginDetails.profile_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
                            </div>
                            <div class="clear"></div>
                        </div>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" (click)="goToPage('dashboard')">
                            My Dashboard</a>
                            <a class="dropdown-item" (click)="logout()">Logout</a>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- NAVBAR-ENDS -->



<!-- SIGNUP-MODAL-STARTS-->

<div class="modal" id="signup" style="z-index: 99999 !important;">
    <div class="modal-dialog modal-full">
        <div class="modal-content login_modal_wrapper" malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
            <div #signupModal class="modal_close" data-dismiss="modal">
                &times;
            </div>
            <div class="modal-body">
                <div class="login_modal_content">
                    <div class="login_modal_inner">
                        <h3 class="p0">SIGN UP</h3>
                        <div class="row">
                            <div class="col-md-12">
                                <h6>Your privacy is protected, we'll never sell or share your information.</h6>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <button class="facebook_btn">
                                Sign Up with Facebook <img src="assets/images/asset_fb1.png">
                            </button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <h6>OR</h6>
                            </div>
                        </div>

                        <form [formGroup]="signupForm" (ngSubmit)="signupSubmit(signupForm.value)">
                            <div class="row">
                                <div class="col-md-6">
                                    <input placeholder="First Name" type="text" formControlName="first_name"
                                    [ngClass]="{'input_error': !signupForm.controls['first_name'].valid && (signupForm.controls['first_name'].dirty || signupForm.controls['first_name'].touched || signupSubmitClick),
                                                'input_success': signupForm.controls['first_name'].valid}" 
                                    (click)="signupSubmitClick = false">
                                    <div class="s_error" *ngIf="(!signupForm.controls['first_name'].valid && signupForm.controls['first_name'].touched) || (!signupForm.controls['first_name'].valid && signupSubmitClick)">
                                        <div class="s_validation" *ngIf="signupForm.controls['first_name'].hasError('required')">{{errorMsg.errorList.required}} </div>
                                        <div class="s_validation" *ngIf="signupForm.controls['first_name'].hasError('pattern')">{{errorMsg.errorList.valid}} Name</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <input placeholder="Last Name" type="text" formControlName="last_name"
                                    [ngClass]="{'input_error': !signupForm.controls['last_name'].valid && (signupForm.controls['last_name'].dirty || signupForm.controls['last_name'].touched || signupSubmitClick),
                                                'input_success': signupForm.controls['last_name'].valid}" 
                                    (click)="signupSubmitClick = false">
                                    <div class="s_error" *ngIf="(!signupForm.controls['last_name'].valid && signupForm.controls['last_name'].touched) || (!signupForm.controls['last_name'].valid && signupSubmitClick)">
                                        <div class="s_validation" *ngIf="signupForm.controls['last_name'].hasError('required')">{{errorMsg.errorList.required}} </div>
                                        <div class="s_validation" *ngIf="signupForm.controls['last_name'].hasError('pattern')">{{errorMsg.errorList.valid}} Sur Name</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <input placeholder="Email Address" type="mail" formControlName="email"
                                    [ngClass]="{'input_error': !signupForm.controls['email'].valid && (signupForm.controls['email'].dirty || signupForm.controls['email'].touched || signupSubmitClick),
                                                'input_success': signupForm.controls['email'].valid}" 
                                    (click)="loginSubmitClick = false">
                                    <div class="s_error" *ngIf="(!signupForm.controls['email'].valid && signupForm.controls['email'].touched) || (!signupForm.controls['email'].valid && signupSubmitClick)">
                                        <div class="s_validation" *ngIf="signupForm.controls['email'].hasError('required')">{{errorMsg.errorList.required}} </div>
                                        <div class="s_validation" *ngIf="signupForm.controls['email'].hasError('pattern')">{{errorMsg.errorList.valid}} Email</div>
                                        <div class="s_validation" *ngIf="signupForm.controls['email'].hasError('maxlength')">{{errorMsg.errorList.maxLength}} 50</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <input placeholder="Password (Min. 6 Characters)" type="password" formControlName="password"
                                    [ngClass]="{'input_error': !signupForm.controls['password'].valid && (signupForm.controls['password'].dirty || signupForm.controls['password'].touched || signupSubmitClick),
                                                'input_success': signupForm.controls['password'].valid}" 
                                    (click)="signupSubmitClick = false">
                                    <div class="s_error" *ngIf="signupForm.controls['password'].invalid && (signupForm.controls['password'].touched || signupSubmitClick)">
                                        <div class="s_validation" *ngIf="signupForm.controls['password'].hasError('required')">{{errorMsg.errorList.required}} </div>
                                    </div>
                                    <h6 class="textLeft pt10">Must be atleast 6 characters</h6>
                                </div>
                            </div>
                            <h6 class="textLeft pb10">OPTIONAL</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <input placeholder="Phone Number" type="text"  formControlName="phone"
                                    [ngClass]="{'input_error': signupForm.controls['phone'].value != '' && signupForm.controls['phone'].dirty && signupForm.controls['phone'].invalid,
                                                'input_success': signupForm.controls['phone'].value != '' && signupForm.controls['phone'].dirty && signupForm.controls['phone'].valid}" 
                                    (click)="signupSubmitClick = false">
                                    <div class="s_error" *ngIf="!signupForm.controls['phone'].valid && signupForm.controls['phone'].touched">
                                        <div class="s_validation" *ngIf="signupForm.controls['phone'].hasError('pattern')">{{errorMsg.errorList.valid}} Mobile Number</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <input placeholder="PROMOCODE" type="text" formControlName="promocode"
                                    [ngClass]="{'input_error': signupForm.controls['promocode'].value != '' && signupForm.controls['promocode'].dirty && signupForm.controls['promocode'].invalid,
                                                'input_success': signupForm.controls['promocode'].value != '' && signupForm.controls['promocode'].dirty && signupForm.controls['promocode'].valid}" 
                                    (click)="signupSubmitClick = false">
                                    <div class="s_error" *ngIf="!signupForm.controls['promocode'].valid && signupForm.controls['promocode'].touched">
                                        <div class="s_validation" *ngIf="signupForm.controls['promocode'].hasError('pattern')">{{errorMsg.errorList.valid}} Promocode</div>
                                    </div>
                                </div>
                                <h6 class="pt10">By signing up, I agree to Carfixxers <a>Terms & Conditions</a></h6>
                            </div>
                            <div *ngIf="signupResponse" class="s_alert" [ngClass]="(signupResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
                                <strong>{{signupResponse.message}}<br></strong>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <button type="submit" (click)="signupSubmitClick = true" class="log_btn create_account">Create Account</button>
                                </div>
                            </div>
                        </form>

                        <div class="row">
                            <div class="col-md-12">
                                <h6><a (click)="resetForm()" data-dismiss="modal" data-toggle="modal" data-target="#login">Sign In</a> OR <a>Continue as guest</a></h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- SIGNUP-MODAL-ENDS-->



<!-- LOGIN-MODAL-STARTS-->

<div class="modal" id="login" style="z-index: 99999 !important;">
    <div class="modal-dialog modal-full">
        <div class="modal-content login_modal_wrapper" malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
            <div #loginModal class="modal_close" data-dismiss="modal" (click)="resetForm()">
                &times;
            </div>
            <div class="modal-body">
                <div class="login_modal_content">
                    <div class="loader_overlay" *ngIf="loader"></div>
                    <div class="login_modal_inner">
                        <h3>SIGN IN</h3>
                        <div class="row">
                            <div class="col-md-12">
                                <button class="facebook_btn">
                                    Sign in with Facebook <img src="assets/images/asset_fb1.png">
                                </button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <h6>OR</h6>
                            </div>
                        </div>
                        <form [formGroup] = "loginForm" (ngSubmit) = "loginSubmit(loginForm.value)" >
                            <div class="row">
                                <div class="col-md-12">
                                    <input placeholder="Email Address" type="mail" formControlName="email"
                                    [ngClass]="{'input_error': !loginForm.controls['email'].valid && (loginForm.controls['email'].dirty || loginForm.controls['email'].touched || loginSubmitClick),
                                                'input_success': loginForm.controls['email'].valid}" 
                                    (click)="loginSubmitClick = false">
                                    <div class="s_error" *ngIf="(!loginForm.controls['email'].valid && loginForm.controls['email'].touched) || (!loginForm.controls['email'].valid && loginSubmitClick)">
                                        <div class="s_validation" *ngIf="loginForm.controls['email'].hasError('required')">{{errorMsg.errorList.required}} </div>
                                        <div class="s_validation" *ngIf="loginForm.controls['email'].hasError('pattern')">{{errorMsg.errorList.valid}} Email</div>
                                        <div class="s_validation" *ngIf="loginForm.controls['email'].hasError('maxlength')">{{errorMsg.errorList.maxLength}} 50</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <input class="" placeholder="Password" type="password" formControlName="password"
                                    [ngClass]="{'input_error': !loginForm.controls['password'].valid && (loginForm.controls['password'].dirty || loginForm.controls['password'].touched || loginSubmitClick),
                                                'input_success': loginForm.controls['password'].valid}"
                                    (click)="loginSubmitClick = false">
                                    <div class="s_error" *ngIf="(!loginForm.controls['password'].valid && loginForm.controls['password'].touched) || (!loginForm.controls['password'].valid && loginSubmitClick)">
                                        <div class="s_validation" *ngIf="loginForm.controls['password'].hasError('required')">{{errorMsg.errorList.required}} </div>
                                        <div class="s_validation" *ngIf="loginForm.controls['password'].hasError('minlength')">{{errorMsg.errorList.minLength}} 6</div>
                                        <div class="s_validation" *ngIf="loginForm.controls['password'].hasError('maxlength')">{{errorMsg.errorList.maxLength}} 16</div>
                                    </div>
                                </div>
                            </div>
                            <div *ngIf="loginResponse" class="s_alert" [ngClass]="(loginResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
                                <strong>{{loginResponse.message}}<br></strong>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <button type="submit" class="log_btn" (click)="loginSubmitClick = true">Login</button>
                                </div>
                            </div>
                        </form>
                        <div class="row">
                            <div class="col-md-12">
                                <p>
                                    <a (click)="resetForm()" data-dismiss="modal" data-toggle="modal" data-target="#forgot">Forgot Password ?</a>
                                </p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <h6>Do you have an account? <a data-dismiss="modal" data-toggle="modal" data-target="#signup">Sign Up</a> OR <a>Continue as guest</a></h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- LOGIN-MODAL-ENDS-->


<!-- FORGOT-MODAL-STARTS-->

<div class="modal" id="forgot" style="z-index: 99999 !important;">
    <div class="modal-dialog modal-full">
        <div class="modal-content login_modal_wrapper">
            <div class="modal_close" data-dismiss="modal">
                &times;
            </div>
            <div class="modal-body">
                <div class="login_modal_content">
                    <div class="login_modal_inner">
                        <h3>FORGOT PASSWORD</h3>

                        <form [formGroup]="forgotForm" (ngSubmit)="forgotSubmit(forgotForm.value)">
                            <div class="row">
                                <div class="col-md-12">
                                    <input placeholder="Enter recovery Email Address" type="mail" formControlName="email"
                                    [ngClass]="{'input_error': !forgotForm.controls['email'].valid && (forgotForm.controls['email'].dirty || forgotForm.controls['email'].touched || forgotSubmitClick),
                                                'input_success': forgotForm.controls['email'].valid}" >
                                    <div class="s_error" *ngIf="(!forgotForm.controls['email'].valid && forgotForm.controls['email'].touched) || (!forgotForm.controls['email'].valid && forgotSubmitClick)">
                                        <div class="s_validation" *ngIf="forgotForm.controls['email'].hasError('required')">{{errorMsg.errorList.required}} </div>
                                        <div class="s_validation" *ngIf="forgotForm.controls['email'].hasError('minlength')">{{errorMsg.errorList.valid}} Email</div>
                                        <div class="s_validation" *ngIf="forgotForm.controls['email'].hasError('maxlength')">{{errorMsg.errorList.maxLength}} 50</div>
                                    </div>
                                </div>
                            </div>
                            <div *ngIf="forgotResponse" class="s_alert" [ngClass]="(forgotResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
                                <strong>{{forgotResponse.message}}<br></strong>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <button type="submit" class="log_btn" (click)="forgotSubmitClick = true">Send Link</button>
                                </div>
                            </div>
                        </form>

                        <div class="row">
                            <div class="col-md-12">
                                <h6>Do you have an account? <a (click)="resetForm()" data-dismiss="modal" data-toggle="modal" data-target="#signup">Sign Up</a> OR <a (click)="resetForm()" data-dismiss="modal" data-toggle="modal" data-target="#login">Sign In</a></h6>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- FORGOT-MODAL-ENDS-->