<div class="main_wrapper">
    <section class="module parallax parallax_title">
        <div class="title_banner_overlay">
            <div class="title_banner">
                <div class="container">

                </div>
            </div>
        </div>
    </section>
    <section class="dashboard_tabs">
        <div class="container-fluid">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link active profile" data-toggle="tab" href="#profile">Profile
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link vehicle" data-toggle="tab" href="#vehicle">My Vehicle
                        <div class="notification" *ngIf="vehDetails">{{ vehDetails?.length || '0' }}</div>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link appointment" data-toggle="tab" href="#appointment" #appointmentTab>Appointments
                        <div class="notification" *ngIf="successBookDtls">{{ successBookDtls?.length || '0' }}</div>
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link time" data-toggle="tab" href="#service" #serviceHistoryTab>
                      Service History
                      <div class="notification" *ngIf="bookingDetails">{{ bookingDetails?.length || '0' }}</div>
                  </a>
                </li>
            </ul>
        </div>
    </section>
    <section class="dashboard_tab_content">
        <div class="loader_overlay" *ngIf="loader"></div>
        <div class="container-fluid">
            <div class="tab-content">
                <div class="tab-pane container active" id="profile">
                    <form [formGroup]="editProfile" (ngSubmit)="submitProfileEdit(editProfile.value)">
                        <div class="row">
                            <div class="col-md-7">
                                <div class="row line_row">
                                    <div class="col-md-12">
                                        <h3>Personal Information</h3>
                                        <hr>
                                    </div>
                                </div>
                                <div class="row line_row">
                                    <div class="col-md-12">
                                        <p>Profile Picture</p>
                                        <div class="profile_pic">
                                            <img [src]="imageUrl" onerror="this.src='assets/images/user_default.jpg'">
                                            <div class="edit">
                                                <input type="file" (change)="imageUpload($event)" accept="image/*">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row line_row">
                                    <div class="col-md-6">
                                        <p>First Name</p>
                                        <input class="text_input" placeholder="" type="text" formControlName="first_name" 
                                            [ngClass]="{'input_error': !editProfile.controls['first_name'].valid && (editProfile.controls['first_name'].dirty || editProfile.controls['first_name'].touched || editProfileSubmitClick),
                                                        'input_success': editProfile.controls['first_name'].touched && editProfile.controls['first_name'].valid}" 
                                            (click)="editProfileSubmitClick = false">
                                    </div>
                                    <div class="col-md-6">
                                        <p>Last Name</p>
                                        <input class="text_input" placeholder="" type="text" formControlName="last_name"
                                        [ngClass]="{'input_error': !editProfile.controls['last_name'].valid && (editProfile.controls['last_name'].dirty || editProfile.controls['last_name'].touched || editProfileSubmitClick),
                                                    'input_success': editProfile.controls['last_name'].touched && editProfile.controls['last_name'].valid}" 
                                        (click)="editProfileSubmitClick = false">
                                    </div>
                                </div>
                                <div class="row line_row">
                                    <div class="col-md-6">
                                        <p>Phone</p>
                                        <input class="text_input" placeholder="" type="text" formControlName="phone" 
                                            [ngClass]="{'input_error': !editProfile.controls['phone'].valid && (editProfile.controls['phone'].dirty || editProfile.controls['phone'].touched || editProfileSubmitClick),
                                                        'input_success': editProfile.controls['phone'].touched && editProfile.controls['phone'].valid}" 
                                            (click)="editProfileSubmitClick = false">
                                    </div>
                                    <div class="col-md-6"></div>
                                </div>
                                <p>Addess</p>
                                <div class="row line_row">
                                    <div class="col-md-12">
                                        <textarea class="text_input address_height" placeholder="" type="text" formControlName="address" 
                                        [ngClass]="{'input_error': !editProfile.controls['address'].valid && (editProfile.controls['address'].dirty || editProfile.controls['address'].touched || editProfileSubmitClick),
                                                    'input_success': editProfile.controls['address'].touched && editProfile.controls['address'].valid}" 
                                        (click)="editProfileSubmitClick = false"></textarea>
                                    </div>
                                </div>
                                <div class="row line_row">
                                    <div class="col-md-12">
                                        <h3>Login Information</h3>
                                        <hr>
                                    </div>
                                </div>
                                <div class="row line_row">
                                    <div class="col-md-6">
                                        <p>Email Address ( Username )</p>
                                        <input class="text_input" placeholder="" type="mail" formControlName="email"
                                        [ngClass]="{'input_error': !editProfile.controls['email'].valid && (editProfile.controls['email'].dirty || editProfile.controls['email'].touched || editProfileSubmitClick),
                                                    'input_success': editProfile.controls['email'].touched && editProfile.controls['email'].valid}" 
                                        (click)="editProfileSubmitClick = false">
                                    </div>
                                </div>
                                <div class="row line_row">
                                    <div class="col-md-12">
                                        <h3>Change Password</h3>
                                        <hr>
                                    </div>
                                </div>
                                <div class="row line_row">
                                    <div class="col-md-6">
                                        <p>New Password</p>
                                        <input class="text_input" placeholder="" type="password" formControlName="password"
                                        [ngClass]="{'input_error': !editProfile.controls['password'].valid && editProfile.controls['password'].value != '',
                                                    'input_success': editProfile.controls['password'].valid && editProfile.controls['password'].value != ''}" 
                                        (click)="editProfileSubmitClick = false">
                                    </div>
                                    <div class="col-md-6">
                                        <p>Confirm new Password</p>
                                        <input class="text_input" placeholder="" type="password"  formControlName="cpassword"
                                        [ngClass]="{'input_error': !editProfile.controls['cpassword'].valid || (editProfile.controls['password'].value != editProfile.controls['cpassword'].value),
                                                    'input_success': editProfile.controls['password'].value != '' && editProfile.controls['cpassword'].valid && (editProfile.controls['password'].value == editProfile.controls['cpassword'].value)}" 
                                        (click)="editProfileSubmitClick = false">
                                    </div>
                                    <div class="col-md-6"> </div>
                                </div>
                                <div *ngIf="profileEditResp" class="s_alert line_row" [ngClass]="(profileEditResp.status == 'success') ? 'alert-success' : 'alert-danger'">
                                    <strong>{{profileEditResp.message}}<br></strong>
                                </div>
                                <div class="row line_row">
                                    <div class="col-md-12">
                                        <button type="submit" class="save_btn" (click)="editProfileSubmitClick = true">Save</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-5"></div>
                        </div>
                    </form>
                </div>
                <div class="tab-pane container fade" id="vehicle">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row line_row">
                                <div class="col-md-12">
                                    <h3>Vechicles and Information</h3>
                                    <hr>
                                </div>
                            </div>
                            <div class="row line_row">
                                <div class="col-md-12">
                                    <button class="add_btn" data-toggle="modal" data-target="#addvehicle">Add Vehicle</button>
                                    <div class="clear"></div>
                                </div>
                            </div>
                            <div class="row line_row">
                                <div class="col-md-12">
                                    <div class="no_datafound" *ngIf="!vehDetails; else savedVechiles">
                                        <img src="assets/images/asset_nodata.png">
                                        <p>No Data Found</p>
                                    </div>
                                    <ng-template #savedVechiles>
                                        <div class="vehicle_list">
                                            <ul>
                                                <li *ngFor="let vehicle of vehDetails">
                                                    <div class="car_details">
                                                        <h5><strong>{{ vehicle.car_maker | titlecase }}</strong>{{ vehicle.car_model | titlecase }}</h5>
                                                        <div class="row">
                                                            <div class="col-md-3">Year</div>
                                                            <div class="col-md-1">:</div>
                                                            <div class="col-md-7">{{ vehicle.car_model_year }}</div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-3">Make</div>
                                                            <div class="col-md-1">:</div>
                                                            <div class="col-md-7">{{ vehicle.car_maker | titlecase }}</div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-3">Model</div>
                                                            <div class="col-md-1 ">:</div>
                                                            <div class="col-md-7">{{ vehicle.car_model | titlecase }}</div>
                                                        </div>
                                                        <div class="row">
                                                            <div class="col-md-3">Location</div>
                                                            <div class="col-md-1 ">:</div>
                                                            <div class="col-md-7 text_truncate">{{ vehicle.car_location | titlecase }}</div>
                                                        </div>
                                                    </div>
                                                    <div class="clear"></div>
                                                    <div class="button_bay">
                                                        <div class="btn-group-justified" role="group" aria-label="Basic example">
                                                            <button type="button" class="btn book btn-sm" data-toggle="modal" data-target="#wizard" (click)="bookVechile(vehicle.customer_veh_id)">Book Now</button>
                                                            <button type="button" class="btn btn-danger btn-sm" (click)="cnfdeleteCustomerCar(vehicle.customer_id,vehicle.customer_veh_id)">Delete</button>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </ng-template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane container fade" id="appointment">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row line_row">
                                <div class="col-md-12">
                                    <h3>Appointment Details</h3>
                                    <hr>
                                </div>
                            </div>
                            <div class="row line_row">
                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <div class="no_datafound" *ngIf="!successBookDtls; else successBooking">
                                            <img src="assets/images/asset_nodata.png">
                                            <p>No Data Found</p>
                                        </div>
                                        <ng-template #successBooking>
                                            <table>
                                                <thead>
                                                    <tr>
                                                        <th></th>
                                                        <th>Order Date</th>
                                                        <th>Vehicle Make</th>
                                                        <th>Mechanic</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                            <div *ngFor="let bookData of successBookDtls; let i = index" id="accordion">
                                                <table>
                                                    <tbody>
                                                        <tr>
                                                            <td>{{i+1}}</td>
                                                            <td>{{bookData.scheduled_date+' '+bookData.scheduled_time}}</td>
                                                            <td>{{bookData.car_name}}</td>
                                                            <td>{{(bookData.is_multiple === '0')? bookData.mechanic_data[0].first_name+' '+bookData.mechanic_data[0].last_name : bookData.mechanic_data.length+' Requests'}}</td>
                                                            <td>
                                                                <div class="floatLeft">
                                                                    <div class="btn-group btn-group-justified">
                                                                        <button class="btn btn-default btn-sm">{{bookData.status === '1' ? 'Accepted' : 'Pending'}}</button>
                                                                        <button (click)="cnfCancelBook(bookData.booking_id)" class="btn btn-danger btn-sm">Cancel</button>
                                                                    </div>
                                                                </div>
                                                                <div class="booking_drop" data-toggle="collapse" [attr.data-target]="'#quote_list_'+bookData.booking_id"></div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table> 
                                                <table [attr.id]="'quote_list_'+bookData.booking_id" class="collapse quote_list_table" data-parent="#accordion">
                                                    <thead>
                                                        <tr>
                                                            <th>Mechanic</th>
                                                            <th>Contact</th>
                                                            <th>Rating</th>
                                                            <th>Location</th>
                                                            <th>Amount</th>
                                                            <th>Action</th>
                                                        </tr>   
                                                    </thead>
                                                    <tbody>
                                                        <tr *ngFor="let mechdata of bookData.mechanic_data;">
                                                            <td>{{mechdata.first_name+' '+mechdata.last_name}}</td>
                                                            <td>{{mechdata.phone}}</td>
                                                            <td>{{mechdata.rating > 0?mechdata.rating+'/5':''}}</td>
                                                            <td>{{mechdata.location}}</td>
                                                            <td>{{mechdata.custom_amount > 0 ?mechdata.custom_amount:mechdata.mechanic_amount}}</td>
                                                            <td>
                                                                <div class="btn-group btn-group-justified">
                                                                    <button class="btn btn-default btn-sm" *ngIf="bookData.status == '1' && !mechdata.custom_service_quote">Accepted</button>
                                                                    <button class="btn btn-default btn-sm" *ngIf="mechdata.status == '0'">Waiting for Approval</button>
                                                                    <button class="btn btn-success btn-sm" [attr.bookAmount]="mechdata.custom_amount > 0 ?mechdata.custom_amount:mechdata.mechanic_amount" *ngIf="mechdata.status == '1' && bookData.status != '1'" (click)="mechanicQuoteAccept($event,bookData.booking_id,mechdata.mechanic_id)">Accept</button>
                                                                    <button class="btn btn-info btn-sm" (click)="showCustQuote(bookData.booking_id,mechdata.mechanic_id,1)" data-toggle="modal" data-target="#quote" *ngIf="mechdata.status =='1' && mechdata.custom_service_quote">View Quote</button>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </ng-template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane container fade" id="service">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="row line_row">
                                <div class="col-md-12">
                                    <h3>Service History</h3>
                                    <hr>
                                </div>
                            </div>
                            <div class="row line_row">
                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <div class="no_datafound" *ngIf="!bookingDetails; else allBookDtls">
                                            <img src="assets/images/asset_nodata.png">
                                            <p>No Data Found</p>
                                        </div>
                                        <ng-template #allBookDtls>
                                            <!-- <table>
                                                <thead>
                                                    <tr>
                                                        <th>Orders</th>
                                                        <th>Order Date</th>
                                                        <th>Vehicle</th>
                                                        <th>Mechanic</th>
                                                        <th>Service Charge</th>
                                                        <th>Order Status</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr *ngFor="let bookData of bookingDetails;let i = index">
                                                        <td>{{i+1}}</td>
                                                        <td>{{bookData.scheduled_date+' '+bookData.scheduled_time}}</td>
                                                        <td>{{bookData.car_name}}</td>
                                                        <td>{{bookData.mechanic_data[0].first_name+' '+bookData.mechanic_data[0].last_name}}</td>
                                                        <td class="service-align-center">{{bookData.cost}}</td>
                                                        <td [ngSwitch]="bookData.status">
                                                            <p *ngSwitchCase="3" class="success_status">Completed</p>
                                                            <p *ngSwitchCase="4" class="canceled_status">Canceled</p>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table> -->





                                        <table>
                                                <thead>
                                                    <tr>
                                                        <th></th>
                                                        <th>Order Date</th>
                                                        <th>Vehicle Make</th>
                                                        <th>Mechanic</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                            </table>
                                            <div *ngFor="let bookData of bookingDetails; let i = index" id="accordion">
                                                <table>
                                                    <tbody>
                                                        <tr>
                                                            <td>{{i+1}}</td>
                                                            <td>{{bookData.scheduled_date+' '+bookData.scheduled_time}}</td>
                                                            <td>{{bookData.car_name}}</td>
                                                            <td>{{(bookData.is_multiple ==='0')? bookData.mechanic_data[0].first_name+' '+bookData.mechanic_data[0].last_name : bookData.mechanic_data.length+' Requests'}}</td>
                                                            <td [ngSwitch]="bookData.status">
                                                                <div class="floatLeft">
                                                                    <p *ngSwitchCase="3" class="success_status">Completed</p>
                                                                    <p *ngSwitchCase="4" class="canceled_status">Canceled</p>
                                                                </div>
                                                                <div *ngIf="bookData.status === '3'" class="booking_drop" data-toggle="collapse" [attr.data-target]="'#quote_list_'+bookData.booking_id"></div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table> 
                                                <table [attr.id]="'quote_list_'+bookData.booking_id" class="collapse quote_list_table" data-parent="#accordion">
                                                    <thead>
                                                        <tr>
                                                            <th>Mechanic</th>
                                                            <th>Contact</th>
                                                            <th>Rating</th>
                                                            <th>Location</th>
                                                            <th>Amount</th>
                                                            <th>Action</th>
                                                        </tr>   
                                                    </thead>
                                                    <tbody>
                                                        <tr *ngFor="let mechdata of bookData.mechanic_data;">
                                                            <td>{{mechdata.first_name+' '+mechdata.last_name}}</td>
                                                            <td>{{mechdata.phone}}</td>
                                                            <td>{{mechdata.rating > 0?mechdata.rating+'/5':''}}</td>
                                                            <td>{{mechdata.location}}</td>
                                                            <td>{{mechdata.custom_amount > 0 ?mechdata.custom_amount:mechdata.mechanic_amount}}</td>
                                                            <td>
                                                                <div class="btn-group btn-group-justified">
                                                                    <button class="btn btn-info btn-sm" (click)="showCustQuote(bookData.booking_id,mechdata.mechanic_id,2)" data-toggle="modal" data-target="#quote" *ngIf="mechdata.status =='1' && mechdata.custom_service_quote">View Quote</button>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </ng-template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<!-- ADD-VEHICLE-MODAL-STARTS -->


<div class="modal" id="addvehicle">
    <div class="modal-dialog">
        <div class="loader_overlay" *ngIf="loader"></div>
        <div class="modal-content add_modal_wrapper">
            <h3>Add Vehicle
                <span #closeVehicleAddForm data-dismiss="modal" class="close" (click)="resetVehicleForm()">&times;</span>
            </h3>
            <div class="modal-body">
                <div class="add_modal_tab_head">
                    <label class="check_container" [class.active]="tab == 'active'" (click)="tab_swap('active')">Vehicle Details
                        <input type="radio" checked="checked" name="radio">
                        <span class="checkmark"></span>
                    </label>
                    <label class="check_container" [class.active]="tab == 'inactive'" (click)="tab_swap('inactive')">Use VIN
                        <input type="radio" name="radio">
                        <span class="checkmark"></span>
                    </label>
                </div>

                <div class="add_modal_inner" [hidden]="tab=='inactive'">
                    <div class="row">
                        <div class="col-md-12">
                            <p>Add Vehicle Details</p>
                        </div>
                    </div>
                    <form [formGroup]="vehicleDetailsAddForm" (ngSubmit)="vehicleDetailsFormSubmit(vehicleDetailsAddForm.value)">
                        <div class="row line_row">
                            <div class="col-md-6">
                                <select class="vehicle_input_select" placeholder="Choose Year" formControlName="modelYear"
                                [ngClass]="{'input_error': !vehicleDetailsAddForm.controls['modelYear'].valid && vehicleDetailsFormSubmitClick}">
                                    <option value="" class="hide">YEAR</option>
                                    <option *ngFor="let date of modelDates">{{date}}</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <select (change)="get_model($event.target.value)" class="vehicle_input_select" placeholder="Choose Make"
                                formControlName="maker" [ngClass]="{'input_error': !vehicleDetailsAddForm.controls['maker'].valid && vehicleDetailsFormSubmitClick}">
                                    <option value="" class="hide">MAKE</option>
                                    <option *ngFor="let car_date of carSearchJsonData; let key = index" value="{{key}}">{{car_date.brand}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="row line_row">
                            <div class="col-md-6">
                                <select class="vehicle_input_select" placeholder="Choose Model" formControlName="modelName"
                                [ngClass]="{'input_error': !vehicleDetailsAddForm.controls['modelName'].valid && vehicleDetailsFormSubmitClick}">
                                    <option value="" class="hide">MODEL</option>
                                    <option *ngFor="let car_models of carModel">{{car_models}}</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <input #googleLocDetails class="vehicle_input" placeholder="Enter Location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" (keyup)="searchLocError = false" formControlName="location" 
                                [ngClass]="{'input_error': !vehicleDetailsAddForm.controls['location'].valid && vehicleDetailsFormSubmitClick}">
                            </div>
                        </div>
                        <div *ngIf="errMessage" class="s_alert alert-danger">
                            <strong>{{errMessage.errMsg}}<br></strong>
                        </div>
                        <div class="row line_row mb0">
                            <div class="col-md-12">
                                <button class="add_btn" type="submit">Add Vehicle</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="add_modal_inner" [hidden]="tab=='active'">
                    <div class="row">
                        <div class="col-md-12">
                            <p>Add Vehicle Identification number</p>
                        </div>
                    </div>
                    <form [formGroup]="vehicleVinAddForm" (ngSubmit)="vehicleVinFormSubmit(vehicleVinAddForm.value)">
                        <div class="row line_row">
                            <div class="col-md-12">
                                <input class="vehicle_input" placeholder="Add VIN" formControlName="vin" 
                                [ngClass]="{'input_error': !vehicleVinAddForm.controls['vin'].valid && vehicleVinFormSubmitClick}">
                            </div>
                        </div>
                        <div class="row line_row">
                            <div class="col-md-12">
                                <input #googleLocVin class="vehicle_input" placeholder="Enter Location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" (keyup)="searchLocError = false" formControlName="location" 
                                [ngClass]="{'input_error': !vehicleVinAddForm.controls['location'].valid && vehicleVinFormSubmitClick}">
                            </div>
                        </div>
                        <div *ngIf="errMessage" class="s_alert alert-danger">
                            <strong>{{errMessage.errMsg}}<br></strong>
                        </div>
                        <div class="row line_row mb0">
                            <div class="col-md-12">
                                <button class="add_btn" type="submit">Add Vehicle</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- ADD-VEHICLE-MODAL-ENDS -->

<!-- EDIT-VEHICLE-MODAL-STARTS -->
<div class="modal" id="editvehicle">
    <div class="modal-dialog">
        <div class="modal-content add_modal_wrapper">
            <h3>Edit Vehicle
                <span data-dismiss="modal" class="close">&times;</span>
            </h3>
            <div class="modal-body">
                <div class="add_modal_inner">
                    <!-- <div class="row line_row">
                        <div class="col-md-12">
                            <p>Add Vehicle Photo</p>
                        </div>
                    </div>
                    <div class="row line_row">
                        <div class="col-md-12">
                            <div class="add_pic">
                                <div class="edit">
                                    <input class="" type="input">
                                </div>
                            </div>
                        </div>
                    </div> -->
                    <div class="row">
                        <div class="col-md-12">
                            <p>Edit Vehicle Details</p>
                        </div>
                    </div>
                    <div class="row line_row">
                        <div class="col-md-12">
                            <input class="vehicle_input" placeholder="Edit VIN">
                        </div>
                    </div>
                    <div class="row line_row">
                        <div class="col-md-12">
                            <input class="vehicle_input" placeholder="Edit Registration Number">
                        </div>

                    </div>
                    <div class="row line_row mb0">
                        <div class="col-md-12">
                            <button class="add_btn">Save Vehicle</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- EDIT-VEHICLE-MODAL-ENDS -->

<!-- WIZARD-MODAL-STARTS-->

<div class="modal" id="wizard">
    <div class="modal-dialog modal-full">
        <div class="modal-content login_modal_wrapper">
            <div #closeWizard class="modal_close" data-dismiss="modal" (click)="resetQuoteWizard()">
                &times;
            </div>
            <div class="modal-body">
                <div class="login_modal_content">
                    <div class="loader_overlay" *ngIf="loader"></div>
                    <div class="login_modal_inner">
                        <div class="wizard_inner">
                            <wizard>
                                <wizard-step stepTitle="Title of step 2" optionalStep>
                                    <h3>SERVICES</h3>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <input class="search" placeholder="Search Services" (keyup)="searchIssues($event)">
                                        </div>
                                    </div>
                                    <p *ngIf="!issuesData">No Record Found</p>
                                    <!-- service-tabs-->
                                    <div class="service_tab_inner" *ngIf="issuesData">
                                        <div class="row">
                                            <div class="col col-6">
                                                <div class="arrow_btn up_arrow" (click)="scrollToTop('issue_cntr')"></div>
                                                <ul class="nav services_tab" id="issue_cntr">
                                                    <li class="nav-item" *ngFor="let issue_data of issuesData; let i = index;">
                                                        <a [ngClass]="(i == 0)?'nav-link text_truncate active':'nav-link text_truncate'" data-toggle="pill" [attr.href]="'#issue_'+issue_data.issue_id"><img src="../../../assets/images/default.png">{{issue_data.issue}}</a>
                                                    </li>
                                                </ul>
                                                <div class="arrow_btn down_arrow" (click)="scrollToBottom('issue_cntr')"></div>
                                            </div>
                                            <div class="col col-6">
                                                <div class="arrow_btn"></div>
                                                <div class="tab-content backgroundColor">
                                                    <div *ngFor="let issue_data of issuesData; let i = index;" [ngClass]="(i == 0)?'tab-pane container active':'tab-pane container'"  [attr.id]="'issue_'+issue_data.issue_id">
                                                        <ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions" [attr.id]="'sub_issue_cntr_'+issue_data.issue_id">
                                                            <li *ngFor="let sub_issue_data of issue_data.sub_categories">
                                                                <button id="custom_check_button">
                                                                    <label>
                                                                        <input type="checkbox" name="services" [attr.id]="'issue_' + issue_data.issue_id + '_' + sub_issue_data.issue_cat_id" [attr.issue_id]="issue_data.issue_id" [attr.sub_issue_id]="sub_issue_data.issue_cat_id" (click)="setIssueSelected($event)">
                                                                        <p class="text_truncate">{{sub_issue_data.issue_category}}</p>
                                                                    </label>
                                                                </button>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="arrow_btn"></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <button [ngClass]="{'log_btn_diabled':selectedIssues.length == 0}" class="log_btn next_btn floatRight" type="button" (click)="jumpToStep3()">NEXT</button>
                                            <input #step3nextBtn type="hidden" nextStep>
                                        </div>
                                    </div>
                                </wizard-step>
                                <wizard-step stepTitle="Title of step 3">
                                    <h3>DESCRIPTION</h3>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h6 class="pt10 textLeft">Add notes for General Diagnosis (Please provide description in notes section) (optional) *</h6>
                                        </div>
                                    </div>
                                    <div class="row m0">
                                        <div class="col-md-12">
                                            <textarea class="textarea_input" rows="5" placeholder="Additional Informations you may can gave" [(ngModel)]='optionalDescription'></textarea>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <h6 class="pt10 textLeft">Add Images (Optional)</h6>
                                        <!-- Add Images or Videos (Optional) -->
                                        <hr>
                                        <div class="add_images">
                                            <ul>
                                                <li>
                                                    <span *ngIf="!optionalImges[1]">+</span>
                                                    <img *ngIf="optionalImges[1]" [src]="optionalImges[1]['file_url']" width="50px" height="50px">
                                                    <input type="file" (change)="optImgUpload(1,$event)" accept="image/*">
                                                </li>
                                                <li>
                                                    <span *ngIf="!optionalImges[2]">+</span>
                                                    <img *ngIf="optionalImges[2]" [src]="optionalImges[2]['file_url']" width="50px" height="50px">
                                                    <input type="file" (change)="optImgUpload(2,$event)" accept="image/*">
                                                </li>
                                                <li>
                                                    <span *ngIf="!optionalImges[3]">+</span>
                                                    <img *ngIf="optionalImges[3]" [src]="optionalImges[3]['file_url']" width="50px" height="50px">
                                                    <input type="file" (change)="optImgUpload(3,$event)" accept="image/*">
                                                </li>
                                                <li>
                                                    <span *ngIf="!optionalImges[4]">+</span>
                                                    <img *ngIf="optionalImges[4]" [src]="optionalImges[4]['file_url']" width="50px" height="50px">
                                                    <input type="file" (change)="optImgUpload(4,$event)" accept="image/*">
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <button class="log_btn prev_btn floatLeft" type="button" previousStep>PREVIOUS</button>
                                            <button class="log_btn next_btn floatRight" type="button" nextStep>NEXT</button>
                                        </div>
                                    </div>
                                </wizard-step>
                             
                                <wizard-step stepTitle="Title of step 4">
                                    <h3>SUMMARY</h3>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <!-- <h6 class="pt10 textLeft">Issues</h6> -->
                                            <div class="wizard_subhead">
                                                Issues Spoted
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="selected_services">
                                                <ul>
                                                    <li *ngFor="let selIssue of selectedIssues">{{selIssue.issue_category}}<a (click)="removeSelectedItem(selIssue.issue_id,selIssue.sub_issue_id)">&times;</a></li>
                                                    
                                                    <a goToStep="0"><li class="add_more_services">Add more Services</li></a>
                                                    <input #goTostep1 type="hidden" goToStep="0">
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="wizard_subhead">
                                                Location
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <input #newGoogleLocSearch placeholder="Enter Location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" [ngModel]="(wizardData && wizardData.pickup_data && wizardData.pickup_data.pickup_loc)?wizardData.pickup_data.pickup_loc:''" (keyup)="googlesearchLocError = false;" (ngModelChange)="get_newlocaion(newGoogleLocSearch.value)" [attr.value]="(wizardData && wizardData.pickup_data && wizardData.pickup_data.pickup_loc)?wizardData.pickup_data.pickup_loc:''">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input  placeholder="LAST MAINTENANCE DATE" type="" bsDatepicker name="dob" [ngModel]="(wizardData && wizardData.vechile_info && wizardData.vechile_info.lastMaintanceDate)?wizardData.vechile_info.lastMaintanceDate:''" (ngModelChange)="get_newdate($event)">
                                        </div>
                                        <div class="col-md-6">
                                            <input placeholder="APPROX VEHICLE MILEAGE" type="" [ngModel]="testMilage" (ngModelChange)="get_newmilage($event)">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <select *ngIf="(wizardData && wizardData.vechile_info)" (change)=get_newmaintanence_date($event)>
                                                <option value="" class="hide">MAINTENANCE INTERVALS</option>
                                                <option *ngFor="let date of monthArray;let i = index;" [attr.value]="i+1" [selected]="(wizardData && wizardData.vechile_info && wizardData.vechile_info.maintanenceInterval)? wizardData.vechile_info.maintanenceInterval == i+1 :''">{{i+1}}{{(i === 0)?' Month':' Months'}}</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 textCenter">
                                            <button *ngIf="!loginDetails" (click)="resetForm()" class="wizard_signin floatLeft" type="button" data-toggle="modal" data-target="#login">SIGN IN</button>
                                            <button (click)="getQuote()" class="wizard_quotes floatRight" type="button" data-toggle="modal" data-target="#quotes">VIEW SERVICE QUOTE</button>
                                            <input type="hidden" #indexLoginModal data-toggle="modal" data-target="#login">
                                        </div>
                                    </div>
                                </wizard-step>
                            </wizard>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- WIZARD-MODAL-ENDS-->

<!-- QUOTES-MODAL-STARTS-->

<div class="modal" id="quotes">
    <div class="modal-dialog modal-full">
        <div class="modal-content login_modal_wrapper" malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
            <div #closeQuoteWizard class="modal_close" data-dismiss="modal" (click)="scheduleDateInit = false; scheduleMechanic = false; selMechanics = [];">
                &times;
            </div>
            <div class="modal-body">
                <div class="quote_service_wrapper">
                    <div class="loader_overlay" *ngIf="loader"></div>
                    <div class="row">
                        <div class="col-md-8">
                            <div class="quote_header">
                                <h4>Car Fixxers Guarantee</h4>
                                <p>Quality service through our network of approved repair shops Rewards to use towards future services, Vehicle maintenance tracker to easily manage service history Safe and secure payment processing, Dedicated support to
                                    handle any repair related questions Peace-of-Mind Guarantee - no unexpected charges</p>
                            </div>
                            <div class="quote_schedule_header">
                                <div class="row">
                                    <div class="col-md-6">
                                        <h4>Select your day and date</h4>
                                    </div>
                                    <div class="col-md-6">
                                        <button [ngClass]="{'invisible': !showLeftArrow}" class="quote_arrow left floatLeft" (click)="prev($event)"></button>
                                        <div class="schedule_dates floatLeft">
                                            <ul>
                                                <li>{{ dateSection[0] | date:'MMM dd-MM-yyyy' }}</li>
                                                <li>{{ dateSection[1] | date:'MMM dd-MM-yyyy' }}</li>
                                            </ul>
                                        </div> 
                                        <button [ngClass]="{'invisible': !showRightArrow}" class="quote_arrow right floatRight" (click)="next($event)"></button>
                                        <div class="clear"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="quote_schedule_list">
                                <ul malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
                                    <li *ngFor="let mechanic of mechanicData; let i = index;">
                                        <div class="row">
                                            <div class="col-md-6 pr0">
                                                <div class="mechanic_profile">
                                                    <div class="mechanic_profile_inner">
                                                        <div class="mechanic_photo_wrapper">
                                                            <div class="mechanic_photo">
                                                                <img src="{{imageServer + mechanic.profile_image}}" onerror="this.src='assets/images/user_avatar.jpg'">
                                                            </div>
                                                            <div class="mechanic_ratting">
                                                                <p *ngIf="mechanic.rating > 0">{{mechanic.rating}} Ratings</p>
                                                          
                                                            </div>
                                                        </div>
                                                        <div class="mechanic_detail relative">
                                                                <div class="custom_checkbox_stack">
                                                                        <input class="custom_checkbox" [attr.id]="'custom_checkbox-1'+i" (click)="checkboxChange(i,mechanic.mechanic_id,$event,mechanic.estimate)" type="checkbox" value="value1">
                                                                        <label [attr.for]="'custom_checkbox-1'+i"></label>
                                                                </div>
                                                            <h4>{{mechanic.display_name}}</h4>
                                                            <div *ngIf="mechanic.shop_id != 0; else mechanicDetails">
                                                                <h5>{{mechanic.shop_name}}</h5>
                                                                <p>{{mechanic.shop_address}}</p>
                                                                <h6>{{mechanic.shop_phone}}</h6>
                                                                <p>{{mechanic.distance | number:'1.2-2'}} miles away from you</p>
                                                            </div>
                                                            <ng-template #mechanicDetails>
                                                                <p>{{mechanic.address}}<br>{{mechanic.city+' , '+mechanic.state}}</p>
                                                                <h6>{{mechanic.phone}}</h6>
                                                                <p>{{mechanic.distance | number:'1.2-2'}} miles away from you</p>
                                                            </ng-template>
                                                            <button (click)="scheduleNow(mechanic.mechanic_id,mechanic.estimate)"
                                                                    [ngClass]="{'book_now':scheduleDateInit == true && scheduleMechanic == mechanic.mechanic_id && selMechanics.length <= 0,
                                                                                'book_now_disabled':scheduleDateInit == false || (scheduleDateInit == true && scheduleMechanic != mechanic.mechanic_id) || selMechanics.length > 0}">
                                                                {{loginDetails ? 'Book now' : 'Login and Continue' }}
                                                            </button>
                                                        </div>
                                                        <div class="clear"></div>
                                                        <div class="offer">
                                                            <div class="panel-group" id="accordion">
                                                                <div class="panel panel-default">
                                                                    <div class="panel-heading">
                                                                        <h4 class="panel-title">
                                                                        <a data-toggle="collapse" data-parent="#accordion" href="#estimate_{{mechanic.mechanic_id}}">
                                                                                <div class="row">
                                                                                    <div class="col-md-8">Estimated Price</div>
                                                                                    <div class="col-md-1"></div>
                                                                                    <div class="col-md-2 textRight"><strong>{{mechanic.estimate}}</strong></div>
                                                                                </div>
                                                                            </a>
                                                                        </h4>
                                                                    </div>
                                                                    <div id="estimate_{{mechanic.mechanic_id}}" class="panel-collapse collapse in">
                                                                        <div class="panel-body" *ngFor="let sub_issues of mechanic.sub_issues">
                                                                            <div class="row">
                                                                                <div class="col-md-8">{{sub_issues.issue_category}}</div>
                                                                                <div class="col-md-1">:</div>
                                                                                <div class="col-md-3 textRight"><strong>{{sub_issues.service_fee}}</strong></div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="scheduletiming_listing">
                                                    <ul id="scroll_0_{{i}}">
                                                        <li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
                                                            <label>
                                                                <input type="radio" name="scheduleTime" (click)="getSchedule(time,'0'); 
                                                                scheduleDateInit = true; scheduleMechanic = mechanic.mechanic_id">  
                                                                <p>{{time}}</p>
                                                            </label>
                                                        </li>
                                                    </ul>
                                                    <ul id="scroll_1_{{i}}">
                                                        <li *ngFor="let time of mechanic.scheduleTiming" id="custom_check_button">
                                                            <label>
                                                                <input type="radio" name="scheduleTime" (click)="getSchedule(time,'1'); 
                                                                scheduleDateInit = true; scheduleMechanic = mechanic.mechanic_id">  
                                                                <p>{{time}}</p>
                                                            </label>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="scheduletiming_btm_btns">
                                                    <div class="btm_btns" (click)="scrollToBottom('scroll_0_'+i)"></div>
                                                    <div class="btm_btns" (click)="scrollToBottom('scroll_1_'+i)"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="service_list">
                                <h4>Services</h4>
                                <div *ngFor="let selIssue of selectedIssues; let key = index">
                                    <p *ngIf="key != 0">|</p>
                                    <p>{{selIssue.issue_category}}</p> 
                                </div>
                                <div class="clear"></div>
                                <p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
                                <div class="clear"></div>
                                <button class="request_all_btn" *ngIf="selMechanics.length > 0 && scheduleDateInit == true" (click)="scheduleMultipleRequest()">Request All</button>
                            </div>
                            <div class="service_map">
                                <agm-map #gm [latitude]="lat" [longitude]="lng"  [fitBounds]="true">
                                    <agm-marker *ngFor="let mechanicLoc of mechanicData"
                                                [latitude]="mechanicLoc.location_lat"
                                                [longitude]="mechanicLoc.location_lat"
                                                (mouseOver)="onMouseOver(infoWindow,gm)"
                                                (mouseOut)="onMouseOut(gm)" [agmFitBounds]="true">
                                        <agm-info-window [disableAutoPan]="false" #infoWindow>
                                            <div style="width:130px;">
                                                <img src="{{imageServer + mechanicLoc.profile_image}}" width="30px" height="30px" style="float: left;" onerror="this.src='assets/images/user_avatar.jpg'">
                                                <div style="float:right;width:calc(100% - 30px); white-space: nowrap;
                                                overflow: hidden;
                                                text-overflow: ellipsis;padding-left: 5px;">{{mechanicLoc.display_name}}<br>
                                                    Price : {{mechanicLoc.estimate}}
                                                </div>
                                            </div>
                                            
                                        </agm-info-window>
                                    </agm-marker>
                                </agm-map>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- QUOTES-MODAL-ENDS-->

<!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#confirm">Open Modal</button> -->

<!-- BOOKING-QUOTE-MODAL-STARTS -->
<div class="modal" id="quote">
    <div class="modal-dialog modal-full">
        <div class="loader_overlay" *ngIf="loader"></div>
        <div class="modal-content login_modal_wrapper">
                <div class="modal_close" data-dismiss="modal"> × </div>
           <div class="modal-body quote_modal">
               <div class="login_modal_content">
                   <div class="login_modal_inner">
                       <h3>View quotes</h3>
                       <table width=100%>
                           <thead>
                               <tr>
                                   <th width= 20%;>Issues</th>
                                   <th>Description</th>
                                   <th>Amount</th>
                               </tr>
                           </thead>
                           <tbody>
                               <tr *ngFor="let quote of mechCustQuote">
                                   <td>{{quote.issue_category}}</td>
                                   <td>{{quote.description}}</td>
                                   <td>{{quote.amount}}</td>
                               </tr>
                           </tbody>
                       </table>
                       <div class="row">
                           <div class="col-md-12 textCenter" style="padding-top:40px;">
                                <button class="log_btn" data-dismiss="modal">Close</button>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
        </div>
    </div>
</div>
<!-- BOOKING-QUOTE-MODAL-ENDS -->

<!-- BOOKING-SUCCESS-MODAL-STARTS -->
<button #successModel class="hide" data-toggle="modal" data-target="#success"></button>
<div class="modal" id="success">
    <div class="modal-dialog modal-full">
        <div class="modal-content login_modal_wrapper">
                <div class="modal_close" data-dismiss="modal"> × </div>
           <div class="modal-body quote_modal">
               <div class="login_modal_content">
                   <div class="login_modal_inner">
                    <div class="login_success">
                        <img src="assets/images/asset_success.png">
                        <h4>Your Booking is success</h4>
                    </div>

                       <div class="row">
                           <div class="col-md-12 textCenter" style="padding-top:40px;">
                                <button class="log_btn" data-dismiss="modal">Close</button>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
        </div>
    </div>
</div>
<!-- BOOKING-SUCCESS-MODAL-ENDS -->

<!-- BOOKING-FAILURE-MODAL-STARTS -->
<button #failureModel class="hide" data-toggle="modal" data-target="#failure"></button>

<div class="modal" id="failure">
    <div class="modal-dialog modal-full">
        <div class="modal-content login_modal_wrapper">
                <div class="modal_close" data-dismiss="modal"> × </div>
           <div class="modal-body quote_modal">
               <div class="login_modal_content">
                   <div class="login_modal_inner">
                    <div class="login_success">
                        <img src="assets/images/asset_error.png">
                        <h4>Your Booking is failure</h4>
                    </div>

                       <div class="row">
                           <div class="col-md-12 textCenter" style="padding-top:40px;">
                                <button class="log_btn" data-dismiss="modal">Close</button>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
        </div>
    </div>
</div>
<!-- BOOKING-FAILURE-MODAL-ENDS -->

<!-- BOOKING-CONFIRMATION-MODAL-STARTS -->
<button #confirmModal class="hide" data-toggle="modal" data-target="#confirm">Add Vehicle</button>
<div class="modal" id="confirm" >
    <div class="modal-dialog modal-full">
        <div class="modal-content background_transparent">
           <div class="modal-body quote_modal">
               <div class="confirm_modal_content">
                   <div class="login_modal_inner">
                        <div class="login_success">
                            <h4>Do You Want to Confirm ?</h4>
                        </div>
                        <div class="row">
                            <div class="col-md-12 textCenter">
                                <button class="btn btn-success" data-dismiss="modal" (click)="confirmCallBack(confirmCallBak,confirmParam)">Yes</button>
                                <button class="btn btn-danger" data-dismiss="modal">No</button>
                            </div>
                        </div>
                   </div>
               </div>
           </div>
        </div>
    </div>
</div>
<!-- BOOKING-CONFIRMATION-MODAL-ENDS -->
