<input type="hidden" #wizardModal data-toggle="modal" data-target="#wizard">

<div class="main_wrapper">
    <section class="module parallax parallax_title">
        <div class="title_banner_overlay">
            <div class="title_banner">
                <div class="container">
                    <h1>Compare quotes and book<br> autoservice with warranty</h1>
                    <h5>Where is your car?</h5>
                    <div class="search_input_container" [ngClass]="{'input_error': searchLocError}">
                        <input #googleLocSearch placeholder="Enter Location" autocorrect="off" autocapitalize="off" spellcheck="off" type="text" (keyup)="searchLocError = false">
                        <button class="get_started_btn" (click)="getVehicleLoc(googleLocSearch.value)">GET STARTED</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="how_it_works">
        <h3>HOW IT WORKS</h3>
        <hr>
        <br>
        <br>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-2 textCenter">
                    <img src="assets/images/asset_icon1.png">
                    <h4>Get Quotes for Your Service</h4>
                    <p>Choose your service or describe the problem, then compare quotes from shops nearby.</p>
                </div>
                <div class="col-md-2 textCenter">
                    <img src="assets/images/asset_arrow.png" class="arrow">
                </div>
                <div class="col-md-2 textCenter">
                    <img src="assets/images/asset_icon2.png">
                    <h4>Schedule Your Appointment</h4>
                    <p>Choose the shop that's right for you, then pick a convenient day and time for your service.</p>
                </div>
                <div class="col-md-2 textCenter">
                    <img src="assets/images/asset_arrow.png" class="arrow">
                </div>
                <div class="col-md-2 textCenter">
                    <img src="assets/images/asset_icon3.png">
                    <h4>Pay securely online</h4>
                    <p>Hold your appointment with a credit card, and pay securely online when your service is complete!</p>
                </div>
                <div class="col-md-1"></div>
            </div>
            <div class="row">
                <div class="col-md-12 textCenter">
                    <button class="learn_more">
                        LEARN MORE
                    </button>
                </div>
            </div>
        </div>
    </section>
    <section class="service_check">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-2 textCenter p0">
                    <img src="assets/images/asset_icon4.png">
                    <h4>Diagnosis Trouble Codes</h4>
                    <p>Find out what your code really means and what you can expect to pay.</p>
                    <button class="learn_more">
                        GO
                    </button>
                </div>
                <div class="col-md-2"></div>
                <div class="col-md-2 textCenter p0">
                    <img src="assets/images/asset_icon5.png">
                    <h4>Parts and Replacement</h4>
                    <p>Review causes, symptoms, and estimate repair costs.</p>
                    <button class="learn_more">
                        GO
                    </button>
                </div>
                <div class="col-md-2"></div>
                <div class="col-md-2 textCenter p0">
                    <img src="assets/images/asset_icon6.png">
                    <h4>Maintenance Schedules</h4>
                    <p>Need to schedule a maintenance check? You’re in the right place.</p>
                    <button class="learn_more">
                        GO
                    </button>
                </div>
                <div class="col-md-1"></div>
            </div>
        </div>
    </section>
    <section class="testimonial_div">
        <h3>CUSTOMER TESTIMONIALS</h3>
        <hr>
        <br>
        <br>
        <div class="container-fluid">
            <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()">
                <ngx-tile NgxCarouselItem>
                    <div class="testmonial_div">
                        <div class="testimonial_inner">
                            <h5>Good service!!!</h5>
                            <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal....</p>
                            <p class="textRight m0">Read more</p>
                            <div class="arrow-down"></div>
                        </div>
                        <div class="testimonial_bottom">
                            <div class="testimonial_circle floatLeft"></div>
                            <div class="testimonial_detail floatLeft">
                                <h4>John doe</h4>
                                <p>March 24</p>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </ngx-tile>
                <ngx-tile NgxCarouselItem>
                    <div class="testmonial_div">
                        <div class="testimonial_inner">
                            <h5>Good service!!!</h5>
                            <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal....</p>
                            <p class="textRight m0">Read more</p>
                            <div class="arrow-down"></div>
                        </div>
                        <div class="testimonial_bottom">
                            <div class="testimonial_circle floatLeft"></div>
                            <div class="testimonial_detail floatLeft">
                                <h4>John doe</h4>
                                <p>March 24</p>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </ngx-tile>
                <ngx-tile NgxCarouselItem>
                    <div class="testmonial_div">
                        <div class="testimonial_inner">
                            <h5>Good service!!!</h5>
                            <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal....</p>
                            <p class="textRight m0">Read more</p>
                            <div class="arrow-down"></div>
                        </div>
                        <div class="testimonial_bottom">
                            <div class="testimonial_circle floatLeft"></div>
                            <div class="testimonial_detail floatLeft">
                                <h4>John doe</h4>
                                <p>March 24</p>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </ngx-tile>
                <ngx-tile NgxCarouselItem>
                    <div class="testmonial_div">
                        <div class="testimonial_inner">
                            <h5>Good service!!!</h5>
                            <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal....</p>
                            <p class="textRight m0">Read more</p>
                            <div class="arrow-down"></div>
                        </div>
                        <div class="testimonial_bottom">
                            <div class="testimonial_circle floatLeft"></div>
                            <div class="testimonial_detail floatLeft">
                                <h4>John doe</h4>
                                <p>March 24</p>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </ngx-tile>
                <ngx-tile NgxCarouselItem>
                    <div class="testmonial_div">
                        <div class="testimonial_inner">
                            <h5>Good service!!!</h5>
                            <p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal....</p>
                            <p class="textRight m0">Read more</p>
                            <div class="arrow-down"></div>
                        </div>
                        <div class="testimonial_bottom">
                            <div class="testimonial_circle floatLeft"></div>
                            <div class="testimonial_detail floatLeft">
                                <h4>John doe</h4>
                                <p>March 24</p>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                </ngx-tile>
                <button NgxCarouselPrev class='leftRs'>&lt;</button>
                <button NgxCarouselNext class='rightRs'>&gt;</button>
            </ngx-carousel>
        </div>
    </section>
    <section class="featured_on">
        <h3>FEATURED ON</h3>
        <hr>
        <br>
        <br>
        <div class="container-fluid">
            <ngx-carousel [inputs]="featuredOn" (carouselLoad)="featuredOnLoad()">
                <ngx-tile NgxCarouselItem>
                    <div class="feature_item">
                        <img src="assets/images/asset_j1.png">
                    </div>
                </ngx-tile>
                <ngx-tile NgxCarouselItem>
                    <div class="feature_item">
                        <img src="assets/images/asset_j2.png">
                    </div>
                </ngx-tile>
                <ngx-tile NgxCarouselItem>
                    <div class="feature_item">
                        <img src="assets/images/asset_j3.png">
                    </div>
                </ngx-tile>
                <ngx-tile NgxCarouselItem>
                    <div class="feature_item">
                        <img src="assets/images/asset_j4.png">
                    </div>
                </ngx-tile>
                <ngx-tile NgxCarouselItem>
                    <div class="feature_item">
                        <img src="assets/images/asset_j5.png">
                    </div>
                </ngx-tile>
                <ngx-tile NgxCarouselItem>
                    <div class="feature_item">
                        <img src="assets/images/asset_j6.png">
                    </div>
                </ngx-tile>
                
                <button NgxCarouselPrev class='leftRs'>&lt;</button>
                <button NgxCarouselNext class='rightRs'>&gt;</button>
            </ngx-carousel>
        </div>
    </section>
</div>



<!-- 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 1">
                                    <form [formGroup]="vehicleDataForm" (ngSubmit)="getVehicleData(vehicleDataForm.value)">
                                        <h3>VEHICLE INFORMATION</h3>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <select formControlName="modelYear" [ngClass]="{'input_error': !vehicleDataForm.controls['modelYear'].valid && vehicleDataFormSubmit}">
                                                    <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)" formControlName="maker" [ngClass]="{'input_error': !vehicleDataForm.controls['maker'].valid && vehicleDataFormSubmit}">
                                                    <option value="" class="hide">MAKE</option>
                                                    <option *ngFor="let car_date of carBrands; let key = index" value="{{car_date.veh_brand_id}}">{{car_date.maker}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <select formControlName="modelName" [ngClass]="{'input_error': !vehicleDataForm.controls['modelName'].valid && vehicleDataFormSubmit}">
                                                    <option value="" class="hide">MODEL</option>
                                                    <option *ngFor="let car_models of carModel">{{car_models.model}}</option>
                                                </select>
                                            </div>
                                            <div class="col-md-6">
                                                <input formControlName="milage" placeholder="APPROX VEHICLE MILEAGE" type="">
                                            </div>
                                        </div>
                                        <h6 class="textLeft pb10">OPTIONAL</h6>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <input formControlName="emgine" placeholder="ENGINE" type="">
                                            </div>
                                            <div class="col-md-6">
                                                <input formControlName="trim" placeholder="TRIM" type="">
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-6">
                                                <input formControlName="last_date" placeholder="LAST MAINTENANCE DATE" type="text" class="form-control date" 
                                                bsDatepicker name="dob">
                                            </div>
                                            <div class="col-md-6">
                                                <select formControlName="maintanence_interval">
                                                    <option value="" class="hide">MAINTENANCE INTERVALS</option>
                                                    <option *ngFor="let date of monthArray;let i = index;" [value]="i+1">{{i+1}}{{(i === 0)?' Month':' Months'}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <h6 class="pt10 textLeft"><strong>Note:</strong> 'Engine' and 'Trim' are optional... but providing them will improve your results and allow you to select a mileage-based maintenance service for your vehicle.</h6>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <button class="log_btn prev_btn floatLeft" type="button" data-dismiss="modal">PREVIOUS</button>
                                                <button [ngClass]="{'log_btn_diabled':vehicleDataForm.invalid}" type="submit" class="log_btn next_btn floatRight" (click)="jumpToStep1()">NEXT</button>
                                                
                                            </div>
                                        </div>
                                    </form>
                                </wizard-step>
                                <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" tooltip="{{issue_data.issue}}" placement="top" show-delay="500" z-index="99999"><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" tooltip="{{sub_issue_data.issue_category}}" placement="top" show-delay="500" z-index="99999">{{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 class="log_btn prev_btn floatLeft" type="button" previousStep>PREVIOUS</button>
                                            <button [ngClass]="{'log_btn_diabled':selectedIssues.length == 0}" class="log_btn next_btn floatRight" type="button" (click)="jumpToStep2()">NEXT</button>
                                        </div>
                                    </div>
                                </wizard-step>
                                <wizard-step stepTitle="Title of step 3">
                                    <h3>DESCRIPTION</h3>
                                    <div class="row m0">
                                        <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 m0">
                                        <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">
                                            <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="1"><li class="add_more_services">Add more Services</li></a>
                                                </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 #addressLocSearch 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)="addresssearchLocError = false;" (ngModelChange)="get_newlocaion(addressLocSearch.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]="(wizardData && wizardData.vechile_info && wizardData.vechile_info.milage)?wizardData.vechile_info.milage:''" (ngModelChange)="get_newmilage($event)">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <select *ngIf="(wizardData && wizardData.vechile_info && wizardData.vechile_info.maintanenceInterval)" (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.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>
                                    <input #goTostep0 type="hidden" goToStep="0">
                                    <input #goTostep1 type="hidden" goToStep="1">
                                    <input #goTostep2 type="hidden" goToStep="2">
                                </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 pr0">
                                            <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-7 col-sm-7 col-xs-7">Estimated Price</div>
                                                                                    <div class="col-md-5 col-sm-5 col-xs-5 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-7 col-sm-7 col-xs-7">{{sub_issues.issue_category}}</div>
                                                                                <div class="col-md-1 col-sm-1 col-xs-1">:</div>
                                                                                <div class="col-md-4 col-sm-4 col-xs-4 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}}" malihu-scrollbar [scrollbarOptions]="scrollbarOptions"> -->
                                                        <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()">{{loginDetails? 'Request All' : 'Login and Continue'}}</button>
                                </div>
                                <div class="service_map">
                                    <agm-map #gm [latitude]="lat" [longitude]="lng" [fitBounds]="true">
                                        <agm-marker *ngFor="let mechanicLoc of mechanicData" [agmFitBounds]="true" [latitude]="mechanicLoc.location_lat" [longitude]="mechanicLoc.location_lat" (mouseOver)="onMouseOver(infoWindow,gm)" (mouseOut)="onMouseOut(gm)">
                                            <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-->