<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</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link appointment" data-toggle="tab" href="#appointment">Appointments</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link time" data-toggle="tab" href="#service" #serviceHistoryTab>
                      Service History
                  </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)="deleteCustomerCar(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>Order no</th>
                                                        <th>Order Date</th>
                                                        <th>Vehicle</th>
                                                        <th>Mechanic</th>
                                                        <th>Cost</th>
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr *ngFor="let bookData of successBookDtls">
                                                        <td>{{bookData.booking_id}}</td>
                                                        <td>{{bookData.scheduled_date+' '+bookData.scheduled_time}}</td>
                                                        <td>{{bookData.car_name}}</td>
                                                        <td>{{bookData.first_name+' '+bookData.last_name}}</td>
                                                        <td>{{bookData.cost}}</td>
                                                        <td>
                                                            <div class="btn-group btn-group-justified">
                                                                <button (click)="cancelBooking(bookData.booking_id)" class="btn btn-danger btn-sm">Cancel</button>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </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>Order no</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">
                                                        <td>{{bookData.booking_id}}</td>
                                                        <td>{{bookData.scheduled_date+' '+bookData.scheduled_time}}</td>
                                                        <td>{{bookData.car_name}}</td>
                                                        <td>{{bookData.first_name+' '+bookData.last_name}}</td>
                                                        <td class="service-align-center">{{bookData.cost}}</td>
                                                        <td [ngSwitch]="bookData.status">
                                                            <p *ngSwitchCase="1" class="success_status">Success</p>
                                                            <p *ngSwitchCase="0" class="pending_status">Pending</p>
                                                            <p *ngSwitchCase="3" class="canceled_status">Canceled</p>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </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>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="service_methods">
                                                <p *ngIf="!issuesData; else listIssues">No Record Found</p>
                                                <ng-template #listIssues>
                                                    <ul>
                                                        <div *ngFor="let issue_data of issuesData">
                                                            <li data-toggle="collapse" [attr.data-target]="'#issue_' + issue_data.issue_id">{{issue_data.issue}}</li>
                                                            <div class="service_list collapse" [attr.id]="'issue_' + issue_data.issue_id">
                                                                <ul>
                                                                    <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>{{sub_issue_data.issue_category}}</p>
                                                                            </label>
                                                                        </button>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                    </ul>
                                                </ng-template>
                                            </div>
                                        </div>
                                    </div>
                                    <br>
                                    <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">Please add a photo or video</h6>
                                        </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>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h6 class="pt10 textLeft"><a goToStep="0">Add more services</a></h6>
                                            <input #goTostep1 type="hidden" goToStep="0">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 textCenter">
                                            <button *ngIf="!loginDetails" (click)="resetForm()" class="wizard_signin" type="button" data-toggle="modal" data-target="#login">SIGN IN</button>
                                            <button (click)="getQuote()" class="wizard_quotes" 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">
            <div #closeQuoteWizard class="modal_close" data-dismiss="modal" (click)="scheduleDateInit = false; scheduleMechanic = false">
                &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>
                                    <li *ngFor="let mechanic of mechanicData">
                                        <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>
                                                        <div class="mechanic_detail">
                                                            <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'}}</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'}}</p>
                                                            </ng-template>
                                                            <button (click)="scheduleNow(mechanic.mechanic_id,mechanic.estimate)"
                                                                    [ngClass]="{'book_now':scheduleDateInit == true && scheduleMechanic == mechanic.mechanic_id,
                                                                                'book_now_disabled':scheduleDateInit == false || (scheduleDateInit == true && scheduleMechanic != mechanic.mechanic_id)}">
                                                                {{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_{{mechanic.mechanic_id}}">
                                                        <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_{{mechanic.mechanic_id}}">
                                                        <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_'+mechanic.mechanic_id)"></div>
                                                    <div class="btm_btns" (click)="scrollToBottom('scroll_1_'+mechanic.mechanic_id)"></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>
                            </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;margin-right: 5px" onerror="this.src='assets/images/user_avatar.jpg'">
                                                <div style="float: left">{{mechanicLoc.display_name}}</div>
                                                <div>{{mechanicLoc.estimate}}</div>
                                            </div>
                                            
                                        </agm-info-window>
                                    </agm-marker>
                                </agm-map>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- QUOTES-MODAL-ENDS-->


<!-- BOOKING-SUCCESS-MODAL-STARTS -->

<div class="modal" id="success">
    <div class="modal-dialog modal-full">
        <div class="modal-content login_modal_wrapper">
            GDGDG
        </div>
    </div>
</div>


<!-- BOOKING-SUCCESS-MODAL-ENDS -->
