12-11-2019

.editorconfig

+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

README.md

+# Truebusapp
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.2.5.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

angular.json

+{
+    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+    "version": 1,
+    "newProjectRoot": "projects",
+    "projects": {
+        "truebusapp": {
+            "root": "",
+            "sourceRoot": "src",
+            "projectType": "application",
+            "prefix": "app",
+            "schematics": {},
+            "architect": {
+                "build": {
+                    "builder": "@angular-devkit/build-angular:browser",
+                    "options": {
+                        "outputPath": "dist/truebusapp",
+                        "index": "src/index.html",
+                        "main": "src/main.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.app.json",
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ],
+                        "styles": [
+                            "src/styles.scss",
+                            "src/responsive.scss",
+                            "node_modules/font-awesome/css/font-awesome.css",
+                            "node_modules/bootstrap/dist/css/bootstrap-grid.min.css",
+                            "node_modules/bootstrap/dist/css/bootstrap-reboot.min.css",
+                            "node_modules/bootstrap/dist/css/bootstrap.min.css",
+                            "node_modules/material-design-lite/material.min.css",
+                            "node_modules/slick-carousel/slick/slick.scss",
+                            "node_modules/slick-carousel/slick/slick-theme.scss",
+                            "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css"
+
+                        ],
+                        "scripts": [
+                            "node_modules/jquery/dist/jquery.min.js",
+                            "node_modules/slick-carousel/slick/slick.min.js",
+                            "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
+                            "node_modules/bootstrap/dist/js/bootstrap.min.js",
+                            "node_modules/material-design-lite/material.min.js",
+                            "./src/assets/js/checkout.js"
+                        ]
+                    },
+                    "configurations": {
+                        "production": {
+                            "fileReplacements": [{
+                                "replace": "src/environments/environment.ts",
+                                "with": "src/environments/environment.prod.ts"
+                            }],
+                            "optimization": true,
+                            "outputHashing": "all",
+                            "sourceMap": false,
+                            "extractCss": true,
+                            "namedChunks": false,
+                            "aot": true,
+                            "extractLicenses": true,
+                            "vendorChunk": false,
+                            "buildOptimizer": true
+                        }
+                    }
+                },
+                "serve": {
+                    "builder": "@angular-devkit/build-angular:dev-server",
+                    "options": {
+                        "browserTarget": "truebusapp:build"
+                    },
+                    "configurations": {
+                        "production": {
+                            "browserTarget": "truebusapp:build:production"
+                        }
+                    }
+                },
+                "extract-i18n": {
+                    "builder": "@angular-devkit/build-angular:extract-i18n",
+                    "options": {
+                        "browserTarget": "truebusapp:build"
+                    }
+                },
+                "test": {
+                    "builder": "@angular-devkit/build-angular:karma",
+                    "options": {
+                        "main": "src/test.ts",
+                        "polyfills": "src/polyfills.ts",
+                        "tsConfig": "src/tsconfig.spec.json",
+                        "karmaConfig": "src/karma.conf.js",
+                        "styles": [
+                            "src/styles.css"
+                        ],
+                        "scripts": [],
+                        "assets": [
+                            "src/favicon.ico",
+                            "src/assets"
+                        ]
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": [
+                            "src/tsconfig.app.json",
+                            "src/tsconfig.spec.json"
+                        ],
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                }
+            }
+        },
+        "truebusapp-e2e": {
+            "root": "e2e/",
+            "projectType": "application",
+            "architect": {
+                "e2e": {
+                    "builder": "@angular-devkit/build-angular:protractor",
+                    "options": {
+                        "protractorConfig": "e2e/protractor.conf.js",
+                        "devServerTarget": "truebusapp:serve"
+                    },
+                    "configurations": {
+                        "production": {
+                            "devServerTarget": "truebusapp:serve:production"
+                        }
+                    }
+                },
+                "lint": {
+                    "builder": "@angular-devkit/build-angular:tslint",
+                    "options": {
+                        "tsConfig": "e2e/tsconfig.e2e.json",
+                        "exclude": [
+                            "**/node_modules/**"
+                        ]
+                    }
+                }
+            }
+        }
+    },
+    "defaultProject": "truebusapp"
+}
\ No newline at end of file

e2e/protractor.conf.js

+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.e2e.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};
\ No newline at end of file

e2e/src/app.e2e-spec.ts

+import { AppPage } from './app.po';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Welcome to truebusapp!');
+  });
+});

e2e/src/app.po.ts

+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

e2e/tsconfig.e2e.json

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "jasminewd2",
+      "node"
+    ]
+  }
+}
\ No newline at end of file

package.json

+{
+    "name": "mogobus",
+    "version": "0.0.0",
+    "scripts": {
+        "ng": "ng",
+        "start": "ng serve",
+        "build": "ng build",
+        "test": "ng test",
+        "lint": "ng lint",
+        "e2e": "ng e2e"
+    },
+    "private": true,
+    "dependencies": {
+        "@agm/core": "^1.0.0",
+        "@angular/animations": "^6.1.10",
+        "@angular/cdk": "^7.3.7",
+        "@angular/common": "^6.1.0",
+        "@angular/compiler": "^6.1.0",
+        "@angular/core": "^6.1.0",
+        "@angular/flex-layout": "^6.0.0-beta.18",
+        "@angular/forms": "^6.1.0",
+        "@angular/http": "^6.1.0",
+        "@angular/material": "^7.0.3",
+        "@angular/platform-browser": "^6.1.0",
+        "@angular/platform-browser-dynamic": "^6.1.0",
+        "@angular/router": "^6.1.0",
+        "@fortawesome/angular-fontawesome": "^0.3.0",
+        "agm-direction": "^0.7.9",
+        "angular-6-social-login-v2": "^1.0.5",
+        "angular2-counto": "^1.2.5",
+        "bootstrap": "^4.1.3",
+        "bs-moment": "^0.3.1",
+        "core-js": "^2.5.4",
+        "font-awesome": "^4.7.0",
+        "hammerjs": "^2.0.8",
+        "jquery": "^3.4.1",
+        "material-design-lite": "^1.3.0",
+        "ng-bootstrap": "^1.6.3",
+        "ng-pick-datetime": "^7.0.0",
+        "ngx-bootstrap": "^3.0.1",
+        "ngx-infinite-scroll": "^6.0.1",
+        "ngx-slick-carousel": "^0.4.6",
+        "rating": "^0.1.0",
+        "rxjs": "^6.3.3",
+        "rxjs-compat": "^6.3.3",
+        "slick-carousel": "^1.8.1",
+        "zone.js": "~0.8.26"
+    },
+    "devDependencies": {
+        "@angular-devkit/build-angular": "~0.8.0",
+        "@angular/cli": "~6.2.5",
+        "@angular/compiler-cli": "^6.1.0",
+        "@angular/language-service": "^6.1.0",
+        "@types/jasmine": "~2.8.8",
+        "@types/jasminewd2": "~2.0.3",
+        "@types/node": "~8.9.4",
+        "codelyzer": "~4.3.0",
+        "har-validator": "^5.1.3",
+        "jasmine-core": "~2.99.1",
+        "jasmine-spec-reporter": "~4.2.1",
+        "karma": "~3.0.0",
+        "karma-chrome-launcher": "~2.2.0",
+        "karma-coverage-istanbul-reporter": "~2.0.1",
+        "karma-jasmine": "~1.1.2",
+        "karma-jasmine-html-reporter": "^0.2.2",
+        "protractor": "~5.4.0",
+        "ts-node": "~7.0.0",
+        "tslint": "~5.11.0",
+        "typescript": "~2.9.2"
+    }
+}

src/app/app.component.html

+<!-- NAVBAR-STARTS-->
+
+<app-navbar></app-navbar>
+
+<!-- NAVBAR-ENDS-->
+
+<!-- OUTLET-STARTS-->
+
+<router-outlet></router-outlet>
+
+<!-- OUTLET-ENDS-->
+
+<!-- FOOTER-STARTS-->
+
+<app-footer></app-footer>
+
+<!-- FOOTER-ENDS-->
\ No newline at end of file

src/app/app.component.spec.ts

+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'truebusapp'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('truebusapp');
+  });
+
+  it('should render title in a h1 tag', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to truebusapp!');
+  });
+});

src/app/app.component.ts

+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'truebusapp';
+}

src/app/app.module.ts

+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+import { HashLocationStrategy, LocationStrategy } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HomeModule} from './home/home.module';
+import { AppComponent } from './app.component';
+import {AppRoutingModule} from './app.routing';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { NavbarComponent } from './navbar/navbar.component';
+import { FooterComponent } from './footer/footer.component';
+
+import { AuthService } from './provider/auth.service';
+import { AuthGuard } from './provider/auth.guard';
+import { HttpErrorHandler, HandleError } from './provider/http-error-handler.service';
+import { WebService } from './provider/web.service';
+import { MessageService } from './provider/message.service';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { SocialLoginModule, AuthServiceConfig,  GoogleLoginProvider,  FacebookLoginProvider } from 'angular-6-social-login-v2';
+import { ModalModule } from 'ngx-bootstrap';
+import { defineLocale } from 'ngx-bootstrap/chronos';
+import { deLocale } from 'ngx-bootstrap/locale';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+
+defineLocale('de', deLocale);
+
+export function getAuthServiceConfigs() {
+  const config = new AuthServiceConfig(
+      [
+        {
+          id: FacebookLoginProvider.PROVIDER_ID,
+          provider: new FacebookLoginProvider('1956236594672582')
+        },
+        {
+          id: GoogleLoginProvider.PROVIDER_ID,
+          provider: new GoogleLoginProvider('702262932965-9hn1av70pu2mdqhnrat68lu7psn4fpoj.apps.googleusercontent.com')
+        }
+      ]);
+  return config;
+}
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    NavbarComponent,
+    FooterComponent
+  ],
+  imports: [
+    BrowserModule,
+    HttpClientModule,
+    BrowserAnimationsModule,
+    AppRoutingModule,
+    HomeModule,
+    ReactiveFormsModule,
+    FormsModule,
+    InfiniteScrollModule,
+    ModalModule.forRoot(),
+    FlexLayoutModule,
+    SocialLoginModule
+  ],
+  // tslint:disable-next-line:max-line-length
+  providers: [AuthGuard, AuthService, HttpErrorHandler, WebService, MessageService, {provide: LocationStrategy, useClass: HashLocationStrategy}, {provide: AuthServiceConfig, useFactory: getAuthServiceConfigs}],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

src/app/app.routing.ts

+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { AccountComponent } from './home/account/account.component';
+import { AuthGuard } from './provider/auth.guard';
+
+const appRoutes: Routes = [
+  { path: '', redirectTo: 'index', pathMatch: 'full'},
+  { path: 'account', component: AccountComponent, canActivate: [AuthGuard] }
+ ];
+@NgModule({
+  imports: [ RouterModule.forRoot(appRoutes, {useHash: true})],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

src/app/footer/footer.component.html

+<footer class="footer_section">
+    <div class="container-fluid">
+        <div class="footer_section_inner_container">
+            <h3>QUICK LINKS</h3>
+            <div class="row">
+                <div class="col-md-2">
+                    <ul>
+                        <li>Book Tickets</li>
+                        <li>Cancel Tickets</li>
+                        <li>Track Bus</li>
+                    </ul>
+                </div>
+                <div class="col-md-2">
+                    <ul>
+                        <li>About Us</li>
+                        <li>Contact Us</li>
+                        <li>Sign In / Sign Up</li>
+                    </ul>
+                </div>
+                <div class="col-md-2">
+                    <ul>
+                        <li>Terms & Conditions</li>
+                        <li>Privacy Policy</li>
+                        <li>Feedback</li>
+                    </ul>
+                </div>
+
+                <div class="col-md-6">
+                    <div fxLayout="row" fxLayoutAlign="end center">
+                        <div fxFlex="40" class="mogo_footer_sec">
+                            <img src="../../assets/imgs/logo.png">
+                            <h4>Mogo Bus PVT. LTD.</h4>
+                            <p>
+                                Shop No. 10, Platform No. 1, Omni Bus, <br>Terminus, Landmark: Omni Bus Stand
+                            </p>
+                            <div class="social" fxLayout="row" fxLayoutAlign="start center">
+                                <div class="social_icon fb"></div>
+                                <div class="social_icon insta"></div>
+                                <div class="social_icon google"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <hr>
+            <div fxLayout="row" fxLayoutAlign="space-between center">
+                <div fxFlex="100">
+                    <h6>Copyright 2019 &copy; MogoBus All rights reserved.</h6>
+                </div>
+            </div>
+
+        </div>
+    </div>
+</footer>
\ No newline at end of file

src/app/footer/footer.component.scss

+@import "../../styles.scss";
+.footer_section {
+    background: $white_color;
+    padding-top: 50px;
+    padding-bottom: 10px;
+    .footer_section_inner_container {
+        width: 90%;
+        margin: 0 auto;
+        ul {
+            margin: 0px;
+            padding: 0px;
+            padding-bottom: 30px;
+            li {
+                list-style: none;
+                text-transform: uppercase;
+                color: $dark-color;
+                font-size: 12px;
+                line-height: 19px;
+                padding-top: 10px;
+                padding-bottom: 10px;
+                cursor: pointer;
+            }
+        }
+        img {
+            height: 70px;
+        }
+        h3 {
+            color: $dark-color;
+            margin: 0px;
+            padding: 0px;
+            font-size: 20px;
+            font-weight: 500;
+            padding-bottom: 20px;
+        }
+        h4 {
+            color: $dark-color;
+            margin: 0px;
+            padding: 0px;
+            font-size: 15px;
+            font-weight: 600;
+            padding-top: 15px;
+        }
+        p {
+            color: $dark-color;
+            margin: 0px;
+            padding: 0px;
+            font-size: 12px;
+            line-height: 20px;
+        }
+        h6 {
+            margin: 0px;
+            color: #727272;
+            font-size: 12px;
+            line-height: 30px;
+            padding-top: 20px;
+            padding-bottom: 20px;
+        }
+        .social {
+            padding-top: 20px;
+            .social_icon {
+                width: 25px;
+                height: 25px;
+                background-position: center;
+                background-repeat: no-repeat;
+                background-size: cover;
+                margin-right: 10px;
+            }
+            .fb {
+                background-image: url("/assets/imgs/fb_icon.png");
+            }
+            .insta {
+                background-image: url("/assets/imgs/insta_icon.png");
+            }
+            .google {
+                background-image: url("/assets/imgs/g_icon.png");
+            }
+        }
+        hr {}
+    }
+}
\ No newline at end of file

src/app/footer/footer.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ FooterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/footer/footer.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.scss']
+})
+export class FooterComponent implements OnInit {
+
+  constructor(public router: Router) { }
+
+  ngOnInit() {
+  }
+
+  goToPage(path, data = null) {
+    console.log(data);
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+}

src/app/home/account/account.component.html

+<!-- MY-ACOUNT-STARTS -->
+
+<div class="account_wrapper">
+    <div class="container-fluid">
+        <div class="account_wrapper_inner relative">
+            <div class="loader_common_main_wrapper" *ngIf="loading">
+                <div class="loader"></div>
+            </div>
+            <div class="row">
+                <div class="col-md-3">
+                    <div class="profile_card">
+                        <ul class="nav">
+                            <li><a data-toggle="tab" href="#profile" class="active">Profile</a></li>
+                            <li><a data-toggle="tab" href="#pass">Change Password</a></li>
+                            <li><a data-toggle="tab" href="#wallet">Wallet</a></li>
+                        </ul>
+
+                        <div class="tab-content">
+                            <div id="profile" class="tab-pane in active">
+                                <div *ngIf="profileMsg && profileMsg!=''" [innerHTML]="profileMsg"></div>
+                                <form [formGroup]="profileForm" (ngSubmit)="profileProcess()" autocomplete="off">
+                                    <div class="profile_image_circle">
+                                        <div class="edit_btn">
+
+                                        </div>
+                                    </div>
+                                    <div class="profile_form_wrapper">
+                                        <div class="custom_row">
+                                            <p>FULL NAME</p>
+                                            <input class="" placeholder="Your name" formControlName="name">
+                                            <div class="s_error" *ngIf="!profileForm.controls['name'].valid && profileSubmit">
+                                                <div class="s_validation" *ngIf="profileForm.controls['name'].hasError('required')">
+                                                    {{vs.errorList.required}} </div>
+                                            </div>
+                                        </div>
+                                        <div class="custom_row">
+                                            <p>EMAIL ADDRESS</p>
+                                            <input class="" placeholder="Your email" type="mail" formControlName="username">
+                                            <div class="s_error" *ngIf="!profileForm.controls['username'].valid && profileForm.controls['username'].touched">
+                                                <div class="s_validation" *ngIf="profileForm.controls['username'].hasError('pattern')">
+                                                    {{vs.errorList.email}} </div>
+                                                <div class="s_validation" *ngIf="profileForm.controls['username'].hasError('maxlength')">
+                                                    {{vs.errorList.maxLength}} 50</div>
+                                            </div>
+                                            <div class="s_error" *ngIf="!profileForm.controls['username'].valid && profileSubmit">
+                                                <div class="s_validation" *ngIf="profileForm.controls['username'].hasError('required')">
+                                                    {{vs.errorList.required}} </div>
+                                            </div>
+                                        </div>
+                                        <div class="custom_row" *ngIf="loginDetails.type!='agent'">
+                                            <p>DATE OF BIRTH</p>
+                                            <input class="date_pick form-control" placeholder="Date of Birth" bsDatepicker formControlName="dob" [maxDate]="ageDate">
+                                            <div class="s_error" *ngIf="!profileForm.controls['dob'].valid && profileSubmit">
+                                                <div class="s_validation" *ngIf="profileForm.controls['dob'].hasError('required')">
+                                                    {{vs.errorList.required}} </div>
+                                            </div>
+                                        </div>
+                                        <div class="custom_row" *ngIf="loginDetails.type!='agent'">
+                                            <div class="radio_container clearfix">
+                                                <span for="22" class="radio_block">
+                                                    <input type="radio" id="22_1" class="radio_btn" value="Male" formControlName="gender">
+                                                    <label for="22_1" class="radio_css " value="Male">Male</label>
+                                                </span>
+                                                <span for="23" class="radio_block">
+                                                    <input type="radio" id="23_1" class="radio_btn" value="Female" formControlName="gender">
+                                                    <label for="23_1" class="radio_css " value="Female">Female</label>
+                                                </span>
+                                            </div>
+                                            <div class="s_error" *ngIf="!profileForm.controls['gender'].valid && profileSubmit">
+                                                <div class="s_validation" *ngIf="profileForm.controls['dob'].hasError('required')">
+                                                    {{vs.errorList.required}} </div>
+                                            </div>
+                                        </div>
+                                        <div class="custom_row">
+                                            <p>MOBILE NUMBER</p>
+                                            <input class="" placeholder="Your mobile number" type="number" formControlName="mob">
+                                            <div class="s_error" *ngIf="!profileForm.controls['mob'].valid && profileForm.controls['mob'].touched">
+                                                <div class="s_validation" *ngIf="profileForm.controls['mob'].hasError('pattern')">{{vs.errorList.phone}}
+                                                </div>
+                                            </div>
+                                            <div class="s_error" *ngIf="!profileForm.controls['mob'].valid && profileForm.controls['mob'].touched && !profileForm.controls['mob'].hasError('pattern')">
+                                                <div class="s_validation" *ngIf="profileForm.controls['mob'].hasError('maxlength')">
+                                                    {{vs.errorList.maxLength}} 15</div>
+                                                <div class="s_validation" *ngIf="profileForm.controls['mob'].hasError('minlength')">
+                                                    {{vs.errorList.minLength}} 8</div>
+                                            </div>
+                                            <div class="s_error" *ngIf="!profileForm.controls['mob'].valid && profileSubmit">
+                                                <div class="s_validation" *ngIf="profileForm.controls['mob'].hasError('required')">
+                                                    {{vs.errorList.required}} </div>
+                                            </div>
+                                        </div>
+
+                                        <div class="custom_row">
+                                            <button class="btn_primary">
+                                                UPDATE
+                                            </button>
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                            <div id="pass" class="tab-pane fade">
+                                <div *ngIf="passwordMsg && passwordMsg!=''" [innerHTML]="passwordMsg"></div>
+                                <form [formGroup]="passwordForm" (ngSubmit)="passwordProcess()" autocomplete="off">
+                                    <div class="profile_form_wrapper">
+                                        <div class="custom_row">
+                                            <h5>Change Password</h5>
+                                        </div>
+                                        <div>
+                                            <div class="custom_row">
+                                                <p>OLD PASSWORD</p>
+                                                <input class="" placeholder="Enter Old password" type="password" formControlName="password">
+                                                <div class="s_error" *ngIf="!passwordForm.controls['password'].valid && passwordSubmit">
+                                                    <div class="s_validation" *ngIf="passwordForm.controls['password'].hasError('required')">
+                                                        {{vs.errorList.required}} </div>
+                                                </div>
+                                            </div>
+                                            <div class="custom_row">
+                                                <p>NEW PASSWORD</p>
+                                                <input class="" placeholder="Enter New Password" type="password" formControlName="newpassword">
+                                                <div class="s_error" *ngIf="!passwordForm.controls['newpassword'].valid && passwordSubmit">
+                                                    <div class="s_validation" *ngIf="passwordForm.controls['newpassword'].hasError('required')">
+                                                        {{vs.errorList.required}}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="custom_row">
+                                                <p>CONFIRM NEW PASSWORD</p>
+                                                <input class="" placeholder="Confirm New Password" type="password" formControlName="cpassword">
+                                                <div class="s_error" *ngIf="!passwordForm.controls['cpassword'].valid && passwordSubmit">
+                                                    <div class="s_validation" *ngIf="passwordForm.controls.cpassword.invalid">
+                                                        {{vs.errorList.confirm}} </div>
+                                                </div>
+                                            </div>
+                                            <div class="custom_row">
+                                                <button class="btn_primary">
+                                                    SAVE PASSWORD
+                                                </button>
+                                            </div>
+
+                                        </div>
+                                    </div>
+                                </form>
+                            </div>
+                            <div id="wallet" class="tab-pane fade">
+                                <div class="profile_form_wrapper">
+                                    <div class="custom_row">
+                                        <button class="add_fund" (click)="modelOpen(wallet)">Add fund</button>
+                                    </div>
+
+                                    <div class="custom_row">
+                                        <div class="row" *ngIf="walletData">
+                                            <div class="col-2">
+                                                <p>Total Recharged</p>
+                                            </div>
+                                            <div class="col-1">
+                                                <p>:</p>
+                                            </div>
+                                            <div class="col-9">
+                                                <p><strong>&#8377;{{walletData.total}}</strong></p>
+                                            </div>
+                                        </div>
+                                        <div class="row" *ngIf="walletData">
+                                            <div class="col-2">
+                                                <p>Available Cash</p>
+                                            </div>
+                                            <div class="col-1">
+                                                <p>:</p>
+                                            </div>
+                                            <div class="col-9">
+                                                <p><strong>&#8377;{{walletData.amount}}</strong></p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-9">
+                    <div class="trips_section">
+                        <h2>MY TRIPS</h2>
+                        <div class="relative trip_scroll" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false">
+                            <div class="loader_common_main_wrapper" *ngIf="loader">
+                                <div class="loader"></div>
+                            </div>
+                            <ul *ngIf="bookDetails">
+                                <li *ngFor="let bookData of bookDetails; let i = index">
+                                    <div class="row" data-toggle="collapse" [attr.data-target]="'#viewseat' + i" (click)="getBookinfo(bookData.bookingId,i)">
+                                        <div class="col-md-2">
+                                            <p>{{bookData.operatorName}}</p>
+                                            <h6>{{bookReplace(bookData.bookingId)}}</h6>
+                                        </div>
+                                        <div class="col-md-2">
+                                            <h5>Travel Date</h5>
+                                            <h6>{{bookData.travelDate}}</h6>
+                                        </div>
+                                        <div class="col-md-3">
+                                            <h5>Departure</h5>
+                                            <h6>
+                                                {{bookData.fromStation | titlecase}} | {{check_time(bookData.busTime,'start') | dateSet}}
+                                            </h6>
+                                        </div>
+                                        <div class="col-md-3">
+                                            <h5>Arrival</h5>
+                                            <h6>
+                                                {{bookData.toStation | titlecase}} | {{check_time(bookData.busTime,'end') | dateSet}}
+                                            </h6>
+                                        </div>
+
+                                        <div class="col-md-1">
+                                            <h5>Fare</h5>
+                                            <p>{{bookData.amount}}</p>
+                                        </div>
+                                        <div class="col-md-1" fxLayout="row" fxLayoutAlign="end center">
+                                            <button class="ticket_btn">View</button>
+                                        </div>
+                                    </div>
+                                    <div class="row" class="collapse" id="viewseat{{i}}">
+                                        <div class="ticket_wrapper" *ngIf="bookData.bookinfoData">
+                                            <hr>
+                                            <div class="ticket_inner_wrapper">
+                                                <div class="ticket_inner">
+                                                    <div class="row">
+                                                        <div class="col-md-6"></div>
+                                                        <div class="col-md-6">
+                                                            <h5>{{bookReplace(bookData.bookinfoData.bookingCode)}}</h5>
+                                                        </div>
+                                                    </div>
+                                                    <div class="row">
+                                                        <div class="col-md-12" *ngIf="bookData.bookinfoData.boardingPointDetails">
+                                                            <p>BOARDING POINT</p>
+                                                            <h6>{{bookData.bookinfoData.boardingPointDetails.time}}</h6>
+                                                            <h2>{{bookData.bookinfoData.boardingPointDetails.name}}</h2>
+                                                            <h3>Chennai</h3>
+                                                            <h4>
+                                                                Shop No. 10, Platform No. 1, Omni Bus, Terminus, Landmark: Omni Bus Stand
+                                                            </h4>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="ticket_inner">
+                                                    <div class="row" *ngIf="bookData.bookinfoData.droppingPointDetails">
+                                                        <div class="col-md-12">
+                                                            <p>Arrival POINT</p>
+                                                            <h6>{{bookData.bookinfoData.droppingPointDetails.time}}</h6>
+                                                            <h2>{{bookData.bookinfoData.droppingPointDetails.name}}</h2>
+                                                            <h3>Chennai</h3>
+                                                            <h4>
+                                                                Shop No. 10, Platform No. 1, Omni Bus, Terminus, Landmark: Omni Bus Stand
+                                                            </h4>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="ticket_inner" style="background-color: #ffedd2;">
+                                                    <div class="row">
+                                                        <div class="col-md-12">
+                                                            <p>BUS DETAILS</p>
+                                                            <div class="row">
+                                                                <div class="col-md-6">
+                                                                    <h2>{{bookData.bookinfoData.travelsName}}</h2>
+                                                                    <h6>5.30 PM</h6>
+                                                                </div>
+                                                                <div class="col-md-6" fxLayout="column" fxLayoutAlign="center start">
+                                                                    <h6>36 Seats</h6>
+                                                                    <h6>{{bookData.bookinfoData.busType}}</h6>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                                <div class="ticket_inner borderNone" style="background-color: #FEDDB7;">
+                                                    <div class="row">
+                                                        <div class="col-md-12">
+                                                            <p>PASSENGER DETAILS</p>
+                                                            <div class="row" *ngFor="let passanger of bookData.bookinfoData.passengerDetails">
+                                                                <div class="col-md-12">
+                                                                    <p *ngIf="passanger"><strong>SEAT: {{passanger.seatNbr}}</strong>PASSENGER</p>
+                                                                    <p *ngIf="passanger">{{passanger.operatorPnr}}</p>
+                                                                    <h5 class="textLeft" *ngIf="passanger">{{passanger.name}}</h5>
+                                                                    <h6 *ngIf="passanger">{{passanger.age}}, {{passanger.gender}}</h6>
+                                                                </div>
+                                                            </div>
+                                                            <hr>
+                                                            <div class="textCenter">
+                                                                <a href="http://www.ticketrobo.in/admin/assets/tickets/{{bookReplace(bookData.bookinfoData.bookingCode)}}.pdf" target="_blank">
+                                                                    <button class="download_ticket">
+                                                                     <img src="../../../assets/imgs/download.png"><br>
+                                                                     Download
+                                                                   </button>
+                                                                </a>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        <p *ngIf="detailedError"><span [innerHTML]="detailedError"></span></p>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- MY-ACCOUNT-ENDS-->
+
+<!-- ADD-FUNDS-STARTS -->
+
+<ng-template #wallet data-backdrop="static" data-keyboard="false">
+    <div id="login" class="cmn_modal_wrapper">
+        <div class="cmn_modal_header" fxLayout="row" fxLayoutAlign="space-between center">
+            <button type="button" class="close" (click)="close()">&times;</button>
+            <h2>ADD FUND</h2>
+        </div>
+        <div class="cmn_modal_content relative">
+            <div class="custom_row">
+                <p>Amount</p>
+                <input type="number" class="" placeholder="&#8377; 500" type="text" [(ngModel)]="amount">
+                <div class="s_error" *ngIf="amount_error">
+                    <div class="s_validation">{{amount_error}} </div>
+                </div>
+                <div class="clear"></div>
+            </div>
+            <div class="custom_row">
+                <button class="modal_btn" (click)="addFund()">Recharge</button>
+            </div>
+        </div>
+    </div>
+</ng-template>
+
+<!-- ADD-FUNDS-ENDS -->
\ No newline at end of file

src/app/home/account/account.component.scss

+@import "../../../styles.scss";
+.account_wrapper {
+    padding-top: 110px;
+    background-image: url("../../../assets/imgs/mask_bg1.png");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    .account_wrapper_inner {
+        width: 95%;
+        margin: 0 auto;
+        padding-top: 30px;
+        padding-bottom: 30px;
+        .profile_card {
+            background-color: $bg-gray;
+            min-height: 600px;
+            border-bottom-left-radius: 10px;
+            border-bottom-right-radius: 10px;
+            -webkit-box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.1);
+            -moz-box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.1);
+            box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.1);
+            .nav {
+                border-bottom: 1px solid $cm-border-color;
+                li {
+                    float: left;
+                    padding: 15px;
+                    a {
+                        font-size: 15px;
+                        color: $dark-color;
+                    }
+                    .active {
+                        color: $primary-color;
+                    }
+                }
+            }
+            .tab-content {
+                border-radius: 15px;
+                padding: 30px;
+            }
+            .profile_image_circle {
+                width: 150px;
+                height: 150px;
+                background-color: #a8a8a8;
+                border-radius: 50%;
+                margin: 0 auto;
+                position: relative;
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                    object-position: center;
+                    border-radius: 50%;
+                }
+                .edit_btn {
+                    width: 30px;
+                    height: 30px;
+                    border-radius: 50%;
+                    background-image: url("../../../assets/imgs/icon_sprite.png");
+                    background-repeat: no-repeat;
+                    position: absolute;
+                    bottom: 15px;
+                    right: 5px;
+                    cursor: pointer;
+                    background-position: top -61px left -185px;
+                    background-size: 357px;
+                }
+            }
+            .profile_form_wrapper {
+                width: 100%;
+                .custom_row {
+                    width: 100%;
+                    padding-bottom: 20px;
+                    .add_fund {
+                        background-color: $primary-color;
+                        color: $white-color;
+                        border: none;
+                        height: 35px;
+                        padding-left: 15px;
+                        padding-right: 15px;
+                        cursor: pointer;
+                    }
+                    p {
+                        margin: 0px;
+                        padding: 0px;
+                        color: $text-dark;
+                        font-weight: 400;
+                        padding-bottom: 10px;
+                    }
+                    input {
+                        width: 100%;
+                        height: 50px;
+                        background-color: #e9e9e9;
+                        border: none;
+                        padding-left: 10px;
+                        border-radius: 9px;
+                        &:focus {
+                            outline: none;
+                        }
+                    }
+                    .btn_primary {
+                        width: 100%;
+                        height: 50px;
+                        background-color: $primary-color;
+                        color: $white-color;
+                        border-radius: 9px;
+                        text-align: center;
+                        font-size: 16px;
+                        border: none;
+                        cursor: pointer;
+                        &:focus {
+                            outline: none;
+                        }
+                    }
+                    h5 {
+                        color: $primary-color;
+                        margin: 0px;
+                        padding: 0px;
+                        font-size: 14px;
+                    }
+                    .radio_container {
+                        padding-top: 10px;
+                        padding-bottom: 10px;
+                        .radio_block>label {
+                            text-align: left;
+                        }
+                        input[type=radio] {
+                            width: 22px;
+                            height: 17px;
+                            vertical-align: middle;
+                            float: left;
+                        }
+                        label.radio_css {
+                            padding: 0 .45em;
+                            margin: 0 20px 0 0;
+                            float: left;
+                            font-size: 14px;
+                        }
+                    }
+                }
+            }
+        }
+        .trips_section {
+            width: 100%;
+            background-color: #fff;
+            border-bottom-left-radius: 10px;
+            border-bottom-right-radius: 10px;
+            padding: 15px;
+            -webkit-box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.1);
+            -moz-box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.1);
+            box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.1);
+            .trip_scroll {
+                width: 100%;
+                height: calc(100vh - 215px);
+                overflow-y: scroll;
+                &::-webkit-scrollbar {
+                    display: none;
+                }
+            }
+            h2 {
+                margin: 0px;
+                padding: 0px;
+                font-weight: 700;
+                color: $dark-color;
+                font-size: 35px;
+                padding-bottom: 30px;
+            }
+            ul {
+                margin: 0px;
+                padding: 0px;
+                li {
+                    border: 1px solid $cm-border-color;
+                    padding: 10px;
+                    list-style: none;
+                    margin-bottom: 20px;
+                    p {
+                        margin: 0px;
+                        padding: 0px;
+                        color: $dark-color;
+                        font-size: 13px;
+                        font-weight: 600;
+                    }
+                    h6 {
+                        margin: 0px;
+                        padding: 0px;
+                        color: $dark-color;
+                        font-weight: 400;
+                        font-size: 13px;
+                    }
+                    h5 {
+                        margin: 0px;
+                        padding: 0px;
+                        color: #727272;
+                        font-weight: 400;
+                        font-size: 13px;
+                        line-height: 24px;
+                        font-weight: 600;
+                        text-transform: uppercase;
+                    }
+                    .ticket_btn {
+                        background-color: $primary-color;
+                        color: $white-color;
+                        height: 36px;
+                        padding-left: 10px;
+                        padding-right: 10px;
+                        border: none;
+                        cursor: pointer;
+                    }
+                    .ticket_wrapper {
+                        width: 100%;
+                        margin-bottom: 30px;
+                        .ticket_inner_wrapper {
+                            -webkit-box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.3);
+                            -moz-box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.3);
+                            box-shadow: 0px 5px 5px 1px rgba(0, 0, 0, 0.3);
+                            width: 320px;
+                            margin: 0 auto;
+                            .ticket_inner {
+                                padding: 20px;
+                                border-bottom: 2px dashed $brown-theme;
+                                background-color: $bg-gray;
+                                .ticket_curve {
+                                    width: 40px;
+                                    height: 30px;
+                                    border-bottom-left-radius: 50%;
+                                    border-bottom-right-radius: 50%;
+                                    background-color: #fff;
+                                    margin: 0 auto;
+                                    position: relative;
+                                    bottom: 20px;
+                                }
+                                h5 {
+                                    margin: 0px;
+                                    padding: 0px;
+                                    text-align: right;
+                                    font-size: 13px;
+                                    color: $brown-theme;
+                                    font-weight: 500;
+                                }
+                                p {
+                                    font-size: 13px;
+                                    color: $brown-theme;
+                                    margin: 0px;
+                                    padding: 0px;
+                                    strong {
+                                        color: #ff8a00;
+                                        padding-right: 10px;
+                                    }
+                                }
+                                h6 {
+                                    font-size: 12px;
+                                    color: $black-color;
+                                    margin: 0px;
+                                    padding: 0px;
+                                }
+                                h2 {
+                                    font-size: 15px;
+                                    color: #000;
+                                    margin: 0px;
+                                    padding: 0px;
+                                    text-transform: uppercase;
+                                    line-height: 20px;
+                                    padding-top: 8px;
+                                    padding-bottom: 0px;
+                                }
+                                h3 {
+                                    font-size: 15px;
+                                    color: #727272;
+                                    line-height: 20px;
+                                    margin: 0px;
+                                    padding: 0px;
+                                    padding-bottom: 8px;
+                                }
+                                h4 {
+                                    font-size: 12px;
+                                    color: #727272;
+                                    margin: 0px;
+                                    padding: 0px;
+                                    line-height: 20px;
+                                }
+                                .download_ticket {
+                                    text-align: center;
+                                    color: $brown-theme;
+                                    border: none;
+                                    cursor: pointer;
+                                    background-color: transparent;
+                                    &:focus {
+                                        outline: none;
+                                    }
+                                    img {
+                                        width: 20px;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+/* MODAL-CUSTOM-CSS */
+
+.log_modal {
+    .modal-dialog {
+        .modal-content {
+            background-image: url("/assets/imgs/login_head.png");
+            background-color: #fff !important;
+            border: none;
+            background-color: #f2f3f4;
+            background-position: top center;
+            background-repeat: no-repeat;
+            border-radius: 8px;
+            position: relative;
+            top: 100px !important;
+            .close {
+                position: absolute;
+                top: 10px;
+                right: 15px;
+                &:focus {
+                    outline: none;
+                }
+            }
+            .log_modal_inner {
+                width: 80%;
+                margin: 0 auto;
+                padding-top: 45px;
+                .social_log {
+                    position: absolute;
+                    right: 15px;
+                    top: 45px;
+                    img {
+                        width: 35px;
+                        cursor: pointer;
+                    }
+                }
+                h4 {
+                    margin: 0px;
+                    color: #ffffff;
+                    font-size: 45px;
+                }
+                h3 {
+                    margin: 0px;
+                    color: #ffffff;
+                    font-size: 30px;
+                }
+                p {
+                    margin: 0px;
+                    color: #ffffff;
+                    font-size: 16px;
+                    padding-top: 20px;
+                    font-weight: 400;
+                    padding-bottom: 30px;
+                }
+                .log_modal_content {
+                    background: #fff;
+                    border-radius: 8px;
+                    -webkit-box-shadow: 0px 0px 32px -3px rgba(0, 0, 0, 0.75);
+                    -moz-box-shadow: 0px 0px 32px -3px rgba(0, 0, 0, 0.75);
+                    box-shadow: 0px 0px 32px -3px rgba(0, 0, 0, 0.75);
+                    .log_modal_content_inner {
+                        padding: 15px;
+                        .log_row {
+                            padding-bottom: 20px;
+                            select {
+                                width: 100%;
+                                height: 40px;
+                                border: none;
+                                border-bottom: 2px solid #f1f1f1;
+                                background: transparent;
+                                color: #020101;
+                                font-weight: 600;
+                                font-size: 20px;
+                                padding-bottom: 5px;
+                                &:focus {
+                                    outline: none;
+                                }
+                                &::placeholder {
+                                    color: #2d2d2d;
+                                }
+                            }
+                            .log_number {
+                                background-image: url("/assets/imgs/mobile.png");
+                                background-repeat: no-repeat;
+                                background-position: left;
+                                background-size: 30px;
+                            }
+                            .log_user {
+                                background-image: url("/assets/imgs/user.png");
+                                background-repeat: no-repeat;
+                                background-position: left;
+                                background-size: 30px;
+                            }
+                            .log_mail {
+                                background-image: url("/assets/imgs/mail.png");
+                                background-repeat: no-repeat;
+                                background-position: left;
+                                background-size: 30px;
+                            }
+                            .log_password {
+                                background-image: url("/assets/imgs/password.png");
+                                background-repeat: no-repeat;
+                                background-position: left;
+                                background-size: 30px;
+                            }
+                            .log_label {
+                                width: calc(100% - 45px);
+                                float: left;
+                                padding-left: 50px;
+                                p {
+                                    color: #ababad;
+                                    margin: 0px;
+                                    padding: 0px;
+                                }
+                                input {
+                                    width: 100%;
+                                    height: 40px;
+                                    border: none;
+                                    border-bottom: 2px solid #f1f1f1;
+                                    background: transparent;
+                                    color: #020101;
+                                    font-weight: 600;
+                                    font-size: 20px;
+                                    padding-bottom: 5px;
+                                    &:focus {
+                                        outline: none;
+                                    }
+                                    &::placeholder {
+                                        color: #2d2d2d;
+                                    }
+                                }
+                            }
+                            .log_label1 {
+                                width: 100%;
+                                float: left;
+                                p {
+                                    color: #ababad;
+                                    margin: 0px;
+                                    padding: 0px;
+                                }
+                                input {
+                                    width: 100%;
+                                    height: 40px;
+                                    border: none;
+                                    border-bottom: 2px solid #f1f1f1;
+                                    background: transparent;
+                                    color: #020101;
+                                    font-weight: 600;
+                                    font-size: 20px;
+                                    padding-bottom: 5px;
+                                    &:focus {
+                                        outline: none;
+                                    }
+                                    &::placeholder {
+                                        color: #2d2d2d;
+                                    }
+                                }
+                            }
+                            .log_check {
+                                width: 45px;
+                                height: 45px;
+                                float: left;
+                                background-image: url("/assets/imgs/uncheck.png");
+                                background-repeat: no-repeat;
+                                background-position: center;
+                                position: relative;
+                                top: 10px;
+                            }
+                            .styled-checkbox {
+                                position: absolute; // take it out of document flow
+                                opacity: 0; // hide it
+                                &+label {
+                                    position: relative;
+                                    cursor: pointer;
+                                    padding: 0;
+                                    padding-left: 7px;
+                                    font-size: 16px;
+                                    p {
+                                        margin: 0px;
+                                        padding: 0px;
+                                        color: #353535;
+                                        position: absolute;
+                                        width: 250px;
+                                        top: 0px;
+                                        left: 50px;
+                                        font-size: 17px;
+                                    }
+                                }
+                                // Box.
+                                &+label:before {
+                                    content: '';
+                                    margin-right: 10px;
+                                    display: inline-block;
+                                    vertical-align: text-top;
+                                    width: 25px;
+                                    height: 25px;
+                                    background: white;
+                                    border: 1px solid #acacac;
+                                    border-radius: 4px;
+                                }
+                                // Box hover
+                                &:hover+label:before {
+                                    background: transparent;
+                                }
+                                // Box focus
+                                &:focus+label:before {
+                                    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
+                                }
+                                // Box checked
+                                &:checked+label:before {
+                                    background: #f79a2a;
+                                }
+                                // Disabled state label.
+                                &:disabled+label {
+                                    color: #b8b8b8;
+                                    cursor: auto;
+                                }
+                                // Disabled box.
+                                &:disabled+label:before {
+                                    box-shadow: none;
+                                    background: #ddd;
+                                }
+                                // Checkmark. Could be replaced with an image
+                                &:checked+label:after {
+                                    content: '';
+                                    position: absolute;
+                                    left: 14px;
+                                    top: 12px;
+                                    background: white;
+                                    width: 2px;
+                                    color: #2d2d2d;
+                                    height: 2px;
+                                    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
+                                    transform: rotate(45deg);
+                                    border: none;
+                                }
+                            }
+                            .log_btn {
+                                height: 40px;
+                                border-radius: 20px;
+                                color: #fff;
+                                position: absolute;
+                                right: 15px;
+                                top: 15px;
+                                background: #f7941d;
+                                margin: 0 auto;
+                                font-weight: 500;
+                                font-size: 16px;
+                                padding-left: 35px;
+                                padding-right: 35px;
+                                text-transform: capitalize;
+                                &:focus {
+                                    outline: none;
+                                }
+                            }
+                            .log_btn1 {
+                                height: 40px;
+                                border-radius: 20px;
+                                color: #fff;
+                                background: #f7941d;
+                                margin: 0 auto;
+                                font-weight: 500;
+                                font-size: 16px;
+                                padding-left: 35px;
+                                padding-right: 35px;
+                                text-transform: capitalize;
+                                &:focus {
+                                    outline: none;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            .modal-footer {
+                border: none;
+                .log_modal_footer {
+                    width: 85%;
+                    margin: 0 auto;
+                    padding-top: 35px;
+                    padding-bottom: 20px;
+                    .signup_btn {
+                        text-align: right;
+                        position: relative;
+                        right: 65px;
+                    }
+                }
+                p {
+                    color: #f7941d;
+                    font-size: 16px;
+                    font-weight: 400;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/home/account/account.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AccountComponent } from './account.component';
+
+describe('AccountComponent', () => {
+  let component: AccountComponent;
+  let fixture: ComponentFixture<AccountComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AccountComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/account/account.component.ts

+import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { WebService } from './../../provider/web.service';
+import { FormGroup, FormBuilder, Validators, ValidationErrors } from '@angular/forms';
+import { ValidationService } from './../../provider/validation.service';
+import { SubjectService } from './../../provider/subject.service';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
+
+declare var Razorpay: any;
+@Component({
+  selector: 'app-account',
+  templateUrl: './account.component.html',
+  styleUrls: ['./account.component.scss']
+})
+export class AccountComponent implements OnInit {
+
+  bookDetails: any[];
+  loginDetails: any;
+  funcName: any;
+  loading: boolean;
+  profileSubmit: boolean;
+  passwordSubmit: boolean;
+  private current_page = 0;
+  public profileForm: FormGroup;
+  public passwordForm: FormGroup;
+  mobnumPattern = '^((\\+?)|0)?[0-9]{0,20}$';
+  emailPattern = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';
+  profileMsg: any;
+  passwordMsg: any;
+  ageDate: any;
+  bookinfoData: any;
+  loader: boolean;
+  modalRef: BsModalRef;
+  amount_error: any;
+  amount: any;
+  walletData: any;
+  detailedError: any;
+  @ViewChild('wallet') private login: TemplateRef<HTMLElement>;
+
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private service: WebService,
+    private formBuilder: FormBuilder,
+    public vs: ValidationService,
+    public subjectService: SubjectService,
+    private bsmodalservice: BsModalService,
+    ) {
+      this.loading = false;
+      this.profileSubmit = false;
+      this.bookDetails = [];
+      this.ageDate = new Date();
+      this.ageDate.setFullYear( this.ageDate.getFullYear() - 12 );
+      console.log(this.ageDate);
+      this.loader = false;
+    }
+
+  ngOnInit() {
+    this.loginDetails = JSON.parse(this.service.getLocalStorageItem('userData'));
+    const mydate = new Date(this.loginDetails.dob);
+    this.bookingDetails();
+    this.walletAmount();
+    if (this.loginDetails.type !== 'agent') {
+      this.profileForm = this.formBuilder.group({
+        'name': [this.loginDetails.name, Validators.compose([Validators.required])],
+        'dob': [mydate, Validators.compose([Validators.required])],
+        'gender': [this.loginDetails.gender, Validators.compose([Validators.required])],
+        // tslint:disable-next-line:max-line-length
+        'mob': [this.loginDetails.mob, Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(15), Validators.pattern(this.mobnumPattern)])],
+        // tslint:disable-next-line:max-line-length
+        'username': [this.loginDetails.username, Validators.compose([Validators.required, Validators.maxLength(50), Validators.pattern(this.emailPattern)])]
+      });
+   } else {
+    this.profileForm = this.formBuilder.group({
+      'name': [this.loginDetails.name, Validators.compose([Validators.required])],
+      // tslint:disable-next-line:max-line-length
+      'mob': [this.loginDetails.phone, Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(15), Validators.pattern(this.mobnumPattern)])],
+      // tslint:disable-next-line:max-line-length
+      'username': [this.loginDetails.email_id, Validators.compose([Validators.required, Validators.maxLength(50), Validators.pattern(this.emailPattern)])]
+    });
+   }
+    this.passwordForm = this.formBuilder.group({
+      'password': ['', Validators.compose([Validators.required, Validators.minLength(6)])],
+      'newpassword': ['', Validators.compose([Validators.required, Validators.minLength(6)])],
+      'cpassword': ['', Validators.compose([Validators.required]), this.MatchPassword.bind(this)]
+    });
+  }
+
+
+   goToPage(path, data = null) {
+    console.log(data);
+    this.router.navigateByUrl(path, {queryParams: data} );
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  bookingDetails() {
+    const sendData = {'userId': this.loginDetails.id, 'page': this.current_page, 'type': this.loginDetails.type };
+    this.funcName = 'bookDetails';
+      this.loading = true;
+      this.service.post_data(this.funcName, sendData).subscribe(response => {
+        this.loading = false;
+        if ( response.status === 'success' && response.data.length > 0) {
+          this.bookDetails = this.bookDetails.concat(response.data);
+          ++this.current_page;
+        } else {
+          this.bookDetails = this.bookDetails.length > 0 ? this.bookDetails : [];
+        }
+      }, (error) => {
+
+      });
+  }
+
+  check_time(time: string, type: string) {
+    const timeArray = time.split(' - ');
+    if (type === 'start') {
+      return timeArray[0];
+    } else {
+      return timeArray[1];
+    }
+  }
+
+  onScroll() {
+    console.log('scrolled down!!');
+    this.bookingDetails();
+  }
+
+  profileProcess() {
+    this.profileSubmit = true;
+    if (this.profileForm.valid) {
+      const pass_data = this.profileForm.value;
+      const This = this;
+      let postData: any;
+      if (this.loginDetails.type !== 'agent') {
+        const dob = this.formatDate(pass_data.dob);
+         postData = {
+          'name': pass_data.name,
+          'gender': pass_data.gender,
+          'dob': dob,
+          'username': pass_data.username,
+          'mob': pass_data.mob,
+          'userId': this.loginDetails.id
+        };
+
+        this.funcName = 'profile_update';
+      } else {
+        postData = {
+          'name': pass_data.name,
+          'email_id': pass_data.username,
+          'phone': pass_data.mob,
+          'userId': this.loginDetails.id
+        };
+
+        this.funcName = 'agent_update';
+      }
+
+
+
+      this.loading = true;
+      this.service.post_data(this.funcName, postData).subscribe(response => {
+        this.loading = false;
+        if ( response.status === 'success') {
+          this.profileMsg = '<small class="text-info">' + response.message + '</smal>';
+          if (this.loginDetails.type !== 'agent') {
+            response.data.type = 'user';
+          } else {
+            response.data.type = 'agent';
+          }
+          this.service.setLocalStorageItem('userData', JSON.stringify(response.data));
+          this.subjectService.sendLoginData('logged_in');
+        } else {
+          this.profileMsg = '<small class="text-danger">' + response.message + '</smal>';
+        }
+        setTimeout(function() {
+          This.profileMsg = '';
+        }, 3000);
+      }, (error) => {
+        this.profileMsg = '<small class="text-danger"> Something went wrong. Feel free to contact us .</smal>';
+      });
+    }
+  }
+
+  formatDate(date) {
+    const d = new Date(date);
+    let month = '' + (d.getMonth() + 1);
+    let day = '' + d.getDate();
+    const year = d.getFullYear();
+
+    if (month.length < 2) {
+      month = '0' + month;
+    }
+    if (day.length < 2) {
+      day = '0' + day;
+    }
+    return [year, month, day].join('-');
+  }
+
+  MatchPassword(val: any) {
+    return new Promise(resolve => {
+      if (val.value === this.passwordForm.value.newpassword) {
+        resolve(null);
+      } else {
+        resolve({ 'match': false });
+      }
+    });
+  }
+
+  passwordProcess() {
+    this.passwordSubmit = true;
+    if (this.passwordForm.valid) {
+      const password_data = this.passwordForm.value;
+      const This = this;
+
+      const postData = {
+        'password': password_data.password,
+        'newpassword': password_data.newpassword,
+        'userId': this.loginDetails.id,
+        'type': this.loginDetails.type
+      };
+
+      this.funcName = 'password_update';
+
+
+      this.loading = true;
+      this.service.post_data(this.funcName, postData).subscribe(response => {
+        this.loading = false;
+        if ( response.status === 'success') {
+          this.passwordMsg = '<small class="text-info">' + response.message + '</smal>';
+          this.service.setLocalStorageItem('userData', JSON.stringify(response.data));
+        } else {
+          this.passwordMsg = '<small class="text-danger">' + response.message + '</smal>';
+        }
+        setTimeout(function() {
+          This.passwordMsg = '';
+        }, 3000);
+      }, (error) => {
+        this.passwordMsg = '<small class="text-danger"> Something went wrong. Feel free to contact us .</smal>';
+      });
+    } else {
+      this.getErrors(this.passwordForm);
+    }
+  }
+
+  getErrors(FormAttr) {
+    Object.keys(FormAttr.controls).forEach(key => {
+      console.log(key);
+      const controlErrors: ValidationErrors = FormAttr.get(key).errors;
+      if (controlErrors != null) {
+          Object.keys(controlErrors).forEach(keyError => {
+            console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
+          });
+        }
+    });
+  }
+
+  getBookinfo(id: string, index: number) {
+    this.loader = true;
+    const url = 'bookingdetails?username=javatest&password=123456&bookingCode=' + id;
+    console.log(url);
+    this.service.online_service(url).subscribe(response => {
+      this.loader = false;
+       console.log(response);
+       if (response.code === '1') {
+         this.detailedError = undefined;
+        this.bookDetails[index].bookinfoData = response;
+        if (this.bookDetails[index].bookinfoData.passengerDetails instanceof Array !== true) {
+          this.bookDetails[index].bookinfoData.passengerDetails = new Array(this.bookDetails[index].bookinfoData.passengerDetails);
+        }
+       } else {
+        this.detailedError = '<small class="text-danger">' + response.errorDesc + '</small>';
+       }
+    }, (error) => {
+      console.log(error);
+    });
+  }
+
+  modelOpen(template: TemplateRef<any>) {
+    console.log('called');
+    this.modalRef = this.bsmodalservice.show(template, {backdrop: 'static'});
+  }
+
+  close() {
+    this.modalRef.hide();
+  }
+
+  addFund() {
+    const This = this;
+    console.log(this.amount);
+    if (this.amount !== undefined) {
+      if (!isNaN(parseInt(this.amount, 10))) {
+        this.amount_error = undefined;
+        console.log(this.amount);
+        this.close();
+        const options = {
+          'key': 'rzp_live_KBTt75APHMzR4I',
+          'amount': this.amount * 100, // 2000 paise = INR 20 this.amount
+          'name': this.loginDetails.name,
+          'description': 'Ticket Robo Add fund:',
+          'image': './../../../assets/imgs/logo.png',
+          'handler': function (response) {
+              console.log(response);
+              This.payment_success(response.razorpay_payment_id);
+          },
+          'prefill': {
+              'name': this.loginDetails.name,
+              'email': this.loginDetails.username
+          },
+          'notes': {
+              'address': 'Ticket Robo'
+          },
+          'theme': {
+              'color': '#F37254'
+          }
+        };
+        const rzp1 = new Razorpay(options);
+        rzp1.open();
+
+
+      } else {
+        this.amount_error = 'Input valid amount';
+      }
+    } else {
+      this.amount_error = 'Amount required';
+    }
+    console.log(this.amount);
+  }
+
+  payment_success(pay_id: string) {
+    this.loading = true;
+    const postData = {'userId': this.loginDetails.id, 'amount': this.amount, 'token': pay_id};
+    this.funcName = 'addFund';
+      this.service.post_data(this.funcName, postData).subscribe(responseData => {
+        this.loading = false;
+        if ( responseData.status === 'success') {
+          this.walletAmount();
+        } else {
+          console.log('failed');
+        }
+      }, (error) => {
+        this.loading = false;
+      });
+  }
+
+  walletAmount() {
+    this.loading = true;
+    const postData = {'userId': this.loginDetails.id};
+    this.funcName = 'walletAmount';
+      this.service.post_data(this.funcName, postData).subscribe(responseData => {
+        this.loading = false;
+        if ( responseData.status === 'success') {
+          this.walletData = responseData.data;
+        } else {
+          console.log('failed');
+        }
+      }, (error) => {
+        this.loading = false;
+      });
+  }
+
+  bookReplace(bookID: any) {
+    const str = bookID;
+    return str.replace(/^.{2}/g, 'TR');
+  }
+
+}

src/app/home/booking/booking.component.html

+<!-- SEARCH-WRAPPER-STARTS -->
+
+<div class="search_wrapper" *ngIf="bookData">
+
+    <!-- SEARCH-TASK-BAR-STARTS -->
+
+    <div class="search_wrapper_inner">
+        <div class="container-fluid">
+            <div class="search_inner_container" *ngIf="bookData.basic">
+                <div class="row" fxLayout="row" fxLayoutAlign="space-between center">
+                    <div fxLayout="column" fxLayoutAlign="start end">
+                        <div>
+                            <p>Travels Name</p>
+                            <h4 class="borderNone textLeft">{{bookData.travels}}</h4>
+                        </div>
+                    </div>
+                    <div>
+                        <p class="">Date of Journey</p>
+                        <h4 class="borderNone" fxLayout="row" fxLayoutAlign="center center">
+                            {{bookData.travelDate | date: 'dd MMMM yyyy'}}
+
+                        </h4>
+                    </div>
+                    <div>
+                        <div fxLayout="row" fxLayoutAlign="start end" fxLayoutGap="40px">
+                            <div>
+                                <p>From</p>
+                                <h4 class="textLeft">
+                                    {{bookData.basic.from | titlecase }} ({{bookData.basic.start_time | dateSet}})
+
+                                </h4>
+                            </div>
+                            <div (click)="switch_loc()" fxLayout="column" fxLayoutAlign="end center">
+                                <h4 class="borderNone arrow">
+                                    ===
+                                </h4>
+                            </div>
+                            <div>
+                                <p>To</p>
+                                <h4 class="textLeft">
+                                    {{bookData.basic.to | titlecase }} ({{bookData.basic.arrival | dateSet}})
+                                </h4>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- SEARCH-TASK-BAR-ENDS -->
+
+    <!-- PASSENGER-DETAILS-WRAPPER-STARTS -->
+
+    <div class="passenger_detail_wrapper relative" *ngIf="bookData">
+        <div class="loader_common_main_wrapper" *ngIf="bookLoad">
+            <div class="loader"></div>
+        </div>
+        <form [formGroup]="passengerForm" novalidate (ngSubmit)="booking(passengerForm, payment)">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-8">
+                        <div class="add_passenger_detail">
+                            <h5>ADD PASSENGER DETAILS</h5>
+                            <ul formArrayName="passenger">
+                                <li *ngFor="let address of passengerForm.controls.passenger.controls; let i=index" [formGroupName]="i">
+                                    <div class="row">
+                                        <div class="col-md-2">
+                                            <p>Seat <strong>S1</strong></p>
+                                        </div>
+                                        <div class="col-md-4">
+                                            <input class="input_detail" formControlName="name" placeholder="Enter passenger name" type="text">
+                                            <div class="s_error" *ngIf="!passengerForm.controls.passenger.controls[i].controls.name.valid && bookSubmit">
+                                                <div class="s_validation" *ngIf="passengerForm.controls.passenger.controls[i].controls.name.hasError('required')">
+                                                    Enter name </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-2">
+                                            <input class="input_detail" formControlName="age" placeholder="Age" type="number">
+                                            <div class="s_error" *ngIf="!passengerForm.controls.passenger.controls[i].controls.age.valid && passengerForm.controls.passenger.controls[i].controls.age.touched">
+                                                <div class="s_validation" *ngIf="passengerForm.controls.passenger.controls[i].controls.age.errors?.min">
+                                                    {{vs.errorList.min}} 3</div>
+                                                <div class="s_validation" *ngIf="passengerForm.controls.passenger.controls[i].controls.age.errors?.max">
+                                                    {{vs.errorList.max}} 60</div>
+                                            </div>
+                                            <div class="s_error" *ngIf="!passengerForm.controls.passenger.controls[i].controls.age.valid && bookSubmit">
+                                                <div class="s_validation" *ngIf="passengerForm.controls.passenger.controls[i].controls.age.hasError('required')">
+                                                    Enter age</div>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-4">
+                                            <div fxLayout="row" fxLayoutAlign="start center">
+                                                <div fxLayout="column" fxLayoutAlign="center start">
+                                                    <div>
+                                                        <span for="22" class="radio_block" *ngIf="getGender_state(i,'F')">
+                                                          <input type="radio" id="22_1" class="" value="Male"
+                                                            formControlName="gender">
+                                                          <label for="22_1" class="radio" value="Male">Male</label>
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                                <div fxLayout="column" fxLayoutAlign="center start">
+                                                    <div>
+                                                        <span for="23" class="radio_block" *ngIf="getGender_state(i,'M')">
+                                                          <input type="radio" id="23_1" class="" value="Female"
+                                                            formControlName="gender">
+                                                          <label for="23_1" class="radio" value="Female">Female</label>
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="add_passenger_detail">
+                            <h5>ADD CONTACT DETAILS</h5>
+                            <ul>
+                                <li>
+                                    <div class="row">
+                                        <div class="col-md-5">
+                                            <input class="input_detail" placeholder="Enter available contact number" type="text" formControlName="phone">
+                                            <div class="s_error" *ngIf="!passengerForm.controls['phone'].valid && passengerForm.controls['phone'].touched">
+                                                <div class="s_validation" *ngIf="passengerForm.controls['phone'].hasError('pattern')">
+                                                    {{vs.errorList.phone}}</div>
+                                            </div>
+                                            <div class="s_error" *ngIf="!passengerForm.controls['phone'].valid &&passengerForm.controls['phone'].touched && !passengerForm.controls['phone'].hasError('pattern')">
+                                                <div class="s_validation" *ngIf="passengerForm.controls['phone'].hasError('maxlength')">
+                                                    {{vs.errorList.maxLength}} 15</div>
+                                                <div class="s_validation" *ngIf="passengerForm.controls['phone'].hasError('minlength')">
+                                                    {{vs.errorList.minLength}} 10</div>
+                                            </div>
+                                            <div class="s_error" *ngIf="!passengerForm.controls['phone'].valid && bookSubmit">
+                                                <div class="s_validation" *ngIf="passengerForm.controls['phone'].hasError('required')"> Enter phonenumber </div>
+                                            </div>
+                                        </div>
+                                        <div class="col-md-5">
+                                            <input class="input_detail" placeholder="Enter passenger email" type="mail" formControlName="email">
+                                            <div class="s_error" *ngIf="!passengerForm.controls.email.valid && passengerForm.controls.email.touched">
+                                                <div class="s_validation" *ngIf="passengerForm.controls.email.hasError('pattern')">
+                                                    {{vs.errorList.email}} </div>
+                                                <div class="s_validation" *ngIf="passengerForm.controls.email.hasError('maxlength')">
+                                                    {{vs.errorList.maxLength}} 50</div>
+                                            </div>
+                                            <div class="s_error" *ngIf="!passengerForm.controls.email.valid && bookSubmit">
+                                                <div class="s_validation" *ngIf="passengerForm.controls.email.hasError('required')">Enter email
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <div class="ticket_details">
+                            <div class="ticket_legend">
+                                <div class="">
+                                    <p>Boarding Point</p>
+                                    <div class="choose_place">
+                                        {{bookData.basic.board}},
+                                        <strong>{{bookData.basic.from}}</strong> {{bookData.basic.start_time}}
+                                    </div>
+
+                                    <div>
+                                        <p>Droping Point</p>
+                                        <div class="choose_place">
+                                            {{bookData.basic.drop}},
+                                            <strong>{{bookData.basic.to}}</strong> {{bookData.basic.arrival}}
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <h5>Seat number</h5>
+                                        </div>
+                                        <div class="col-1">
+                                            <h5>:</h5>
+                                        </div>
+                                        <div class="col">
+                                            <h5>
+                                                <strong>fsf</strong>
+                                            </h5>
+                                        </div>
+                                    </div>
+                                    <div *ngIf="bookFare">
+                                        <div class="row">
+                                            <div class="col">
+                                                <h5>Total Fare</h5>
+                                            </div>
+                                            <div class="col-1">
+                                                <h5>:</h5>
+                                            </div>
+                                            <div class="col">
+                                                <h5><strong> &#8377; {{bookFare.sum}}</strong></h5>
+                                            </div>
+                                        </div>
+                                        <div class="row">
+                                            <div class="col">
+                                                <h5>Service Charge</h5>
+                                            </div>
+                                            <div class="col-1">
+                                                <h5>:</h5>
+                                            </div>
+                                            <div class="col">
+                                                <h5><strong>&#8377; {{bookFare.ServiceCharge}}</strong></h5>
+                                            </div>
+                                        </div>
+                                        <div class="row">
+                                            <div class="col">
+                                                <h5>Service Tax</h5>
+                                            </div>
+                                            <div class="col-1">
+                                                <h5>:</h5>
+                                            </div>
+                                            <div class="col">
+                                                <h5><strong>&#8377; {{bookFare.ServiceTax}}</strong></h5>
+                                            </div>
+                                        </div>
+
+
+                                        <div class="row" *ngIf="bookFare.discount > 0">
+                                            <div class="col">
+                                                <h5>Discount</h5>
+                                            </div>
+                                            <div class="col-1">
+                                                <h5>:</h5>
+                                            </div>
+                                            <div class="col">
+                                                <h5>(-) &#8377; {{bookFare.discount}}</h5>
+                                            </div>
+                                        </div>
+                                        <div class="row" *ngIf="bookFare.gst > 0">
+                                            <div class="col">
+                                                <h5>GSTIN ({{gstResponse}}%)</h5>
+                                            </div>
+                                            <div class="col-1">
+                                                <h5>:</h5>
+                                            </div>
+                                            <div class="col">
+                                                <h5> &#8377; {{bookFare.gst}}</h5>
+                                            </div>
+                                        </div>
+                                        <hr>
+                                        <div class="row">
+                                            <div class="col">
+                                                <h5>Total Amount</h5>
+                                            </div>
+                                            <div class="col-1">
+                                                <h5>:</h5>
+                                            </div>
+                                            <div class="col">
+                                                <h5><strong class="red">&#8377; {{bookFare.total}}</strong></h5>
+                                            </div>
+                                        </div>
+                                        <br>
+                                    </div>
+                                    <p *ngIf="booked_error" [innerHTML]="booked_error"></p>
+                                    <button class="proceed">
+                                        Proceed to Payment
+                                    </button>
+                                    <br>
+                                    <br>
+                                    <p class="textCenter">Base Fare: 360, Base Tax: 30</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </form>
+
+    </div>
+
+    <!-- PASSENGER-DETAILS-WRAPPER-ENDS -->
+
+</div>
+
+<!-- MAIN-WRAPPER-ENDS -->
+
+
+<!-- PAYMENT-MODAL-STARTS -->
+
+
+<ng-template #payment data-backdrop="static" data-keyboard="false">
+    <div id="payment" class="cmn_modal_wrapper">
+        <div class="cmn_modal_header" fxLayout="row" fxLayoutAlign="space-between center">
+            <button type="button" class="close" (click)="close()">&times;</button>
+            <h2>Payment Details</h2>
+        </div>
+        <div class="cmn_modal_content relative">
+            <div *ngIf="bookFare">
+                <div class="custom_row row">
+                    <div class="col-md-12">
+                        <p>Amount to be Payable</p>
+                    </div>
+                </div>
+
+                <div class="custom_row row">
+                    <div class="col-md-5">
+                        <h4>Ticket Fare</h4>
+                    </div>
+                    <div class="col-md-1">
+                        <h4>:</h4>
+                    </div>
+                    <div class="col-md-6">
+                        <h4><strong>&#8377; {{bookFare.sum}}</strong></h4>
+                    </div>
+                </div>
+                <div class="custom_row row">
+                    <div class="col-md-5">
+                        <h4>Service Charge</h4>
+                    </div>
+                    <div class="col-md-1">
+                        <h4>:</h4>
+                    </div>
+                    <div class="col-md-6">
+                        <h4><strong>&#8377; {{bookFare.ServiceCharge}}</strong></h4>
+                    </div>
+                </div>
+                <div class="custom_row row">
+                    <div class="col-md-5">
+                        <h4> Service Tax</h4>
+                    </div>
+                    <div class="col-md-1">
+                        <h4>:</h4>
+                    </div>
+                    <div class="col-md-6">
+                        <h4><strong>&#8377; {{bookFare.ServiceTax}}</strong></h4>
+                    </div>
+                </div>
+
+                <div class="custom_row row" *ngIf="bookFare.discount!=0">
+                    <div class="col-md-5">
+                        <h4>Promo Discount:</h4>
+                    </div>
+                    <div class="col-md-1">
+                        <h4>:</h4>
+                    </div>
+                    <div class="col-md-6">
+                        <h4><strong>(-) &#8377; {{bookFare.discount}}</strong></h4>
+                    </div>
+
+                </div>
+
+                <div class="custom_row row" *ngIf="bookFare.gst > 0">
+                    <div class="col-md-5">
+                        <h4> GSTIN ({{gstResponse}}%)</h4>
+                    </div>
+                    <div class="col-md-1">
+                        <h4>:</h4>
+                    </div>
+                    <div class="col-md-6">
+                        <h4><strong>&#8377; {{bookFare.gst}}</strong></h4>
+                    </div>
+                </div>
+                <div class="custom_row row">
+                    <div class="col-md-5">
+                        <h4>Total Fare</h4>
+                    </div>
+                    <div class="col-md-1">
+                        <h4>:</h4>
+                    </div>
+                    <div class="col-md-6">
+                        <h4><strong>&#8377; {{bookFare.total}}</strong></h4>
+                    </div>
+
+                </div>
+                <div class="clear"></div>
+            </div>
+            <div class="custom_row">
+                <div class="log_label">
+                    <p>Enter Promo code </p>
+                    <div class="row">
+                        <div class="col-md-8 relative">
+                            <div class="loader_wrapper" *ngIf="promoLoad">
+                                <div class="loader_small"></div>
+                            </div>
+                            <input class="" placeholder="PROMO CODE" type="text" #promo>
+                        </div>
+                        <div class="col-md-4">
+                            <button class="modal_btn" (click)="check_promo(promo)">
+                        Apply
+                      </button>
+
+                        </div>
+                    </div>
+                </div>
+                <span [innerHTML]="promoMsg"></span>
+                <div class="clear"></div>
+            </div>
+
+            <div class="custom_row" *ngIf="loginDetails.type!='agent'">
+                <div class="log_label">
+                    <p>Choose payment method </p>
+                </div>
+                <select (change)="paymentType($event.target.value)" [(ngModel)]="bookFare.payment">
+                  <option value="online" [selected]="selected">Online</option>
+                  <!--option value="cash">Cash</option-->
+                </select>
+            </div>
+            <div class="custom_row" (click)="paymentFun()">
+                <button class="modal_btn">
+                  Book Now
+                </button>
+            </div>
+
+        </div>
+    </div>
+</ng-template>
+
+
+
+
+
+<!-- PAYMENT-MODAL-ENDS -->
\ No newline at end of file

src/app/home/booking/booking.component.scss

+@import "../../../styles.scss";
+.search_wrapper {
+    width: 100%;
+    background-image: linear-gradient(to right, #FE6509, #FE8109);
+    padding-top: 110px;
+    .search_wrapper_inner {
+        background-image: url("/assets/imgs/mask_bg.png");
+        .search_inner_container {
+            width: 95%;
+            margin: 0 auto;
+            padding-top: 30px;
+            padding-bottom: 30px;
+            p {
+                color: #fff;
+                margin: 0px;
+                padding: 0px;
+                text-transform: uppercase;
+                padding-bottom: 5px;
+                font-size: 12px;
+            }
+            h4 {
+                color: #fff;
+                margin: 0px;
+                padding: 0px;
+                font-weight: 700;
+                .arrow {
+                    width: 40px;
+                    height: 40px;
+                    text-align: center;
+                    background-image: url("../../../assets/imgs/icon_sprite.png");
+                    background-size: 375px;
+                    margin-left: 15px;
+                    margin-right: 15px;
+                }
+                .arrow_left {
+                    background-position: top -56px left -6px;
+                }
+                .arrow_right {
+                    background-position: top -56px left -61px;
+                }
+            }
+            input {
+                border: none;
+                border-bottom: 1px solid $white-color;
+                background-color: transparent;
+                height: 40px;
+                color: $white-color;
+                border-radius: 0px;
+                font-size: 24px;
+                line-height: 32px;
+                font-weight: 700;
+                &:focus {
+                    outline: none;
+                    box-shadow: none;
+                }
+                &::placeholder {
+                    color: $white-color;
+                }
+            }
+            .modify_btn {
+                background-color: $brown-theme;
+                color: $white-color;
+                border: none;
+                height: 40px;
+                min-width: 140px;
+                cursor: pointer;
+                &:focus {
+                    outline: none;
+                }
+            }
+        }
+    }
+    .passenger_detail_wrapper {
+        width: 100%;
+        background-color: $bg-gray;
+        padding-top: 30px;
+        padding-bottom: 30px;
+        .add_passenger_detail {
+            background-color: $white-color;
+            margin-bottom: 10px;
+            h5 {
+                margin: 0px;
+                color: $text-dark;
+                font-size: 14px;
+                padding: 20px;
+            }
+            ul {
+                margin: 0px;
+                padding: 0px;
+                li {
+                    list-style: none;
+                    border-left: 10px solid #71cf74;
+                    margin-bottom: 10px;
+                    padding: 10px;
+                    p {
+                        color: $black-color;
+                        text-transform: uppercase;
+                        font-weight: 500;
+                        margin: 0px;
+                        padding: 8px;
+                        strong {
+                            color: #71cf74;
+                            margin-left: 5px;
+                        }
+                    }
+                    .input_detail {
+                        width: 100%;
+                        border: 1px solid $bg-gray;
+                        height: 40px;
+                        padding-left: 10px;
+                        padding-right: 10px;
+                        &:focus {
+                            outline: none;
+                        }
+                    }
+                    .radio {
+                        position: relative;
+                        display: block;
+                        padding-left: 30px;
+                        margin-bottom: 0px;
+                        font-size: 14px;
+                        color: $text-dark;
+                        cursor: pointer;
+                        margin-right: 10px;
+                        top: 10px;
+                    }
+                    .radio:before {
+                        background: $white-color;
+                        content: "";
+                        position: absolute;
+                        display: inline-block;
+                        top: 0;
+                        left: 0;
+                        width: 20px;
+                        height: 20px;
+                        border: 1px solid $bg-gray;
+                        border-radius: 100%;
+                        -moz-border-radius: 100%;
+                        -webkit-border-radius: 100%;
+                        box-shadow: inset 0 0 3px 0 #ccc;
+                        -moz-box-shadow: inset 0 0 3px 0 #ccc;
+                        -webkit-box-shadow: inset 0 0 3px 0 #ccc;
+                    }
+                    input[type="radio"] {
+                        display: none;
+                    }
+                    input[type="radio"]:checked+label:before {
+                        content: "\2022";
+                        text-align: center;
+                        line-height: 15px;
+                        font-family: Tahoma;
+                        font-size: 30px;
+                        color: $primary-color;
+                        text-shadow: 0 0 4px #bbb;
+                    }
+                }
+            }
+        }
+        .ticket_details {
+            width: 100%;
+            .ticket_legend {
+                padding: 20px;
+                width: 320px;
+                margin: 0 auto;
+                background: $dark-color;
+                border-radius: 15px;
+                p {
+                    color: $text-dark;
+                    margin: 0px;
+                    padding-bottom: 10px;
+                    font-size: 14px;
+                }
+                h5 {
+                    color: $text-dark;
+                    margin: 0px;
+                    padding-bottom: 10px;
+                    font-size: 14px;
+                    line-height: 20px;
+                    strong {
+                        color: #fff;
+                    }
+                }
+                .choose_place {
+                    width: 100%;
+                    height: 40px;
+                    line-height: 40px;
+                    border: none;
+                    background: #dedede;
+                    font-size: 14px;
+                    color: $dark-color;
+                    border-radius: 8px;
+                    margin-bottom: 15px;
+                    padding-left: 10px;
+                    text-transform: capitalize;
+                    strong {
+                        color: $text-dark;
+                        font-weight: 400;
+                        text-transform: capitalize;
+                    }
+                    &:focus {
+                        outline: none;
+                    }
+                }
+                .proceed {
+                    width: 100%;
+                    font-weight: 400;
+                    font-size: 16px;
+                    border-radius: 8px;
+                    color: #fff;
+                    height: 45px;
+                    background: $primary-color;
+                    border: none;
+                    cursor: pointer;
+                    text-transform: capitalize;
+                    &:focus {
+                        border: none;
+                        outline: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.cmn_modal_content {
+    .custom_row {
+        padding-bottom: 15px !important;
+        p {
+            color: $primary-color !important;
+        }
+        h4 {
+            margin: 0px;
+            padding: 0px;
+            font-size: 16px;
+            color: $dark-color;
+            strong {}
+        }
+        select {
+            width: 140px;
+            height: 40px;
+            border: 1px solid $cm-border-color;
+        }
+    }
+}
\ No newline at end of file

src/app/home/booking/booking.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BookingComponent } from './booking.component';
+
+describe('BookingComponent', () => {
+  let component: BookingComponent;
+  let fixture: ComponentFixture<BookingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ BookingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BookingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/booking/booking.component.ts

+import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { FormGroup, FormArray, FormBuilder, Validators } from '@angular/forms';
+import { ValidationService } from './../../provider/validation.service';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
+import { WebService } from './../../provider/web.service';
+
+declare var Razorpay: any;
+
+@Component({
+  selector: 'app-booking',
+  templateUrl: './booking.component.html',
+  styleUrls: ['./booking.component.scss']
+})
+export class BookingComponent implements OnInit {
+
+  bookData: any;
+  totalAmount: number;
+  public passengerForm: FormGroup;
+  bookSubmit: boolean;
+  mobnumPattern = '^((\\+?)|0)?[0-9]{0,20}$';
+  emailPattern = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';
+  modalRef: BsModalRef;
+  book_result: any;
+  bookFare: any;
+  loginDetails: any;
+  bookingId: any;
+  @ViewChild('payment') private login: TemplateRef<HTMLElement>;
+  promocode: any;
+  funcName: any;
+  loading: boolean;
+  promoMsg: any;
+  booked_error: any;
+  bookLoad: boolean;
+  promoLoad: boolean;
+  walletData: any;
+  gstResponse: any;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private fb: FormBuilder,
+    public vs: ValidationService,
+    private bsmodalservice: BsModalService,
+    private service: WebService
+  ) {
+    this.bookSubmit = false;
+    this.loading = false;
+    this.promoLoad = false;
+    this.funcName = 'getGst';
+    this.service.post_data(this.funcName, null).subscribe(responseData => {
+      if ( responseData.status === 'success') {
+        console.log(responseData.data);
+        this.gstResponse = responseData.data;
+        this.bookFare = this.fareCharge(this.bookData.passenger);
+      } else {
+        console.log('failed');
+      }
+    }, (error) => {
+    });
+  }
+
+  ngOnInit() {
+    // this.bookData = JSON.parse(this.route.snapshot.params.get('data'));
+    // console.log(this.bookData);
+    const bookData = decodeURIComponent((this.route.snapshot.params['data']));
+    this.bookData = JSON.parse(bookData);
+     console.log(this.bookData);
+    this.totalAmount = this.total_amount(this.bookData);
+    console.log(this.bookData);
+    this.passengerForm = this.fb.group({
+      // tslint:disable-next-line:max-line-length
+      'phone': ['', Validators.compose([Validators.required, Validators.minLength(10), Validators.maxLength(15), Validators.pattern(this.mobnumPattern)])],
+      // tslint:disable-next-line:max-line-length
+      'email': ['', Validators.compose([Validators.required, Validators.maxLength(50), Validators.pattern(this.emailPattern)])],
+      'passenger': this.fb.array([])
+    });
+    this.patchValues();
+    this.loginDetails = JSON.parse(this.service.getLocalStorageItem('userData'));
+
+    if (this.loginDetails.type === 'agent') {
+        const postData = {'userId': this.loginDetails.id};
+        this.funcName = 'walletAmount';
+          this.service.post_data(this.funcName, postData).subscribe(responseData => {
+            if ( responseData.status === 'success') {
+              this.walletData = responseData.data;
+            } else {
+              console.log('failed');
+            }
+          }, (error) => {
+          });
+      }
+  }
+
+  total_amount(data: any) {
+    // tslint:disable-next-line:radix
+    const total_fare = this.bookData.passenger.map(item => item.seatFare).reduce((prev, next) => parseInt(prev) + parseInt(next));
+    return total_fare;
+  }
+
+  patchValues() {
+    const passengerCtrl = <FormArray>this.passengerForm.controls['passenger'];
+    const passengerCount = this.bookData.passenger.length;
+    let passenger_details;
+    for (let i = 0; i < passengerCount; i++) {
+      const gender = this.bookData.passenger[i].seatStatus === 'F' ? 'Female' : 'Male';
+      passenger_details = {
+        'seatNumber': this.bookData.passenger[i].seatNumber,
+        'name': [null, Validators.compose([Validators.required ])],
+        'age': [null, Validators.compose([Validators.required, Validators.min(3), Validators.max(60)])],
+        'gender': [gender, Validators.compose([Validators.required ])]
+      };
+      passengerCtrl.push(this.fb.group(passenger_details));
+    }
+  }
+
+  booking(model: any, template: TemplateRef<any>) {
+    this.bookSubmit = true;
+    const This = this;
+    if (this.passengerForm.valid) {
+      if (this.loginDetails.type === 'agent') {
+        if ( this.walletData.amount < this.bookFare.total) {
+          this.booked_error = '<small class="text-danger">Insufficent Balance. Please recharge your account</smal>';
+          return false;
+        }
+      }
+      this.bookLoad = true;
+      const pass_data = this.passengerForm.value;
+      this.bookData.droppingPointCode = this.bookData.droppingPointCode !== '' ? this.bookData.droppingPointCode : '0000';
+      this.bookData.email = pass_data.email;
+      this.bookData.mobile = pass_data.phone;
+      const postData = {
+        'operatorCode': this.bookData.operatorCode,
+        'scheduleCode': this.bookData.scheduleCode,
+        'travelDate': this.bookData.travelDate,
+        'fromStationCode': this.bookData.fromStationCode,
+        'toStationCode': this.bookData.toStationCode,
+        'boardingPointCode': this.bookData.boardingPointCode,
+        'droppingPointCode': this.bookData.droppingPointCode,
+        'email': pass_data.email,
+        'mobile': pass_data.phone,
+        'passenger': pass_data.passenger
+      };
+    // tslint:disable-next-line:max-line-length
+    const url = 'tempbooking?username=javatest&password=123456';
+    console.log(url);
+    this.service.online_service(url, 'data=' + JSON.stringify(postData)).subscribe(response => {
+        this.bookLoad = false;
+        this.book_result = response;
+        if (this.book_result.message === 'Success') {
+          this.bookingId = this.book_result.blockingCode;
+          this.bookFare = this.fareCharge(this.bookData.passenger);
+          if (this.loginDetails.type === 'agent') {
+            this.bookFare.payment = 'wallet';
+          }
+          this.modalRef = this.bsmodalservice.show(template, {backdrop: 'static'});
+        } else {
+          this.booked_error = '<small class="text-danger">' + this.book_result.errorDesc + '</smal>';
+          setTimeout(function() {
+            This.booked_error = '';
+          }, 3000);
+        }
+       console.log(this.book_result);
+    }, (error) => {
+      console.log(error);
+    });
+    }
+    // this.payment();
+  }
+
+  close() {
+    this.modalRef.hide();
+  }
+
+  paymentFun() {
+    this.bookLoad = true;
+    const This = this;
+    console.log(this.bookFare.payment);
+    this.close();
+    if (this.bookFare.payment === 'cash') {
+      this.success();
+    } else if (this.bookFare.payment === 'online') {
+      const options = {
+        'key': 'rzp_live_KBTt75APHMzR4I',
+        'amount': this.bookFare.total * 100, // 2000 paise = INR 20 this.bookFare.total this.bookFare.total
+        'name': this.loginDetails.name,
+        'description': 'Ticket Robo Seat Booking. Booking ID:' + this.bookingId,
+        'image': './../../../assets/imgs/logo.png',
+        'payment_capture': 1,
+        'handler': function (response) {
+            console.log(response);
+            This.success(response.razorpay_payment_id);
+        },
+        'prefill': {
+            'name': this.loginDetails.name,
+            'email': this.loginDetails.username
+        },
+        'notes': {
+            'address': 'Ticket Robo'
+        },
+        'theme': {
+            'color': '#F37254'
+        }
+      };
+      const rzp1 = new Razorpay(options);
+      rzp1.open();
+    } else {
+        this.success();
+    }
+  }
+
+  fareCharge(passenger: any) {
+    console.log(this.gstResponse);
+    let gst = 0;
+    // tslint:disable-next-line:radix
+    const sum = passenger.map(item => item.baseFare).reduce((prev, next) => parseInt(prev) + parseInt(next));
+    // tslint:disable-next-line:radix
+    const ServiceTax = passenger.map(item => item.operatorServiceTax).reduce((prev, next) => parseInt(prev) + parseInt(next));
+    // tslint:disable-next-line:radix
+    const ServiceCharge = passenger.map(item => item.operatorServiceCharge).reduce((prev, next) => parseInt(prev) + parseInt(next));
+    // tslint:disable-next-line:radix
+    let total = parseFloat(sum) + parseFloat(ServiceTax) + parseFloat(ServiceCharge);
+    const index = this.bookData.busType.includes('Non');
+    if (index !== true) {
+      gst = Math.round((total * this.gstResponse) / 100);
+      total = Math.round(total + gst);
+    }
+    // tslint:disable-next-line:max-line-length
+    const res = {'sum': sum, 'ServiceTax': ServiceTax, 'ServiceCharge': ServiceCharge, 'total': total, 'discount': 0, 'gst': gst, 'payment': 'online'};
+    return res;
+  }
+
+  paymentType(type: any) {
+    console.log(type);
+    // this.bookFare.payment = type;
+  }
+
+  success(transId = null) {
+    this.bookLoad = true;
+    this.bookData.fare = this.bookFare;
+    this.bookData.passenger = this.passengerForm.value.passenger;
+    this.bookData.bookingId = this.bookingId;
+    this.bookData.transId = transId;
+    this.bookData.paymentType = this.bookFare.payment;
+    this.bookData.promocode = this.promocode;
+    this.bookData.userId = this.loginDetails.id;
+    this.bookData.usertype = this.loginDetails.type;
+    this.bookData.gst = this.gstResponse;
+    console.log(this.bookData);
+    const postData = {'bookingCode': this.bookingId};
+
+    const url = 'confirmbooking?username=javatest&password=123456';
+    console.log(url);
+    this.service.online_service(url, 'data=' + JSON.stringify(postData)).subscribe(response => {
+        const confirm_result = response;
+        console.log(confirm_result);
+        if (confirm_result.message === 'Success') {
+
+          const passenger = confirm_result.ticketDetails.passengerDetails;
+          if (passenger instanceof Array !== true) {
+            this.bookData.passenger[0].pnr = passenger.operatorPnr;
+          } else {
+            this.bookData.passenger.forEach(function (item: any, i: any) {
+              item[i].pnr = passenger[i].operatorPnr;
+            });
+          }
+
+          this.funcName = 'bookseat';
+          this.service.post_data(this.funcName, this.bookData).subscribe(responseData => {
+            this.bookLoad = false;
+            if ( responseData.status === 'success') {
+              this.router.navigate(['/success', this.bookingId,  this.bookFare.total], { replaceUrl: true });
+            } else {
+              console.log('failed');
+            }
+          }, (error) => {
+            this.bookLoad = false;
+          });
+
+        } else {
+          this.bookLoad = false;
+        }
+    }, (error) => {
+      this.bookLoad = false;
+      console.log(error);
+    });
+  }
+
+  check_promo(promovalue) {
+    this.promoLoad = true;
+    console.log(promovalue.value);
+    const sendData = {'userId': this.loginDetails.id, 'code': promovalue.value};
+    const This = this;
+    this.funcName = 'check_promo';
+      this.service.post_data(this.funcName, sendData).subscribe(response => {
+        this.promoLoad = false;
+        if ( response.status === 'success') {
+          this.promoMsg = '<small class="text-info">' + response.message + '</smal>';
+          let offer = ((this.bookFare.sum * response.data.rate) / 100);
+          offer = offer > response.data.max_limit ? response.data.max_limit : offer;
+          this.bookFare.discount = offer;
+          this.bookFare.total = this.bookFare.total - offer;
+          this.promocode = response.data.id;
+          console.log(response.data);
+        } else {
+          this.promoMsg = '<small class="text-danger">' + response.message + '</smal>';
+          this.bookFare.discount = 0;
+          this.promocode = 0;
+          console.log('failed');
+        }
+        setTimeout(function() {
+          This.promoMsg = undefined;
+        }, 3000);
+      }, (error) => {
+
+      });
+  }
+
+  getGender_state(index: any, type: any) {
+    if (this.bookData.passenger[index].seatStatus === type) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+}

src/app/home/changepassword/changepassword.component.html

+<!-- MAIN-WRAPPER-STARTS -->
+
+<div class="main_wrapper">
+
+  <!-- SEARCH-BANNER-STARTS-->
+
+  <div class="search_banner">
+      <div class="search_overlay">
+          <!-- <h2>
+                    Check in any time Book your ticket and start you journey
+               </h2> -->
+      </div>
+  </div>
+
+  <!-- SEARCH-BANNER-ENDS-->
+
+  <!-- ACCOUNT-TABS-STARTS -->
+
+  <div class="accounts_tab_div_wrapper relative">
+          <div class="loader_common_main_wrapper" *ngIf="loading">
+                  <div class="loader"></div>
+              </div>
+      <div class="">
+          <div class="account_tabs">
+
+              <!-- ACCOUNT-TABS-MENU-STARTS -->
+
+              <ul class="nav nav-tabs">
+                  <li class="nav-item">
+                      <a class="nav-link" data-toggle="tab" href="#password">Change Password</a>
+                  </li>
+              </ul>
+
+              <!-- ACCOUNT-TABS-MENU-ENDS -->
+
+
+
+              <!-- ACCOUNT-TABS-CONTENT-STARTS -->
+
+              <div class="tab-content">
+                  <div class="tab-pane active" id="password">
+                      <div class="wallet_balance_wrapper" *ngIf="!keyState">
+                          <div *ngIf="passwordMsg && passwordMsg!=''" [innerHTML]="passwordMsg"></div>
+                          <form [formGroup]="passwordForm" (ngSubmit)="passwordProcess()" autocomplete="off">
+                              <h4>Change Password</h4>
+                              <div class="row">
+                                  <div class="col-md-5">
+                                      <div class="row">
+                                          <div class="col-12">
+                                              <!-- <p><strong>Geroge Similton</strong></p> -->
+                                              <input class="" placeholder="Enter New Password" type="password" formControlName="newpassword">
+                                              <div class="s_error" *ngIf="!passwordForm.controls['newpassword'].valid && passwordSubmit">
+                                                  <div class="s_validation" *ngIf="passwordForm.controls['newpassword'].hasError('required')">{{vs.errorList.required}} </div>
+                                              </div>
+                                          </div>
+                                      </div>
+                                      <div class="row">
+                                          <div class="col-12">
+                                              <!-- <p><strong>Geroge Similton</strong></p> -->
+                                              <input class="" placeholder="Confirm New Password" type="password" formControlName="cpassword">
+                                              <div class="s_error" *ngIf="!passwordForm.controls['cpassword'].valid && passwordSubmit">
+                                                  <div class="s_validation" *ngIf="passwordForm.controls.cpassword.invalid">{{vs.errorList.confirm}} </div>
+                                              </div>
+                                          </div>
+                                      </div>
+                                      <br>
+                                      <div class="row">
+                                          <div class="col-12">
+                                              <p class="clear"><button class="proceed mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Save Password </button>
+                                              </p>
+                                          </div>
+                                      </div>
+                                  </div>
+                                  <div class="col-md-7"></div>
+                              </div>
+                          </form>
+                      </div>
+                      <div class="wallet_balance_wrapper" *ngIf="keyState">
+                          <div class="row" [innerHTML]="keyStatemsg"></div>
+                      </div>
+                  </div>
+
+                  <!-- ACCOUNT-TABS-CONTENT-ENDS -->
+
+              </div>
+          </div>
+      </div>
+
+      <!-- ACCOUNT-TABS-ENDS -->
+
+  </div>
+
+  <!-- MAIN-WRAPPER-ENDS -->

src/app/home/changepassword/changepassword.component.scss

+.search_banner {
+    width: 100%;
+    position: relative;
+    background: url("/assets/imgs/bus_3.jpg");
+    background-attachment: fixed !important;
+    background-size: cover !important;
+    .search_overlay {
+        padding-top: 10%;
+        padding-bottom: 5%;
+        background: rgba(44, 71, 196, 0.9);
+        h2 {
+            text-align: center;
+            color: #fff;
+            margin: 0px;
+            padding-bottom: 50px;
+            font-weight: 400;
+            margin: 0px;
+        }
+    }
+}
+
+.accounts_tab_div_wrapper {
+    padding-top: 0px;
+    padding-bottom: 50px;
+    width: 80%;
+    margin: 0 auto;
+    .account_tabs {
+        width: 100%;
+        .nav {
+            background:#ff7800;
+            li {
+                color: #fff;
+                width: 20%;
+                .nav-link {
+                    color: #fff;
+                    border-radius: 0px;
+                    padding: 20px;
+                    font-size: 18px;
+                    font-weight: 300;
+                    border: none;
+                }
+                .active {
+                    background: rgba(273, 273, 273, 0.2);
+                    color: #fff;
+                }
+            }
+        }
+        .tab-content {
+            background: #fff;
+            border: none;
+            .active {
+                background: #fff;
+            }
+            .results_bay {
+                position: relative;
+                .results_head {
+                    border-bottom: 1px solid #e1e1e1;
+                    padding: 15px;
+                    padding-top: 5px;
+                    padding-bottom: 5px;
+                    position: absolute;
+                    z-index: 99;
+                    background: #a8a8a8;
+                    top: 0px;
+                    left: 0px;
+                    right: 0px;
+                    h4 {
+                        margin: 0px;
+                        color: #fff;
+                        font-size: 16px;
+                    }
+                }
+                ul {
+                    margin: 0px;
+                    padding: 0px;
+                    margin-top: 65px;
+                    li {
+                        list-style: none;
+                        background-image: url("/assets/imgs/drop_down.png");
+                        padding-bottom: 0px;
+                        background-color: #fff;
+                        margin-bottom: 10px;
+                        cursor: pointer;
+                        border-bottom: 1px solid #e1e1e1;
+                        background-position: right 10px top 20px;
+                        background-repeat: no-repeat;
+                        background-size: 40px;
+                        .result_inner {
+                            padding: 15px;
+                            padding-bottom: 0px;
+                            border: 1px solid #ddd;
+                            .row {
+                                border-bottom: 1px solid #ddd;
+                                padding-bottom: 15px;
+                            }
+                        }
+                        h5 {
+                            color: #6f6f6f;
+                            font-weight: 400;
+                            font-size: 17px;
+                            margin: 0px;
+                            padding-bottom: 0px;
+                            line-height: 25px;
+                        }
+                        p {
+                            color: #6f6f6f;
+                            font-weight: 400;
+                            font-size: 15px;
+                            margin: 0px;
+                        }
+                        .view_btn {
+                            border: 1px solid #e24648;
+                            background: #e24648;
+                            width: 100%;
+                            color: #fff;
+                            height: 40px;
+                            cursor: pointer;
+                            &:focus {
+                                outline: none;
+                            }
+                        }
+                        .rating {
+                            float: left;
+                        }
+                        .rating:not(:checked)>input {
+                            position: absolute;
+                            top: -9999px;
+                            clip: rect(0, 0, 0, 0);
+                        }
+                        .rating:not(:checked)>label {
+                            float: right;
+                            width: 1em;
+                            padding: 0.1em;
+                            overflow: hidden;
+                            white-space: nowrap;
+                            cursor: pointer;
+                            font-size: 200%;
+                            line-height: 1.2;
+                            color: #ddd;
+                        }
+                        .rating:not(:checked)>label:before {
+                            content: '★ ';
+                        }
+                        .rating>input:checked~label {
+                            color: #f70;
+                        }
+                        .rating:not(:checked)>label:hover,
+                        .rating:not(:checked)>label:hover~label {
+                            color: gold;
+                        }
+                        .rating>input:checked~label:hover,
+                        .rating>input:checked~label:hover~label,
+                        .rating>label:hover~input:checked~label {
+                            color: #ea0;
+                        }
+                    }
+                }
+                .collapse {
+                    width: 100%;
+                    padding: 0px;
+                    .seat_arragement_div {
+                        padding: 10px;
+                        background: #f8f8f8;
+                        margin-bottom: 10px;
+                        .seat_positioning {
+                            h4 {
+                                margin: 0px;
+                                color: #fff;
+                                background: #444444;;
+                                padding: 8px;
+                                font-weight: 300;
+                                font-size: 18px;
+                                margin-bottom: 10px;
+                                padding-left: 20px;
+                            }
+                            background: #fff;
+                            border-radius: 0px;
+                            display: inline-block;
+                            width: 100%;
+                            ul {
+                                .seat_driver {
+                                    width: 40px;
+                                    height: 40px;
+                                    background: url("/assets/imgs/driver.png");
+                                    background-position: center;
+                                    background-size: 35px;
+                                    background-repeat: no-repeat !important;
+                                    margin-right: 10px;
+                                    margin-bottom: 10px;
+                                }
+                                padding: 10px;
+                                width: 200px;
+                                margin: 0px;
+                                display: block;
+                                margin: 0 auto;
+                                li {
+                                    list-style: none;
+                                    display: inline-block;
+                                    background: transparent;
+                                    width: 30px;
+                                    height: 30px;
+                                    #seat_button {
+                                        margin: 4px;
+                                        background-color: #fff;
+                                        border-radius: 0px !important;
+                                        overflow: auto;
+                                        color: #000;
+                                        border: none;
+                                        position: relative;
+                                        width: 100%;
+                                        height: 100%;
+                                        outline: none;
+                                        cursor: pointer;
+                                        background: url("/assets/imgs/seat_available.png");
+                                        background-position: center;
+                                        background-size: 100%;
+                                    }
+                                    #seat_button p {
+                                        margin: 0px;
+                                        position: absolute;
+                                        left: 0px;
+                                        right: 0px;
+                                        top: 0px;
+                                        bottom: 0px;
+                                        padding: 4px;
+                                        font-size: 14px;
+                                        cursor: pointer;
+                                    }
+                                    #seat_button label {
+                                        width: 100%;
+                                    }
+                                    #seat_button label span {
+                                        text-align: center;
+                                        display: block;
+                                    }
+                                    #seat_button label input {
+                                        position: absolute;
+                                        top: -20px;
+                                    }
+                                    #seat_button input:checked+p {
+                                        background: url("/assets/imgs/seat_selected.png");
+                                        border-radius: 0px !important;
+                                        margin: 0px;
+                                        cursor: pointer;
+                                        background-position: center;
+                                        background-size: 100%;
+                                    }
+                                }
+                            }
+                        }
+                        .ticket_details {
+                            width: 100%;
+                            .ticket_legend {
+                                width: 100%;
+                                background: #fff;
+                                h5 {
+                                    color: #898989;
+                                    margin: 0px;
+                                    padding: 0px;
+                                    font-weight: 400;
+                                    padding-bottom: 20px;
+                                    font-size: 16px;
+                                    img {
+                                        width: 25px;
+                                        margin-right: 20px;
+                                    }
+                                    strong {}
+                                    .red {
+                                        color: #e24648;
+                                    }
+                                }
+                                h4 {
+                                    margin: 0px;
+                                    color: #fff;
+                                    background: #e24648;
+                                    padding: 8px;
+                                    font-weight: 300;
+                                    font-size: 18px;
+                                    margin-bottom: 10px;
+                                    padding-left: 20px;
+                                }
+                                p {
+                                    color: #a8a8a8;
+                                    margin: 0px;
+                                    padding-top: 10px;
+                                    padding-bottom: 10px;
+                                    font-size: 18px;
+                                }
+                                .choose_place {
+                                    width: 100%;
+                                    height: 50px;
+                                    border: 1px solid #898989;
+                                    background: transparent;
+                                    padding: 10px;
+                                    font-size: 18px;
+                                }
+                                .proceed {
+                                    width: 100%;
+                                    font-weight: 400;
+                                    font-size: 16px;
+                                    color: #fff;
+                                    background: #e24648;
+                                    border: none;
+                                    cursor: pointer;
+                                    text-transform: capitalize;
+                                    &:focus {
+                                        border: none;
+                                        outline: none;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .wallet_balance_wrapper {
+            width: 100%;
+            padding: 10px;
+            h4 {
+                margin: 0px;
+                color: #333;
+                margin-bottom: 15px;
+                padding-bottom: 10px;
+                padding-top: 10px;
+                font-weight: 500;
+                position: relative;
+                .add_fund {
+                    position: absolute;
+                    right: 0px;
+                }
+            }
+            p {
+                color: #808080;
+                font-size: 16px;
+                font-weight: 400;
+                padding-top: 10px;
+                padding-bottom: 10px;
+                margin: 0px;
+            }
+            input {
+                width: 100%;
+                border: none;
+                border: 1px solid #a8a8a8;
+                height: 50px;
+                padding: 10px;
+                border-radius: 0px !important;
+                background: transparent;
+                transition: none !important;
+                margin-bottom: 10px;
+                &:focus {
+                    outline: none !important;
+                    box-shadow: none !important;
+                }
+            }
+            .radio_container {
+                padding-top: 10px;
+                padding-bottom: 10px;
+                .radio_block>label {
+                    text-align: left;
+                }
+                input[type=radio] {
+                    width: 22px;
+                    height: 17px;
+                    vertical-align: middle;
+                    float: left;
+                }
+                label.radio_css {
+                    padding: 0 .45em;
+                    margin: 0 20px 0 0;
+                    float: left;
+                    font-size: 14px;
+                }
+            }
+        }
+        .proceed {
+            font-weight: 400;
+            font-size: 16px;
+            color: #fff;
+            background: #ff7800;
+            border: none;
+            cursor: pointer;
+            text-transform: capitalize;
+            &:focus {
+                border: none;
+                outline: none;
+            }
+        }
+    }
+}
+
+.bus_ride_details {
+    width: 100%;
+    th {
+        color: #e24648;
+        font-size: 16px;
+        font-weight: 400;
+        padding: 10px;
+        padding-left: 0px;
+    }
+    td {
+        color: #808080;
+        padding: 5px;
+        padding-left: 0px;
+        font-weight: 400;
+        font-size: 16px;
+    }
+}
+
+/* MODAL-CUSTOM-CSS */
+
+.log_modal {
+    .modal-dialog {
+        .modal-content {
+            background-image: url("/assets/imgs/login_head.png");
+            background-color: #fff !important;
+            border: none;
+            background-color: #f2f3f4;
+            background-position: top center;
+            background-repeat: no-repeat;
+            border-radius: 8px;
+            position: relative;
+            top: 100px !important;
+            .close {
+                position: absolute;
+                top: 10px;
+                right: 15px;
+                &:focus {
+                    outline: none;
+                }
+            }
+            .log_modal_inner {
+                width: 80%;
+                margin: 0 auto;
+                padding-top: 45px;
+                .social_log {
+                    position: absolute;
+                    right: 15px;
+                    top: 45px;
+                    img {
+                        width: 35px;
+                        cursor: pointer;
+                    }
+                }
+                h4 {
+                    margin: 0px;
+                    color: #ffffff;
+                    font-size: 45px;
+                }
+                h3 {
+                    margin: 0px;
+                    color: #ffffff;
+                    font-size: 30px;
+                }
+                p {
+                    margin: 0px;
+                    color: #ffffff;
+                    font-size: 16px;
+                    padding-top: 20px;
+                    font-weight: 400;
+                    padding-bottom: 30px;
+                }
+                .log_modal_content {
+                    background: #fff;
+                    border-radius: 8px;
+                    -webkit-box-shadow: 0px 0px 32px -3px rgba(0, 0, 0, 0.75);
+                    -moz-box-shadow: 0px 0px 32px -3px rgba(0, 0, 0, 0.75);
+                    box-shadow: 0px 0px 32px -3px rgba(0, 0, 0, 0.75);
+                    .log_modal_content_inner {
+                        padding: 15px;
+                        .log_row {
+                            padding-bottom: 20px;
+                            select {
+                                width: 100%;
+                                height: 40px;
+                                border: none;
+                                border-bottom: 2px solid #f1f1f1;
+                                background: transparent;
+                                color: #020101;
+                                font-weight: 600;
+                                font-size: 20px;
+                                padding-bottom: 5px;
+                                &:focus {
+                                    outline: none;
+                                }
+                                &::placeholder {
+                                    color: #2d2d2d;
+                                }
+                            }
+                            .log_number {
+                                background-image: url("/assets/imgs/mobile.png");
+                                background-repeat: no-repeat;
+                                background-position: left;
+                                background-size: 30px;
+                            }
+                            .log_user {
+                                background-image: url("/assets/imgs/user.png");
+                                background-repeat: no-repeat;
+                                background-position: left;
+                                background-size: 30px;
+                            }
+                            .log_mail {
+                                background-image: url("/assets/imgs/mail.png");
+                                background-repeat: no-repeat;
+                                background-position: left;
+                                background-size: 30px;
+                            }
+                            .log_password {
+                                background-image: url("/assets/imgs/password.png");
+                                background-repeat: no-repeat;
+                                background-position: left;
+                                background-size: 30px;
+                            }
+                            .log_label {
+                                width: calc(100% - 45px);
+                                float: left;
+                                padding-left: 50px;
+                                p {
+                                    color: #ababad;
+                                    margin: 0px;
+                                    padding: 0px;
+                                }
+                                input {
+                                    width: 100%;
+                                    height: 40px;
+                                    border: none;
+                                    border-bottom: 2px solid #f1f1f1;
+                                    background: transparent;
+                                    color: #020101;
+                                    font-weight: 600;
+                                    font-size: 20px;
+                                    padding-bottom: 5px;
+                                    &:focus {
+                                        outline: none;
+                                    }
+                                    &::placeholder {
+                                        color: #2d2d2d;
+                                    }
+                                }
+                            }
+                            .log_label1 {
+                                width: 100%;
+                                float: left;
+                                p {
+                                    color: #ababad;
+                                    margin: 0px;
+                                    padding: 0px;
+                                }
+                                input {
+                                    width: 100%;
+                                    height: 40px;
+                                    border: none;
+                                    border-bottom: 2px solid #f1f1f1;
+                                    background: transparent;
+                                    color: #020101;
+                                    font-weight: 600;
+                                    font-size: 20px;
+                                    padding-bottom: 5px;
+                                    &:focus {
+                                        outline: none;
+                                    }
+                                    &::placeholder {
+                                        color: #2d2d2d;
+                                    }
+                                }
+                            }
+                            .log_check {
+                                width: 45px;
+                                height: 45px;
+                                float: left;
+                                background-image: url("/assets/imgs/uncheck.png");
+                                background-repeat: no-repeat;
+                                background-position: center;
+                                position: relative;
+                                top: 10px;
+                            }
+                            .styled-checkbox {
+                                position: absolute; // take it out of document flow
+                                opacity: 0; // hide it
+                                &+label {
+                                    position: relative;
+                                    cursor: pointer;
+                                    padding: 0;
+                                    padding-left: 7px;
+                                    font-size: 16px;
+                                    p {
+                                        margin: 0px;
+                                        padding: 0px;
+                                        color: #353535;
+                                        position: absolute;
+                                        width: 250px;
+                                        top: 0px;
+                                        left: 50px;
+                                        font-size: 17px;
+                                    }
+                                }
+                                // Box.
+                                &+label:before {
+                                    content: '';
+                                    margin-right: 10px;
+                                    display: inline-block;
+                                    vertical-align: text-top;
+                                    width: 25px;
+                                    height: 25px;
+                                    background: white;
+                                    border: 1px solid #acacac;
+                                    border-radius: 4px;
+                                }
+                                // Box hover
+                                &:hover+label:before {
+                                    background: transparent;
+                                }
+                                // Box focus
+                                &:focus+label:before {
+                                    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
+                                }
+                                // Box checked
+                                &:checked+label:before {
+                                    background: #f79a2a;
+                                }
+                                // Disabled state label.
+                                &:disabled+label {
+                                    color: #b8b8b8;
+                                    cursor: auto;
+                                }
+                                // Disabled box.
+                                &:disabled+label:before {
+                                    box-shadow: none;
+                                    background: #ddd;
+                                }
+                                // Checkmark. Could be replaced with an image
+                                &:checked+label:after {
+                                    content: '';
+                                    position: absolute;
+                                    left: 14px;
+                                    top: 12px;
+                                    background: white;
+                                    width: 2px;
+                                    color: #2d2d2d;
+                                    height: 2px;
+                                    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
+                                    transform: rotate(45deg);
+                                    border: none;
+                                }
+                            }
+                            .log_btn {
+                                height: 40px;
+                                border-radius: 20px;
+                                color: #fff;
+                                position: absolute;
+                                right: 15px;
+                                top: 15px;
+                                background: #f7941d;
+                                margin: 0 auto;
+                                font-weight: 500;
+                                font-size: 16px;
+                                padding-left: 35px;
+                                padding-right: 35px;
+                                text-transform: capitalize;
+                                &:focus {
+                                    outline: none;
+                                }
+                            }
+                            .log_btn1 {
+                                height: 40px;
+                                border-radius: 20px;
+                                color: #fff;
+                                background: #f7941d;
+                                margin: 0 auto;
+                                font-weight: 500;
+                                font-size: 16px;
+                                padding-left: 35px;
+                                padding-right: 35px;
+                                text-transform: capitalize;
+                                &:focus {
+                                    outline: none;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            .modal-footer {
+                border: none;
+                .log_modal_footer {
+                    width: 85%;
+                    margin: 0 auto;
+                    padding-top: 35px;
+                    padding-bottom: 20px;
+                    .signup_btn {
+                        text-align: right;
+                        position: relative;
+                        right: 65px;
+                    }
+                }
+                p {
+                    color: #f7941d;
+                    font-size: 16px;
+                    font-weight: 400;
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/home/changepassword/changepassword.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChangepasswordComponent } from './changepassword.component';
+
+describe('ChangepasswordComponent', () => {
+  let component: ChangepasswordComponent;
+  let fixture: ComponentFixture<ChangepasswordComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ChangepasswordComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ChangepasswordComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/changepassword/changepassword.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { WebService } from './../../provider/web.service';
+import { FormGroup, FormBuilder, Validators, ValidationErrors } from '@angular/forms';
+import { ValidationService } from './../../provider/validation.service';
+
+@Component({
+  selector: 'app-changepassword',
+  templateUrl: './changepassword.component.html',
+  styleUrls: ['./changepassword.component.scss']
+})
+export class ChangepasswordComponent implements OnInit {
+
+  loading: boolean;
+  passwordSubmit: boolean;
+  resetkey: any;
+  public passwordForm: FormGroup;
+  funcName: any;
+  passwordMsg: any;
+  keyState: boolean;
+  keyStatemsg: any;
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private service: WebService,
+    private formBuilder: FormBuilder,
+    public vs: ValidationService
+  ) {
+    this.keyState = false;
+  }
+
+  ngOnInit() {
+    this.resetkey = decodeURIComponent(this.route.snapshot.params['id']);
+    this.passwordForm = this.formBuilder.group({
+      'newpassword': ['', Validators.compose([Validators.required, Validators.minLength(6)])],
+      'cpassword': ['', Validators.compose([Validators.required]), this.MatchPassword.bind(this)]
+    });
+
+    this.funcName = 'keyValid';
+    const postData = {'resetkey': this.resetkey};
+    this.service.post_data(this.funcName, postData).subscribe(response => {
+      this.loading = false;
+      if ( response.status === 'success') {
+        this.keyState = false;
+        this.keyStatemsg = '';
+      } else {
+        this.keyState = true;
+        this.keyStatemsg = '<big class="text-danger">' + response.message + '</big>';
+      }
+    }, (error) => {
+      this.keyStatemsg = '<big class="text-danger"> Something went wrong. Feel free to contact us .</big>';
+    });
+  }
+
+  MatchPassword(val: any) {
+    return new Promise(resolve => {
+      if (val.value === this.passwordForm.value.newpassword) {
+        resolve(null);
+      } else {
+        resolve({ 'match': false });
+      }
+    });
+  }
+
+  passwordProcess() {
+    this.passwordSubmit = true;
+    if (this.passwordForm.valid) {
+      const password_data = this.passwordForm.value;
+      const This = this;
+
+      const postData = {
+        'newpassword': password_data.newpassword,
+        'resetkey': this.resetkey,
+      };
+
+      this.funcName = 'resetPassword';
+
+
+      this.loading = true;
+      this.service.post_data(this.funcName, postData).subscribe(response => {
+        this.loading = false;
+        if ( response.status === 'success') {
+          this.passwordMsg = '<small class="text-info">' + response.message + '</smal>';
+          this.service.setLocalStorageItem('userData', JSON.stringify(response.data));
+        } else {
+          this.passwordMsg = '<small class="text-danger">' + response.message + '</smal>';
+        }
+        setTimeout(function() {
+          This.passwordMsg = '';
+        }, 3000);
+      }, (error) => {
+        this.passwordMsg = '<small class="text-danger"> Something went wrong. Feel free to contact us .</smal>';
+      });
+    }
+  }
+
+}

src/app/home/home.module.spec.ts

+import { HomeModule } from './home.module';
+
+describe('HomeModule', () => {
+  let homeModule: HomeModule;
+
+  beforeEach(() => {
+    homeModule = new HomeModule();
+  });
+
+  it('should create an instance', () => {
+    expect(homeModule).toBeTruthy();
+  });
+});

src/app/home/home.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {moduleRouting} from './home.routing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+/* BOOTSTRAP-COMPONENTS */
+
+import { BsDatepickerModule } from 'ngx-bootstrap';
+
+import { defineLocale } from 'ngx-bootstrap/chronos';
+
+import { enGbLocale } from 'ngx-bootstrap/locale';
+
+defineLocale('engb', enGbLocale);
+
+import { DateSet } from './../provider/dateSet.pipe';
+import { SearchPipe } from './../provider/search.pipe';
+
+import { LoaderComponent } from './../loader/loader.component';
+
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { SlickCarouselModule } from 'ngx-slick-carousel';
+import { CountoModule } from 'angular2-counto';
+
+
+
+/* CUSTOM-COMPONENTS */
+
+import { IndexComponent } from './index/index.component';
+import { SearchresultComponent } from './searchresult/searchresult.component';
+import { BookingComponent } from './booking/booking.component';
+import { AccountComponent } from './account/account.component';
+import { SuccessComponent } from './success/success.component';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { ChangepasswordComponent } from './changepassword/changepassword.component';
+import { TermsComponent } from './terms/terms.component';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    BsDatepickerModule,
+    moduleRouting,
+    FlexLayoutModule,
+    ReactiveFormsModule,
+    FormsModule,
+    SlickCarouselModule,
+    InfiniteScrollModule,
+    CountoModule,
+    BsDatepickerModule.forRoot()
+  ],
+  declarations: [
+    IndexComponent,
+    SearchresultComponent,
+    BookingComponent,
+    AccountComponent,
+    TermsComponent,
+    SuccessComponent,
+    LoaderComponent,
+    DateSet,
+    SearchPipe,
+
+    ChangepasswordComponent
+  ]
+})
+export class HomeModule { }

src/app/home/home.routing.ts

+import { ModuleWithProviders } from '@angular/core'
+import { Routes, RouterModule } from '@angular/router';
+import { IndexComponent } from './index/index.component';
+import {SearchresultComponent} from './searchresult/searchresult.component';
+import {BookingComponent} from './booking/booking.component';
+import { AccountComponent } from './account/account.component';
+import { SuccessComponent } from './success/success.component';
+import { ChangepasswordComponent } from './changepassword/changepassword.component';
+import { AuthGuard } from './../provider/auth.guard';
+import { TermsComponent } from './terms/terms.component';
+
+const ModuleRoutes: Routes = [
+    { path: 'index', component: IndexComponent },
+    { path: 'searchresult/:id',	component: SearchresultComponent},
+    { path: 'booking/:data', component: BookingComponent },
+    { path: 'account',	component: AccountComponent, canActivate: [AuthGuard]},
+    { path: 'success/:bookId/:amount', component: SuccessComponent, canActivate: [AuthGuard] },
+    { path: 'changepassword/:id', component: ChangepasswordComponent },
+    { path: 'terms', component:TermsComponent}
+];
+
+export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes);
+

src/app/home/index/index.component.html

+<!-- LOADER-STARTS-->
+
+<!-- <app-loader></app-loader> -->
+
+<!-- LOADER-ENDS-->
+
+<!-- MAIN-WRAPPER-STARTS -->
+
+<div class="main_wrapper p0">
+    <section class="module parallax parallax-2">
+        <div class="main_banner">
+            <div class="container-fluid">
+                <div class="main_banner_inner">
+                    <div class="row slide_inner_content">
+                        <div class="col-md-7">
+                            <div class="slide_caption" *ngIf="isGroupShown(0)">
+                                <h1>ARE YOU GOING TO<br> PLAN ANYWHERE?</h1>
+                                <h4>We will help you <strong>to get Your tickets easily</strong></h4>
+                            </div>
+                            <div class="slide_caption" *ngIf="isGroupShown(1)">
+                                <h1>easily Track<br> your parcel </h1>
+                                <h4>with the <strong>Parcel ID</strong></h4>
+                            </div>
+                            <div class="slide_caption" *ngIf="isGroupShown(2)">
+                                <h1>Find where is<br> the bus reached</h1>
+                                <h4>with the <strong>ticket number</strong>
+                                </h4>
+                            </div>
+                            <div class="slide_caption" *ngIf="isGroupShown(3)">
+                                <h1>Cancel the<br> booked tickets</h1>
+                                <h4>with <strong>ticket number</strong>
+                                </h4>
+                            </div>
+
+                            <div class="advertise_slider">
+                                <ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="adslideConfig" (init)="slickInit($event)" (breakpoint)="breakpoint($event)" (afterChange)="afterChange($event)" (beforeChange)="beforeChange($event)">
+                                    <div ngxSlickItem class="slide">
+                                        <img src="../../../assets/imgs/ad1.png">
+                                    </div>
+                                    <div ngxSlickItem class="slide">
+                                        <img src="../../../assets/imgs/ad1.png">
+                                    </div>
+                                </ngx-slick-carousel>
+                            </div>
+                        </div>
+                        <div class="col-md-5">
+                            <div class="section_slider_wrapper" fxLayout="row" fxLayoutAlign="start center">
+                                <div class="bottom_shadow"></div>
+                                <div class="main_section_div" *ngIf="isGroupShown(0)" fxLayout="column" fxLayoutAlign="center none">
+                                    <form [formGroup]="homeForm" (ngSubmit)="bus_search()" autocomplete="off">
+                                        <div class="slide_section">
+                                            <div class="custom_row">
+                                                <p>FROM</p>
+                                                <div class="relative">
+                                                    <div class="loader_wrapper" *ngIf="sourceLoad">
+                                                        <div class="loader_small"></div>
+                                                    </div>
+                                                    <input class="" formControlName="sourceName" placeholder="From" id="keyword" (keyup)="value_change('source')" (click)="initCalled()" autofocus>
+                                                    <ul class="filter-select" *ngIf="sourceFlag">
+                                                        <li class="filter-select-list" *ngFor="let result of results">
+                                                            <p class="artist-name" (click)="select_source(result)">
+                                                                {{result.stationName}} </p>
+                                                            <span class="tags"></span>
+                                                    </ul>
+                                                    <div class="s_error absolute" *ngIf="!homeForm.controls['sourceName'].valid && searchSubmit">
+                                                        <div class="s_validation" *ngIf="homeForm.controls['sourceName'].hasError('required')">
+                                                            {{vs.errorList.required}} </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="custom_row relative">
+                                                <p>TO</p>
+                                                <div class="relative">
+                                                    <div class="loader_wrapper" *ngIf="destload">
+                                                        <div class="loader_small"></div>
+                                                    </div>
+                                                    <input class="" placeholder="To" formControlName="destinationName" (keyup)="value_change('dest')" (click)="initCalled()" autofocus>
+                                                    <ul class="filter-select" *ngIf="destFlag">
+                                                        <li class="filter-select-list" *ngFor="let result of destResults">
+                                                            <p class="artist-name" (click)="select_dest(result)">
+                                                                {{result.stationName}} </p>
+                                                            <span class="tags"></span>
+                                                    </ul>
+                                                    <div class="s_error absolute" *ngIf="!homeForm.controls['destinationName'].valid && searchSubmit">
+                                                        <div class="s_validation" *ngIf="homeForm.controls['destinationName'].hasError('required')">
+                                                            {{vs.errorList.required}} </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="custom_row">
+                                                <p>DATE OF JOURNEY</p>
+                                                <div class="relative">
+                                                    <input class="date_pick form-control borderNone" placeholder="Date of Journey" bsDatepicker formControlName="travelDate" (click)="initCalled()" [minDate]="today" [bsConfig]="{ showWeekNumbers:false }">
+                                                    <div class="s_error absolute" *ngIf="!homeForm.controls['travelDate'].valid && searchSubmit">
+                                                        <div class="s_validation" *ngIf="homeForm.controls['travelDate'].hasError('required')">
+                                                            {{vs.errorList.required}} </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+
+                                            <div class="custom_row">
+                                                <button class="prime_btn">
+                                              Find Bus
+                                            </button>
+                                            </div>
+                                            <h6>
+                                                MogoBus helps you to book bus tickets easily and pay securely and also available bus tracking and send parcels.
+                                            </h6>
+                                        </div>
+                                    </form>
+
+                                </div>
+                                <div class="main_section_div" *ngIf="isGroupShown(1)" fxLayout="column" fxLayoutAlign="center stretch">
+                                    <div class="slide_section">
+                                        <div class="custom_row">
+                                            <h5>TRACK PARCEL</h5>
+                                        </div>
+                                        <div class="custom_row">
+                                            <p>PARCEL ID</p>
+                                            <input class="" type="text">
+                                        </div>
+
+                                        <div class="custom_row">
+                                            <button class="prime_btn">
+                                                Track
+                                      </button>
+                                        </div>
+                                        <h6>
+                                            MogoBus helps you to book bus tickets easily and pay securely and also available bus tracking and send parcels.
+                                        </h6>
+
+                                    </div>
+                                </div>
+                                <div class="main_section_div" *ngIf="isGroupShown(2)" fxLayout="column" fxLayoutAlign="center stretch">
+                                    <div class="slide_section">
+                                        <div class="custom_row">
+                                            <h5>TRACK BUS</h5>
+                                        </div>
+                                        <div class="custom_row">
+                                            <p>TICKET NUMBER</p>
+                                            <input class="" type="text">
+                                        </div>
+
+                                        <div class="custom_row">
+                                            <button class="prime_btn">
+                                        Track
+                                      </button>
+                                        </div>
+                                        <h6>
+                                            MogoBus helps you to book bus tickets easily and pay securely and also available bus tracking and send parcels.
+                                        </h6>
+
+                                    </div>
+                                </div>
+                                <div class="main_section_div" *ngIf="isGroupShown(3)" fxLayout="column" fxLayoutAlign="center none">
+                                    <div class="slide_section">
+                                        <div class="custom_row">
+                                            <h5>Cancel Ticket</h5>
+                                        </div>
+                                        <div class="custom_row">
+                                            <p>Ticket number</p>
+                                            <input class="" type="text">
+                                        </div>
+                                        <div class="custom_row">
+                                            <p>email/phone number</p>
+                                            <input class="" type="text">
+                                        </div>
+
+                                        <div class="custom_row">
+                                            <button class="prime_btn">
+                                        cancel this ticket
+                                      </button>
+                                        </div>
+                                        <h6>
+                                            MogoBus helps you to book bus tickets easily and pay securely and also available bus tracking and send parcels.
+                                        </h6>
+                                    </div>
+                                </div>
+                            </div>
+
+                        </div>
+                    </div>
+                    <div class="slider_selection" fxLayout="column" fxLayoutAlign="space-around center">
+                        <ul fxLayout="column" fxLayoutAlign="center end">
+                            <div class="horzontal"></div>
+                            <li fxLayout="row" fxLayoutAlign="start center" (click)="toggleGroup(0)" [ngClass]="{active:isGroupShown(0)}">
+                                <span>
+                                    <div class="slider_circle_outter">
+                                        <div class="slider_circle"></div>
+                                    </div>
+                                </span>
+                                <span>BOOK TICKET</span>
+                            </li>
+                            <li fxLayout="row" fxLayoutAlign="start center" (click)="toggleGroup(1)" [ngClass]="{active:isGroupShown(1)}">
+                                <span>
+                                    <div class="slider_circle_outter">
+                                      <div class="slider_circle"></div>
+                                    </div>
+                                </span>
+                                <span>PARCEL TRACKING</span>
+                            </li>
+                            <li fxLayout="row" fxLayoutAlign="start center" (click)="toggleGroup(2)" [ngClass]="{active:isGroupShown(2)}">
+                                <span>
+                                    <div class="slider_circle_outter">
+                                      <div class="slider_circle"></div>
+                                    </div>
+                                </span>
+                                <span>BUS TRACKING</span>
+                            </li>
+                            <li fxLayout="row" fxLayoutAlign="start center" (click)="toggleGroup(3)" [ngClass]="{active:isGroupShown(3)}">
+                                <span>
+                                    <div class="slider_circle_outter">
+                                      <div class="slider_circle"></div>
+                                    </div>
+                                </span>
+                                <span>CANCEL TICKET</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
+
+<!-- MAIN-WRAPPER-ENDS -->
+
+<!-- WHO-ARE-WE-STARTS -->
+
+<section class="who_are_we">
+    <div class="container-fluid">
+        <div class="who_are_we_inner_container">
+            <div class="row">
+                <div class="col-md-6">
+                    <div class="whoare_we_slider">
+                        <ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="whoareweConfig" (init)="slickInit($event)" (breakpoint)="breakpoint($event)" (afterChange)="afterChange($event)" (beforeChange)="beforeChange($event)">
+                            <div ngxSlickItem class="slide">
+                                <img src="../../../assets/imgs/slide.png">
+                            </div>
+                            <div ngxSlickItem class="slide">
+                                <img src="../../../assets/imgs/slide.png">
+                            </div>
+                            <div ngxSlickItem class="slide">
+                                <img src="../../../assets/imgs/slide.png">
+                            </div>
+                            <div ngxSlickItem class="slide">
+                                <img src="../../../assets/imgs/slide.png">
+                            </div>
+                        </ngx-slick-carousel>
+                    </div>
+                </div>
+                <div class="col-md-6" fxLayout="column" fxLayoutAlign="center start">
+                    <div class="whoare_we_detail">
+                        <h3>Who we are ?</h3>
+                        <p>
+                            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden- Sydney College in Virginia, looked up
+                            one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
+                            of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum
+                            dolor sit amet..", comes from a line in section 1.10.32.
+                        </p>
+                        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden- Sydney College
+                            in Virginia.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- WHO-ARE-WE-ENDS -->
+
+<!-- OUR-EXPERIENCE-STARTS -->
+
+<section class="experience_section module parallax">
+    <div class="experience_inner_container">
+        <h3>Our Experience</h3>
+        <div class="row">
+            <div class="col-md-3">
+                <h5>130000+</h5>
+                <p>USERS</p>
+            </div>
+            <div class="col-md-3">
+                <h5>6000+</h5>
+                <p>TRAVEL AGENCIES</p>
+            </div>
+            <div class="col-md-3">
+                <h5>18000+</h5>
+                <p>ROUTES</p>
+            </div>
+            <div class="col-md-3">
+                <h5>1200000+</h5>
+                <p>TICKETS SOLD</p>
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- OUR-EXPERIENCE-ENDS -->
+
+<!-- OFFER-AVAILABLE-STARTS -->
+
+<section class="offer_wrapper">
+    <div class="container-fluid">
+        <div class="who_are_we_inner_container">
+            <div class="row">
+                <div class="col-md-6" fxLayout="column" fxLayoutAlign="center start">
+                    <div class="offer_slider_detail">
+                        <h3>Offer Available</h3>
+                        <p>
+                            Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
+                            one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature.
+                        </p>
+
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="offer_slider">
+                        <ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="adslideConfig" (init)="slickInit($event)" (breakpoint)="breakpoint($event)" (afterChange)="afterChange($event)" (beforeChange)="beforeChange($event)">
+                            <div ngxSlickItem class="slide">
+                                <div class="offer_inner_layer_one">
+                                    <div class="offer_inner_layer_two">
+                                        <div class="offer_slide_content">
+                                            <div class="top_img">
+                                                <img src="../../../assets/imgs/mongo.png">
+                                            </div>
+                                            <div class="slide_inner_content">
+                                                <h4>ASIAN AGENCIES</h4>
+                                                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
+                                                <h6>
+                                                    <span>1006 Bookings</span>
+                                                    <span>|</span>
+                                                    <span>100 Buses</span>
+                                                    <span>|</span>
+                                                    <span>36 Routes</span>
+                                                </h6>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div ngxSlickItem class="slide">
+                                <div class="offer_inner_layer_one">
+                                    <div class="offer_inner_layer_two">
+                                        <div class="offer_slide_content">
+                                            <div class="top_img">
+                                                <img src="../../../assets/imgs/bus_2.jpg">
+                                            </div>
+                                            <div class="slide_inner_content">
+                                                <h4>ASIAN AGENCIES</h4>
+                                                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
+                                                <h6>
+                                                    <span>1006 Bookings</span>
+                                                    <span>|</span>
+                                                    <span>100 Buses</span>
+                                                    <span>|</span>
+                                                    <span>36 Routes</span>
+                                                </h6>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div ngxSlickItem class="slide">
+                                <div class="offer_inner_layer_one">
+                                    <div class="offer_inner_layer_two">
+                                        <div class="offer_slide_content">
+                                            <div class="top_img">
+                                                <img src="../../../assets/imgs/bus_3.jpg">
+                                            </div>
+                                            <div class="slide_inner_content">
+                                                <h4>ASIAN AGENCIES</h4>
+                                                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
+                                                <h6>
+                                                    <span>1006 Bookings</span>
+                                                    <span>|</span>
+                                                    <span>100 Buses</span>
+                                                    <span>|</span>
+                                                    <span>36 Routes</span>
+                                                </h6>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </ngx-slick-carousel>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</section>
+
+<!-- OFFER-AVAILABLE-ENDS -->
\ No newline at end of file

src/app/home/index/index.component.scss

+@import "../../../styles.scss";
+.filter-select {
+    position: absolute;
+    margin: 0px;
+    padding: 0px;
+    width: 100%;
+    background: #fff;
+    z-index: 99;
+}
+
+.filter-select li {
+    background: #fff;
+    list-style: none;
+    cursor: pointer;
+}
+
+.filter-select li p:hover {
+    background: #ff7800;
+    color: #fff !important;
+}
+
+.filter-select li p:focus {
+    background: #ff7800;
+    color: #fff !important;
+}
+
+.filter-select li p {
+    padding: 10px !important;
+}
+
+.filter-select li p {
+    color: #313131 !important;
+}
+
+.main_banner {
+    width: 100%;
+    position: relative;
+    background-image: url("/assets/imgs/mask_bg.png");
+    background-position: center;
+    background-size: auto;
+    background-repeat: no-repeat;
+    height: 100vh;
+    .main_banner_inner {
+        width: 95%;
+        margin: 0 auto;
+        height: 100vh;
+        padding-top: 15%;
+        padding-bottom: 15%;
+        position: relative;
+        .slide_caption {
+            h1 {
+                color: $white-color;
+                font-weight: 700;
+                font-size: 4em;
+                margin-bottom: 0px;
+                text-transform: uppercase;
+                transition-timing-function: ease-in-out;
+                transition: 0.2s;
+            }
+            h4 {
+                color: $white-color;
+                color: #fff;
+                font-weight: 300;
+                font-size: 19px;
+                text-transform: uppercase;
+                margin-top: 0px;
+                transition-timing-function: ease-in-out;
+                transition: 0.2s;
+            }
+        }
+        .slide_inner_content {
+            width: 100%;
+            margin: 0 auto;
+            .advertise_slider {
+                margin-top: 30px;
+                width: calc(100% - 40%);
+                height: 280px;
+                background-color: #fff;
+                position: relative;
+                img {
+                    width: 100%;
+                    height: 100%;
+                    object-fit: cover;
+                    object-position: center;
+                }
+            }
+        }
+        .slider_selection {
+            position: absolute;
+            right: 0px;
+            top: 0px;
+            bottom: 0px;
+            width: 190px;
+            ul {
+                margin: 0px;
+                padding: 0px;
+                width: 100%;
+                height: auto;
+                position: relative;
+                .horzontal {
+                    position: absolute;
+                    top: 40px;
+                    bottom: 40px;
+                    left: 14px;
+                    width: 10px;
+                    border-left: 1px dotted $dark-color;
+                }
+                li {
+                    width: 100%;
+                    text-align: left;
+                    list-style: none;
+                    font-size: 13px;
+                    line-height: 21px;
+                    color: $dark-color;
+                    padding: 10px;
+                    padding-top: 20px;
+                    padding-bottom: 20px;
+                    margin: 5px;
+                    cursor: pointer;
+                    .slider_circle_outter {
+                        padding: 2px;
+                        border: 2px solid transparent;
+                        margin-right: 10px;
+                        border-radius: 50%;
+                        .slider_circle {
+                            width: 10px;
+                            height: 10px;
+                            border-radius: 50%;
+                            background-color: $dark-color;
+                        }
+                    }
+                }
+                .active {
+                    .slider_circle_outter {
+                        padding: 2px;
+                        border: 2px solid $dark-color;
+                        margin-right: 10px;
+                        border-radius: 50%;
+                        background-color: $primary-color;
+                    }
+                    span {
+                        color: $white-color;
+                    }
+                }
+            }
+        }
+        .section_slider_wrapper {
+            width: 480px;
+            position: relative;
+            .bottom_shadow {
+                position: absolute;
+                bottom: -20px;
+                left: 10px;
+                right: 10px;
+                height: 50px;
+                background-image: url("../../../assets/imgs/shadow.png");
+                background-repeat: no-repeat;
+                background-size: cover;
+            }
+        }
+        .main_section_div {
+            position: relative;
+            transition-timing-function: ease-in-out;
+            transition: 0.2s;
+            padding: 30px;
+            width: 100%;
+            background-color: $dark-color;
+            min-height: 500px;
+            border-radius: 10px;
+            .slide_section {
+                .custom_row {
+                    padding-bottom: 30px;
+                    h5 {
+                        color: $primary-color;
+                        text-align: center;
+                        font-size: 45px;
+                        font-weight: 600;
+                        margin-bottom: 0px;
+                        margin-top: 0px;
+                        text-transform: uppercase;
+                    }
+                    p {
+                        margin: 0px;
+                        color: $white-color;
+                        font-size: 13px;
+                        padding-bottom: 5px;
+                        text-align: left;
+                        text-transform: uppercase;
+                    }
+                    input {
+                        border-radius: 6px;
+                        width: 100%;
+                        height: 50px;
+                        text-transform: capitalize;
+                        padding-left: 15px;
+                        font-size: 18px;
+                        font-weight: 300;
+                        border: none !important;
+                        outline: none !important;
+                        &:focus {
+                            border: none !important;
+                            outline: none !important;
+                        }
+                        &::placeholder {
+                            color: #b3b3b3;
+                            border: none !important;
+                            outline: none !important;
+                        }
+                    }
+                    .prime_btn {
+                        border-radius: 6px;
+                        height: 50px;
+                        width: 100%;
+                        font-size: 14px;
+                        font-weight: 500;
+                        border: none;
+                        background-color: $primary-color;
+                        color: $white-color;
+                        text-transform: uppercase;
+                    }
+                }
+                h6 {
+                    color: #626d7b;
+                    text-align: center;
+                    margin: 0px;
+                    padding: 0px;
+                    font-size: 12px;
+                    line-height: 21px;
+                }
+            }
+        }
+        .date_pick {
+            background-image: url("/assets/imgs/date.png");
+            background-position: right 15px top 10px;
+            background-repeat: no-repeat;
+        }
+    }
+}
+
+section.module.parallax-2 {
+    background-image: linear-gradient(to right, #FE6509, #FE8109);
+}
+
+.who_are_we {
+    padding-top: 120px;
+    padding-bottom: 100px;
+    background-image: url("/assets/imgs/mask_bg1.png");
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    .who_are_we_inner_container {
+        max-width: 90%;
+        margin: 0 auto;
+        h3 {
+            color: $dark-color;
+            font-size: 50px;
+            text-transform: uppercase;
+            margin: 0px;
+            padding: 0px;
+            font-weight: 900;
+            padding-bottom: 40px;
+        }
+        p {
+            color: $dark-color;
+            font-size: 15px;
+            line-height: 30px;
+            padding-bottom: 15px;
+        }
+        .whoare_we_slider {
+            width: calc(100% - 15%);
+            margin: 0 auto;
+            position: relative;
+            img {
+                width: 100%;
+                height: auto;
+            }
+        }
+        .whoare_we_detail {
+            width: calc(100% - 15%);
+            margin: 0 auto;
+        }
+    }
+}
+
+.experience_section {
+    padding-top: 120px;
+    padding-bottom: 150px;
+    background-image: url("/assets/imgs/experience.png");
+    background-color: rgba(0, 0, 0, 0.9);
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    .experience_inner_container {
+        max-width: 90%;
+        margin: 0 auto;
+        h3 {
+            color: $white-color;
+            font-size: 50px;
+            text-transform: uppercase;
+            text-align: center;
+            margin: 0px;
+            padding: 0px;
+            font-weight: 900;
+            padding-bottom: 80px;
+        }
+        h5 {
+            color: $white-color;
+            text-align: center;
+            font-size: 60px;
+            font-weight: 300;
+        }
+        p {
+            color: $white-color;
+            text-align: center;
+            font-size: 14px;
+            font-weight: 600;
+        }
+    }
+}
+
+.offer_wrapper {
+    padding-top: 120px;
+    padding-bottom: 100px;
+    background: $offwhite;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    .who_are_we_inner_container {
+        max-width: 90%;
+        margin: 0 auto;
+        h3 {
+            color: $dark-color;
+            font-size: 50px;
+            text-transform: uppercase;
+            margin: 0px;
+            padding: 0px;
+            font-weight: 900;
+            padding-bottom: 40px;
+        }
+        p {
+            color: $dark-color;
+            font-size: 15px;
+            line-height: 30px;
+            padding-bottom: 15px;
+        }
+        .offer_slider_detail {
+            width: calc(100% - 15%);
+            margin: 0 auto;
+        }
+        .offer_slider {
+            width: 100%;
+            .slide {
+                height: 500px;
+                padding: 20px;
+            }
+            .offer_inner_layer_one {
+                width: calc(100% - 40%);
+                margin: 0 auto;
+                height: 250px;
+                background-color: $white-color;
+                -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
+                -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
+                box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
+                position: relative;
+                top: 80px;
+                .offer_inner_layer_two {
+                    width: calc(100% - 10%);
+                    margin: 0 auto;
+                    height: 300px;
+                    position: relative;
+                    top: -20px;
+                    background-color: $white-color;
+                    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
+                    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
+                    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
+                    .offer_slide_content {
+                        width: 320px;
+                        height: 400px;
+                        background-color: $white-color;
+                        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
+                        -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
+                        box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
+                        position: relative;
+                        top: -50px;
+                        margin: 0 auto;
+                        .top_img {
+                            width: 100%;
+                            height: 180px;
+                            img {
+                                width: 100%;
+                                height: 100%;
+                                object-fit: cover;
+                                object-position: center;
+                            }
+                        }
+                        .slide_inner_content {
+                            padding: 10px;
+                            padding-left: 20px;
+                            padding-right: 20px;
+                            h4 {
+                                margin: 0px;
+                                padding: 0px;
+                                color: $dark-color;
+                                text-align: center;
+                                font-weight: 800;
+                            }
+                            p {
+                                margin: 0px;
+                                padding: 0px;
+                                color: $dark-color;
+                                text-align: center;
+                                line-height: 20px;
+                                font-size: 12px;
+                                padding-top: 10px;
+                                padding-bottom: 10px;
+                            }
+                            h6 {
+                                margin: 0px;
+                                color: $brown-theme;
+                                text-align: center;
+                                font-size: 12px;
+                                padding-top: 10px;
+                                padding-bottom: 10px;
+                                font-weight: 500;
+                                span {
+                                    margin-left: 5px;
+                                    margin-right: 5px;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+.is-other-month {
+    display: none !important;
+}
\ No newline at end of file

src/app/home/index/index.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IndexComponent } from './index.component';
+
+describe('IndexComponent', () => {
+  let component: IndexComponent;
+  let fixture: ComponentFixture<IndexComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ IndexComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IndexComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/index/index.component.ts

+import { Component, OnInit, Input } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { BsLocaleService } from 'ngx-bootstrap/datepicker';
+import { FormGroup, FormBuilder, Validators, ValidationErrors } from '@angular/forms';
+import { trigger, transition, state, animate, style } from '@angular/animations';
+import { ValidationService } from './../../provider/validation.service';
+import { WebService } from './../../provider/web.service';
+import $ from "jquery";
+import * as moment from 'moment';
+import { debounceTime, distinctUntilChanged, switchMap, startWith } from 'rxjs/operators';
+
+
+@Component({
+  selector: 'app-index',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.scss'],
+  animations: [
+    trigger('slideInOut', [
+      transition(':enter', [
+        style({ 
+          transform: 'translateY(100%)',
+         }),
+        animate('600ms ease-in', 
+        style({ 
+          transform: 'translateY(0%)'
+         }))
+      ]),
+      transition(':leave', [
+        style({ 
+          transform: 'translateY(0%)'
+         }),
+        animate('600ms ease-out', 
+        style({ 
+          transform: 'translateY(100%)'
+         }))
+      ])
+    ])
+  ]
+  
+
+})
+export class IndexComponent implements OnInit {
+
+
+  @Input() currentState;
+  adslideConfig = { 
+    "slidesToShow": 1,
+    "slidesToScroll": 1,
+    fade: true,
+    "arrows": true, 
+  };
+
+  whoareweConfig = {
+    "slidesToShow": 1,
+    "slidesToScroll": 1,
+    
+    "arrows": true,
+  };
+
+  offerConfig = {
+    "slidesToShow": 1,
+    "slidesToScroll": 1,
+    "arrows": true,
+  };
+  shownGroup: number;
+
+
+  slickGoTo(){
+    alert("hi");
+  }
+
+  slickInit(e) {
+    console.log('slick initialized');
+  }
+
+  breakpoint(e) {
+    console.log('breakpoint');
+  }
+
+  afterChange(e) {
+
+  }
+
+  beforeChange(e) {
+    console.log('beforeChange');
+  }
+  source_field: any;
+  homeForm: FormGroup;
+  results: any[];
+  funcName: any;
+  desfuncName: any;
+  searchSubmit: boolean;
+  sourceFlag: boolean;
+  destResults: any[];
+  destFlag: boolean;
+  main_error: boolean;
+  today: any;
+  source_state: boolean;
+  dest_state: boolean;
+  sourceLoad: boolean;
+  destload: boolean;
+  promocodedata:any;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private _localeService: BsLocaleService,
+    private formBuilder: FormBuilder,
+    public vs: ValidationService,
+    public service: WebService,
+    ) {
+
+    this.shownGroup = 0;
+    this._localeService.use('engb');
+    this.homeForm = this.formBuilder.group({
+      fromStationId: ['', Validators.compose([Validators.required])],
+      toStationId: ['', Validators.compose([Validators.required])],
+      travelDate: ['', Validators.compose([Validators.required])],
+      returnDate: [''],
+      sourceName: ['', Validators.compose([Validators.required])],
+      destinationName: ['', Validators.compose([Validators.required])],
+    });
+    this.searchSubmit = false;
+    this.sourceFlag = false;
+    this.main_error = false;
+    this.source_state = false;
+    this.dest_state = false;
+    this.sourceLoad = false;
+    this.destload = false;
+    this.destFlag = false;
+    this.today = new Date();
+
+    
+  }
+
+
+
+
+
+  isGroupShown(group) {
+    return this.shownGroup === group;
+  }
+  toggleGroup(group) {
+    if (this.isGroupShown(group)) {
+     this.shownGroup = group;
+    } else {
+      this.shownGroup = group;
+    }
+  }
+
+
+  ngOnInit() {
+    this.service.get_data('get_promocode').subscribe(response=> {
+      if(response.status === "success") {      
+         this.promocodedata = this.service.ObjArray(response.data);
+      }
+      console.log('Promocodedata', this.promocodedata);
+    })
+    this.funcName = 'source_location/';
+    this.homeForm.get('sourceName').valueChanges.pipe(debounceTime(400), distinctUntilChanged(), switchMap((query) =>
+    this.service.get_data(this.funcName +  this.filterQuery(query, 'source')))).subscribe(response => {
+      console.log(this.source_state);
+      this.sourceLoad = false;
+      if (response.status === 'success' && this.source_state === true) {
+        this.results = response.data;
+        console.log(this.results);
+        if (this.results.length > 0 ) {
+          this.sourceFlag = true;
+        } else {
+          this.sourceFlag = false;
+        }
+        console.log(this.sourceFlag);
+      } else {
+        this.results = [];
+        this.sourceFlag = false;
+      }
+    });
+
+    this.desfuncName = 'destination_location/';
+    this.homeForm.get('destinationName').valueChanges.pipe(debounceTime(500), distinctUntilChanged(), switchMap((query) =>
+    this.service.get_data(this.desfuncName + this.filterQuery(query, 'dest') + '/' + this.homeForm.controls['fromStationId'].value)))
+    .subscribe(response => {
+      this.destload = false;
+      if (response.status === 'success' && this.dest_state === true) {
+        this.destResults = response.data;
+        console.log(this.results);
+        if (this.destResults.length > 0 ) {
+          this.destFlag = true;
+        } else {
+          this.destFlag = false;
+        }
+        console.log(this.destFlag);
+      } else {
+        this.destResults = [];
+        this.destFlag = false;
+      }
+    });
+
+  }
+
+  filterQuery(query, type: string) {
+    if (type === 'source') {
+      this.sourceLoad = true;
+    } else {
+      this.destload = true;
+    }
+    if (query !== null){
+      return query.replace(/[^a-zA-Z ]/g, '');
+    } else {
+      return '';
+    }
+  }
+
+  select_source(data: any) {
+    this.sourceFlag = false;
+    this.source_state = false;
+    this.homeForm.controls['sourceName'].patchValue(data.stationName);
+    this.homeForm.controls['fromStationId'].patchValue(data.stationCode);
+  }
+
+  select_dest(data: any) {
+    this.destFlag = false;
+    this.dest_state = false;
+    this.homeForm.controls['destinationName'].patchValue(data.stationName);
+    this.homeForm.controls['toStationId'].patchValue(data.stationCode);
+  }
+
+  onChanges(): void {
+  }
+
+  bus_search() {
+    this.main_error = false;
+    this.searchSubmit = true;
+    const response = this.homeForm.value;
+    const This = this;
+    console.log(this.homeForm.value);
+    if (this.homeForm.valid) {
+      const searchObj = encodeURIComponent(JSON.stringify(this.homeForm.value));
+      this.router.navigate(['searchresult/' + searchObj]);
+    } else {
+      const data = this.homeForm.value;
+      if (data.sourceName !== '' && data.destinationName !== '' && data.travelDate !== '') {
+        if (data.fromStationId === '' || data.toStationId === '') {
+          this.main_error = true;
+        }
+      }
+    }
+    console.log('tested');
+  }
+
+  initCalled() {
+    this.sourceFlag = false;
+    this.destFlag = false;
+    console.log(this.source_state);
+  }
+
+  resetFun() {
+    this.searchSubmit = false;
+    this.homeForm.reset();
+  }
+
+
+ goToPage(path: any, data= null) {
+    console.log(data);
+    this.router.navigateByUrl(path, { queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  min_return () {
+    const d = this.homeForm.get('travelDate').value;
+    return d;
+  }
+
+  value_change(type: string) {
+    console.log(this.source_state);
+    if (type === 'source') {
+      this.source_state = true;
+    } else {
+      this.dest_state = true;
+    }
+  }
+}

src/app/home/searchresult/searchresult.component.html

+<div *ngIf="bookData">
+    <div class="search_wrapper">
+
+        <!-- SEARCH-TASK-BAR-STARTS -->
+
+        <div class="search_wrapper_inner">
+            <div class="container-fluid">
+                <div class="search_inner_container" *ngIf="searchData">
+                    <div class="row" *ngIf="!editable" fxLayout="row" fxLayoutAlign="space-between center">
+                        <div>
+                            <div fxLayout="row" fxLayoutAlign="start end" fxLayoutGap="40px">
+                                <div>
+                                    <p>From</p>
+                                    <h4 class="textLeft">
+                                        {{searchData.sourceName | titlecase }}
+
+                                    </h4>
+                                </div>
+                                <div (click)="switch_loc()" fxLayout="column" fxLayoutAlign="end center">
+                                    <h4 class="borderNone arrow">
+                                        ===
+                                    </h4>
+                                </div>
+                                <div>
+                                    <p>To</p>
+                                    <h4 class="textLeft">
+                                        {{searchData.destinationName | titlecase }}
+                                    </h4>
+                                </div>
+                            </div>
+                        </div>
+                        <div>
+                            <p class="textCenter">Date of Journey</p>
+                            <h4 class="borderNone" fxLayout="row" fxLayoutAlign="center center">
+                                <div class="arrow arrow_left" (click)="change_date('prev')">
+
+                                </div>
+                                {{searchData.travelDate | date:'dd - MMMM - yyyy' }}
+                                <div class="arrow arrow_right" (click)="change_date('next')">
+
+                                </div>
+                            </h4>
+                        </div>
+                        <div fxLayout="column" fxLayoutAlign="center center">
+                            <button class="modify_btn" (click)="modify()">Modify Search</button>
+                        </div>
+                    </div>
+                    <form [formGroup]="searchForm" (ngSubmit)="bus_search()" autocomplete="off">
+                        <div class="row" *ngIf="editable" fxLayout="row" fxLayoutAlign="space-between center">
+                            <div fxLayout="row" fxLayoutAlign="start end" fxLayoutGap="40px">
+                                <div>
+
+                                    <p>From</p>
+                                    <h4 class="textLeft">
+
+                                        <input class="" formControlName="sourceName" (keyup)="value_change('source')" (click)="initCalled()">
+                                    </h4>
+                                    <ul class="filter-select" *ngIf="sourceFlag">
+                                        <li class="filter-select-list" *ngFor="let result of results">
+                                            <p class="artist-name" (click)="select_source(result)"> {{result.stationName}} </p>
+                                            <span class="tags"></span>
+                                    </ul>
+                                    <div class="s_error absolute" *ngIf="!searchForm.controls['sourceName'].valid && searchSubmit">
+                                        <div class="s_validation" *ngIf="searchForm.controls['sourceName'].hasError('required')">
+                                            {{vs.errorList.required}} </div>
+                                    </div>
+                                </div>
+                                <div>
+                                    <h4 class="borderNone arrow">
+                                        ===
+                                    </h4>
+                                </div>
+                                <div>
+                                    <p>To</p>
+                                    <h4 class="textLeft">
+                                        <input class="" formControlName="destinationName" (keyup)="value_change('dest')" (click)="initCalled()">
+                                    </h4>
+                                    <ul class="filter-select" *ngIf="destFlag">
+                                        <li class="filter-select-list" *ngFor="let result of destResults">
+                                            <p class="artist-name" (click)="select_dest(result)"> {{result.stationName}} </p>
+                                            <span class="tags"></span>
+                                    </ul>
+                                    <div class="s_error absolute" *ngIf="!searchForm.controls['destinationName'].valid && searchSubmit">
+                                        <div class="s_validation" *ngIf="searchForm.controls['destinationName'].hasError('required')">
+                                            {{vs.errorList.required}} </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div>
+                                <p class="">Date of Journey</p>
+                                <h4 class="borderNone">
+                                    <input class="date_pick form-control dateof_journey" placeholder="Date of Journey" bsDatepicker formControlName="travelDate" [minDate]="today" [bsConfig]="{ showWeekNumbers:false }">
+                                </h4>
+                                <div class="s_error absolute" *ngIf="!searchForm.controls['travelDate'].valid && searchSubmit">
+                                    <div class="s_validation" *ngIf="searchForm.controls['travelDate'].hasError('required')">
+                                        {{vs.errorList.required}} </div>
+                                </div>
+                            </div>
+                            <div>
+                                <p></p>
+                                <button class="modify_btn">Find
+                    Bus </button>
+                            </div>
+
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+
+        <!-- SEARCH-TASK-BAR-ENDS -->
+
+    </div>
+</div>
+
+
+
+
+<!-- MAIN-CONTENT-STARTS -->
+
+<div class="main_content_inner">
+    <div class="container-fluid relative">
+        <div class="loader_common_main_wrapper" *ngIf="loading">
+            <div class="loader"></div>
+        </div>
+        <div class="main_content_inner_container">
+            <div class="row">
+                <div class="col-md-2">
+
+                    <!-- STARTS-SIDE-FILTER-SECTION -->
+
+                    <div class="Filter_bay">
+                        <h4>Filter by</h4>
+                        <h5 data-toggle="collapse" data-target="#filter1">Travels by</h5>
+                        <ul id="filter1" class="collapse show" *ngIf="filter_type">
+                            <li *ngFor="let travels of filter_type.travels">
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox" (click)="choose_type('travels',travels.id,$event)" />
+                              <i class="input-helper"></i>
+                              <span>{{travels.name}}</span>
+                            </label>
+                                </div>
+                            </li>
+                        </ul>
+                        <h5 data-toggle="collapse" data-target="#filter2">Bus Type</h5>
+                        <ul id="filter2" class="collapse show">
+                            <li>
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox" (click)="choose_type('type','A/C',$event)" />
+                              <i class="input-helper"></i>
+                              <span>A/C</span>
+                            </label>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox" (click)="choose_type('type','Non A/C',$event)" />
+                              <i class="input-helper"></i>
+                              <span>Non A/C</span>
+                            </label>
+                                </div>
+                            </li>
+                            <li>
+                                <hr />
+                            </li>
+                            <li>
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox" (click)="choose_type('type','Sleeper',$event)" />
+                              <i class="input-helper"></i>
+                              <span>Sleeper</span>
+                            </label>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox" (click)="choose_type('type','Semi Sleeper',$event)" />
+                              <i class="input-helper"></i>
+                              <span>Semi Sleeper</span>
+                            </label>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox" (click)="choose_type('type','Pushback',$event)" />
+                              <i class="input-helper"></i>
+                              <span>Pushback</span>
+                            </label>
+                                </div>
+                            </li>
+                            <li>
+                                <hr />
+                            </li>
+                            <li>
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox" (click)="choose_type('type','MultiAxle',$event)" />
+                              <i class="input-helper"></i>
+                              <span>Multiaxle</span>
+                            </label>
+                                </div>
+                            </li>
+                        </ul>
+                        <h5 data-toggle="collapse" data-target="#filter3">Pickup Point</h5>
+                        <ul id="filter3" class="collapse" *ngIf="filter_type">
+                            <li *ngFor="let pick_point of filter_type.pick_point">
+                                <div class="checkbox" (click)="choose_type('pick_point',pick_point.name,$event)">
+                                    <label>
+                              <input type="checkbox" />
+                              <i class="input-helper"></i>
+                              <span>{{pick_point.name}}</span>
+                            </label>
+                                </div>
+                            </li>
+                        </ul>
+                        <h5 data-toggle="collapse" data-target="#filter4">Dropping point</h5>
+                        <ul id="filter4" class="collapse" *ngIf="filter_type">
+                            <li *ngFor="let drop_point of filter_type.drop_point">
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox" (click)="choose_type('drop_point',drop_point.name,$event)" />
+                              <i class="input-helper"></i>
+                              <span>{{drop_point.name}}</span>
+                            </label>
+                                </div>
+                            </li>
+                        </ul>
+                        <h5 data-toggle="collapse" data-target="#filter5">Timing</h5>
+                        <ul id="filter5" class="collapse">
+                            <li>
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox"
+                                (click)="choose_type('time',time_string('06:00:00 - 12:00:00'),$event)" />
+                              <i class="input-helper"></i>
+                              <span>06:00 am - 12:00 pm</span>
+                            </label>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox"
+                                (click)="choose_type('time',time_string('12:00:00 - 18:00:00'),$event)" />
+                              <i class="input-helper"></i>
+                              <span>12:00 pm - 06:00 pm</span>
+                            </label>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox"
+                                (click)="choose_type('time',time_string('18:00:00 - 21:00:00'),$event)" />
+                              <i class="input-helper"></i>
+                              <span>06:00 pm - 09:00 pm</span>
+                            </label>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox"
+                                (click)="choose_type('time',time_string('21:00:00 - 23:59:59'),$event)" />
+                              <i class="input-helper"></i>
+                              <span>09:00 pm - 12:00 am</span>
+                            </label>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox"
+                                (click)="choose_type('time',time_string('00:00:00 - 06:00:00'),$event)" />
+                              <i class="input-helper"></i>
+                              <span>12:00 am - 06:00 am</span>
+                            </label>
+                                </div>
+                            </li>
+                        </ul>
+                        <h5 data-toggle="collapse" data-target="#filter6">Rating</h5>
+                        <ul id="filter6" class="collapse">
+                            <li>
+                                <div class="checkbox" (click)="choose_type('rate',5,$event)">
+                                    <label>
+                              <input type="checkbox" />
+                              <i class="input-helper"></i>
+                              <span>5</span>
+                            </label>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox" (click)="choose_type('rate',4,$event)" />
+                              <i class="input-helper"></i>
+                              <span>4</span>
+                            </label>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox" (click)="choose_type('rate',3,$event)" />
+                              <i class="input-helper"></i>
+                              <span>3</span>
+                            </label>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="checkbox" (click)="choose_type('rate',2,$event)">
+                                    <label>
+                              <input type="checkbox" />
+                              <i class="input-helper"></i>
+                              <span>2</span>
+                            </label>
+                                </div>
+                            </li>
+                            <li>
+                                <div class="checkbox">
+                                    <label>
+                              <input type="checkbox" (click)="choose_type('rate',1,$event)" />
+                              <i class="input-helper"></i>
+                              <span>1</span>
+                            </label>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+
+                    <!-- ENDS-SIDE-FILTER-SECTION -->
+
+                </div>
+                <div class="col-md-10" *ngIf="service_status">
+                    <!-- STARTS-SEARCH-RESULTS-SECTION -->
+
+                    <div class="results_bay" *ngIf="bus_result; else noResult">
+                        <ul>
+
+                            <!-- STARTS-RESULT-LIST-SECTION -->
+
+                            <li *ngFor="let bus of bus_result.searchResult | searchPipe: user_filter; let i = index">
+                                <div class="result_inner">
+                                    <div class="row">
+                                        <div class="col-md-2">
+                                            <h5>{{bus.operatorName}}</h5>
+                                            <p>{{bus.busType}}</p>
+                                        </div>
+                                        <div class="col-md-2">
+                                            <h4>DEPARTURE</h4>
+                                            <p>{{bus.departureTime | dateSet}}</p>
+                                        </div>
+                                        <div class="col-md-2">
+                                            <h4>ARRIVAL</h4>
+                                            <p>{{bus.arrivalTime | dateSet}}</p>
+                                        </div>
+                                        <div class="col-md-1">
+                                            <h4>DURATION</h4>
+                                            <p>{{get_filter_journey(bus.journeyTime)}} hours</p>
+                                        </div>
+                                        <div class="col-md-1">
+                                            <h4>SEATS</h4>
+                                            <p>{{bus.availableSeats}} Seats</p>
+                                        </div>
+                                        <div class="col-md-2">
+                                            <h4>RATTING</h4>
+                                            <fieldset class="rating">
+                                                <input type="radio" value="5" [checked]="bus.rate===5" />
+                                                <label title="Rocks!" (click)='onClick(5)'>5 stars</label>
+
+                                                <input type="radio" value="4" [checked]="bus.rate===4" />
+                                                <label title="Pretty good" (click)='onClick(4)'>4 stars</label>
+
+                                                <input type="radio" value="3" [checked]="bus.rate===3" />
+                                                <label title="Meh" (click)='onClick(3)'>3 stars</label>
+
+                                                <input type="radio" value="2" [checked]="bus.rate===2" />
+                                                <label title="Kinda bad" (click)='onClick(2)'>2 stars</label>
+
+                                                <input type="radio" value="1" [checked]="bus.rate===1" />
+                                                <label title="Sucks big time" (click)='onClick(1)'>1 star</label>
+                                            </fieldset>
+                                        </div>
+                                        <div class="col-md-1">
+                                            <h4>FARE</h4>
+                                            <h5>
+                                                <strong>Starts from</strong><br> &#8377; {{checkPrice(bus.ticketFare,bus.scheduleCode)}}
+                                            </h5>
+                                        </div>
+                                        <div class="col-md-1" fxLayout="column" fxLayoutAlign="center end">
+                                            <button class="view_btn secondary_color_bg" data-toggle="collapse" [attr.data-target]="'#viewseat' + bus.scheduleCode" (click)="get_seats(bus.scheduleCode, bus.scheduleCode, bus.operatorCode)">View
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div class="seats_details relative" id="viewseat{{bus.scheduleCode}}" class="collapse">
+                                    <div class="loader_common_main_wrapper" *ngIf="seatLoad">
+                                        <div class="loader"></div>
+                                    </div>
+                                    <div class="seat_arragement_div">
+                                        <div class="row" *ngIf="bus.seat_layout">
+                                            <div class="col-md-2">
+
+
+                                            </div>
+                                            <div class="col-md-4">
+                                                <div class="seat_positioning">
+                                                    <h4>Seat layout</h4>
+
+                                                    <!-- STARTS-SEAT-SECTION -->
+
+                                                    <ul class="nav nav-tabs bus_deck_tabs">
+                                                        <li class="nav-item">
+                                                            <a class="nav-link active" data-toggle="tab" [attr.href]="'#lower' + bus.scheduleCode">Lower Deck</a>
+                                                        </li>
+
+                                                        <li class="nav-item" *ngIf="bus.seat_layout.layerCount == '2' && bus.seat_layout.layout">
+                                                            <a class="nav-link" data-toggle="tab" [attr.href]="'#upper' + bus.scheduleCode">Upper Deck</a>
+                                                        </li>
+                                                    </ul>
+                                                    <div class="tab-content">
+                                                        <span *ngIf="bus.seatErrMsg" [innerHTML]="bus.seatErrMsg"></span>
+                                                        <div class="tab-pane container active" id="lower{{bus.scheduleCode}}">
+                                                            <div class="row">
+                                                                <div class="col-md-12" *ngIf="bus.seat_layout.layout">
+                                                                    <ul class="" *ngFor="let row_set of bus.seat_layout.layout.lower_seats">
+                                                                        <li *ngFor="let items of row_set" [ngStyle]="{'width':getWidth(bus.seat_layout.layout.numList.lower_column)}" [ngClass]="{sleeper_content:items.seatType== 'Sleeper'}">
+                                                                            <button [attr.id]="getIds(items.seatType)" *ngIf="items.seatNumber != ''">
+                                                                                <label>
+                                                                                    <input id="1" *ngIf="items.seatStatus !== 'B'" type="checkbox" name="services" value="A" (click)="set_book(items,bus.scheduleCode,bus.scheduleCode,$event)">        
+                                                                                    <p *ngIf="items.seatType== 'Sleeper'" [ngClass]="{sleeper_booked:items.seatStatus == 'B', sleeper_lady:items.seatStatus == 'F'}"></p>
+                                                                                    <p *ngIf="items.seatType== 'Seater'" [ngClass]="{seat_booked:items.seatStatus == 'B', seat_lady:items.seatStatus == 'F'}"></p>
+                                                                                    <p *ngIf="check_exist(items.seatNumber,bus.scheduleCode)">{{items.seatNumber}}</p>
+                                                                                </label>
+                                                                            </button>
+                                                                        </li>
+                                                                    </ul>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                        <div class="tab-pane container" id="upper{{bus.scheduleCode}}" *ngIf="bus.seat_layout.layerCount == '2' && bus.seat_layout.layout">
+                                                            <div class="row">
+                                                                <div class="col-md-12">
+                                                                    <ul class="" *ngFor="let row_set of bus.seat_layout.layout.upper_seats">
+                                                                        <li *ngFor="let items of row_set" [ngStyle]="{'width':getWidth(bus.seat_layout.layout.numList.upper_column)}" [ngClass]="{sleeper_content:items.seatType== 'Sleeper'}">
+                                                                            <button [attr.id]="getIds(items.seatType)" *ngIf="items.seatNumber != ''">
+                                                                                <label>
+                                                                                    <input id="1" *ngIf="items.seatStatus !== 'B'" type="checkbox" name="services" value="A" (click)="set_book(items,bus.scheduleCode,bus.scheduleCode)">        
+                                                                                    <p *ngIf="items.seatType== 'Sleeper'" [ngClass]="{sleeper_booked:items.seatStatus == 'B'}"></p>
+                                                                                    <p *ngIf="items.seatType== 'Seater'" [ngClass]="{seat_booked:items.seatStatus == 'B'}"></p>
+                                                                                    <p *ngIf="check_exist(items.seatIndex,bus.scheduleCode)">{{items.seatNumber}}</p>
+                                                                                </label>
+                                                                            </button>
+                                                                        </li>
+                                                                    </ul>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+
+                                                    <!-- ENDS-SEAT-SECTION -->
+
+                                                </div>
+                                            </div>
+
+                                            <div class="col-md-4">
+                                                <div class="ticket_details">
+                                                    <div class="ticket_legend">
+                                                        <div class="">
+                                                            <p>Boarding Point</p>
+                                                            <select class="choose_place" (change)="choose_location('board', i, $event.target)" (ngModel)="boardingPoints">
+                                                                <option [value]="" disabled="true" [selected]="true">Select Boarding Point</option>
+                                                                <option *ngFor="let board_point of bus.seat_layout.boardingPoints" [value]="board_point.code">{{board_point.name}}</option>
+                                                            </select>
+
+                                                            <div *ngIf="bus.seat_layout.droppingPoints">
+                                                                <p>Droping Point</p>
+                                                                <select class="choose_place" (change)="choose_location('drop', i, $event.target)" (ngModel)="droppingPoints">
+                                                                    <option [value]="null" disabled="true" [selected]="true">Select Droping Point</option>
+                                                                    <option *ngFor="let drop_point of bus.seat_layout.droppingPoints" [value]="drop_point.code">{{drop_point.name}}</option>
+                                                                </select>
+
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <h5>Seat number</h5>
+                                                                </div>
+                                                                <div class="col-1">
+                                                                    <h5>:</h5>
+                                                                </div>
+                                                                <div class="col">
+                                                                    <h5>
+                                                                        <strong>{{book_details('seats', i)}}</strong>
+                                                                    </h5>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <h5>Base fare</h5>
+                                                                </div>
+                                                                <div class="col-1">
+                                                                    <h5>:</h5>
+                                                                </div>
+                                                                <div class="col">
+                                                                    <h5><strong>{{book_details('seat_fare')}}</strong></h5>
+                                                                </div>
+                                                            </div>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <h5>Operator</h5>
+                                                                </div>
+                                                                <div class="col-1">
+                                                                    <h5>:</h5>
+                                                                </div>
+                                                                <div class="col">
+                                                                    <h5><strong>{{book_details('operator', i)}}</strong></h5>
+                                                                </div>
+                                                            </div>
+                                                            <hr>
+                                                            <div class="row">
+                                                                <div class="col">
+                                                                    <h5>Total Fares</h5>
+                                                                </div>
+                                                                <div class="col-1">
+                                                                    <h5>:</h5>
+                                                                </div>
+                                                                <div class="col">
+                                                                    <h5><strong>{{book_details('fare', i)}}</strong></h5>
+                                                                </div>
+                                                            </div>
+                                                            <br>
+                                                            <button class="proceed" [disabled]="check_booking(bus.scheduleCode)" (click)="booking_seat(i)">
+                                                                Continue booking
+                                                            </button>
+                                                            <br>
+                                                            <br>
+                                                            <p class="textCenter">Base Fare: 360, Base Tax: 30</p>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="col-md-2">
+
+
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
+
+                            <!-- ENDS-RESULT-LIST-SECTION -->
+
+
+                        </ul>
+                    </div>
+                    <div *ngIf="bus_result.searchResult.length === 0"><span style="text-align: center"> Buses Available!</span></div>
+
+                    <!-- ENDS-SEARCH-RESULTS-SECTION -->
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- MAIN-CONTETN-ENDS -->
+
+<!-- SEARCH-WRAPPER-ENDS -->
\ No newline at end of file

src/app/home/searchresult/searchresult.component.scss

+@import "../../../styles.scss";
+.search_wrapper {
+    width: 100%;
+    background-image: linear-gradient(to right, #FE6509, #FE8109);
+    background-color: $bg-gray;
+    padding-top: 110px;
+    .search_wrapper_inner {
+        background-image: url("/assets/imgs/mask_bg.png");
+        .search_inner_container {
+            width: 95%;
+            margin: 0 auto;
+            padding-top: 30px;
+            padding-bottom: 30px;
+            p {
+                color: #fff;
+                margin: 0px;
+                padding: 0px;
+                text-transform: uppercase;
+                padding-bottom: 5px;
+                font-size: 12px;
+            }
+            h4 {
+                color: #fff;
+                margin: 0px;
+                padding: 0px;
+                font-weight: 700;
+                .arrow {
+                    width: 40px;
+                    height: 40px;
+                    text-align: center;
+                    background-image: url("../../../assets/imgs/icon_sprite.png");
+                    background-size: 375px;
+                    margin-left: 15px;
+                    margin-right: 15px;
+                }
+                .arrow_left {
+                    background-position: top -56px left -6px;
+                }
+                .arrow_right {
+                    background-position: top -56px left -61px;
+                }
+            }
+            input {
+                border: none;
+                border-bottom: 1px solid $white-color;
+                background-color: transparent;
+                height: 40px;
+                color: $white-color;
+                border-radius: 0px;
+                font-size: 24px;
+                line-height: 32px;
+                font-weight: 700;
+                &:focus {
+                    outline: none;
+                    box-shadow: none;
+                }
+                &::placeholder {
+                    color: $white-color;
+                }
+            }
+            .modify_btn {
+                background-color: $brown-theme;
+                color: $white-color;
+                border: none;
+                height: 40px;
+                min-width: 140px;
+                cursor: pointer;
+                &:focus {
+                    outline: none;
+                }
+            }
+        }
+    }
+}
+
+.main_content_inner {
+    background-color: $bg-gray;
+    .main_content_inner_container {
+        width: 95%;
+        margin: 0 auto;
+        padding-top: 30px;
+        padding-bottom: 30px;
+        .Filter_bay {
+            background-color: $white-color;
+            padding: 15px;
+            h4 {
+                margin: 0px;
+                font-size: 14px;
+                color: $text-dark;
+                font-weight: 700;
+                text-transform: uppercase;
+                margin-bottom: 0px;
+            }
+            h5 {
+                font-size: 14px;
+                color: $dark-color;
+                font-weight: 600;
+                padding: 15px;
+                padding-left: 0px;
+                margin-bottom: 0px;
+                text-transform: capitalize;
+                cursor: pointer;
+                background-image: url("/assets/imgs/drop_down.png");
+                background-repeat: no-repeat;
+                background-position: right;
+                background-size: 30px;
+                margin: 0px;
+            }
+            .in {
+                display: block;
+            }
+            ul {
+                margin: 0px;
+                padding-left: 0px;
+                li {
+                    list-style: none;
+                    padding-bottom: 10px;
+                    .checkbox {
+                        position: relative;
+                        margin-bottom: 0px;
+                    }
+                    .checkbox label {
+                        padding-left: 30px;
+                        display: block;
+                        margin-bottom: 0px;
+                        span {
+                            color: $dark-color;
+                            font-size: 14px;
+                        }
+                    }
+                    .checkbox input {
+                        top: 0;
+                        left: 0;
+                        z-index: 1;
+                        cursor: pointer;
+                        opacity: 0;
+                        position: absolute;
+                    }
+                    .checkbox input:checked+.input-helper:before {
+                        border-color: $primary-color;
+                    }
+                    .checkbox .input-helper:before,
+                    .checkbox .input-helper:after {
+                        position: absolute;
+                        content: "";
+                        transition: all 200ms;
+                    }
+                    .checkbox .input-helper:before {
+                        left: 0;
+                        border: 1px solid #a8a8a8;
+                    }
+                    .checkbox input {
+                        width: 18px;
+                        height: 18px;
+                    }
+                    .checkbox input:checked+.input-helper:before {
+                        background-color: $primary-color;
+                    }
+                    .checkbox input:checked+.input-helper:after {
+                        transform: scale(1);
+                        opacity: 1;
+                    }
+                    .checkbox .input-helper:before {
+                        top: 0;
+                        width: 18px;
+                        height: 18px;
+                        border-radius: 2px;
+                        color: #fff;
+                    }
+                    .checkbox .input-helper:after {
+                        content: '\2713';
+                        font-size: 13px;
+                        left: 3px;
+                        top: 0x;
+                        color: #fff;
+                        transform: scale(0);
+                        opacity: 0;
+                    }
+                }
+            }
+        }
+        .results_bay {
+            ul {
+                margin: 0px;
+                padding: 0px;
+                margin-top: 10px;
+                li {
+                    list-style: none;
+                    padding-bottom: 0px;
+                    background-color: $white-color;
+                    margin-bottom: 10px;
+                    .result_inner {
+                        padding: 10px;
+                        border: 1px solid #e1e1e1;
+                    }
+                    h5 {
+                        color: $dark-color;
+                        font-weight: 600;
+                        font-size: 13px;
+                        margin: 0px;
+                        padding-bottom: 0px;
+                        line-height: 20px;
+                        strong {
+                            font-weight: 400;
+                            font-size: 12px;
+                        }
+                    }
+                    p {
+                        color: $dark-color;
+                        font-weight: 400;
+                        font-size: 13px;
+                        margin: 0px;
+                    }
+                    h4 {
+                        margin: 0px;
+                        padding: 0px;
+                        color: #727272;
+                        font-size: 13px;
+                        font-weight: 500;
+                        line-height: 20px;
+                    }
+                    .view_btn {
+                        width: 100%;
+                        color: #fff;
+                        background-color: $primary-color;
+                        height: 40px;
+                        border: none;
+                        cursor: pointer;
+                        &:focus {
+                            outline: none;
+                        }
+                    }
+                    .rating {
+                        float: left;
+                    }
+                    .rating:not(:checked)>input {
+                        position: absolute;
+                        top: -9999px;
+                        clip: rect(0, 0, 0, 0);
+                    }
+                    .rating:not(:checked)>label {
+                        float: right;
+                        width: 20px;
+                        padding: 0.1em;
+                        overflow: hidden;
+                        white-space: nowrap;
+                        cursor: pointer;
+                        font-size: 21px;
+                        line-height: 15px;
+                        color: #ddd;
+                        margin: 0px;
+                    }
+                    .rating:not(:checked)>label:before {
+                        content: '★';
+                    }
+                    .rating>input:checked~label {
+                        color: #29313C;
+                    }
+                    .rating:not(:checked)>label:hover,
+                    .rating:not(:checked)>label:hover~label {
+                        color: 29313C;
+                    }
+                    .rating>input:checked~label:hover,
+                    .rating>input:checked~label:hover~label,
+                    .rating>label:hover~input:checked~label {
+                        color: #29313C;
+                    }
+                }
+            }
+            .collapse {
+                width: 100%;
+                padding: 0px;
+                .seat_arragement_div {
+                    padding: 10px;
+                    margin-bottom: 30px;
+                    padding-left: 0px;
+                    padding-right: 0px;
+                    .seat_positioning {
+                        background-color: #f6f6f6;
+                        padding: 20px;
+                        width: 320px;
+                        margin: 0 auto;
+                        .nav {
+                            li {
+                                width: 50%;
+                                .active {
+                                    background-color: $primary-color;
+                                    color: $white-color;
+                                }
+                                a {
+                                    color: $brown-theme;
+                                }
+                            }
+                        }
+                        h4 {
+                            margin: 0px;
+                            color: #727272;
+                            padding: 10px;
+                            font-weight: 500;
+                            font-size: 17px;
+                            text-align: center;
+                            text-transform: uppercase;
+                        }
+                        border-radius:15px;
+                        display: inline-block;
+                        ul {
+                            .seat_driver {
+                                width: 40px;
+                                height: 40px;
+                                background: url("/assets/imgs/driver.png");
+                                background-position: center;
+                                background-size: 35px;
+                                background-repeat: no-repeat !important;
+                                margin-right: 10px;
+                                margin-bottom: 10px;
+                            }
+                            /*padding: 10px;*/
+                            // width: 200px;
+                            margin: 0px;
+                            display: block;
+                            margin: 0 auto;
+                            .sleeper_content {
+                                height: 60px !important;
+                            }
+                            li {
+                                list-style: none;
+                                display: inline-block;
+                                background: transparent;
+                                width: 30px;
+                                height: 30px;
+                                #seat_button {
+                                    margin: 4px;
+                                    background-color: #fff;
+                                    border-radius: 0px !important;
+                                    overflow: auto;
+                                    color: #000;
+                                    border: none;
+                                    position: relative;
+                                    width: 100%;
+                                    height: 100%;
+                                    outline: none;
+                                    cursor: pointer;
+                                    background: url("/assets/imgs/seat_available.png");
+                                    background-position: center;
+                                    background-size: contain;
+                                    background-repeat: no-repeat;
+                                }
+                                #sleeper_button {
+                                    margin: 4px;
+                                    background-color: #fff;
+                                    border-radius: 0px !important;
+                                    overflow: auto;
+                                    color: #000;
+                                    border: none;
+                                    position: relative;
+                                    width: 100%;
+                                    height: 100%;
+                                    outline: none;
+                                    cursor: pointer;
+                                    background: url("/assets/imgs/sleeper_available.png");
+                                    background-position: center;
+                                    background-size: contain;
+                                    background-repeat: no-repeat;
+                                }
+                                #seat_button p {
+                                    margin: 0px;
+                                    position: absolute;
+                                    left: 0px;
+                                    right: 0px;
+                                    top: 0px;
+                                    bottom: 0px;
+                                    padding: 4px;
+                                    font-size: 9px;
+                                    color: #fff;
+                                    cursor: pointer;
+                                }
+                                #sleeper_button p {
+                                    margin: 0px;
+                                    position: absolute;
+                                    left: 0px;
+                                    right: 0px;
+                                    top: 0px;
+                                    bottom: 0px;
+                                    padding: 4px;
+                                    font-size: 9px;
+                                    color: #fff;
+                                    cursor: pointer;
+                                }
+                                #seat_button label {
+                                    width: 100%;
+                                }
+                                #sleeper_button label {
+                                    width: 100%;
+                                }
+                                #seat_button label span {
+                                    text-align: center;
+                                    display: block;
+                                }
+                                #sleeper_button label span {
+                                    text-align: center;
+                                    display: block;
+                                }
+                                #seat_button label input {
+                                    position: absolute;
+                                    top: -20px;
+                                }
+                                #sleeper_button label input {
+                                    position: absolute;
+                                    top: -20px;
+                                }
+                                #seat_button input:checked+p {
+                                    background: url("/assets/imgs/seat_selected.png");
+                                    border-radius: 0px !important;
+                                    margin: 0px;
+                                    cursor: pointer;
+                                    background-position: center;
+                                    background-size: contain;
+                                    background-repeat: no-repeat;
+                                }
+                                .seat_booked {
+                                    background: url("/assets/imgs/seat_booked.png");
+                                    border-radius: 0px !important;
+                                    margin: 0px;
+                                    cursor: pointer;
+                                    background-position: center;
+                                    background-size: contain;
+                                    background-repeat: no-repeat;
+                                }
+                                .seat_lady {
+                                    background: url("/assets/imgs/seat_ladies.png");
+                                    border-radius: 0px !important;
+                                    margin: 0px;
+                                    cursor: pointer;
+                                    background-position: center;
+                                    background-size: contain;
+                                    background-repeat: no-repeat;
+                                }
+                                #sleeper_button input:checked+p {
+                                    background: url("/assets/imgs/sleeper_selected.png");
+                                    border-radius: 0px !important;
+                                    margin: 0px;
+                                    cursor: pointer;
+                                    background-position: center;
+                                    background-size: contain;
+                                    background-repeat: no-repeat;
+                                }
+                                .sleeper_booked {
+                                    background: url("/assets/imgs/sleeper_booked.png");
+                                    border-radius: 0px !important;
+                                    margin: 0px;
+                                    cursor: pointer;
+                                    background-position: center;
+                                    background-size: contain;
+                                    background-repeat: no-repeat;
+                                }
+                                .sleeper_lady {
+                                    background: url("/assets/imgs/sleeper_ladies.png");
+                                    border-radius: 0px !important;
+                                    margin: 0px;
+                                    cursor: pointer;
+                                    background-position: center;
+                                    background-size: contain;
+                                    background-repeat: no-repeat;
+                                }
+                            }
+                        }
+                    }
+                    .ticket_details {
+                        width: 100%;
+                        .ticket_legend {
+                            padding: 20px;
+                            width: 320px;
+                            margin: 0 auto;
+                            background: $dark-color;
+                            border-radius: 15px;
+                            p {
+                                color: #626d7b;
+                                margin: 0px;
+                                padding-bottom: 10px;
+                                font-size: 14px;
+                            }
+                            h5 {
+                                color: #626d7b;
+                                margin: 0px;
+                                padding-bottom: 10px;
+                                font-size: 14px;
+                                strong {
+                                    color: #fff;
+                                }
+                            }
+                            .choose_place {
+                                width: 100%;
+                                height: 40px;
+                                border: none;
+                                background: #dedede;
+                                font-size: 14px;
+                                color: $dark-color;
+                                border-radius: 8px;
+                                margin-bottom: 15px;
+                                padding-left: 10px;
+                                &:focus {
+                                    outline: none;
+                                }
+                            }
+                            .proceed {
+                                width: 100%;
+                                font-weight: 400;
+                                font-size: 16px;
+                                border-radius: 8px;
+                                color: #fff;
+                                height: 45px;
+                                background: $primary-color;
+                                border: none;
+                                cursor: pointer;
+                                text-transform: capitalize;
+                                &:focus {
+                                    border: none;
+                                    outline: none;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
\ No newline at end of file

src/app/home/searchresult/searchresult.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchresultComponent } from './searchresult.component';
+
+describe('SearchresultComponent', () => {
+  let component: SearchresultComponent;
+  let fixture: ComponentFixture<SearchresultComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SearchresultComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchresultComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/searchresult/searchresult.component.ts

+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { BsLocaleService } from 'ngx-bootstrap/datepicker';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+import { ValidationService } from './../../provider/validation.service';
+import { WebService } from './../../provider/web.service';
+import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { SubjectService } from './../../provider/subject.service';
+
+
+
+@Component({
+  selector: 'app-searchresult',
+  templateUrl: './searchresult.component.html',
+  styleUrls: ['./searchresult.component.scss']
+})
+export class SearchresultComponent implements OnInit {
+    bookFare: any;
+    maxseatflag :boolean;
+    seatData: any;
+    seatcount :any;
+  searchData: any;
+  editable: boolean;
+  searchForm: FormGroup;
+  searchSubmit: boolean;
+  funcName: any;
+  results: any[];
+  sourceFlag: boolean;
+  destFlag: boolean;
+  main_error: boolean;
+  desfuncName: any;
+  destResults: any[];
+  today: any;
+  bus_result: any;
+  filter_type: any;
+  user_filter: any;
+  service_status: boolean;
+  selected_seats: any[];
+  booking_selected: any[];
+  book_type: any;
+  boardingPoints: any;
+  droppingPoints: any;
+  loginDetails: any;
+  source_state: boolean;
+  dest_state: boolean;
+  loading: boolean;
+  seatLoad: boolean;
+  customAmount: any[];
+  boardandDropDetails = {brdPoint: '', brdTime: '', dropPoint: '', dropTime: '' };
+  schedduleCode: any;
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private formBuilder: FormBuilder,
+    public vs: ValidationService,
+    public service: WebService,
+    private _localeService: BsLocaleService,
+    public subjectService: SubjectService
+    ) {
+    this._localeService.use('engb');
+    this.editable = false;
+    this.sourceFlag = false;
+    this.destFlag = false;
+    this.source_state = false;
+    this.dest_state = false;
+    this.loading = false;
+    this.seatLoad = false;
+
+    this.searchForm = this.formBuilder.group({
+      fromStationId: ['', Validators.compose([Validators.required])],
+      toStationId: ['', Validators.compose([Validators.required])],
+      travelDate: ['', Validators.compose([Validators.required])],
+      returnDate: [''],
+      sourceName: ['', Validators.compose([Validators.required])],
+      destinationName: ['', Validators.compose([Validators.required])],
+    });
+
+    this.searchSubmit = false;
+    this.main_error = false;
+    this.service_status = false;
+    this.today = new Date();
+    this.filter_type = {'travels': [], 'pick_point': [], 'drop_point': []};
+    this.user_filter = {'travels': [], 'pick_point': [], 'drop_point': [], 'time': [], 'rate': [], 'type': []};
+    this.book_type = {
+        'operatorCode': '',
+        'scheduleCode': '',
+        'travelDate': '',
+        'fromStationCode': '',
+        'toStationCode': '',
+        'boardingPointCode': '',
+        'droppingPointCode': '',
+        'email': '',
+        'mobile': '',
+        'passenger': [],
+        'basic': {'from': '', to: '', start_time: '', arrival: '', 'travels': '', 'board': '', 'drop': ''}
+    };
+    this.selected_seats = new Array();
+    this.booking_selected = new Array();
+    this.customAmount = [];
+    this.seatcount = 0;
+    this.maxseatflag = false;
+  }
+
+
+  @Input() rating: number;
+  @Input() itemId: number;
+  @Output() ratingClick: EventEmitter<any> = new EventEmitter<any>();
+
+  inputName: string;
+  ngOnInit() {
+    this.inputName = this.itemId + '_rating';
+    const data = decodeURIComponent(this.route.snapshot.params['id']);
+    console.log(data);
+    this.searchData = JSON.parse(data);
+    const travelDate = this.searchData.travelDate.split('T');
+    this.searchData.travelDate = travelDate[0];
+    console.log(this.searchData);
+    let mydate = new Date(this.searchData.travelDate);
+    console.log(mydate);
+    this.searchForm.controls['sourceName'].patchValue(this.searchData.sourceName);
+    this.searchForm.controls['fromStationId'].patchValue(this.searchData.fromStationId);
+    this.searchForm.controls['destinationName'].patchValue(this.searchData.destinationName);
+    this.searchForm.controls['toStationId'].patchValue(this.searchData.toStationId);
+    this.searchForm.controls['travelDate'].patchValue(mydate);
+
+    if (this.searchData.returnDate !== null && this.searchData.returnDate !== '') {
+        const returnDate = this.searchData.returnDate.split('T');
+        this.searchData.returnDate = returnDate[0];
+        mydate = new Date(this.searchData.returnDate);
+        this.searchForm.controls['returnDate'].patchValue(mydate);
+    }
+
+    this.loginDetails = JSON.parse(this.service.getLocalStorageItem('userData'));
+
+    this.subjectService.getLoginData().subscribe(loginData => {
+        this.loginDetails = JSON.parse(this.service.getLocalStorageItem('userData'));
+    });
+    this.onChange();
+    this.get_search_bus();
+
+  }
+
+  onChange() {
+    const funcNamed = 'source_location/';
+    this.searchForm.get('sourceName').valueChanges.pipe(debounceTime(500), distinctUntilChanged(), switchMap((query) =>
+    this.service.get_data(funcNamed + query.replace(/[^a-zA-Z ]/g, '')))).subscribe(response => {
+      if (response.status === 'success' && this.source_state === true) {
+        this.results = response.data;
+        console.log(this.results);
+        if (this.results.length > 0 ) {
+          this.sourceFlag = true;
+        } else {
+          this.sourceFlag = false;
+        }
+        console.log(this.sourceFlag);
+      } else {
+        this.results = [];
+        this.sourceFlag = false;
+      }
+    });
+
+    this.desfuncName = 'destination_location/';
+    this.searchForm.get('destinationName').valueChanges.pipe(debounceTime(500), distinctUntilChanged(), switchMap((query) =>
+    this.service.get_data(this.desfuncName + query.replace(/[^a-zA-Z ]/g, '') + '/' + this.searchForm.controls['fromStationId'].value)))
+    .subscribe(response => {
+      if (response.status === 'success' && this.dest_state === true) {
+        this.destResults = response.data;
+        console.log(this.results);
+        if (this.destResults.length > 0 ) {
+          this.destFlag = true;
+        } else {
+          this.destFlag = false;
+        }
+        console.log(this.sourceFlag);
+      } else {
+        this.destResults = [];
+        this.destFlag = false;
+      }
+    });
+  }
+
+  onClick(rating: number): void {
+      console.log(rating);
+    this.rating = rating;
+    this.ratingClick.emit({
+      itemId: this.itemId,
+      rating: rating
+    });
+  }
+
+  goToPage(path, data = null) {
+    console.log(data);
+    this.router.navigateByUrl(path, { queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  modify() {
+    this.editable = !this.editable;
+  }
+
+  bus_search() {
+    this.main_error = false;
+    console.log(this.searchForm.value);
+    this.searchSubmit = true;
+    const response = this.searchForm.value;
+    const This = this;
+    console.log(this.searchForm.value);
+    if (this.searchForm.valid) {
+      this.searchData = this.searchForm.value;
+      this.searchData.travelDate = this.formatDate(this.searchData.travelDate);
+      this.searchData.returnDate = this.searchData.returnDate !== '' ? this.formatDate(this.searchData.returnDate) : '';
+      const searchObj = encodeURIComponent(JSON.stringify(this.searchForm.value));
+      console.log(this.searchData);
+      const url = 'searchresult/' + searchObj;
+      this.router.navigateByUrl(url);
+      this.editable = false;
+    } else {
+      const data = this.searchForm.value;
+      if (data.sourceName !== '' && data.destinationName !== '' && data.travelDate !== '') {
+        if (data.fromStationId === '' || data.toStationId === '') {
+          this.main_error = true;
+        }
+      }
+    }
+    this.get_search_bus();
+  }
+
+  select_source(data: any) {
+    this.source_state = false;
+    this.sourceFlag = false;
+    this.searchForm.controls['sourceName'].patchValue(data.stationName);
+    this.searchForm.controls['fromStationId'].patchValue(data.stationCode);
+  }
+
+  select_dest(data: any) {
+    this.destFlag = false;
+    this.dest_state = false;
+    this.searchForm.controls['destinationName'].patchValue(data.stationName);
+    this.searchForm.controls['toStationId'].patchValue(data.stationCode);
+  }
+
+  switch_loc() {
+    const inter_source =   this.searchForm.controls['sourceName'].value;
+    const inter_source_id = this.searchForm.controls['fromStationId'].value;
+    const inter_destination =   this.searchForm.controls['destinationName'].value;
+    const inter_destination_id = this.searchForm.controls['toStationId'].value;
+
+    this.searchForm.controls['sourceName'].patchValue(inter_destination);
+    this.searchForm.controls['fromStationId'].patchValue(inter_destination_id);
+    this.searchForm.controls['destinationName'].patchValue(inter_source);
+    this.searchForm.controls['toStationId'].patchValue(inter_source_id);
+    console.log(this.searchForm.value);
+    this.searchData = this.searchForm.value;
+  }
+
+  change_date(type: string) {
+    const curr_date = new Date().getTime();
+    const set_date = new Date(this.searchData.travelDate);
+    let choose_date;
+    if (type === 'prev') {
+      choose_date = set_date.setDate(set_date.getDate() - 1);
+    } else {
+      choose_date = set_date.setDate(set_date.getDate() + 1);
+    }
+
+    if (curr_date <= choose_date) {
+      const d = new Date(choose_date).toISOString();
+      const datechoose = d.split('T');
+      console.log(datechoose[0]);
+      this.searchData.travelDate = datechoose[0];
+      const mydate = new Date(this.searchData.travelDate);
+      this.searchForm.controls['travelDate'].patchValue(mydate);
+    }
+    this.get_search_bus();
+  }
+
+  get_search_bus() {
+      this.loading = true;
+      this.service_status = false;
+      console.log(this.searchData);
+
+    this.funcName = 'customPrice';
+    this.loading = true;
+    this.service.post_data(this.funcName, this.searchData).subscribe(response => {
+        // this.loading = false;
+        if ( response.status === 'success') {
+            this.customAmount = response.data;
+        } else {
+            this.customAmount = [];
+        }
+    }, (error) => {
+        console.log(error);
+    });
+
+
+    // tslint:disable-next-line:max-line-length
+    const url = 'search?username=javatest&password=123456&travelDate=' + this.searchData.travelDate + '&fromStationCode=' + this.searchData.fromStationId + '&toStationCode=' + this.searchData.toStationId;
+    console.log(url);
+    this.service.online_service(url).subscribe(response => {
+        this.loading = false;
+        this.bus_result = response;
+        this.service_status = true;
+        console.log(this.bus_result);
+        if (this.bus_result.code === '1') {
+             if (this.bus_result.searchResult instanceof Array !== true) {
+                this.bus_result.searchResult = new Array(this.bus_result.searchResult);
+            }
+            console.log(this.bus_result);
+            this.filter_result(this.bus_result.searchResult);
+        } else {
+            this.bus_result = {'searchResult': []};
+        }
+    }, (error) => {
+      console.log(error);
+    });
+   // console.log(this.bus_result);
+
+
+
+
+  }
+
+  filter_result(result) {
+    result.forEach(element => {
+      this.filter_type.travels.push({'id': element.operatorCode, 'name': element.operatorName});
+      if (element.boardingPointDetails instanceof Array) {
+        element.boardingPointDetails.forEach(item => {
+          this.filter_type.pick_point.push({'id': item.code, 'name': item.name});
+        });
+      } else {
+        if (element.boardingPointDetails !== undefined) {
+            this.filter_type.pick_point.push({'id': element.boardingPointDetails.code, 'name': element.boardingPointDetails.name});
+        }
+      }
+
+      if (element.droppingPointDetails instanceof Array) {
+        element.droppingPointDetails.forEach(item => {
+            this.filter_type.drop_point.push({'id': item.code, 'name': item.name});
+        });
+      } else {
+          if (element.droppingPointDetails !== undefined) {
+            this.filter_type.drop_point.push({'id': element.droppingPointDetails.code, 'name': element.droppingPointDetails.name});
+          }
+      }
+      element.rate = this.check_rating(element.ratings, 10);
+      // tslint:disable-next-line:max-line-length
+      element.seat_layout = {'availableSeats': '', 'boardingPoints':  '', 'busMapStructure': '', 'code': '', 'columnsList': '', 'layerCount': 0, 'message': '', 'rowsList': ''};
+    });
+    this.filter_type.pick_point = this.removeDuplicates(this.filter_type.pick_point, 'name');
+    this.filter_type.drop_point = this.removeDuplicates(this.filter_type.drop_point, 'name');
+    this.filter_type.travels = this.removeDuplicates(this.filter_type.travels, 'id');
+    // console.log(this.filter_type);
+  }
+
+    removeDuplicates(myArr, prop) {
+        return myArr.filter((obj, pos, arr) => {
+            return arr.map(mapObj => mapObj[prop]).indexOf(obj[prop]) === pos;
+        });
+    }
+
+    choose_type(type: string, value, event) {
+        let index;
+        if (event.target.checked === true) {
+            this.user_filter[type].push(value);
+        } else {
+            index = this.user_filter[type].indexOf(value);
+            this.user_filter[type].splice(index, 1);
+        }
+        console.log(this.user_filter);
+    }
+
+    check_rating(rating, rate) {
+        let avg_count = 0;
+        let bus_rate = 0;
+        let punc_rate = 0;
+        let staff_rate = 0;
+        let total_rate = 0;
+        if (rating.busQuality !== 'UNRATED') {
+            avg_count += 1;
+            bus_rate = this.rate_value(rating.busQuality);
+        }
+
+        if (rating.punctuality !== 'UNRATED') {
+            avg_count += 1;
+            punc_rate = this.rate_value(rating.punctuality);
+        }
+
+        if (rating.punctuality !== 'UNRATED') {
+            avg_count += 1;
+            staff_rate = this.rate_value(rating.staffBehavior);
+        }
+
+        total_rate = bus_rate + punc_rate + staff_rate;
+        const avg_rate = Math.round(total_rate / avg_count);
+        const avg_star = 5 / 3;
+        return Math.round(avg_rate * avg_star);
+    }
+
+    rate_value(type: string) {
+        switch (type) {
+            case 'POOR':
+                return 1;
+            break;
+            case 'AVERAGE':
+                return 2;
+            break;
+            case 'GOOD':
+                return 3;
+            break;
+            default:
+                return 0;
+        }
+    }
+
+    get_filter_journey(journey: string) {
+        let journeyTime;
+        journeyTime = journey.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [journey];
+        journeyTime = journeyTime.slice (1);
+        journeyTime.splice(3, 1);
+        return journeyTime.join ('');
+    }
+
+    time_string(time_list: string) {
+        let time_split: any;
+        const date_list = time_list.split(' - ');
+        const start_time = date_list[0];
+        const end_time = date_list[1];
+        time_split = start_time.split(':');
+        const date2 = new Date();
+        date2.setHours(time_split[0]);
+        date2.setMinutes(time_split[1]);
+        time_split = end_time.split(':');
+        const date3 = new Date();
+        date3.setHours(time_split[0]);
+        date3.setMinutes(time_split[1]);
+        return date2.getTime() + '-' + date3.getTime();
+    }
+
+    formatDate(date) {
+        const d = new Date(date);
+        let month = '' + (d.getMonth() + 1);
+        let day = '' + d.getDate();
+        const year = d.getFullYear();
+        if (month.length < 2) { month = '0' + month; }
+        if (day.length < 2) { day = '0' + day; }
+        return [year, month, day].join('-');
+    }
+
+    min_return () {
+        const d = this.searchForm.get('travelDate').value;
+        return d;
+    }
+
+    base_fare(map_array, count, scheduleCode: any) {
+        // console.log(map_array, count, scheduleCode);
+        if (count > 0) {
+            let array = [];
+            if (count === 2) {
+                array = map_array.lower.concat(map_array.upper);
+            } else {
+                array = map_array.lower;
+            }
+            const flags = [], output = [], l = array.length;
+            let i;
+            for (i = 0; i < l; i++) {
+                if (flags[array[i].baseFare]) {
+                    continue;
+                } else {
+                    flags[array[i].baseFare] = true;
+                    if ( array[i].baseFare !== '0.0'  ) {
+                       const fareAmt = this.checkPrice(array[i].baseFare, scheduleCode);
+                       output.push('&#8377;' + fareAmt);
+                    }
+                }
+            }
+            return output.join('-');
+        } else {
+            return 0;
+        }
+    }
+
+    get_seats(index: any, scheduleCode: any, operatorCode: any) {
+      this.schedduleCode = null
+      this.schedduleCode = scheduleCode;
+        index = this.bus_result.searchResult.findIndex(items =>  items.scheduleCode === scheduleCode);
+        this.seatLoad = true;
+        this.booking_selected[0] = this.book_type;
+        this.selected_seats[scheduleCode] = new Array;
+        console.log(this.searchData);
+        const operatorData = this.bus_result.searchResult[index];
+        console.log(operatorData);
+      // tslint:disable-next-line:max-line-length
+      const url = 'busmapV2?username=javatest&password=123456&travelDate=' + this.searchData.travelDate + '&fromStationCode=' + this.searchData.fromStationId + '&toStationCode=' + this.searchData.toStationId + '&scheduleCode=' + scheduleCode + '&operatorCode=' + operatorCode;
+      console.log(url);
+      this.service.online_service(url).subscribe(response => {
+          this.seatLoad = false;
+        console.log(response);
+        console.log(this.bus_result);
+        if (response.code === '1') {
+            this.bus_result.searchResult[index].seatErrMsg = undefined;
+            this.bus_result.searchResult[index].seat_layout = response;
+            this.bus_result.searchResult[index].seat_layout['boardingPoints'] = this.service.ObjArray(response.boardingPoints);
+            this.bus_result.searchResult[index].seat_layout['droppingPoints'] = this.service.ObjArray(response.droppingPoints);
+            this.bus_result.searchResult[index].seat_layout['layout'] = this.seat_arrange(response);
+        } else {
+            this.bus_result.searchResult[index].seatErrMsg  = '<small style="text-align:enter">' + response.errorDesc + '</small>';
+        }
+        console.log(this.bus_result);
+      }, (error) => {
+        console.log(error);
+      });
+    }
+
+    get_seat_layer(count: number) {
+        return 12 / count;
+    }
+
+    seat_arrange(response) {
+        let lower_rows: any, lower_column: any;
+        let upper_rows: any, upper_column: any;
+        const lower_seats = [];
+        let upper_seats_rows = [];
+        const upper_seats = [];
+        let lower_seats_rows = [];
+        if (response.layerCount  === '2') {
+            lower_rows = response.rowsList[0];
+            lower_column = response.columnsList[0];
+
+            upper_rows = response.rowsList[1];
+            upper_column = response.columnsList[1];
+
+            for ( let i = 1; i <= upper_rows; i++) {
+                upper_seats_rows = [];
+                for (let j = 1; j <= upper_column; j++) {
+                    response.busMapStructure.upper.filter(seats => {
+                        if (seats.row == i && seats.column == j) {
+                            upper_seats_rows.push(seats);
+                        }
+                    });
+                }
+                upper_seats.push(upper_seats_rows);
+            }
+
+        } else {
+            lower_rows = response.rowsList;
+            lower_column = response.columnsList;
+        }
+
+        console.log(lower_rows, lower_column);
+        for ( let i = 1; i <= lower_rows; i++) {
+            lower_seats_rows = [];
+            for (let j = 1; j <= lower_column; j++) {
+                response.busMapStructure.lower.filter(seats => {
+                    if (seats.row == i && seats.column == j) {
+                        lower_seats_rows.push(seats);
+                    }
+                });
+            }
+            lower_seats.push(lower_seats_rows);
+        }
+
+        const numList = {'lower_rows': lower_rows, 'lower_column': lower_column, 'upper_rows': upper_rows, 'upper_column': upper_column };
+
+        const seats_return = {'lower_seats' : lower_seats, 'upper_seats': upper_seats, 'numList': numList};
+        return seats_return;
+
+    }
+    set_book(item: any, index: any, scheduleCode: any, event) {
+        console.log('index',index);
+        event.checked = false;
+        console.log('Selected Seats',this.selected_seats[index]);
+        const obj = this.selected_seats[index].findIndex(items =>  items.seatNumber === item.seatNumber);
+        console.log(obj);
+        if (obj === -1) {
+            const item_price = this.checkPrice(item.baseFare, scheduleCode);
+            item.baseFare = item_price;
+            const seat_price = this.checkPrice(item.seatFare, scheduleCode);
+            item.seatFare = seat_price;
+            if(this.selected_seats[index].length < 6)
+            {
+                this.selected_seats[index].push(item);
+                console.log('Array count', this.selected_seats[index].length);
+                this.seatcount =  this.selected_seats[index].length;
+                this.maxseatflag= false;
+                this.seatData = this.selected_seats[index];
+            }
+             else{
+            event.preventDefault();
+            this.maxseatflag= true;
+           }
+        } else {
+            this.selected_seats[index].splice(obj, 1);
+            console.log('Array length',this.selected_seats[index].length);
+        }
+    }
+
+    check_checked(item: any, index: number, scheduleCode: any) {
+        return false;
+        /*console.log(this.selected_seats[index]);
+        console.log(item);
+        const obj = this.selected_seats[index].findIndex(items =>  items.seatNumber === item.seatNumber);
+        if (obj === -1) {
+            return false;
+        } else {
+            return true;
+        }*/
+    }
+
+    check_exist(seatNumber: any, index: any) {
+        const id = this.selected_seats[index].length + 1;
+      
+        const found = this.selected_seats[index].some(function (el: any) {
+            return el.seatNumber === seatNumber;
+        });
+        if (found) { return true; }
+    }
+
+    book_details(type: string) {
+       // tslint:disable-next-line:max-line-length
+       console.log('Selected Seat', this.selected_seats);
+       console.log('Schedulecode', this.schedduleCode);
+
+        if (this.selected_seats[this.schedduleCode] instanceof Array === true && typeof this.selected_seats[this.schedduleCode] !== 'undefined' && this.selected_seats[this.schedduleCode].length > 0) {
+            if (type === 'seats') {
+                return this.selected_seats[this.schedduleCode].map(e => e.seatNumber).join(', ');
+            } else if (type === 'seat_fare') {
+                // tslint:disable-next-line:radix
+                const sum = this.selected_seats[this.schedduleCode].map(item => item.baseFare).reduce((prev, next) => parseInt(prev) + parseInt(next));
+                return sum;
+            } else if (type === 'operator') {
+                 const oper = this.selected_seats[this.schedduleCode].map(item => item.operatorServiceTax).reduce(
+                     // tslint:disable-next-line:radix
+                     (prev, next) => parseInt(prev) + parseInt(next));
+                 return oper;
+            } else {
+                // tslint:disable-next-line:radix
+                const oper = this.selected_seats[this.schedduleCode].map(item => item.seatFare).reduce((prev, next) => parseInt(prev) + parseInt(next));
+                return oper;
+            }
+        }
+        }
+
+    booking_seat(index_new: number) {
+        console.log('number type',index_new)
+        const index = this.bus_result.searchResult.findIndex(items =>  items.scheduleCode === index_new);
+        console.log('index',index);
+        console.log(this.bus_result.searchResult[0]);
+        console.log('Operator Code',this.bus_result)
+      console.log('Selected Seat', this.selected_seats[index_new]);  
+        this.booking_selected[0].operatorCode =  this.bus_result.searchResult[index_new].operatorCode;
+        this.booking_selected[0].scheduleCode =  this.bus_result.searchResult[index_new].scheduleCode;
+        this.booking_selected[0].travelDate =  this.searchData.travelDate;
+        this.booking_selected[0].fromStationCode =  this.searchData.fromStationId;
+        this.booking_selected[0].toStationCode =  this.searchData.toStationId;
+        this.booking_selected[0].passenger =  this.seatData;
+        this.booking_selected[0].basic.from = this.searchData.sourceName;
+        this.booking_selected[0].basic.to = this.searchData.destinationName;
+        this.booking_selected[0].basic.start_time = this.bus_result.searchResult[index_new].departureTime;
+        this.booking_selected[0].basic.arrival = this.bus_result.searchResult[index_new].arrivalTime;
+        this.booking_selected[0].travels = this.bus_result.searchResult[index_new].operatorName;
+        this.booking_selected[0].busType = this.bus_result.searchResult[index_new].busType;
+        if (this.loginDetails) {
+          console.log('Login data');
+            // tslint:disable-next-line:max-line-length
+            this.booking_selected[0].email = this.loginDetails.username !== undefined ? this.loginDetails.username : this.loginDetails.email_id;
+            this.booking_selected[0].mobile = this.loginDetails.mob !== undefined ? this.loginDetails.mob : this.loginDetails.phone;
+           // let book_data = encodeURIComponent(JSON.stringify(this.booking_selected[index_new]));
+          //  console.log(book_data);
+            const url = 'booking/' +  encodeURIComponent(JSON.stringify(this.booking_selected[0]));
+            this.router.navigateByUrl(url);
+        } else {
+            this.subjectService.sendisLoggined('not_loggedIn');
+        }
+
+
+        console.log(this.booking_selected[0]);
+        // this.booking_selected[index].
+    }
+    testfun()
+    {
+        console.log('Flag' , this.maxseatflag);
+        if(this.maxseatflag = true)
+        {
+            return false
+        }
+    }
+    check_booking(index: any) {
+        // tslint:disable-next-line:max-line-length
+        if (this.selected_seats[index] instanceof Array === true && typeof this.selected_seats[index] !== 'undefined' && this.selected_seats[index].length > 0) {
+            if (this.booking_selected[0].boardingPointCode !== '') {
+                // if (this.bus_result.searchResult[index].seat_layout['droppingPoints']) {
+                    // if (this.booking_selected[index].droppingPointCode !== '') {
+                    //     return false;
+                    //     console.log('false')
+                    // } else {
+                    //     console.log('Else')
+                    //     return true;
+                    // }
+                // } else {
+                //     console.log('false')
+                //     return false;
+                // }
+            } else {
+                console.log('true')
+                return true;
+            }
+        } else {
+            console.log('true')
+            return true;
+        }
+    }
+
+    choose_location(type: string, index, code: any) {
+        console.log('code', code , 'type', type, 'index', index)
+        const select_loc = code.selectedOptions[0].innerHTML;
+        console.log('Booking Selected', this.booking_selected);
+        if (type === 'board') {
+            this.booking_selected[0].boardingPointCode = code.value;
+            this.booking_selected[0].basic.board = select_loc;
+        } else {
+            this.booking_selected[0].droppingPointCode = code.value;
+            this.booking_selected[0].basic.drop = select_loc;
+        }
+    }
+
+    value_change(type: string) {
+        console.log(this.source_state);
+        if (type === 'source') {
+          this.source_state = true;
+        } else {
+          this.dest_state = true;
+        }
+    }
+
+    initCalled() {
+        this.sourceFlag = false;
+        this.destFlag = false;
+        console.log(this.source_state);
+    }
+
+    getWidth(col: number){
+       const col_width =  (100 / col);
+       return col_width + '%';
+    }
+
+    getIds(type: string){
+        if (type === 'Sleeper'){
+            return 'sleeper_button';
+        } else if (type === 'Seater') {
+            return 'seat_button';
+        } else {
+            return '';
+        }
+    }
+
+    checkPrice(amount: any, scheduleCode: any) {
+        const This = this;
+        let amtArray = amount.toString().split(',');
+        const rate = this.customAmount.forEach(function (el) {
+            if (el.scheduleId === scheduleCode) {
+                amtArray = amtArray.map(function(val) {
+                    console.log(val,el.amount);
+                    const amt =  parseFloat(val) + parseFloat(el.amount);
+                    return amt;
+                });
+            }
+        });
+        if (This.loginDetails) {
+            amtArray = amtArray.map(function(val) {
+                if (This.loginDetails.type === 'agent') {
+                    const discount = ((val * This.loginDetails.discount) / 100);
+                    console.log(discount);
+                    return (val - discount).toFixed(2);
+                } else {
+                    return val;
+                }
+            });
+        }
+        return amtArray.join(', ');
+
+    }
+
+
+}

src/app/home/success/success.component.html

+<div class="success_div">
+
+    <!-- BANNER-STARTS -->
+
+    <div class="search_banner">
+        <div class="search_overlay">
+        </div>
+    </div>
+
+    <!-- BANNER-ENDS -->
+
+    <div class="success_div_inner" *ngIf="bookinfoData">
+        <img src="assets/imgs/asset_success.png">
+        <h3>Booking Successful</h3>
+        <div class="row">
+            <div class="col">
+                <p>Booking ID</p>
+            </div>
+            <div class="col">
+                <p class="textRight"><strong>{{bookReplace(bookinfoData.bookingCode)}}</strong></p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <p>Seat Number</p>
+            </div>
+            <div class="col">
+                <p class="textRight"><strong>{{getSeats(bookinfoData.passengerDetails)}}</strong></p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <p>Boarding Point</p>
+            </div>
+            <div class="col">
+                <p class="textRight"><strong>{{bookinfoData.boardingPointDetails.name}}</strong></p>
+            </div>
+        </div>
+        <div class="row" *ngIf="bookinfoData.droppingPointDetails">
+            <div class="col">
+                <p>Droping Point</p>
+            </div>
+            <div class="col">
+                <p class="textRight"><strong>{{bookinfoData.droppingPointDetails.name}}</strong></p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <p>Total</p>
+            </div>
+            <div class="col">
+                <p class="textRight"><strong>&#8377;{{amount}}</strong></p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect success_btn" (click)="navigate('home')">Home</button>
+            </div>
+            <div class="col">
+                <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect success_btn" (click)="navigate('account')">My Account</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file

src/app/home/success/success.component.scss

+.search_banner {
+    width: 100%;
+    position: relative;
+    background: url("/assets/imgs/bus_2.jpg");
+    background-attachment: fixed !important;
+    background-size: cover !important;
+    .search_overlay {
+        padding-top: 10%;
+        padding-bottom: 5%;
+        background: rgba(44, 71, 196, 0.9);
+        h2 {
+            text-align: center;
+            color: #fff;
+            margin: 0px;
+            padding-bottom: 50px;
+            font-weight: 400;
+            margin: 0px;
+        }
+    }
+}
+
+.success_div {
+    width: 100%;
+    background: #f8f8f8;
+    .success_div_inner {
+        width: calc(100% - 70%);
+        padding: 25px;
+        padding-top: 40px;
+        background: #fff;
+        text-align: center;
+        margin: 0 auto;
+        border-radius: 5px;
+        -webkit-box-shadow: 1px 0px 15px 0px rgba(0, 0, 0, 0.3);
+        -moz-box-shadow: 1px 0px 15px 0px rgba(0, 0, 0, 0.3);
+        box-shadow: 1px 0px 15px 0px rgba(0, 0, 0, 0.3);
+        position: relative;
+        bottom: 100px;
+        img {
+            width: 80px;
+        }
+        h3 {
+            text-align: center;
+            color: #4b6073;
+            font-size: 24px;
+            padding-bottom: 20px;
+        }
+        .row {
+            padding-bottom: 10px;
+        }
+        p {
+            text-align: left;
+            margin: 0px;
+            font-size: 18px;
+            color: #4b6073;
+        }
+        .success_btn {
+            width: 100%;
+            height: 50px;
+            font-size: 18px;
+            color: #fff;
+            background: #ff7800;
+            border: none;
+            cursor: pointer;
+            margin-top: 30px;
+        }
+    }
+}
\ No newline at end of file

src/app/home/success/success.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SuccessComponent } from './success.component';
+
+describe('SuccessComponent', () => {
+  let component: SuccessComponent;
+  let fixture: ComponentFixture<SuccessComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SuccessComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SuccessComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/success/success.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { WebService } from './../../provider/web.service';
+
+
+@Component({
+  selector: 'app-success',
+  templateUrl: './success.component.html',
+  styleUrls: ['./success.component.scss']
+})
+export class SuccessComponent implements OnInit {
+
+  bookingId: any;
+  funcName: any;
+  bookinfoData: any;
+  amount: any;
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute,
+    private service: WebService
+  ) {
+  }
+
+  ngOnInit() {
+    this.bookingId = this.route.snapshot.params['bookId'];
+    this.amount = this.route.snapshot.params['amount'];
+    this.getBookinfo(this.bookingId);
+    console.log(this.bookingId);
+  }
+
+  getBookinfo(bookId) {
+    const url = 'bookingdetails?username=javatest&password=123456&bookingCode=' + bookId;
+    console.log(url);
+    this.service.online_service(url).subscribe(response => {
+        this.bookinfoData = response;
+       console.log(this.bookinfoData);
+    }, (error) => {
+      console.log(error);
+    });
+  }
+
+  navigate(type: string) {
+    if (type === 'home') {
+      this.router.navigate(['/index']);
+    } else {
+      this.router.navigate(['/account']);
+    }
+  }
+
+  getSeats(passanger: any, type: string) {
+    if (passanger instanceof Array !== true) {
+      passanger = new Array(passanger);
+    }
+
+    const seatArray = new Array();
+    passanger.forEach(item => {
+      seatArray.push(item.seatNbr);
+    });
+
+    return seatArray.join(', ');
+
+  }
+
+  bookReplace(bookID: any) {
+    const str = bookID;
+    return str.replace(/^.{2}/g, 'TR');
+  }
+
+}

src/app/home/terms/terms.component.html

+
+<div class="terms_wrapper">
+    <ul class="nav nav-tabs">
+        <li class="nav-item">
+          <a class="nav-link active" data-toggle="tab" href="#home">Terms & Conditions</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" data-toggle="tab" href="#menu1">About TicketRobo</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" data-toggle="tab" href="#menu2">Contact Us</a>
+        </li>
+      </ul>
+      
+      <!-- Tab panes -->
+      <div class="tab-content">
+        <div class="tab-pane container active" id="home">
+         
+         
+          <p>
+              Ticketrobo is an internet marketplace. It doesn't operate bus services of its own. So as to provide a comprehensive selection of bus operators, departure times and costs to customers, it's involved with many Bus Operators.
+            </p>
+            <p>
+              Ticketrobo's recommendation to customers is to decide on the bus operators that they're responsive to and whose services they're snug with.
+            </p>
+          <p>
+              Ticketrobo's responsibilities include:
+            </p>
+              <ul>
+                  <li>Issuing a sound price tag (a ticket that may be accepted by the bus operator) for its network of bus operators.</li>
+                  <li>Providing refund and support within the event of cancellation.
+                  </li>
+                  <li>Providing client support data and knowledge and data just in case of any delay(s) / inconvenience</li>
+                </ul>
+                <u>Ticketrobo's responsibilities do NOT include:
+              </u>
+              <ul>
+                  <li>If buses of the bus operators don't depart from the station or reach the station on time.
+                  </li>
+                  <li>If the workers of the bus operators demonstrate rude behavior or misconduct with the purchasers.
+                  </li>
+                  <li>If bound aspects of the buses of the bus operators akin to seats aren't up to the customer's expectations.
+                  </li>
+                  <li>If the bus operator cancels the trip for reasons unknown.
+                  </li>
+                  <li>If the bags of a client gets lost / purloined / broken within the event of travel.
+                  </li>
+                  <li>If the bus operator changes a customer's seat at the eleventh hour to accommodate a girl / baby / aged traveler</li>
+              <li>If the client waits at the incorrect boarding purpose (please decision the bus operator to search out out the precise boarding purpose if you're not an everyday person on it specific bus).
+              </li>    
+              <li>If the bus operator changes the boarding purpose and / or uses a pick-up vehicle at the boarding purpose to require customers to the bus departure purpose.
+              </li>
+              <li>The timings of bus arrivals and departures square measure as per the scheduled departure and arrival timings. However, the bus company supplier might amendment the departure and arrival timings or the pickup locations, or the buses might get delayed because of inevitable reasons akin to traffic jams.
+              </li>
+              <li>On the date of journey, the passengers square measure requested to appeal the service supplier contact variety mentioned within the price tag and reassert their obtain purpose and temporal order.
+              </li>
+              <li></li>
+              </ul>
+              <p>At the time of boarding the bus, the passengers could also be needed to furnish the following:
+              </p>
+              <ul>
+                  <li>A copy of the ticket (A print out of the ticket or the print out of the ticket e-mail)
+                  </li>
+                  <li>Photo identity proof of the person whose name was provided whereas creating the booking. This includes license, Student ID card, Company ID card, Passport, PAN Card or elector ID Card.
+                  </li>
+                  <li>Failing to try and do thus, the passengers might not be allowed to board the bus.
+                  </li>
+                  <li>Once a ticket is issued, it's non-transferable. If a price tag is conferred by somebody but the person entitled to be carried there-under or to refund in affiliation thereupon, Ticketrobo or any of its travel partners shall not be at risk of the person thus entitled, if in honestness it provides carriage or makes a refund to the person presenting the price tag.</li>
+                  <li>In case the bus operator changes the kind of bus because of some reason, Ticketrobo can refund the differential quantity to the client upon being intimated by the client among twenty four hours of the journey.
+                  </li>
+                  <li>Ticketrobo could be a booking service solely. It shall not be at risk of keep the loss of products or property of passengers for any of the acts, events, incidents whatever on the far side the management of the corporate.</li>
+                  <li>The visits square measure subject to cancellation or postponement because of breakdown of the vehicle or scant passengers for the trip. Baggage and bags are going to be reserved at owner's risk subjected to the acceptance by Ticketrobo's travel partner.
+                  </li>
+                  <li>Provision of video, air-con and any such different services mentioned by Ticketrobo's travel partners within the buses is their own responsibility. Any refunds / claims because of non-functioning or un-availability of those services must be settled directly with the bus company supplier.
+                  </li>
+                  <li>In the event of cancellation of a bus / service trip, Ticketrobo can assist the traveler in providing another similar service, subject to availableness. just in case another isn't out there, then Ticketrobo shall be at risk of the traveler solely to the extent of refunding the total paid by the traveler for the value of the price tag.
+                  </li>
+                  <li>Passengers herewith consent to receive communications by SMS or calls from Ticketrobo with relation to services provided by them..
+                  </li>
+                  <li>We as a businessperson shall be below no liability whatever in respect of any loss or harm arising directly or indirectly out of the decline of authorization for any dealings, on Account of the Cardholder having exceeded the planned limit reciprocally united by U.S. with our deed bank from time to time.
+                  </li>
+              </ul>
+              
+            <br><u><b>Payment Terms & Conditions</b></u>
+            <ol>
+              <li>E-Voucher will be activated and delivered within 24 to 48 business hours </li>
+              <li>This Voucher cannot be redeemed for Cash / Cheque </li>
+              <li>The E-Gift Voucher cannot be used to purchase other E-Gift Voucher</li>
+              <li>If the order value exceeds the E-Gift Voucher amount, the balance must be paid by the other payment modes</li>
+              <li>Protect the card numbers and pin numbers to avoid misuse. In case the card number gets stolen, it cannot be replaced, nor cash refunded </li>
+              <li>If voucher is not used with expiry date it will be auto expired.</li>
+              <li> Reminders may or may not be sent by merchant to the beneficiary of the voucher for usage prior to expiry AS it is completely dependent on merchants</li>
+              <li>The redemption code should be unique & validated at time of redemption</li>
+              <li>There is no cancellation cancellation if once gift cards purchased.</li>
+              
+          </ol>
+          <p>
+              Payment is going to be attributable within the name of "Ticketrobo.
+          We reserve the proper to refuse or cancel associate degree order placed for a product that's listed at an incorrect worth. This shall be in spite of whether or not the order has been confirmed and/or payment been levied via mastercard. within the event the payment has been processed, constant shall be attributable to your account and punctually notified to you by email.
+          
+          </p>
+          <p>
+              We shall not be accountable for any mastercard fraud. The liability to use a card fraudulently is going to be on the user and also the incumbrance to 'prove otherwise' shall be solely on the user.
+          
+          </p>
+          <p>
+              If you have got any extra queries or considerations, please email us at [email protected] or contact us on the small print provided in 'Contact Us' page of the web site.
+          
+          </p>
+          <br>
+          <u><b>Refund Policy</b></u>
+          <br>
+          If customer paid twice for one transaction, the one transaction amount will be refunded via same source within 07 to 10 working days
+          <br>
+          <u><b>Cancellation policy</b>
+          </u>
+          <br>
+              The cancelation policy may vary based on the transporter so kindly check the ticket for cancelation policy base on which the tickets will be refunded the customer within 7 to 10 working days.
+          
+          
+          
+        </div>
+          
+<div class="tab-pane container fade" id="menu1">
+ 
+  
+    <br>
+   <b> Who we are & What we do</b>
+    <br>
+    icketrobo is the blend of travel industry in India offering one stop terminal solutions for the comfort of whole journey. With the modern, innovative and advanced services providing the terminal connectivity that strives the customers comfort transformation.
+    
+    <br>
+    Ticketrobo is has nationwide network of bus operators offering over one lakh routes pan india. Providing the feasible experience in booking the bus tickets. Most user friendly portal offering the list of prices, seat availability, seat chart, picking and dropping spots. Has the vast customer support team, solving the customer queries with their 24x7 service.
+    <br>
+    Key features/differentiators provided to customers:
+    <br>
+    <ul>
+        <li>Convenience in bus timings, booking, modification and cancellation, etc.
+        </li>
+        <li>End-to-end connectivity with affordable fares.
+        </li>
+        <li>Sophisticated, latest, comfortable buses for ultimate comfort and coziness.
+        </li>
+        <li>Greater flexibility in choosing, adjusting seats and buses
+        </li>
+        <li>On-time departure and adherence to arrival time schedules.
+        </li>
+        <li>High class passenger safety and convenience
+        </li>
+        <li>Reserved Bus Seats for Ladies.
+        </li>
+    </ul>
+</div>
+<div class="tab-pane container fade" id="menu2">
+ 
+    <br>MOBILE:8190833377
+    <br>EMAIL:[email protected]
+   <br> Address: No.61, south masi street tenkasi-627811,
+    Tirnelveli(Dt),Tamil Nadau
+</div>
+      </div>
+</div>
+
+
+
+
+
+
+
+
+

src/app/home/terms/terms.component.scss

+.terms_wrapper{
+    background: #2c47c4;
+    padding-top: 75px;
+    ul{
+        padding:0px;
+        margin:0px;
+        background: rgba(0,0,0,0.8);
+        border:none;
+        li{
+            list-style: none;
+            border-radius: 0px;
+            .active{
+                background: rgba(273,273,273,0.3);
+                color: #fff;
+            }
+            a{
+                border-radius: 0px;
+                border:none;
+                color: #fff;
+                text-decoration: none;
+                padding: 14px;
+                font-weight: 400;
+                &:hover{
+                    color: #fff;
+                }
+            }
+        }
+    }
+    .tab-content{
+        background: #fff;
+        padding:20px;
+        p{
+            padding-bottom: 10px;
+            font-size: 15px;
+        }
+        ul{
+            background: transparent;
+            padding-left: 35px;
+            li{
+                background: transparent;
+                list-style: circle;
+                
+            }
+        }
+        
+    }
+}
\ No newline at end of file

src/app/home/terms/terms.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TermsComponent } from './terms.component';
+
+describe('TermsComponent', () => {
+  let component: TermsComponent;
+  let fixture: ComponentFixture<TermsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TermsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TermsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/home/terms/terms.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-terms',
+  templateUrl: './terms.component.html',
+  styleUrls: ['./terms.component.scss']
+})
+export class TermsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/loader/loader.component.html

+<div class="loader_main_wrapper">
+    <div class="loader"></div>
+</div>

src/app/loader/loader.component.scss

+.loader_main_wrapper {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    padding: 6px;
+    width: 100%;
+    height: 100%;
+    overflow:hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(273,273,273,0.8);
+    z-index: 9999;
+    .loader {
+        border: 16px solid #ff7800;
+        border-top: 16px solid #2c47c4;
+        border-radius: 50%;
+        width: 100px;
+        height: 100px;
+        animation: spin 2s linear infinite;
+    }
+}
+

src/app/loader/loader.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoaderComponent } from './loader.component';
+
+describe('LoaderComponent', () => {
+  let component: LoaderComponent;
+  let fixture: ComponentFixture<LoaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/loader/loader.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-loader',
+  templateUrl: './loader.component.html',
+  styleUrls: ['./loader.component.scss']
+})
+export class LoaderComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/navbar/navbar.component.html

+<!-- NAVBAR-STARTS-->
+
+<nav class="navbar navbar-expand-lg navbar-light box_shdw_down">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="#">
+            <img src="../assets/imgs/logo.png">
+        </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item active">
+                    <a class="nav-link" href="#">Home</a>
+                </li>
+                <li class="nav-item active">
+                    <a class="nav-link" href="#">PARCEL TRACKING</a>
+                </li>
+                <li class="nav-item active">
+                    <a class="nav-link" href="#">BUS TRACKING</a>
+                </li>
+                <li class="nav-item active">
+                    <a class="nav-link" href="#">CANCEL TICKETS</a>
+                </li>
+                <li class="nav-item active">
+                    <a class="nav-link" href="#">CONTACT</a>
+                </li>
+                <!-- <li class="nav-item active" *ngIf="!loginDetails">
+                    <a class="nav-link" (click)="open(agent,'agent')">Agent Login</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="#" data-toggle="modal" (click)="modelOpen(print)">Print/SMS ticket</a>
+                </li>
+                <li class="nav-item" *ngIf="loginDetails">
+                    <a class="nav-link" href="#" data-toggle="modal" (click)="modelOpen(cancel)">Easy Cancel/Refund</a>
+                </li>
+                <li class="nav-item" *ngIf="!loginDetails">
+                    <a class="nav-link" href="#" data-toggle="modal" (click)="open(login,'login')">Easy Cancel/Refund</a>
+                </li> -->
+            </ul>
+            <form class="form-inline my-2 my-lg-0" *ngIf="!loginDetails">
+                <div class="nav_btn" data-toggle="modal" (click)="open(login,'login')">Sign in</div>
+                <div class="nav_btn" data-toggle="modal" (click)="open(signup,'signup')">Sign up</div>
+            </form>
+            <form class="form-inline my-2 my-lg-0" *ngIf="loginDetails">
+                <div class="my_account dropdown">
+                    <div class="" data-toggle="dropdown">
+                        <div>
+                            <div class="my_account_pic"><img [src]="loginDetails.image" onError="this.src='./../assets/imgs/user.png';" /></div>
+                        </div>
+                        <div *ngIf="loginDetails.name!==null"> <span>Hi, {{loginDetails.name}}</span></div>
+                        <div *ngIf="loginDetails.name===null"> <span>Hi, {{loginDetails.mob}}</span></div>
+                        <ul class="dropdown-menu">
+                            <li (click)="goToPage('account')">My Account</li>
+                            <li (click)="logout()">Logout</li>
+                        </ul>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</nav>
+
+<!-- NAVBAR-ENDS-->
+
+<!-- LOGIN-MODAL-STARTS -->
+
+<ng-template #login data-backdrop="static" data-keyboard="false">
+    <div id="login" class="cmn_modal_wrapper">
+        <div class="cmn_modal_header" fxLayout="row" fxLayoutAlign="space-between center">
+            <button type="button" class="close" (click)="close()">&times;</button>
+            <h2>LOGIN</h2>
+            <div fxLayout="row" fxLayoutAlign="end center">
+                <div class="social_icon fb_social" (click)="socialSignIn('facebook')">
+                </div>
+                <div class="social_icon g_social" (click)="socialSignIn('google')"></div>
+            </div>
+        </div>
+        <div class="cmn_modal_content relative">
+            <div class="loader_common_main_wrapper" *ngIf="loading">
+                <div class="loader"></div>
+            </div>
+            <form [formGroup]="loginForm" (ngSubmit)="loginProcess()" autocomplete="off">
+                <div class="custom_row">
+                    <p>EMAIL/PHONE NUMBER</p>
+                    <input class="" placeholder="[email protected]" type="text" formControlName="username">
+                    <div [ngClass]="{'log_check':!loginForm.controls['username'].valid,'log_check_valid':loginForm.controls['username'].valid}">
+                    </div>
+                    <div class="s_error" *ngIf="!loginForm.controls['username'].valid && loginForm.controls['username'].touched">
+                        <div class="s_validation" *ngIf="loginForm.controls['username'].hasError('pattern')">
+                            {{vs.errorList.email}} </div>
+                        <div class="s_validation" *ngIf="loginForm.controls['username'].hasError('maxlength')">
+                            {{vs.errorList.maxLength}} 50</div>
+                    </div>
+                    <div class="s_error" *ngIf="!loginForm.controls['username'].valid && loginSubmit">
+                        <div class="s_validation" *ngIf="loginForm.controls['username'].hasError('required')">
+                            {{vs.errorList.required}} </div>
+                    </div>
+                </div>
+
+                <div class="custom_row">
+                    <p>PASSWORD</p>
+                    <input class="" placeholder="password" type="password" autocomplete="off" formControlName="password">
+                    <div class="log_check" [ngClass]="{'log_check':!loginForm.controls['password'].valid,'log_check_valid':loginForm.controls['password'].valid}">
+                    </div>
+                    <div class="s_error" *ngIf="!loginForm.controls['password'].valid && loginForm.controls['password'].touched">
+                        <div class="s_validation" *ngIf="loginForm.controls['password'].hasError('minlength')">
+                            {{vs.errorList.minLength}} 6</div>
+                    </div>
+                    <div class="s_error" *ngIf="!loginForm.controls['password'].valid && loginSubmit">
+                        <div class="s_validation" *ngIf="loginForm.controls['password'].hasError('required')">
+                            {{vs.errorList.required}} </div>
+                    </div>
+                </div>
+
+
+                <div class="custom_row">
+                    <button class="modal_btn">SIGN IN</button>
+                </div>
+                <div *ngIf="loginResponse" class="s_alert" [ngClass]="(loginResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
+                    <strong>{{loginResponse.message}}<br></strong>
+                </div>
+                <div class="custom_row">
+                    <h6 data-dismiss="modal" data-toggle="modal" (click)="close();open(forgot,'forgot')">Forgot Password?
+                    </h6>
+                </div>
+                <div class="custom_row">
+                    <h5>Don't have an account? <a data-dismiss="modal" data-toggle="modal" (click)="close();open(signup,'signup')">Sign Up</a></h5>
+                </div>
+            </form>
+        </div>
+    </div>
+</ng-template>
+
+<!-- LOGIN-MODAL-ENDS -->
+
+
+<!-- AGENT LOGIN-MODAL-STARTS -->
+
+<ng-template #agent data-backdrop="static" data-keyboard="false">
+
+    <div id="agent" class="cmn_modal_wrapper">
+        <div class="cmn_modal_header" fxLayout="row" fxLayoutAlign="space-between center">
+            <button type="button" class="close" (click)="close()">&times;</button>
+            <h2>AGENT LOGIN</h2>
+        </div>
+        <div class="cmn_modal_content relative">
+            <div class="loader_common_main_wrapper" *ngIf="loading">
+                <div class="loader"></div>
+            </div>
+            <form [formGroup]="agentForm" (ngSubmit)="agentProcess()" autocomplete="off">
+                <div class="custom_row">
+                    <p>EMAIL ADDRESS</p>
+                    <input class="" placeholder="[email protected]" type="text" formControlName="username">
+                    <div [ngClass]="{'log_check':!agentForm.controls['username'].valid,'log_check_valid':agentForm.controls['username'].valid}">
+                    </div>
+                    <div class="s_error" *ngIf="!agentForm.controls['username'].valid && agentForm.controls['username'].touched">
+                        <div class="s_validation" *ngIf="agentForm.controls['username'].hasError('pattern')">
+                            {{vs.errorList.email}} </div>
+                        <div class="s_validation" *ngIf="agentForm.controls['username'].hasError('maxlength')">
+                            {{vs.errorList.maxLength}} 50</div>
+                    </div>
+                    <div class="s_error" *ngIf="!agentForm.controls['username'].valid && agentSubmit">
+                        <div class="s_validation" *ngIf="agentForm.controls['username'].hasError('required')">
+                            {{vs.errorList.required}} </div>
+                    </div>
+                </div>
+
+                <div class="custom_row">
+                    <p>PASSWORD</p>
+                    <input class="" placeholder="password" type="password" autocomplete="off" formControlName="password">
+                    <div class="log_check" [ngClass]="{'log_check':!agentForm.controls['password'].valid,'log_check_valid':agentForm.controls['password'].valid}">
+                    </div>
+                    <div class="s_error" *ngIf="!agentForm.controls['password'].valid && agentForm.controls['password'].touched">
+                        <div class="s_validation" *ngIf="agentForm.controls['password'].hasError('minlength')">
+                            {{vs.errorList.minLength}} 6</div>
+                    </div>
+                    <div class="s_error" *ngIf="!agentForm.controls['password'].valid && agentSubmit">
+                        <div class="s_validation" *ngIf="agentForm.controls['password'].hasError('required')">
+                            {{vs.errorList.required}} </div>
+                    </div>
+                </div>
+                <div class="custom_row">
+                    <button class="modal_btn">SIGN IN</button>
+                </div>
+                <div *ngIf="agentResponse" class="s_alert" [ngClass]="(agentResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
+                    <strong>{{agentResponse.message}}<br></strong>
+                </div>
+            </form>
+        </div>
+    </div>
+</ng-template>
+
+
+<!-- AGENT LOGIN-MODAL-ENDS -->
+
+<!-- SIGNUP-MODAL-STARTS -->
+
+<ng-template #signup>
+    <div id="signup" class="cmn_modal_wrapper">
+        <div class="cmn_modal_header" fxLayout="row" fxLayoutAlign="space-between center">
+            <button type="button" class="close" (click)="close()">&times;</button>
+            <h2>SIGN UP</h2>
+            <div fxLayout="row" fxLayoutAlign="end center">
+                <div class="social_icon fb_social" (click)="socialSignIn('facebook')">
+                </div>
+                <div class="social_icon g_social" (click)="socialSignIn('google')"></div>
+            </div>
+        </div>
+        <div class="cmn_modal_content relative">
+            <div class="loader_common_main_wrapper" *ngIf="loading">
+                <div class="loader"></div>
+            </div>
+            <form [formGroup]="signForm" (ngSubmit)="signProcess()" autocomplete="off">
+                <div class="custom_row">
+                    <p>FULL NAME</p>
+                    <input class="" placeholder="Full Name" type="text" formControlName="name">
+                    <div [ngClass]="{'log_check':!signForm.controls['name'].valid,'log_check_valid':signForm.controls['name'].valid}">
+                    </div>
+                    <div class="s_error" *ngIf="!signForm.controls['name'].valid && SignSubmit">
+                        <div class="s_validation" *ngIf="signForm.controls['name'].hasError('required')">
+                            {{vs.errorList.required}} </div>
+                    </div>
+                </div>
+                <div class="custom_row">
+                    <p>EMAIL ADDRESS</p>
+                    <input class="" placeholder="[email protected]" type="email" formControlName="username">
+                    <div [ngClass]="{'log_check':!signForm.controls['username'].valid,'log_check_valid':signForm.controls['username'].valid}">
+                    </div>
+                    <div class="s_error" *ngIf="!signForm.controls['username'].valid && signForm.controls['username'].touched">
+                        <div class="s_validation" *ngIf="signForm.controls['username'].hasError('pattern')">
+                            {{vs.errorList.email}} </div>
+                        <div class="s_validation" *ngIf="signForm.controls['username'].hasError('maxlength')">
+                            {{vs.errorList.maxLength}} 50</div>
+                    </div>
+                    <div class="s_error" *ngIf="!signForm.controls['username'].valid && SignSubmit">
+                        <div class="s_validation" *ngIf="signForm.controls['username'].hasError('required')">
+                            {{vs.errorList.required}} </div>
+                    </div>
+                </div>
+                <div class="custom_row">
+                    <p>MOBILE NUMBER</p>
+                    <input class="" placeholder="Eg: 9961545882" type="text" formControlName="mob">
+                    <div class="log_check" [ngClass]="{'log_check':!signForm.controls['mob'].valid,'log_check_valid':signForm.controls['mob'].valid}">
+                    </div>
+                    <div class="s_error" *ngIf="!signForm.controls['mob'].valid && signForm.controls['mob'].touched">
+                        <div class="s_validation" *ngIf="signForm.controls['mob'].hasError('pattern')">
+                            {{vs.errorList.phone}}</div>
+                    </div>
+                    <div class="s_error" *ngIf="!signForm.controls['mob'].valid && signForm.controls['mob'].touched && !signForm.controls['mob'].hasError('pattern')">
+                        <div class="s_validation" *ngIf="signForm.controls['mob'].hasError('maxlength')">
+                            {{vs.errorList.maxLength}} 15</div>
+                        <div class="s_validation" *ngIf="signForm.controls['mob'].hasError('minlength')">
+                            {{vs.errorList.minLength}} 8</div>
+                    </div>
+                    <div class="s_error" *ngIf="!signForm.controls['mob'].valid && SignSubmit">
+                        <div class="s_validation" *ngIf="signForm.controls['mob'].hasError('required')">
+                            {{vs.errorList.required}} </div>
+                    </div>
+                </div>
+                <div class="custom_row">
+                    <p>PASSWORD</p>
+                    <input class="" placeholder="password" type="password" formControlName="password">
+                    <div class="log_check" [ngClass]="{'log_check':!signForm.controls['password'].valid,'log_check_valid':signForm.controls['password'].valid}">
+                    </div>
+                    <div class="s_error" *ngIf="!signForm.controls['password'].valid && signForm.controls['password'].touched">
+                        <div class="s_validation" *ngIf="signForm.controls['password'].hasError('minlength')">
+                            {{vs.errorList.minLength}} 6</div>
+                    </div>
+                    <div class="s_error" *ngIf="!signForm.controls['password'].valid && SignSubmit">
+                        <div class="s_validation" *ngIf="signForm.controls['password'].hasError('required')">
+                            {{vs.errorList.required}} </div>
+                    </div>
+                </div>
+                <div class="custom_row">
+                    <input class="styled-checkbox" id="styled-checkbox-2" type="checkbox" value="value1" formControlName="terms">
+                    <label for="styled-checkbox-2">
+                       <p>Accept Terms and Conditions</p>
+                     </label>
+                    <div class="s_error" *ngIf="!signForm.controls['terms'].valid && SignSubmit">
+                        <div class="s_validation" *ngIf="signForm.controls['terms'].hasError('required')">
+                            {{vs.errorList.required}} </div>
+                    </div>
+                    <div *ngIf="signResponse" class="s_alert" [ngClass]="(signResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
+                        <strong>{{signResponse.message}}<br></strong>
+                    </div>
+                </div>
+                <div class="custom_row">
+                    <button class="modal_btn">SIGN UP</button>
+                </div>
+                <div *ngIf="loginResponse" class="s_alert" [ngClass]="(loginResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
+                    <strong>{{loginResponse.message}}<br></strong>
+                </div>
+                <div class="custom_row">
+                    <h6 data-dismiss="modal" data-toggle="modal" (click)="close();open(forgot,'forgot')">Forgot Password?
+                    </h6>
+                </div>
+                <div class="custom_row">
+                    <h5>Already had an account? <a data-dismiss="modal" data-toggle="modal" (click)="close();open(login,'login')">Sign In</a></h5>
+                </div>
+            </form>
+        </div>
+    </div>
+</ng-template>
+
+<!-- SIGNUP-MODAL-ENDS -->
+
+
+
+<!-- CANCEL-MODAL-STARTS -->
+
+<ng-template #cancel>
+    <div id="cancel" class="log_modal" data-backdrop="static" data-keyboard="false">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <button type="button" class="close" (click)="close()">&times;</button>
+                <div class="log_modal_inner">
+                    <form [formGroup]="cancelForm" (ngSubmit)="cancelProcess()" autocomplete="off">
+                        <h3>Ticket Cancelation & Refund</h3>
+                        <p>Follow simple hassle free steps to cancel tickets & easy refund </p>
+                        <div class="log_modal_content">
+                            <!-- <div class="log_modal_content_inner">
+                                <div class="log_row">
+                                    <div class="log_label1">
+                                        <p>Enter your Details given below</p>
+                                        <br>
+                                        <input class="" placeholder="Ticket Number" type="text" formControlName="bookingID">
+                                        <div class="s_error" *ngIf="!cancelForm.controls['bookingID'].valid && cancelSubmit">
+                                            <div class="s_validation" *ngIf="cancelForm.controls['bookingID'].hasError('required')">{{vs.errorList.required}} </div>
+                                        </div>
+                                    </div>
+                                    <div class="clear"></div>
+                                </div>
+                                <div class="log_row">
+                                    <div class="log_label1">
+                                        <input class="" placeholder="Email" type="mail" formControlName="email">
+                                        <div class="s_error" *ngIf="!cancelForm.controls['email'].valid && cancelForm.controls['email'].touched">
+                                            <div class="s_validation" *ngIf="cancelForm.controls['email'].hasError('pattern')">{{vs.errorList.email}} </div>
+                                            <div class="s_validation" *ngIf="cancelForm.controls['email'].hasError('maxlength')">{{vs.errorList.maxLength}} 50</div>
+                                        </div>
+                                        <div class="s_error" *ngIf="!cancelForm.controls['email'].valid && SignSubmit">
+                                            <div class="s_validation" *ngIf="cancelForm.controls['email'].hasError('required')">{{vs.errorList.required}} </div>
+                                        </div>
+                                    </div>
+                                    <div class="clear"></div>
+                                </div>
+                                <div class="log_row relative">
+                                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect log_btn1 secondary_color_bg" data-toggle="modal" data-target="#sure">
+                               Cancel Ticket
+                        </button>
+                                </div>
+                            </div> -->
+                            <div class="log_modal_content_inner">
+                                <h1>Are you sure want to proceed?</h1>
+                                <div class="log_row relative">
+                                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect log_btn1 secondary_color_bg floatLeft">
+                               Yes
+                        </button>
+                                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect log_btn1 floatRight">
+                            No
+                     </button>
+                                    <div class="clear"></div>
+                                </div>
+                            </div>
+                            <div *ngIf="cancelResponse" class="s_alert" [ngClass]="(cancelResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
+                                <strong>{{cancelResponse.message}}<br></strong>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+                <!-- Modal footer -->
+                <div class="modal-footer">
+                    <div class="log_modal_footer">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</ng-template>
+
+<!-- CANCEL-MODAL-ENDS -->
+
+
+<!-- PRINT-TICKET-MODAL-STARTS -->
+
+<ng-template #print>
+    <div id="print" class="log_modal" data-backdrop="static" data-keyboard="false">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <button type="button" class="close" (click)="close()">&times;</button>
+                <div class="log_modal_inner">
+                    <form [formGroup]="printForm" (ngSubmit)="printProcess()" autocomplete="off">
+                        <h3>Print / SMS Ticket</h3>
+                        <p>Follow simple hassle free steps to cancel tickets & easy refund </p>
+                        <div class="log_modal_content">
+                            <div class="log_modal_content_inner">
+                                <div class="log_row">
+                                    <div class="log_label1">
+                                        <p>Enter your Ticket Number</p>
+                                        <br>
+                                        <input placeholder="Ticket Number" type="text" formControlName="bookingID">
+                                        <div class="s_error" *ngIf="!printForm.controls['bookingID'].valid && printSubmit">
+                                            <div class="s_validation" *ngIf="printForm.controls['bookingID'].hasError('required')">{{vs.errorList.required}} </div>
+                                        </div>
+                                    </div>
+                                    <div class="clear"></div>
+                                </div>
+                                <div class="log_row pt10">
+                                    <div class="log_label1">
+                                        <p>Choose method </p>
+                                    </div>
+                                    <select formControlName="type">
+                                   <option value="email">Email</option>
+                                    <option value="sms">SMS</option>
+                                </select>
+                                </div>
+                                <div class="log_row relative">
+                                    <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect log_btn1 secondary_color_bg">
+                                   Submit
+                            </button>
+                                </div>
+                            </div>
+                        </div>
+                        <div *ngIf="printResponse" class="s_alert" [ngClass]="(printResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
+                            <strong>{{printResponse.message}}<br></strong>
+                        </div>
+                    </form>
+                </div>
+                <!-- Modal footer -->
+                <div class="modal-footer">
+                    <div class="log_modal_footer">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</ng-template>
+
+<!-- CANCEL-MODAL-ENDS -->
+
+
+<!-- MY-ACCOUNT-MODAL-STARTS -->
+
+<div id="account" class="log_modal modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <button type="button" class="close" data-dismiss="modal">&times;</button>
+            <div class="log_modal_inner">
+                <h3>Print / SMS Ticket</h3>
+                <p>Follow simple hassle free steps to cancel tickets & easy refund </p>
+                <div class="log_modal_content">
+                    <div class="log_modal_content_inner">
+                        <div class="log_row">
+                            <div class="log_label1">
+                                <p>Enter your Ticket Number</p>
+                                <br>
+                                <input class="" placeholder="Ticket Number" type="text">
+                            </div>
+                            <div class="clear"></div>
+                        </div>
+                        <div class="log_row pt10">
+                            <div class="log_label1">
+                                <p>Choose method </p>
+                            </div>
+                            <select>
+                                   <option>Email</option>
+                                    <option>SMS</option>
+                                    <option>Whatsapp</option>
+                                    <option>Print</option>
+                                </select>
+                        </div>
+                        <div class="log_row relative">
+                            <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect log_btn1">
+                                   Submit
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Modal footer -->
+            <div class="modal-footer">
+                <div class="log_modal_footer">
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- MY-ACCOUNT-MODAL-ENDS -->
+
+<!-- FORGOT-MODAL-STARTS -->
+
+
+
+<ng-template #forgot>
+    <div id="login" class="cmn_modal_wrapper">
+        <div class="cmn_modal_header" fxLayout="row" fxLayoutAlign="space-between center">
+            <button type="button" class="close" (click)="close()">&times;</button>
+            <h2>FORGOT</h2>
+        </div>
+        <div class="cmn_modal_content relative">
+            <div class="loader_common_main_wrapper" *ngIf="loading">
+                <div class="loader"></div>
+            </div>
+            <form [formGroup]="forgotForm" (ngSubmit)="forgotProcess()" autocomplete="off">
+                <div class="custom_row">
+                    <p>Email Address</p>
+                    <input class="" placeholder="[email protected]" type="text" formControlName="username">
+                    <div [ngClass]="{'log_check':!forgotForm.controls['username'].valid,'log_check_valid':forgotForm.controls['username'].valid}">
+                    </div>
+                    <div class="s_error" *ngIf="!forgotForm.controls['username'].valid && forgotForm.controls['username'].touched">
+                        <div class="s_validation" *ngIf="forgotForm.controls['username'].hasError('pattern')">
+                            {{vs.errorList.email}} </div>
+                        <div class="s_validation" *ngIf="forgotForm.controls['username'].hasError('maxlength')">
+                            {{vs.errorList.maxLength}} 50</div>
+                    </div>
+                    <div class="s_error" *ngIf="!forgotForm.controls['username'].valid && forgotSubmit">
+                        <div class="s_validation" *ngIf="forgotForm.controls['username'].hasError('required')">
+                            {{vs.errorList.required}} </div>
+                    </div>
+                </div>
+                <div class="custom_row">
+                    <button class="modal_btn">REQUEST</button>
+                </div>
+                <div class="custom_row" fxLayout="row" fxLayoutAlign="space-between center">
+                    <h5 data-dismiss="modal" data-toggle="modal" (click)="close();open(login,'login')">Login</h5>
+                    <h5 data-dismiss="modal" data-toggle="modal" (click)="close();open(signup,'signup')">Sign Up</h5>
+                </div>
+            </form>
+        </div>
+    </div>
+</ng-template>
+
+
+<!-- FORGOT-MODAL-ENDS -->
\ No newline at end of file

src/app/navbar/navbar.component.scss

+@import "../../styles.scss";
+.navbar {
+    background-color: $white-color;
+    position: fixed;
+    transition-duration: 1s;
+    transition-timing-function: ease;
+    padding: 1rem 1rem;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    padding-right: 5%;
+    padding-left: 5%;
+    z-index: 999;
+    .my_account {
+        height: 41px;
+        padding-left: 10px;
+        padding-right: 30px;
+        padding-top: 7px;
+        padding-bottom: 7px;
+        min-width: 125px;
+        border: 1px solid $primary-color;
+        border-radius: 3px;
+        &:hover {
+            background-color: $primary-color;
+            div {
+                color: $white-color;
+            }
+        }
+        div {
+            display: inline-block;
+            color: $black-color;
+            font-size: 17px;
+            font-weight: 400;
+            span {
+                position: relative;
+                cursor: pointer;
+                bottom: 0px;
+                font-size: 16px;
+                text-transform: capitalize;
+                padding-left: 10px;
+            }
+        }
+        .my_account_pic {
+            width: 27px;
+            height: 27px;
+            background: $white-color;
+            border-radius: 50%;
+            border: 1px solid $primary-color;
+            img {
+                width: 100%;
+                height: 100%;
+                border-radius: 50%;
+                object-fit: cover;
+                object-position: center;
+            }
+        }
+        .dropdown-menu {
+            border-radius: 0px;
+            margin: 0px;
+            padding: 0px;
+            background: $white-color;
+            border: none;
+            li {
+                color: $black-color;
+                cursor: pointer;
+                padding: 10px;
+                &:hover {
+                    background-color: $primary-color;
+                    color: $white-color;
+                }
+            }
+        }
+    }
+    .navbar-brand {
+        img {
+            height: 70px;
+            width: auto;
+            transition-duration: 1s;
+            transition-timing-function: ease;
+        }
+    }
+    .navbar-nav {
+        padding-right: 25px;
+        li {
+            a {
+                border: 2px solid transparent;
+                background: transparent;
+                border-radius: 3px;
+                color: $black-color;
+                height: 41px;
+                margin-left: 5px;
+                margin-right: 5px;
+                padding-top: 0px;
+                padding-bottom: 0px;
+                padding-left: 15px;
+                padding-right: 15px;
+                font-weight: 400;
+                font-size: 16px;
+                line-height: 36px;
+                cursor: pointer;
+                text-transform: uppercase;
+                &:hover {
+                    border: 2px solid $primary-color;
+                    color: $white-color;
+                    background-color: $primary-color;
+                }
+                &:focus {
+                    border: 2px solid $primary-color;
+                    color: $white-color;
+                    background-color: $primary-color;
+                }
+            }
+        }
+    }
+    .nav_btn {
+        border: 2px solid $primary-color;
+        background: transparent;
+        border-radius: 3px;
+        color: $primary-color;
+        height: 41px;
+        margin-left: 5px;
+        margin-right: 5px;
+        padding-left: 25px;
+        padding-right: 25px;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 36px;
+        cursor: pointer;
+        text-transform: uppercase;
+        &:hover {
+            border: 2px solid $primary-color;
+            color: $white-color;
+            background-color: $primary-color;
+        }
+        &:focus {
+            border: 2px solid $primary-color;
+            color: $white-color;
+            background-color: $primary-color;
+        }
+    }
+}
+
+.scrolled_navbar {
+    background: $white-color !important;
+    transition-duration: 1s;
+    transition-timing-function: ease;
+    .navbar-brand {
+        img {
+            height: 50px;
+            width: auto;
+            transition-duration: 1s;
+            transition-timing-function: ease;
+        }
+    }
+}
\ No newline at end of file

src/app/navbar/navbar.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavbarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/navbar/navbar.component.ts

+
+import { Component, OnInit, HostListener, TemplateRef, ElementRef, ViewChild } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+import { BsModalService } from 'ngx-bootstrap/modal';
+import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
+import { FormControl, FormGroup, FormBuilder, Validators, ValidationErrors } from '@angular/forms';
+import { ValidationService } from './../provider/validation.service';
+import { WebService } from './../provider/web.service';
+import { SubjectService } from './../provider/subject.service';
+import { Login } from '../provider/declare.model';
+import { AuthService, FacebookLoginProvider, GoogleLoginProvider, VkontakteLoginProvider} from 'angular-6-social-login-v2';
+
+
+declare var $;
+declare const window: any;
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.scss']
+})
+
+
+export class NavbarComponent implements OnInit {
+
+modalRef: BsModalRef;
+signForm: FormGroup;
+forgotForm: FormGroup;
+loginForm: FormGroup;
+agentForm: FormGroup;
+printForm: FormGroup;
+cancelForm: FormGroup;
+@ViewChild('login') private login: TemplateRef<HTMLElement>;
+
+mobnumPattern = '^((\\+?)|0)?[0-9]{0,20}$';
+emailPattern = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$';
+
+email_id = new FormControl('', [Validators.required, Validators.maxLength(50), Validators.pattern(this.emailPattern)]);
+password = new FormControl('', [Validators.required, Validators.minLength(6)]);
+name = new FormControl('', [Validators.required]);
+mob = new FormControl('', [Validators.required, Validators.minLength(8), Validators.maxLength(15), Validators.pattern(this.mobnumPattern)]);
+term = new FormControl('', [Validators.required, Validators.pattern('true')]);
+loading: boolean;
+loginSubmit: boolean;
+agentSubmit: boolean;
+SignSubmit: boolean;
+printSubmit: boolean;
+funcName: string;
+loginDetails: any;
+loginResponse: any;
+agentResponse: any;
+signResponse: any;
+socialResponse: any;
+forgotResponse: any;
+printResponse: any;
+cancelResponse: any;
+forgotSubmit: any;
+cancelSubmit: any;
+
+constructor(
+  private router: Router,
+  private route: ActivatedRoute,
+  private bsmodalservice: BsModalService,
+  private formBuilder: FormBuilder,
+  public vs: ValidationService,
+  public service: WebService,
+  public subjectService: SubjectService,
+  private socialAuthService: AuthService
+  ) {
+    this.loading = false;
+    this.loginSubmit = false;
+    this.SignSubmit = false;
+    this.forgotSubmit = false;
+    this.printSubmit = false;
+    this.cancelSubmit = false;
+  }
+
+  ngOnInit() {
+    let userId = '';
+    this.subjectService.getLoginData().subscribe(loginData => {
+      this.loginDetails = JSON.parse(this.service.getLocalStorageItem('userData'));
+      if (this.loginDetails) {
+        userId = this.loginDetails.id;
+      }
+    });
+
+    this.subjectService.getisLoggined().subscribe(isLoggined => {
+      console.log(isLoggined);
+      if (isLoggined != null) {
+        if (isLoggined === 'not_loggedIn') {
+          this.open(this.login, 'login');
+        }
+      }
+   });
+
+   this.printForm = this.formBuilder.group({
+     'type': ['email'],
+    'bookingID': ['', Validators.compose([Validators.required])],
+    });
+
+    this.cancelForm = this.formBuilder.group({
+      'email': this.email_id,
+      'bookingID': ['', Validators.compose([Validators.required])],
+      'userId': [userId]
+     });
+
+  }
+
+
+
+  @HostListener('window:scroll', [])
+  onWindowScroll() {
+
+    const number = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    if (number > 100) {
+      console.log('You are 100px from the top to bottom');
+    } else if (number > 500) {
+        console.log('You are 500px from the top to bottom');
+    }
+
+    $(window).scroll(function() {
+      const sticky = $('.navbar'),
+        scroll = $(window).scrollTop();
+        if (scroll > 10) { sticky.addClass('scrolled_navbar'); } else { sticky.removeClass('scrolled_navbar'); }
+    });
+  }
+
+   goToPage(path, data = null) {
+    console.log(data);
+    this.router.navigateByUrl(path, {queryParams: data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  form_initalize(type: string) {
+    switch (type) {
+      case 'login':
+        this.loginForm = this.formBuilder.group({
+          username: this.email_id,
+          password: this.password
+        });
+      break;
+      case 'signup':
+        this.signForm = this.formBuilder.group({
+          username: this.email_id,
+          password: this.password,
+          name: this.name,
+          mob: this.mob,
+          terms: this.term,
+        });
+      break;
+      case 'forgot':
+        this.forgotForm = this.formBuilder.group({
+          username: this.email_id
+        });
+      break;
+      case 'agent':
+        this.agentForm = this.formBuilder.group({
+          username: this.email_id,
+          password: this.password
+        });
+      break;
+    }
+
+    if (this.forgotForm) {
+      this.forgotForm.reset();
+    } else if (this.signForm) {
+      this.signForm.reset();
+    } else if (this.agentForm) {
+      this.agentForm.reset();
+    } else {
+      this.loginForm.reset();
+    }
+  }
+
+  open(template: TemplateRef<any>, type: string) {
+    console.log('calles');
+    this.form_initalize(type);
+    this.modalRef = this.bsmodalservice.show(template, {backdrop: 'static'});
+  }
+
+  modelOpen(template: TemplateRef<any>) {
+    this.modalRef = this.bsmodalservice.show(template, {backdrop: 'static'});
+  }
+
+  close() {
+    this.modalRef.hide();
+  }
+
+  loginProcess() {
+    const This = this;
+    console.log(this.loginForm.value);
+    this.loginSubmit = true;
+    if (this.loginForm.valid) {
+      const userObj = this.loginForm.value;
+      this.funcName = 'user_login';
+      this.loading = true;
+      this.service.post_data(this.funcName, userObj).subscribe(response => {
+        this.loading = false;
+        if ( response.status === 'success') {
+          response.data.type = 'user';
+          this.service.setLocalStorageItem('userData', JSON.stringify(response.data));
+          this.subjectService.sendLoginData('logged_in');
+          this.loginResponse = response;
+          setTimeout( function() {
+            This.loginResponse = undefined;
+            This.loginForm.reset();
+            This.close();
+          }, 1000);
+        } else {
+          this.loginResponse = response;
+        }
+      }, (error) => {
+
+      });
+    } else {
+      this.loading = false;
+      this.getErrors(this.loginForm);
+    }
+    console.log('tested');
+  }
+
+  signProcess() {
+    const This = this;
+    console.log(this.signForm.value);
+    this.SignSubmit = true;
+    if (this.signForm.valid) {
+      const userObj = this.signForm.value;
+      this.funcName = 'user_signup';
+      this.loading = true;
+      this.service.post_data(this.funcName, userObj).subscribe(response => {
+        this.loading = false;
+        if ( response.status === 'success') {
+          response.data.type = 'user';
+          this.service.setLocalStorageItem('userData', JSON.stringify(response.data));
+          this.subjectService.sendLoginData('logged_in');
+          this.signResponse = response;
+          setTimeout( function() {
+            This.signResponse = undefined;
+            This.signForm.reset();
+            This.close();
+          }, 1000);
+        } else {
+          this.signResponse = response;
+        }
+      }, (error) => {
+
+      });
+    } else {
+      this.loading = false;
+      this.getErrors(this.signForm);
+    }
+    console.log('tested');
+  }
+
+  forgotProcess() {
+    const This = this;
+    console.log(this.forgotForm.value);
+    this.forgotSubmit = true;
+    if (this.forgotForm.valid) {
+      const userObj = this.forgotForm.value;
+      this.funcName = 'user_forgot';
+      this.loading = true;
+      this.service.post_data(this.funcName, userObj).subscribe(response => {
+        this.loading = false;
+        if ( response.status === 'success') {
+          this.loginResponse = response;
+          This.forgotForm.reset();
+          this.modalRef.hide();
+          this.open(this.login, 'login');
+          setTimeout( function() {
+            This.loginResponse.status = '';
+            This.loginResponse.message = '';
+            This.forgotSubmit = false;
+            This.loginResponse = undefined;
+          }, 1000);
+        } else {
+          this.forgotResponse = response;
+        }
+      }, (error) => {
+
+      });
+    } else {
+      this.loading = false;
+      this.getErrors(this.signForm);
+    }
+  }
+
+  printProcess() {
+    const This = this;
+    this.printSubmit = true;
+    if (this.printForm.valid) {
+      const printObj = this.printForm.value;
+      printObj.bookingID = this.bookrevReplace(printObj.bookingID);
+      this.funcName = 'print_ticket';
+      this.loading = true;
+      this.service.post_data(this.funcName, printObj).subscribe(response => {
+        this.loading = false;
+        if ( response.status === 'success') {
+          this.printResponse = response;
+          setTimeout( function() {
+            This.printForm.reset();
+            This.modalRef.hide();
+            This.printResponse.status = '';
+            This.printResponse.message = '';
+            This.printSubmit = false;
+            This.printResponse = undefined;
+          }, 1000);
+        } else {
+          this.printResponse = response;
+        }
+      }, (error) => {
+
+      });
+    }
+  }
+
+  agentProcess() {
+    const This = this;
+    console.log(this.agentForm.value);
+    this.agentSubmit = true;
+    if (this.agentForm.valid) {
+      const userObj = this.agentForm.value;
+      this.funcName = 'agent_login';
+      this.loading = true;
+      this.service.post_data(this.funcName, userObj).subscribe(response => {
+        this.loading = false;
+        if ( response.status === 'success') {
+          response.data.type = 'agent';
+          this.service.setLocalStorageItem('userData', JSON.stringify(response.data));
+          this.subjectService.sendLoginData('logged_in');
+          this.agentResponse = response;
+          setTimeout( function() {
+            This.agentResponse = undefined;
+            This.agentForm.reset();
+            This.close();
+          }, 1000);
+        } else {
+          this.agentResponse = response;
+        }
+      }, (error) => {
+
+      });
+    } else {
+      this.loading = false;
+      this.getErrors(this.loginForm);
+    }
+    console.log('tested');
+  }
+
+  cancelProcess() {
+    const This = this;
+    this.cancelSubmit = true;
+    if (this.cancelForm.valid) {
+      const cancelObj = this.cancelForm.value;
+      cancelObj.bookingID = this.bookrevReplace(cancelObj.bookingID);
+      cancelObj['type'] = this.loginDetails.type;
+      cancelObj['userId'] = this.loginDetails.id;
+      this.funcName = 'cancel_ticket';
+      this.loading = true;
+      this.service.post_data(this.funcName, cancelObj).subscribe(response => {
+        this.loading = false;
+        if ( response.status === 'success') {
+          this.cancelTicket(response.data);
+        } else {
+          this.cancelResponse = response;
+        }
+      }, (error) => {
+        this.cancelResponse = 'Something Went wrong';
+      });
+    } else {
+      this.cancelResponse = 'Form Invalid';
+    }
+  }
+
+  cancelTicket(data: any) {
+    const postData = data;
+    let url = 'cancel?username=javatest&password=123456';
+    console.log(url);
+    this.service.online_service(url, 'data=' + JSON.stringify(postData)).subscribe(response => {
+        const confirm_result = response;
+        console.log(confirm_result);
+        if (confirm_result.message === 'Success') {
+          this.funcName = 'confirmCancel';
+          this.loading = true;
+          const confirmData = {'bookingId': postData.bookingCode};
+          this.service.post_data(this.funcName, confirmData).subscribe(responseData => {
+            this.cancelForm.reset();
+            this.close();
+            this.loading = false;
+            if ( responseData.status === 'success') {
+              url = 'confirmcancel?username=javatest&password=123456';
+              this.service.online_service(url, 'data=' + JSON.stringify(postData)).subscribe(res => {
+                if (res.message === 'Success') {
+                  console.log('enter into cancel page');
+                  this.cancelSubmit = false;
+                  this.cancelForm.reset();
+                  this.close();
+                  this.goToPage('account');
+                } else {
+                  this.errorResp('Confirmation cancell failed. Please contact our support Team');
+                }
+              }, (error) => {
+                this.errorResp('Something went wrong. Please feel free to contact');
+              });
+            } else {
+              this.errorResp(responseData.message);
+            }
+          }, (error) => {
+            this.errorResp('Something went wrong');
+          });
+        }
+    }, (error) => {
+      this.errorResp('Cancel Request failed. please try agin later');
+    });
+  }
+
+  errorResp(message: string) {
+    this.cancelResponse.status = 'error';
+    this.cancelResponse.message = message;
+    const This = this;
+    setTimeout( function() {
+      This.cancelForm.reset();
+      This.modalRef.hide();
+      This.cancelResponse.status = '';
+      This.cancelResponse.message = '';
+      This.cancelSubmit = false;
+      This.cancelResponse = undefined;
+    }, 1000);
+  }
+
+  getErrors(FormAttr) {
+    Object.keys(FormAttr.controls).forEach(key => {
+      console.log(key);
+      const controlErrors: ValidationErrors = FormAttr.get(key).errors;
+      if (controlErrors != null) {
+          Object.keys(controlErrors).forEach(keyError => {
+            console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
+          });
+        }
+    });
+  }
+
+  logout() {
+    const userData = this.service.getLocalStorageItem('userData');
+    this.service.removeLocalStorageItem(userData);
+    this.subjectService.sendLoginData('logged_out');
+    this.router.navigate(['../index']);
+  }
+
+  public socialSignIn(socialPlatform: string) {
+    let socialPlatformProvider: any;
+    const This = this;
+    if (socialPlatform === 'facebook') {
+      socialPlatformProvider = FacebookLoginProvider.PROVIDER_ID;
+    } else {
+      socialPlatformProvider = GoogleLoginProvider.PROVIDER_ID;
+    }
+
+    this.socialAuthService.signIn(socialPlatformProvider).then(
+      (userData) => {
+        this.funcName = 'social_login';
+          this.loading = true;
+          this.service.post_data(this.funcName, userData).subscribe(responseData => {
+            this.loading = false;
+            if ( responseData.status === 'success') {
+              responseData.data.type = 'user';
+              this.service.setLocalStorageItem('userData', JSON.stringify(responseData.data));
+              this.subjectService.sendLoginData('logged_in');
+              this.socialResponse = responseData;
+              This.close();
+            } else {
+              this.errorResp(responseData.message);
+            }
+          }, (error) => {
+            this.errorResp('Something went wrong');
+          });
+      }).catch(function (data) {
+      // Handle error here
+      });
+  }
+
+  bookrevReplace(bookID: any) {
+    const str = bookID;
+    return str.replace(/^.{2}/g, 'TG');
+  }
+
+
+}

src/app/provider/auth.guard.ts

+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { AuthService } from './auth.service';
+import {Router} from '@angular/router';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthGuard implements CanActivate {
+  constructor(private auth: AuthService, private myRoute: Router) {
+
+  }
+  canActivate(
+    next: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
+    if (this.auth.isLoggednIn()) {
+      return true;
+    } else {
+      this.myRoute.navigate(['index']);
+      return false;
+    }
+  }
+}

src/app/provider/auth.service.ts

+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+
+  constructor(private myRoute: Router) { }
+
+  sendToken(token: string) {
+    localStorage.setItem('LoggedInUser', token);
+  }
+  getToken() {
+    return localStorage.getItem('userData');
+  }
+  isLoggednIn() {
+    return this.getToken() !== null;
+  }
+  logout() {
+    localStorage.removeItem('userData');
+    this.myRoute.navigate(['index']);
+  }
+}

src/app/provider/bookingData.ts

+import { Injectable } from '@angular/core';
+
+@Injectable()
+
+export class BookingData {
+    public storage: any;
+
+    public constructor() {}
+}

src/app/provider/dateSet.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'dateSet' })
+export class DateSet implements PipeTransform {
+  transform(timeString: string ) {
+    let time;
+    time = timeString.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [timeString];
+    if (time.length > 1) { // If time format correct
+      time = time.slice (1);  // Remove full string match value
+      time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM
+      time[3] = ' ';
+      time[4] = ' ';
+      time[0] = +time[0] % 12 || 12; // Adjust hours
+    }
+    return time.join ('');
+  }
+}

src/app/provider/declare.model.ts

+export class Login {
+    login_post: Loggeddata;
+    sign_post: SignupData;
+    forgot_post: string;
+}
+
+export class Loggeddata {
+    username: string;
+    password: string;
+}
+
+export class SignupData {
+    name: string;
+    username: string;
+    password: string;
+    mob: string;
+}

src/app/provider/http-error-handler.service.ts

+import { Injectable } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+
+import { Observable, of } from 'rxjs';
+
+import { MessageService } from './message.service';
+
+/** Type of the handleError function returned by HttpErrorHandler.createHandleError */
+export type HandleError =
+  <T> (operation?: string, result?: T) => (error: HttpErrorResponse) => Observable<T>;
+
+/** Handles HttpClient errors */
+@Injectable()
+export class HttpErrorHandler {
+  constructor(private messageService: MessageService) { }
+
+  /** Create curried handleError function that already knows the service name */
+  createHandleError = (serviceName = '') => <T>
+    (operation = 'operation', result = {} as T) => this.handleError(serviceName, operation, result)
+
+  /**
+   * Returns a function that handles Http operation failures.
+   * This error handler lets the app continue to run as if no error occurred.
+   * @param serviceName = name of the data service that attempted the operation
+   * @param operation - name of the operation that failed
+   * @param result - optional value to return as the observable result
+   */
+  handleError<T> (serviceName = '', operation = 'operation', result = {} as T) {
+
+    return (error: HttpErrorResponse): Observable<T> => {
+      // TODO: send the error to remote logging infrastructure
+      console.error(error); // log to console instead
+
+      const message = (error.error instanceof ErrorEvent) ?
+        error.error.message :
+       `server returned code ${error.status} with body "${error.error}"`;
+
+      // TODO: better job of transforming error for user consumption
+      this.messageService.add(`${serviceName}: ${operation} failed: ${message}`);
+
+      // Let the app keep running by returning a safe result.
+      return of( result );
+    };
+
+  }
+}
+
+
+/*
+Copyright 2017-2018 Google Inc. All Rights Reserved.
+Use of this source code is governed by an MIT-style license that
+can be found in the LICENSE file at http://angular.io/license */

src/app/provider/message.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable()
+
+export class MessageService {
+  messages: string[] = [];
+
+  add(message: string) {
+    this.messages.push(message);
+  }
+  clear() {
+    this.messages = [];
+  }
+}

src/app/provider/search.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'searchPipe', pure: false })
+export class SearchPipe implements PipeTransform {
+  transform(result, filters ) {
+    // console.log(filters);
+    return result.filter(function(item) {
+        //console.log(item);
+        let index;
+        let time_state: any;
+        let state = 1;
+        if ( filters.travels.length !== 0 || filters.drop_point.length !== 0 || filters.pick_point.length !== 0
+            || filters.rate.length !== 0 || filters.time.length !== 0 || filters.type.length !== 0) {
+
+
+            if (filters.travels.length !== 0) {
+                state = 0;
+                index = filters.travels.indexOf(item.operatorCode);
+                if (index !== -1) {
+                    state = 1;
+                }
+            }
+
+            if (filters.pick_point.length !== 0 && state === 1) {
+                state = 0;
+                if (item.boardingPointDetails instanceof Array) {
+                    let pick_state = false;
+                    item.boardingPointDetails.forEach((items: any) => {
+                        index = filters.pick_point.indexOf(items.name);
+                        if (index !== -1) {
+                            pick_state = true;
+                        }
+                    });
+
+                    if ( pick_state !== false ) {
+                        state = 1;
+                    }
+                } else {
+                    if (item.boardingPointDetails !== undefined) {
+                        index = filters.pick_point.indexOf(item.boardingPointDetails.name);
+                        if (index !== -1) {
+                            state = 1;
+                        }
+                    }
+                }
+            }
+
+            if (filters.drop_point.length !== 0 && state === 1) {
+                state = 0;
+                if (item.droppingPointDetails instanceof Array) {
+                    let pick_state = false;
+                    item.droppingPointDetails.forEach((items: any) => {
+                        index = filters.drop_point.indexOf(items.name);
+                        if (index !== -1) {
+                            pick_state = true;
+                        }
+                    });
+
+                    if ( pick_state !== false ) {
+                        state = 1;
+                    }
+                } else {
+                    if (item.droppingPointDetails !== undefined) {
+                        index = filters.drop_point.indexOf(item.droppingPointDetails.name);
+                        if (index !== -1) {
+                            state = 1;
+                        }
+                    }
+                }
+            }
+
+            if (filters.time.length !== 0 && state === 1) {
+                state = 0;
+                const time_split = item.departureTime.split(':');
+                const date1 = new Date();
+                date1.setHours(time_split[0]);
+                date1.setMinutes(time_split[1]);
+                const bus_time = date1.getTime();
+                const item_list = [];
+                time_state = false;
+                filters.time.filter(times => {
+                     const date_list = times.split('-');
+                    // tslint:disable-next-line:radix
+                    const start_time = parseInt(date_list[0]);
+                    // tslint:disable-next-line:radix
+                    const end_time = parseInt(date_list[1]);
+                    if (start_time < bus_time && bus_time  < end_time) {
+                        time_state = true;
+                    }
+                });
+
+                if (time_state !== false) {
+                    state = 1;
+                }
+
+            }
+
+            if (filters.rate.length !== 0 && state === 1) {
+                state = 0;
+                index = filters.rate.indexOf(item.rate);
+                if (index !== -1) {
+                    console.log(item);
+                    state = 1;
+                }
+            }
+
+            if (filters.type.length !== 0 && state === 1) {
+                state = 0;
+                const str = item.busType;
+                let type_state = false;
+                filters.type.forEach((items: any) => {
+                    if (items === 'A/C' || items === 'Sleeper') {
+                        if (items === 'A/C') {
+                            index = str.includes('Non');
+                            if (index !== true) {
+                                type_state = true;
+                            }
+                        } else {
+                            index = str.includes('Semi');
+                            if (index !== true) {
+                                type_state = true;
+                            }
+                        }
+                    } else {
+                        index = str.includes(items);
+                        if (index === true) {
+                            type_state = true;
+                        }
+                    }
+                });
+
+                if (type_state !== false) {
+                    state = 1;
+                }
+            }
+
+
+            if (state === 1) {
+                return result;
+            }
+
+
+        } else {
+            return result;
+        }
+    });
+    return result;
+  }
+}

src/app/provider/subject.service.ts

+import { Injectable } from '@angular/core';
+import { observable, Observable } from 'rxjs';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SubjectService {
+  private loginDetails = new BehaviorSubject<any>(null);
+  private isLoggined = new BehaviorSubject<any>(null);
+
+  sendLoginData(loginData: any) {
+    this.loginDetails.next(loginData);
+  }
+
+  getLoginData(): Observable<any> {
+    return this.loginDetails.asObservable();
+  }
+
+  sendisLoggined(isLoggined: any) {
+    this.isLoggined.next(isLoggined);
+  }
+
+  getisLoggined(): Observable<any> {
+    return this.isLoggined.asObservable();
+  }
+
+}

src/app/provider/validation.service.ts

+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ValidationService {
+  errorList = {
+    'required': 'This field is required',
+    'email': 'Please enter a valid email',
+    'phone': 'Please enter a valid phone number',
+    'password': 'Please enter a valid password',
+    'minLength': 'Minimum characters length is',
+    'maxLength': 'Maximum characters length is',
+    'min': 'Age min start at ',
+    'max': 'Age max end at ',
+    'confirm': 'Password mismatch'
+  };
+
+  constructor() { }
+
+  getErrorList() {
+    return this.errorList;
+  }
+
+  getError(error: any): string {
+    if (this.errorList.hasOwnProperty(error.code)) {  // check whether the error code having our definition
+      return this.errorList[error.code]; // return our definition
+    } else {
+      return error.message;
+    }
+  }
+}

src/app/provider/web.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
+import { map, catchError } from 'rxjs/operators';
+import { apiConfig, serverApiDev } from '../../environments/server.config';
+import { HttpErrorHandler, HandleError } from './http-error-handler.service';
+
+const httpOptions = {
+  headers: new HttpHeaders({
+    'Content-Type':  'application/json',
+    'Auth': 'my_key'
+  })
+};
+
+const httplive = {
+  headers: new HttpHeaders({
+    'Access-Control-Allow-Origin': '*',
+    'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
+    'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
+  })
+};
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class WebService {
+  private handleError: HandleError;
+  constructor(private http: HttpClient, httpErrorHandler: HttpErrorHandler) {
+    this.handleError = httpErrorHandler.createHandleError('WebService');
+  }
+
+  post_data(url: string, data) {
+    return this.http.post(`${apiConfig + url}`, data, httpOptions).pipe(map((response: any) => response));
+  }
+  get_data(url) {
+    return this.http.get(`${apiConfig + url}`, httpOptions).pipe(map((response: any) => response));
+  }
+  setLocalStorageItem(id: string, data: string) {
+    localStorage.setItem(id, data);
+  }
+  getLocalStorageItem(data: string): string {
+      return localStorage.getItem(data);
+  }
+  removeLocalStorageItem(data) {
+    localStorage.removeItem(data);
+    localStorage.clear();
+  }
+
+  online_service(url: string, data = null) {
+    const sendData = {'url': url, 'data': data};
+    const web_url = 'online_service';
+    return this.http.post(`${apiConfig + web_url}`, sendData, httpOptions).pipe(map((response: any) => response));
+  }
+
+  online_service_dup(url: string, data = null) {
+    return this.http.post(`${serverApiDev + url}`, data).pipe(map((response: any) => response));
+ }
+
+  ObjArray(data: any) {
+    if (data instanceof Array !== true) {
+      if (data !== undefined) {
+        return new Array(data);
+      } else {
+        return undefined;
+      }
+    } else {
+      return data;
+    }
+  }
+}

src/assets/js/checkout.js

+!function(){"use strict";!function(){var l=window,u=l.document,i=l.Array,e=l.Object,a=l.String,s=l.Number,n=l.Date,c=l.Math,r=l.setTimeout,t=l.setInterval,o=l.clearTimeout,f=l.parseInt,d=l.encodeURIComponent,h=l.btoa,p=l.unescape,m=l.TypeError,v=l.navigator,g=l.location,y=l.XMLHttpRequest,b=function(n){return function(e,t){return arguments.length<2?function(t){return n.call(null,t,e)}:n.call(null,e,t)}},k=function(r){return function(e,n,t){return arguments.length<3?function(t){return r.call(null,t,e,n)}:r.call(null,e,n,t)}};function _(){for(var t=arguments.length,e=new i(t),n=0;n<t;n++)e[n]=arguments[n];return function(t){return function(){var n=arguments;return e.every(function(t,e){return t(n[e])||function(){console.error.apply(console,arguments)}("wrong "+e+"th argtype",n[e])})?t.apply(null,n):n[0]}}}var S=b(function(t,e){return typeof t===e}),w=S("boolean"),D=S("number"),R=S("string"),M=S("function"),N=S("object"),x=i.isArray,L=function(t){return K(t)&&1===t.nodeType},K=function(t){return null!==t&&N(t)},P=function(t){return!B(e.keys(t))},A=b(function(t,e){return t&&t[e]}),B=A("length"),T=A("prototype"),C=b(function(t,e){return t instanceof e}),z=n.now,E=c.random,F=c.floor;function O(t,e){return{error:(n=t,r=e,i={description:a(n)},r&&(i.field=r),i)};var n,r,i}function $(t){throw new Error(t)}var G=function(t){return/data:image\/[^;]+;base64/.test(t)};function H(n){if(!K(n))return"";var t=e.keys(n),r=i(B(t));return t.forEach(function(t,e){return r[e]=d(t)+"="+d(n[t])}),r.join("&")}function I(t,e){return K(e)&&(e=H(e)),e&&(t+=0<t.indexOf("?")?"&":"?",t+=e),t}var U,Z,Y,q,W,j,J,V,X,Q,tt,et,nt,rt,it,ot,at,st,ct,ut,lt=T(i),ft=lt.slice,dt=b(function(t,e){return t&&lt.forEach.call(t,e),t}),ht=(U="indexOf",b(function(t,e){return lt[U].call(t,e)})),pt=b(function(t,e){return 0<=ht(t,e)}),mt=b(function(t,e){return ft.call(t,e)}),vt=k(function(t,e,n){return lt.reduce.call(t,e,n)}),gt=function(t){return t},yt=(T(Function),Y=function(t,e){return t.bind(e)},Z=function(t){if(M(t))return Y.apply(null,arguments);throw new m("not a function")},b(function(t,e){var n=arguments;return R(t)&&((n=mt(n,0))[0]=e[t]),Z.apply(null,n)})),bt=T(a).slice,kt=function(t){return" "+t+" "},_t=b(function(t,e){return-1!==t.indexOf(e)}),St=k(function(t,e,n){return bt.call(t,e,n)}),wt=b(function(t,e){return bt.call(t,e)}),Dt=function(t){return e.keys(t||{})},Rt=b(function(t,e){return e in t}),Mt=b(function(t,e){return t&&t.hasOwnProperty(e)}),Nt=k(function(t,e,n){return t[e]=n,t}),xt=k(function(t,e,n){return n&&(t[e]=n),t}),Lt=b(function(t,e){return delete t[e],t}),Kt=b(function(e,n){return dt(Dt(e),function(t){return n(e[t],t,e)}),e}),Pt=JSON.stringify,At=function(t){try{return JSON.parse(t)}catch(t){}},Bt=b(function(n,t){return Kt(t,function(t,e){return n[e]=t}),n}),Tt=function(t,r){void 0===r&&(r="");var i={};return Kt(t,function(t,e){var n=r?r+"."+e:e;K(t)?Bt(i,Tt(t,n)):i[n]=t}),i},Ct=l.Element,zt=function(t){return u.createElement(t||"div")},Et=function(t){return t.parentNode},Ft=_(L),Ot=_(L,L),$t=_(L,R),Gt=_(L,R,function(){return!0}),Ht=_(L,K),It=(q=Ot(function(t,e){return Et(e).replaceChild(t,e),t}),b(q),W=Ot(function(t,e){return e.appendChild(t)}),b(W)),Ut=(j=Ot(function(t,e){var n;return n=e,It(t)(n),t}),b(j)),Zt=(J=Ot(function(t,e){var n,r=e.firstElementChild;return r?e.insertBefore(t,r):(n=t,It(e)(n)),t}),b(J)),Yt=(V=Ot(function(t,e){var n;return n=e,Zt(t)(n),t}),b(V),Ft(function(t){var e=Et(t);return e&&e.removeChild(t),t})),qt=(Ft(A("selectionStart")),Ft(A("selectionEnd")),Q=function(t,e){return t.selectionStart=t.selectionEnd=e,t},X=_(L,D)(Q),b(X),Ft(function(t){return t.submit(),t})),Wt=(tt=$t(function(t,e){return _t(kt(t.className),kt(e))}),b(tt)),jt=(et=$t(function(t,e){return t.className?Wt(t,e)||(t.className+=" "+e):t.className=e,t}),b(et),nt=$t(function(t,e){return e=(" "+t.className+" ").replace(" "+e+" "," ").replace(/^ | $/g,""),t.className!==e&&(t.className=e),t}),b(nt),rt=$t(function(t,e){return t.getAttribute(e)}),b(rt),k(Gt(function(t,e,n){return t.setAttribute(e,n),t}))),Jt=k(Gt(function(t,e,n){return t.style[e]=n,t})),Vt=(it=Ht(function(r,t){var e;return e=t,Kt(function(t,e){var n;return n=r,jt(e,t)(n)})(e),r}),b(it)),Xt=(ot=Ht(function(r,t){var e;return e=t,Kt(function(t,e){var n;return n=r,Jt(e,t)(n)})(e),r}),b(ot)),Qt=(at=$t(function(t,e){return t.innerHTML=e,t}),b(at)),te=(st=$t(function(t,e){var n;return n=t,Jt("display",e)(n)}),b(st)),ee=(te("none"),te("block"),te("inline-block"),A("offsetWidth")),ne=A("offsetHeight"),re=(Ft(function(t){return t.getBoundingClientRect()}),Ft(function(t){return t.firstChild}),T(Ct)),ie=re.matches||re.matchesSelector||re.webkitMatchesSelector||re.mozMatchesSelector||re.msMatchesSelector||re.oMatchesSelector,oe=(ct=$t(function(t,e){return ie.call(t,e)}),b(ct)),ae=function(e,r,i,o){return C(e,Ct)?console.error("use el |> _El.on(e, cb)"):function(n){var t=r;return R(i)?t=function(t){for(var e=t.target;!oe(e,i)&&e!==n;)e=Et(e);e!==n&&(t.delegateTarget=e,r(t))}:o=i,o=!!o,n.addEventListener(e,t,o),function(){return n.removeEventListener(e,t,o)}}},se=u.documentElement,ce=u.body,ue=l.innerHeight,le=l.pageYOffset,fe=l.scrollBy,de=l.scrollTo,he=l.requestAnimationFrame,pe=yt("querySelector",u),me=yt("querySelectorAll",u),ve=(yt("getElementById",u),yt("getComputedStyle",l),function(t){return R(t)?pe(t):t});function ge(t,e,n,r){if(n&&"get"===n.toLowerCase())t=I(t,e),r?l.open(t,r):l.location=t;else{var i,o,a,s,c,u={action:t,method:n};r&&(u.target=r),c=zt("form"),s=Vt(u)(c),a=Qt(ye(e))(s),o=It(se)(a),i=qt(o),Yt(i)}}function ye(t,n){if(K(t)){var r="";return Kt(t,function(t,e){n&&(e=n+"["+e+"]"),r+=ye(t,e)}),r}return'<input type="hidden" name="'+n+'" value="'+t+'">'}function be(t){!function(s){if(!l.requestAnimationFrame)return fe(0,s);ut&&o(ut),ut=r(function(){var r=le,i=c.min(r+s,ne(ce)-ue);s=i-r;var o=0,a=l.performance.now();he(function t(e){if(1<=(o+=(e-a)/300))return de(0,i);var n=c.sin(we*o/2);de(0,r+c.round(s*n)),a=e,he(t)})},100)}(t-le)}var ke,_e,Se,we=c.PI,De=y,Re=O("Network error"),Me=0;function Ne(t){if(!C(this,Ne))return new Ne(t);this.options=function(t){R(t)&&(t={url:t});var e=t,n=e.method,r=e.headers,i=e.callback,o=e.data;return r||(t.headers={}),n||(t.method="get"),i||(t.callback=gt),K(o)&&(o=H(o)),t.data=o,t}(t),this.defer()}((_e={setReq:function(t,e){return this.abort(),this.type=t,this.req=e,this},till:function(e){var n=this;return this.setReq("timeout",r(function(){n.call(function(t){e(t)?n.till(e):n.options.callback(t)})},3e3))},abort:function(){var t=this.req,e=this.type;t&&("ajax"===e?this.req.abort():"jsonp"===e?l.Razorpay[this.req]=gt:o(this.req),this.req=null)},defer:function(){var t=this;this.req=r(function(){return t.call()})},call:function(e){var t,n;void 0===e&&(e=this.options.callback);var r=this.options,i=r.url,o=r.method,a=r.data,s=r.headers,c=new De;this.setReq("ajax",c),c.open(o,i,!0),c.onreadystatechange=function(){if(4===c.readyState&&c.status){var t=At(c.responseText);t||((t=O("Parsing error")).xhr={status:c.status,text:c.responseText}),e(t)}},c.onerror=function(){var t=Re;t.xhr={status:0},e(t)},n=s,t=xt("X-Razorpay-SessionId",ke)(n),Kt(function(t,e){return c.setRequestHeader(e,t)})(t),c.send(a)}}).constructor=Ne).prototype=_e,Ne.post=function(t){return t.method="post",t.headers||(t.headers={}),t.headers["Content-type"]||(t.headers["Content-type"]="application/x-www-form-urlencoded"),Ne(t)},Ne.setSessionId=function(t){ke=t},Ne.jsonp=function(a){a.data||(a.data={});var s="jsonp"+Me++;a.data.callback="Razorpay."+s;var t=new Ne(a);return a=t.options,t.call=function(e){var t,n;void 0===e&&(e=a.callback);var r=!1,i=function(){r||this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState||(r=!0,this.onload=this.onreadystatechange=null,Yt(this))},o=l.Razorpay[s]=function(t){Lt(t,"http_status_code"),e(t),Lt(l.Razorpay,s)};this.setReq("jsonp",o),n=zt("script"),t=Bt({src:I(a.url,a.data),async:!0,onerror:function(t){return a.callback(Re)},onload:i,onreadystatechange:i})(n),It(se)(t)},t};var xe="0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz",Le=(Se=xe,vt(function(t,e,n){return Nt(t,e,n)},{})(Se));function Ke(t){for(var e="";t;)e=xe[t%62]+e,t=F(t/62);return e}function Pe(){var t,n,r=Ke(a(z()-13885344e5)+wt("000000"+F(1e6*E()),-6))+Ke(F(238328*E()))+"0",i=0;return t=r,dt(function(t,e){n=Le[r[r.length-1-e]],(r.length-e)%2&&(n*=2),62<=n&&(n=n%62+1),i+=n})(t),(n=i%62)&&(n=xe[62-n]),St(r,0,13)+n}var Ae=Pe(),Be={library:"checkoutjs",platform:"browser",referer:g.href};function Te(t){var e,n={checkout_id:t?t.id:Ae};return e=["integration","referer","library","platform","platform_version","os","os_version","device"],dt(function(t){var e;return e=n,xt(t,Be[t])(e)})(e),n}var Ce,ze=[],Ee=function(t){return ze.push(t)},Fe=function(t){Ce=t},Oe=function(){var t,e,n,r,i;if(ze.length){var o=Rt(v,"sendBeacon"),a={url:"https://lumberjack.razorpay.com/v1/track",data:{key:"ZmY5N2M0YzVkN2JiYzkyMWM1ZmVmYWJk",data:(i={context:Ce,addons:[{name:"ua_parser",input_key:"user_agent",output_key:"user_agent_parsed"}],events:ze.splice(0,ze.length)},r=Pt(i),n=d(r),e=p(n),t=h(e),d(t))}};try{o?v.sendBeacon(a.url,Pt(a.data)):Ne.post(a)}catch(t){}}};function $e(l,f,d,h){l.isLiveMode()&&r(function(){d instanceof Error&&(d={message:d.message,stack:d.stack});var t=Te(l);t.user_agent=null,t.mode="live";var e=l.get("order_id");e&&(t.order_id=e);var i={},n={options:i,es6:!0};d&&(n.data=d);var r,o,a,s,c,u=["key","amount","prefill","theme","image","description","name","method","display_currency","display_amount","redirect","flashcheckout"];Kt(l.get(),function(t,e){var n=e.split("."),r=n[0];-1!==u.indexOf(r)&&(1<n.length?(u.hasOwnProperty(r)||(i[r]={}),i[r][n[1]]=t):i[e]=t)}),i.image&&G(i.image)&&(i.image="base64"),r=n,(c=l._payment)&&(c.payment_id&&(r.payment_id=c.payment_id),o=c,Mt("magicPossible")(o)&&(r.magic_possible=c.magicPossible),a=c,Mt("isMagicPayment")(a)&&(r.magic_attempted=c.isMagicPayment),s=c,Mt("magicCoproto")(s)&&(r.magic_coproto=c.magicCoproto)),Ae&&(n.local_order_id=Ae),Ee({event:f,properties:n,timestamp:z()}),Fe(t),h&&Oe()})}t(function(){Oe()},1e3),$e.parseAnalyticsData=function(t){var e;K(t)&&(e=t,Kt(function(t,e){Be[t]=e})(e))},$e.makeUid=Pe,$e.common=Te,$e.props=Be,$e.id=Ae,$e.updateUid=function(t){$e.id=Ae=t},$e.flush=Oe;var Ge,He={},Ie={setR:function(t){Ge=t},track:function(t,e){var n,r=void 0===e?{}:e,i=r.type,o=r.data,a=void 0===o?{}:o,s=r.r,c=void 0===s?Ge:s,u=r.immediately,l=void 0!==u&&u,f=(n=Tt(He),Kt(n,function(t,e){M(t)&&(n[e]=t.call())}),n);(a=K(a)?At(Pt(a)):{data:a}).meta&&K(a.meta)&&(f=Bt(f,a.meta)),a.meta=f,i&&(t=i+":"+t),$e(c,t,a,l)},setMeta:function(t,e){Nt(He,t,e)},removeMeta:function(t){Lt(He,t)},getMeta:function(){return e={},Kt(He,function(n,t){t.replace(/\[([^[\]]+)\]/g,".$1");var r=t.split("."),i=e;dt(r,function(t,e){e<r.length-1?(i[t]||(i[t]={}),i=i[t]):i[t]=n})}),e;var e}};function Ue(){return this._evts={},this._defs={},this}Ue.prototype={onNew:gt,def:function(t,e){this._defs[t]=e},on:function(t,e){if(R(t)&&M(e)){var n=this._evts;n[t]||(n[t]=[]),!1!==this.onNew(t,e)&&n[t].push(e)}return this},once:function(t,e){var n=e,r=this,i=function(){n.apply(r,arguments),r.off(t,i)};return e=i,this.on(t,e)},off:function(n,t){var e=arguments.length;if(!e)return Ue.call(this);var r=this._evts;if(2===e){var i=r[n];if(!M(t)||!x(i))return;if(i.splice(ht(i,t),1),i.length)return}return r[n]?delete r[n]:(n+=".",Kt(r,function(t,e){e.indexOf(n)||delete r[e]})),this},emit:function(t,e){var n=this;return dt(this._evts[t],function(t){try{t.call(n,e)}catch(t){console.error}}),this},emitter:function(){var t=this,e=arguments;return function(){t.emit.apply(t,e)}}};var Ze=v.userAgent;function Ye(t){return t.test(Ze)}Ye(/MSIE |Trident\//);var qe=Ye(/iPhone/),We=qe||Ye(/iPad/),je=Ye(/Android/),Je=(Ye(/Safari/),Ye(/; wv\) |Gecko\) Version\/[^ ]+ Chrome|Windows Phone|Opera Mini|UCBrowser|FBAN|CriOS/)||We||Ye(/Android 4/)),Ve=(Ye(/iPhone/),Ze.match(/Chrome\/(\d+)/));Ve&&(Ve=f(Ve[1],10)),je&&(Ve||Ye(/firefox/));var Xe={key:"",account_id:"",image:"",amount:100,currency:"INR",order_id:"",invoice_id:"",subscription_id:"",payment_link_id:"",notes:null,callback_url:"",redirect:!1,description:"",customer_id:"",recurring:null,signature:"",retry:!0,target:"",subscription_card_change:null,display_currency:"",display_amount:"",recurring_token:{max_amount:0,expire_by:0}};function Qe(t,e,n,r){var i=e[n=n.toLowerCase()],o=typeof i;"string"===o&&(D(r)||w(r))?r=a(r):"number"===o?r=s(r):"boolean"===o&&(R(r)?"true"===r||"1"===r?r=!0:"false"!==r&&"0"!==r||(r=!1):D(r)&&(r=!!r)),null!==i&&o!==typeof r||(t[n]=r)}function tn(t,r){var i={};return Kt(t,function(t,n){n in en?Kt(t,function(t,e){Qe(i,r,n+"."+e,t)}):Qe(i,r,n,t)}),i}var en={};function nn(n){Kt(Xe,function(t,n){K(t)&&!P(t)&&(en[n]=!0,Kt(t,function(t,e){Xe[n+"."+e]=t}),delete Xe[n])}),(n=tn(n,Xe)).callback_url&&Je&&(n.redirect=!0),this.get=function(t){return arguments.length?t in n?n[t]:Xe[t]:n},this.set=function(t,e){n[t]=e},this.unset=function(t){delete n[t]}}var rn=["AED","ALL","AMD","ARS","AUD","AWG","BBD","BDT","BMD","BND","BOB","BSD","BWP","BZD","CAD","CHF","CNY","COP","CRC","CUP","CZK","DKK","DOP","DZD","EGP","ETB","EUR","FJD","GBP","GIP","GMD","GTQ","GYD","HKD","HNL","HRK","HTG","HUF","IDR","ILS","INR","JMD","KES","KGS","KHR","KYD","KZT","LAK","LBP","LKR","LRD","LSL","MAD","MDL","MKD","MMK","MNT","MOP","MUR","MVR","MWK","MXN","MYR","NAD","NGN","NIO","NOK","NPR","NZD","PEN","PGK","PHP","PKR","QAR","RUB","SAR","SCR","SEK","SGD","SLL","SOS","SSP","SVC","SZL","THB","TTD","TZS","USD","UYU","UZS","YER","ZAR"],on={AED:"د.إ",AFN:"&#x60b;",ALL:"&#x6b;",AMD:"&#1423;",ANG:"ƒ",AOA:"Kz",ARS:"$",AUD:"A$",AWG:"ƒ",AZN:"ман",BAM:"KM",BBD:"Bds$",BDT:"&#x9f3;",BGN:"лв",BHD:"د.ب",BIF:"FBu",BMD:"BD$",BND:"B$",BOB:"Bs.",BRL:"R$",BSD:"B$",BTN:"Nu.",BWP:"P",BYR:"Br",BZD:"BZ$",CAD:"C$",CDF:"FC",CHF:"Fr",CLP:"$",CNY:"&#165;",COP:"$",CRC:"&#x20a1;",CUC:"&#x20b1;",CUP:"$",CVE:"Esc",CZK:"Kč",DJF:"Fdj",DKK:"Kr.",DOP:"RD$",DZD:"د.ج",EGP:"E&#163;",ERN:"Nfa",ETB:"Br",EUR:"&#8364;",FJD:"FJ$",FKP:"FK&#163;",GBP:"&#163;",GEL:"ლ",GHS:"&#x20b5;",GIP:"&#163;",GMD:"D",GNF:"FG",GTQ:"Q",GYD:"GY$",HKD:"HK$",HNL:"L",HRK:"Kn",HTG:"G",HUF:"Ft",IDR:"Rp",ILS:"&#x20aa;",INR:"₹",IQD:"ع.د",IRR:"&#xfdfc;",ISK:"Kr",JMD:"J$",JOD:"د.ا",JPY:"&#165;",KES:"KSh",KGS:"лв",KHR:"៛",KMF:"CF",KPW:"₩",KRW:"₩",KWD:"د.ك",KYD:"KY$",KZT:"&#x20b8;",LAK:"&#x20ad;",LBP:"L&#163;",LD:"ل.د",LKR:"Rs",LRD:"L$",LSL:"L",LTL:"Lt",LVL:"Ls",LYD:"ل.د",MAD:"د.م.",MDL:"L",MGA:"Ar",MKD:"ден",MMK:"K",MNT:"&#x20ae;",MOP:"P",MRO:"UM",MUR:"Ɍs",MVR:"Rf",MWK:"MK",MXN:"$",MYR:"RM",MZN:"MT",NAD:"N$",NGN:"&#x20a6;",NIO:"C$",NOK:"Kr",NPR:"NɌs",NZD:"NZ$",OMR:"ر.ع.",PAB:"B/.",PEN:"S/.",PGK:"K",PHP:"&#x20b1;",PKR:"Ɍs",PLN:"Zł",PYG:"&#x20b2;",QAR:"QAR",RON:"L",RSD:"Дин.",RUB:"руб",RWF:"RF",SAR:"ر.س",SBD:"SI$",SCR:"Ɍs",SDG:"&#163;Sd",SEK:"Kr",SFR:"Fr",SGD:"S$",SHP:"&#163;",SLL:"Le",SOS:"So. Sh.",SRD:"$",SSP:"&#163;",STD:"Db",SVC:"&#x20a1;",SYP:"S&#163;",SZL:"L",THB:"&#x0e3f;",TJS:"SM",TMT:"M",TND:"د.ت",TOP:"T$",TRY:"TL",TTD:"TT$",TWD:"NT$",TZS:"TSh",UAH:"&#x20b4;",UGX:"USh",USD:"$",UYU:"$U",UZS:"лв",VEF:"Bs",VND:"&#x20ab;",VUV:"VT",WST:"T",XAF:"CFA",XCD:"EC$",XOF:"CFA",XPF:"F",YER:"&#xfdfc;",ZAR:"R",ZMK:"ZK",ZWL:"Z$"},an=(vt(rn,function(t,e){return t[e]=on[e],t},{}),{api:"https://api.razorpay.com/",version:"v1/",frameApi:"/",cdn:"https://cdn.razorpay.com/"});try{Bt(an,l.Razorpay.config)}catch(t){}function sn(t){return void 0===t&&(t=""),an.api+an.version+t}var cn=["key","order_id","invoice_id","subscription_id","payment_link_id"];function un(e){if(!C(this,un))return new un(e);var n;Ue.call(this),this.id=$e.makeUid(),Ie.setR(this);try{n=function(t){t&&"object"==typeof t||$("Invalid options");var n,r,e=new nn(t);return r=(r=e).get(),Kt(hn,function(t,e){if(e in r){var n=t(r[e],r);n&&$("Invalid "+e+" ("+n+")")}}),n=e.get("notes"),Kt(n,function(t,e){R(t)?254<t.length&&(n[e]=t.slice(0,254)):D(t)||w(t)||delete n[e]}),e}(e),this.get=n.get,this.set=n.set}catch(t){var r=t.message;this.get&&this.isLiveMode()||K(e)&&!e.parent&&l.alert(r),$(r)}"rzp_live_ILgsfZCZoFIKMb"===n.get("key")&&!1!==e.flashcheckout&&n.set("flashcheckout",!0),n.get("flashcheckout")&&n.set("method.qr",!0),cn.every(function(t){return!n.get(t)})&&$("No key passed"),this.postInit()}var ln=un.prototype=new Ue;function fn(t,e){return Ne.jsonp({url:sn("preferences"),data:t,callback:e})}function dn(t){if(t){var n=t.get,r={},e=n("key");return e&&(r.key_id=e),dt(["order_id","customer_id","invoice_id","payment_link_id","subscription_id","recurring","subscription_card_change","account_id"],function(t){var e=n(t);e&&(r[t]=e)}),r}}ln.postInit=gt,ln.onNew=function(t,e){var n=this;"ready"===t&&(this.prefs?e(t,this.prefs):fn(dn(this),function(t){t.methods&&(n.prefs=t,n.methods=t.methods),e(n.prefs)}))},ln.emi_calculator=function(t,e){return un.emi.calculator(this.get("amount")/100,t,e)},un.emi={calculator:function(t,e,n){if(!n)return c.ceil(t/e);n/=1200;var r=c.pow(1+n,e);return f(t*n*r/(r-1),10)}},un.payment={getMethods:function(e){return fn({key_id:un.defaults.key},function(t){e(t.methods||t)})},getPrefs:function(e,n){return Ne({url:I(sn("preferences"),e),callback:function(t){if(t.xhr&&0===t.xhr.status)return fn(e,n);n(t)}})}},ln.isLiveMode=function(){var t=this.preferences;return!t&&/^rzp_l/.test(this.get("key"))||t&&"live"===t.mode};var hn={notes:function(t){if(K(t)&&15<B(Dt(t)))return"At most 15 notes are allowed"},amount:function(t,e){if((/[^0-9]/.test(n=t)||!(100<=(n=f(n,10))))&&!e.recurring)return"should be passed in integer paise. Minimum value is 100 paise, i.e. ₹ 1";var n},currency:function(t){if(!pt(rn,t))return"The provided currency is not currently supported"},display_currency:function(t){if(!(t in on)&&t!==un.defaults.display_currency)return"This display currency is not supported"},display_amount:function(t){if(!(t=a(t).replace(/([^0-9.])/g,""))&&t!==un.defaults.display_amount)return""}};un.configure=function(t){Kt(tn(t,Xe),function(t,e){typeof Xe[e]==typeof t&&(Xe[e]=t)})},un.defaults=Xe,l.Razorpay=un,Xe.timeout=0,Xe.name="",Xe.ecod=!1,Xe.flashcheckout=!1,Xe.remember_customer=!1,Xe.personalization=!1,Xe.method={netbanking:null,card:!0,cardless_emi:null,wallet:null,emi:!0,upi:!0,upi_intent:null,qr:!1},Xe.prefill={amount:"",wallet:"",provider:"",method:"",name:"",contact:"",email:"",vpa:"","card[number]":"","card[expiry]":"","card[cvv]":"",bank:"","bank_account[name]":"","bank_account[account_number]":"","bank_account[account_type]":"","bank_account[ifsc]":"",auth_type:""},Xe.features={cardsaving:!0},Xe.readonly={contact:!1,email:!1,name:!1},Xe.hidden={contact:!1,email:!1},Xe.modal={confirm_close:!1,ondismiss:gt,onhidden:gt,escape:!0,animation:!0,backdropclose:!1},Xe.external={wallets:[],handler:gt},Xe.theme={upi_only:!1,color:"",backdrop_color:"rgba(0,0,0,0.6)",image_padding:!0,image_frame:!0,close_button:!0,close_method_back:!1,hide_topbar:!1,branding:"",debit_card:!1};var pn,mn,vn,gn,yn=l,bn=yn.screen,kn=yn.scrollTo,_n=qe,Sn={overflow:"",metas:null,orientationchange:function(){Sn.resize.call(this),Sn.scroll.call(this)},resize:function(){var t=l.innerHeight||bn.height;Rn.container.style.position=t<450?"absolute":"fixed",this.el.style.height=c.max(t,460)+"px"},scroll:function(){if("number"==typeof l.pageYOffset)if(l.innerHeight<460){var t=460-l.innerHeight;l.pageYOffset>t+120&&be(t)}else this.isFocused||be(0)}};function wn(){return Sn.metas||(Sn.metas=me('head meta[name=viewport],head meta[name="theme-color"]')),Sn.metas}function Dn(t){try{Rn.backdrop.style.background=t}catch(t){}}function Rn(t){if(pn=u.body,mn=u.head,vn=pn.style,t)return this.getEl(t),this.openRzp(t);this.getEl(),this.time=z()}Rn.prototype={getEl:function(t){if(!this.el){var e,n={style:"opacity: 1; height: 100%; position: relative; background: none; display: block; border: 0 none transparent; margin: 0px; padding: 0px; z-index: 2;",allowtransparency:!0,frameborder:0,width:"100%",height:"100%",allowpaymentrequest:!0,src:function(t){var e=an.frame;if(!e){e=sn("checkout");var n=dn(t);n?e=I(e,n):e+="/public"}return e}(t),class:"razorpay-checkout-frame"};this.el=(e=zt("iframe"),Vt(n)(e))}return this.el},openRzp:function(t){var e,n=(e=this.el,Xt({width:"100%",height:"100%"})(e)),r=t.get("parent");r&&(r=ve(r));var i,o,a,s,c=r||Rn.container;(function(t,e){if(!gn)try{var n;(gn=u.createElement("div")).className="razorpay-loader";var r="margin:-25px 0 0 -25px;height:50px;width:50px;animation:rzp-rot 1s infinite linear;-webkit-animation:rzp-rot 1s infinite linear;border: 1px solid rgba(255, 255, 255, 0.2);border-top-color: rgba(255, 255, 255, 0.7);border-radius: 50%;";r+=e?"margin: 100px auto -150px;border: 1px solid rgba(0, 0, 0, 0.2);border-top-color: rgba(0, 0, 0, 0.7);":"position:absolute;left:50%;top:50%;",gn.setAttribute("style",r),n=gn,It(t)(n)}catch(t){}}(c,r),t!==this.rzp)&&(Et(n)!==c&&(s=c,Ut(n)(s)),this.rzp=t);r?(i=n,Jt("minHeight","530px")(i),this.embedded=!0):(a=c,o=Jt("display","block")(a),ee(o),Dn(t.get("theme.backdrop_color")),/^rzp_t/.test(t.get("key"))&&Rn.ribbon&&(Rn.ribbon.style.opacity=1),this.setMetaAndOverflow()),this.bind(),this.onload()},makeMessage:function(){var t=this.rzp,n=t.get(),e={integration:$e.props.integration,referer:g.href,options:n,id:t.id};return t.metadata&&(e.metadata=t.metadata),Kt(t.modal.options,function(t,e){n["modal."+e]=t}),this.embedded&&(delete n.parent,e.embedded=!0),function(t){var e=t.image;if(e&&R(e)){if(G(e))return;if(e.indexOf("http")){var n=g.protocol+"//"+g.hostname+(g.port?":"+g.port:""),r="";"/"!==e[0]&&"/"!==(r+=g.pathname.replace(/[^/]*$/g,""))[0]&&(r="/"+r),t.image=n+r+e}}}(n),e},close:function(){Dn(""),Rn.ribbon&&(Rn.ribbon.style.opacity=0),function(t){t&&dt(t,Yt);var e=wn();e&&dt(e,It(mn))}(this.$metas),vn.overflow=Sn.overflow,this.unbind(),_n&&kn(0,Sn.oldY),$e.flush()},bind:function(){var r=this;if(!this.listeners){this.listeners=[];var t={};_n&&(t.orientationchange=Sn.orientationchange,this.rzp.get("parent")||(t.resize=Sn.resize)),Kt(t,function(t,e){var n;r.listeners.push((n=window,ae(e,yt(t,r))(n)))})}},unbind:function(){this.listeners,dt(function(t){return t()}),this.listeners=null},setMetaAndOverflow:function(){var t,e;mn&&(dt(wn(),function(t){return Yt(t)}),this.$metas=[(t=zt("meta"),Vt({name:"viewport",content:"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"})(t)),(e=zt("meta"),Vt({name:"theme-color",content:this.rzp.get("theme.color")})(e))],dt(this.$metas,It(mn)),Sn.overflow=vn.overflow,vn.overflow="hidden",_n&&(Sn.oldY=l.pageYOffset,l.scrollTo(0,0),Sn.orientationchange.call(this)))},postMessage:function(t){t.id=this.rzp.id,t=Pt(t),this.el.contentWindow.postMessage(t,"*")},onmessage:function(t){var e=At(t.data);if(e){var n=e.event,r=this.rzp;t.origin&&"frame"===e.source&&t.source===this.el.contentWindow&&(e=e.data,this["on"+n](e),"dismiss"!==n&&"fault"!==n||Ie.track(n,{data:e,r:r,immediately:!0}))}},onload:function(){this.rzp&&this.postMessage(this.makeMessage())},onfocus:function(){this.isFocused=!0},onblur:function(){this.isFocused=!1,Sn.orientationchange.call(this)},onrender:function(){gn&&(Yt(gn),gn=null),this.rzp.emit("render")},onevent:function(t){this.rzp.emit(t.event,t.data)},onredirect:function(t){$e.flush(),function(t){if(!t.target&&l!==l.parent)return l.Razorpay.sendMessage({event:"redirect",data:t});ge(t.url,t.content,t.method,t.target)}(t)},onsubmit:function(e){$e.flush();var n=this.rzp;"wallet"===e.method&&dt(n.get("external.wallets"),function(t){if(t===e.wallet)try{n.get("external.handler").call(n,e)}catch(t){}}),n.emit("payment.submit",{method:e.method})},ondismiss:function(t){this.close();var e=this.rzp.get("modal.ondismiss");M&&r(function(){return e(t)})},onhidden:function(){$e.flush(),this.afterClose();var t=this.rzp.get("modal.onhidden");M(t)&&t()},oncomplete:function(t){this.close();var e=this.rzp,n=e.get("handler");Ie.track("checkout_success",{r:e,data:t,immediately:!0}),M(n)&&r(function(){n.call(e,t)},200)},onpaymenterror:function(t){$e.flush();try{this.rzp.emit("payment.error",t),this.rzp.emit("payment.failed",t)}catch(t){}},onfailure:function(t){this.ondismiss(),l.alert("Payment Failed.\n"+t.error.description),this.onhidden()},onfault:function(t){$e.flush(),this.rzp.close(),l.alert("Oops! Something went wrong.\n"+t),this.afterClose()},afterClose:function(){Rn.container.style.display="none"},onflush:function(t){$e.flush()}};var Mn,Nn=T(un);function xn(e){return function t(){return Mn?e.call(this):(r(yt(t,this),99),this)}}!function t(){(Mn=u.body||u.getElementsByTagName("body")[0])||r(t,99)}();var Ln,Kn=u.currentScript||(Ln=me("script"))[Ln.length-1];function Pn(t){var e,n,r,i;r=Et(Kn),n=Ut((i=zt(),Qt(ye(t))(i)))(r),e=Nt("onsubmit",gt)(n),qt(e)}var An,Bn,Tn=function(c){var t,e,n;e=Et(Kn),t=Ut((n=zt("input"),Bt({type:"submit",value:c.get("buttontext"),className:"razorpay-payment-button"})(n)))(e),Nt("onsubmit",function(t){t.preventDefault();var e,n=this.action,r=this.method,i=this.target,o=c.get();if(R(n)&&n&&!o.callback_url){var a={url:n,content:(e=this,vt(e.querySelectorAll("[name]"),function(t,e){return t[e.name]=e.value,t},{})),method:R(r)?r:"get",target:R(i)&&i};try{var s=h(Pt({request:a,options:Pt(o),back:g.href}));o.callback_url=sn("checkout/onyx")+"?data="+s}catch(t){}}return c.open(),!1})(t)};function Cn(){if(!An){var t,e,n,r;r=zt(),n=Nt("className","razorpay-container")(r),e=Nt("innerHTML","<style>@keyframes rzp-rot{to{transform: rotate(360deg);}}@-webkit-keyframes rzp-rot{to{-webkit-transform: rotate(360deg);}}</style>")(n),t=Xt({zIndex:1e9,position:"fixed",top:0,display:"none",left:0,height:"100%",width:"100%","-webkit-overflow-scrolling":"touch","-webkit-backface-visibility":"hidden","overflow-y":"visible"})(e),An=It(Mn)(t);var i=(d=Rn.container=An,m=zt(),p=Nt("className","razorpay-backdrop")(m),h=Xt({"min-height":"100%",transition:"0.3s ease-out",position:"fixed",top:0,left:0,width:"100%",height:"100%"})(p),It(d)(h)),o=(a=Rn.backdrop=i,l="rotate(45deg)",f="opacity 0.3s ease-in",u=zt("span"),c=Nt("innerHTML","Test Mode")(u),s=Xt({"text-decoration":"none",background:"#D64444",border:"1px dashed white",padding:"3px",opacity:"0","-webkit-transform":l,"-moz-transform":l,"-ms-transform":l,"-o-transform":l,transform:l,"-webkit-transition":f,"-moz-transition":f,transition:f,"font-family":"lato,ubuntu,helvetica,sans-serif",color:"white",position:"absolute",width:"200px","text-align":"center",right:"-50px",top:"50px"})(c),It(a)(s));Rn.ribbon=o}var a,s,c,u,l,f,d,h,p,m;return An}function zn(t){var e,n;return Bn?Bn.openRzp(t):(Bn=new Rn(t),e=l,ae("message",yt("onmessage",Bn))(e),n=An,Ut(Bn.el)(n)),Bn}un.open=function(t){return un(t).open()},Nn.postInit=function(){this.modal={options:{}},this.get("parent")&&this.open()};var En=Nn.onNew;Nn.onNew=function(t,e){"payment.error"===t&&$e(this,"event_paymenterror",g.href),M(En)&&En.call(this,t,e)},Nn.open=xn(function(){this.metadata||(this.metadata={}),this.metadata.openedAt=n.now();var t=this.checkoutFrame=zn(this);return $e(this,"open"),t.el.contentWindow||(t.close(),t.afterClose(),l.alert("This browser is not supported.\nPlease try payment in another browser.")),"-new.js"===Kn.src.slice(-7)&&$e(this,"oldscript",g.href),this}),Nn.close=function(){var t=this.checkoutFrame;t&&t.postMessage({event:"close"})};var Fn=xn(function(){Cn(),Bn=zn();try{!function(){var i={};Kt(Kn.attributes,function(t){var e=t.name.toLowerCase();if(/^data-/.test(e)){var n=i;e=e.replace(/^data-/,"");var r=t.value;"true"===r?r=!0:"false"===r&&(r=!1),/^notes\./.test(e)&&(i.notes||(i.notes={}),n=i.notes,e=e.replace(/^notes\./,"")),n[e]=r}});var t=i.key;if(t&&0<t.length){i.handler=Pn;var e=un(i);i.parent||Tn(e)}}()}catch(t){}});$e.props.library="checkoutjs",Xe.handler=function(t){if(C(this,un)){var e=this.get("callback_url");e&&ge(e,t,"post")}},Xe.buttontext="Pay Now",Xe.parent=null,hn.parent=function(t){if(!ve(t))return"parent provided for embedded mode doesn't exist"},Fn()}()}();
\ No newline at end of file

src/browserslist

+# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+#
+# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
+
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+not IE 9-11
\ No newline at end of file

src/environments/environment.prod.ts

+export const environment = {
+  production: true
+};

src/environments/environment.ts

+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error';  // Included with Angular CLI.

src/environments/server.config.ts

+export const ImageStorage = 'https://ticketrobo.in/admin/';
+export const apiConfig = 'https://ticketrobo.in/admin/web_api/';
+export const serverApiDev = 'http://devapp.ticketgoose.com/bookbustickets/rest/json/2.0/';

src/index.html

+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Mogobus</title>
+    <base href="/">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
+</head>
+
+<body>
+    <app-root></app-root>
+</body>
+
+</html>
\ No newline at end of file

src/karma.conf.js

+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      dir: require('path').join(__dirname, '../coverage'),
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};
\ No newline at end of file

src/main.ts

+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import 'hammerjs';
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
+

src/polyfills.ts

+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/weak-map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import 'core-js/es6/reflect';
+
+
+/** Evergreen browsers require these. **/
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+import 'core-js/es7/reflect';
+
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ */
+
+ // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+
+ /*
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ */
+// (window as any).__Zone_enable_cross_context_check = true;
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

src/responsive.scss

+@import "./styles.scss";
+
+/*
+	 Site Name: MOGOBUS
+    URI: http:
+    Description: This is the responsive scss for MOGOBUS
+    Version: 2.0
+    Author: Amal-Techware Solution
+    Author URI:
+    Tags:
+
+	---------------------------
+	CUSTOM STYLES
+	---------------------------
+
+	TABLE OF CONTENTS
+	---------------------------
+	01.0 Smartphones (portrait and landscape)
+	02.0 Smartphones (landscape)
+	03.0 Smartphones (portrait)
+	04.0 iPads (portrait and landscape)
+	05.0 iPads (landscape)
+	06.0 iPads (portrait)
+	07.0 Desktops and laptops
+	08.0 Large screens
+	09.0 iPhone 4
+	10.0 iPhone 5
+	11.0 iPhone 6
+	12.0 iPhone 6+
+	13.0 Samsung Galaxy S3
+	14.0 Samsung Galaxy S4
+	15.0 Samsung Galaxy S5
+
+
+*/
+
+
+/* 01. Smartphones (portrait and landscape) ----------- */
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
+    /* main-wrapper */
+    .main_wrapper {
+        .main_banner {
+            height: auto !important;
+            .main_banner_inner {
+                height: auto !important;
+                width: 100% !important;
+                padding-top: 30% !important;
+                .main_section_div {
+                    padding: 15px !important;
+                    min-height: 300px !important;
+                }
+                .slide_inner_content {
+                    .slide_caption {
+                        h1 {
+                            font-size: 2em !important;
+                        }
+                    }
+                    .advertise_slider {
+                        // width: 100% !important;
+                        // height: 200px !important;
+                        display: none;
+                    }
+                }
+                .section_slider_wrapper {
+                    width: 100% !important;
+                    .custom_row {
+                        padding-bottom: 15px !important;
+                        h5 {
+                            font-size: 24px !important;
+                        }
+                        input {
+                            height: 40px !important;
+                        }
+                        .prime_btn {
+                            height: 40px !important;
+                        }
+                    }
+                }
+                .slider_selection {
+                    position: static !important;
+                }
+            }
+        }
+    }
+    /* who-are-we */
+    .who_are_we {
+        padding-top: 30px !important;
+        padding-bottom: 30px !important;
+        .who_are_we_inner_container {
+            max-width: 100% !important;
+            .whoare_we_detail {
+                max-width: 100% !important;
+                padding-top: 20px !important;
+                h3 {
+                    font-size: 30px !important;
+                    padding-bottom: 20px !important;
+                }
+                p {
+                    font-size: 12px !important;
+                    line-height: 20px !important;
+                    text-align: justify !important;
+                }
+            }
+        }
+    }
+    /*experience*/
+    .experience_section {
+        padding-top: 30px !important;
+        padding-bottom: 30px !important;
+        .experience_inner_container {
+            h3 {
+                font-size: 30px !important;
+                padding-bottom: 20px !important;
+            }
+            h5 {
+                font-size: 35px !important;
+            }
+        }
+    }
+    /*offer-slider*/
+    .offer_wrapper {
+        padding-top: 30px !important;
+        padding-bottom: 30px !important;
+        .who_are_we_inner_container {
+            max-width: 100% !important;
+            .offer_slider_detail {
+                h3 {
+                    font-size: 30px !important;
+                    padding-bottom: 20px !important;
+                }
+                p {
+                    font-size: 12px !important;
+                    line-height: 20px !important;
+                    text-align: justify !important;
+                }
+            }
+            .offer_slider {
+                .offer_inner_layer_one {
+                    width: 100% !important;
+                    .offer_inner_layer_two {
+                        width: 100% !important;
+                        .offer_slide_content {
+                            max-width: 100% !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .mogo_footer_sec {
+        max-width: 100% !important;
+    }
+    /* my-account */
+    .account_wrapper {
+        .account_wrapper_inner {
+            .trips_section {
+                ul {
+                    li {
+                        p {
+                            font-size: 18px !important;
+                            border-bottom: 1px solid $cm-border-color;
+                            padding-bottom: 10px !important;
+                        }
+                        h6 {
+                            border-bottom: 1px solid $cm-border-color;
+                            padding-bottom: 10px !important;
+                            padding-top: 10px !important;
+                        }
+                        h5 {
+                            border-bottom: 1px solid $cm-border-color;
+                            padding-bottom: 10px !important;
+                            padding-top: 10px !important;
+                        }
+                        .ticket_btn {
+                            width: 100%;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+/* 02.0 Smartphones (landscape) ----------- */
+
+@media only screen and (min-width: 321px) {}
+
+
+/* 03.0 Smartphones (portrait) ----------- */
+
+@media only screen and (max-width: 320px) {}
+
+
+/* 04.0 iPads (portrait and landscape) ----------- */
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+    /* main-wrapper */
+    .main_wrapper {
+        .main_banner {
+            height: auto !important;
+            .main_banner_inner {
+                height: auto !important;
+                width: 100% !important;
+                padding-top: 30% !important;
+                .main_section_div {
+                    padding: 15px !important;
+                    min-height: 300px !important;
+                }
+                .slide_inner_content {
+                    .slide_caption {
+                        h1 {
+                            font-size: 2em !important;
+                        }
+                    }
+                    .advertise_slider {
+                        // width: 100% !important;
+                        // height: 200px !important;
+                        display: none;
+                    }
+                }
+                .section_slider_wrapper {
+                    width: 100% !important;
+                    .custom_row {
+                        padding-bottom: 15px !important;
+                        h5 {
+                            font-size: 24px !important;
+                        }
+                        input {
+                            height: 40px !important;
+                        }
+                        .prime_btn {
+                            height: 40px !important;
+                        }
+                    }
+                }
+                .slider_selection {
+                    position: static !important;
+                }
+            }
+        }
+    }
+    /* who-are-we */
+    .who_are_we {
+        padding-top: 30px !important;
+        padding-bottom: 30px !important;
+        .who_are_we_inner_container {
+            max-width: 100% !important;
+            .whoare_we_detail {
+                max-width: 100% !important;
+                padding-top: 20px !important;
+                h3 {
+                    font-size: 30px !important;
+                    padding-bottom: 20px !important;
+                }
+                p {
+                    font-size: 12px !important;
+                    line-height: 20px !important;
+                    text-align: justify !important;
+                }
+            }
+        }
+    }
+    /*experience*/
+    .experience_section {
+        padding-top: 30px !important;
+        padding-bottom: 30px !important;
+        .experience_inner_container {
+            h3 {
+                font-size: 30px !important;
+                padding-bottom: 20px !important;
+            }
+            h5 {
+                font-size: 35px !important;
+            }
+        }
+    }
+    /*offer-slider*/
+    .offer_wrapper {
+        padding-top: 30px !important;
+        padding-bottom: 30px !important;
+        .who_are_we_inner_container {
+            max-width: 100% !important;
+            .offer_slider_detail {
+                h3 {
+                    font-size: 30px !important;
+                    padding-bottom: 20px !important;
+                }
+                p {
+                    font-size: 12px !important;
+                    line-height: 20px !important;
+                    text-align: justify !important;
+                }
+            }
+            .offer_slider {
+                .offer_inner_layer_one {
+                    width: 100% !important;
+                    .offer_inner_layer_two {
+                        width: 100% !important;
+                        .offer_slide_content {
+                            max-width: 100% !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+/* 05.0 iPads (landscape) ----------- */
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
+    /* main-wrapper */
+    .main_wrapper {
+        .main_banner {
+            height: auto !important;
+            .main_banner_inner {
+                height: auto !important;
+                width: 100% !important;
+                padding-top: 30% !important;
+                .main_section_div {
+                    padding: 15px !important;
+                    min-height: 300px !important;
+                }
+                .slide_inner_content {
+                    .slide_caption {
+                        h1 {
+                            font-size: 2em !important;
+                        }
+                    }
+                    .advertise_slider {
+                        // width: 100% !important;
+                        // height: 200px !important;
+                        display: none;
+                    }
+                }
+                .section_slider_wrapper {
+                    width: 100% !important;
+                    .custom_row {
+                        padding-bottom: 15px !important;
+                        h5 {
+                            font-size: 24px !important;
+                        }
+                        input {
+                            height: 40px !important;
+                        }
+                        .prime_btn {
+                            height: 40px !important;
+                        }
+                    }
+                }
+                .slider_selection {
+                    position: static !important;
+                }
+            }
+        }
+    }
+    /* who-are-we */
+    .who_are_we {
+        padding-top: 30px !important;
+        padding-bottom: 30px !important;
+        .who_are_we_inner_container {
+            max-width: 100% !important;
+            .whoare_we_detail {
+                max-width: 100% !important;
+                padding-top: 20px !important;
+                h3 {
+                    font-size: 30px !important;
+                    padding-bottom: 20px !important;
+                }
+                p {
+                    font-size: 12px !important;
+                    line-height: 20px !important;
+                    text-align: justify !important;
+                }
+            }
+        }
+    }
+    /*experience*/
+    .experience_section {
+        padding-top: 30px !important;
+        padding-bottom: 30px !important;
+        .experience_inner_container {
+            h3 {
+                font-size: 30px !important;
+                padding-bottom: 20px !important;
+            }
+            h5 {
+                font-size: 35px !important;
+            }
+        }
+    }
+    /*offer-slider*/
+    .offer_wrapper {
+        padding-top: 30px !important;
+        padding-bottom: 30px !important;
+        .who_are_we_inner_container {
+            max-width: 100% !important;
+            .offer_slider_detail {
+                h3 {
+                    font-size: 30px !important;
+                    padding-bottom: 20px !important;
+                }
+                p {
+                    font-size: 12px !important;
+                    line-height: 20px !important;
+                    text-align: justify !important;
+                }
+            }
+            .offer_slider {
+                .offer_inner_layer_one {
+                    width: 100% !important;
+                    .offer_inner_layer_two {
+                        width: 100% !important;
+                        .offer_slide_content {
+                            max-width: 100% !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+/* 06.0 iPads (portrait) ----------- */
+
+@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {}
+
+
+/* 07.0 Desktops and laptops ----------- */
+
+@media only screen and (min-device-width: 1124px) and (max-device-width: 1440px) {
+    /* main-wrapper */
+    .main_wrapper {
+        .main_banner {
+            height: auto !important;
+            .main_banner_inner {
+                height: auto !important;
+                width: 100% !important;
+                .main_section_div {
+                    padding: 15px !important;
+                    min-height: 300px !important;
+                }
+                .slide_inner_content {
+                    .slide_caption {
+                        h1 {
+                            font-size: 2em !important;
+                        }
+                    }
+                    .advertise_slider {
+                        width: 80% !important;
+                        height: 200px !important;
+                    }
+                }
+                .section_slider_wrapper {
+                    width: 330px !important;
+                    .custom_row {
+                        padding-bottom: 15px !important;
+                        h5 {
+                            font-size: 24px !important;
+                        }
+                        input {
+                            height: 40px !important;
+                        }
+                        .prime_btn {
+                            height: 40px !important;
+                        }
+                    }
+                }
+                .slider_selection {
+                    width: 140px !important;
+                    ul {
+                        li {
+                            font-size: 10px !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    /* who-are-we */
+    .who_are_we {
+        padding-top: 30px !important;
+        padding-bottom: 30px !important;
+        .who_are_we_inner_container {
+            max-width: 100% !important;
+            .whoare_we_detail {
+                max-width: 100% !important;
+                padding-top: 20px !important;
+                h3 {
+                    font-size: 30px !important;
+                    padding-bottom: 20px !important;
+                }
+                p {
+                    font-size: 12px !important;
+                    line-height: 20px !important;
+                    text-align: justify !important;
+                }
+            }
+        }
+    }
+    /*experience*/
+    .experience_section {
+        padding-top: 30px !important;
+        padding-bottom: 30px !important;
+        .experience_inner_container {
+            h3 {
+                font-size: 30px !important;
+                padding-bottom: 20px !important;
+            }
+            h5 {
+                font-size: 35px !important;
+            }
+        }
+    }
+    /*offer-slider*/
+    .offer_wrapper {
+        padding-top: 30px !important;
+        padding-bottom: 30px !important;
+        .who_are_we_inner_container {
+            max-width: 100% !important;
+            .offer_slider_detail {
+                h3 {
+                    font-size: 30px !important;
+                    padding-bottom: 20px !important;
+                }
+                p {
+                    font-size: 12px !important;
+                    line-height: 20px !important;
+                    text-align: justify !important;
+                }
+            }
+            .offer_slider {
+                .offer_inner_layer_one {
+                    width: 100% !important;
+                    .offer_inner_layer_two {
+                        width: 100% !important;
+                        .offer_slide_content {
+                            max-width: 100% !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+/* 08.0 Large screens ----------- */
+
+@media only screen and (min-width: 1824px) {}
+
+
+/* 09.0 iPhone 4 ----------- */
+
+@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {}
+
+
+/* 10.0 iPhone 5 ----------- */
+
+@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {}
+
+
+/* 11.0 iPhone 6 ----------- */
+
+@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {}
+
+@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {}
+
+
+/* 12.0 iPhone 6+ ----------- */
+
+@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {}
+
+
+/* 13.0 Samsung Galaxy S3 ----------- */
+
+@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {}
+
+
+/* 14.0 Samsung Galaxy S4 ----------- */
+
+@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {}
+
+
+/* 15.0 Samsung Galaxy S5 ----------- */
+
+@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {}
+
+@media (max-width: 480px) {}
+
+@media only screen and (min-width: 1200px) {
+    .window_min_height {
+        min-height: 450px !important;
+    }
+}
\ No newline at end of file

src/styles.scss

+/*
+  Site Name: Mogobus
+  URI: http:
+  Description: This is the theme scss for Mogobus
+  Version: 2.0
+  Author: Amal-Techware Solution
+  Author URI:
+  Tags:
+
+	---------------------------
+	THEME STYLES
+	---------------------------
+
+	TABLE OF CONTENTS
+	---------------------------
+	 01. FONTS-N-SIZES
+	 02. FONTS-COLOR
+	 03. THEMES-N-BACKGROUNDS
+	 04. SPACING-N-POSITIONS
+	 05. ALIGMENTS
+	 06. ALERTS-N-MESSAGES
+
+
+*/
+
+
+/*-------------------------------
+
+01. FONTS-N-SIZES
+
+--------------------------------*/
+
+@import url('https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900&display=swap');
+* {
+    font-family: 'Heebo', sans-serif;
+    -webkit-font-smoothing: antialiased;
+}
+
+
+/*
+*::-webkit-scrollbar {
+    display: none;
+}*/
+
+.no-scroll .scroll-content {
+    overflow: hidden;
+}
+
+a {
+    text-decoration: none !important;
+}
+
+html,
+body {
+    font-family: 'Lato', sans-serif !important;
+}
+
+
+/*-------------------------------
+
+02. FONTS-SETTINGS
+
+--------------------------------*/
+
+.font_weight300 {
+    font-weight: 300 !important;
+}
+
+.font_weight400 {
+    font-weight: 400 !important;
+}
+
+.font_weight500 {
+    font-weight: 500 !important;
+}
+
+.font_weight600 {
+    font-weight: 600 !important;
+}
+
+
+/*-------------------------------
+
+03. THEMES-N-BACKGROUNDS
+
+--------------------------------*/
+
+$primary-color: #fe8e09;
+$white-color:#fff;
+$black-color:#000;
+$dark-color:#272f3a;
+$text-dark:#626d7b;
+$offwhite:#f4f4f4;
+$bg-gray:#f6f6f6;
+$brown-theme:#62381c;
+$cm-border-color:#ECECEC;
+.box_shdw_down {
+    -webkit-box-shadow: 0px 12px 31px -13px rgba(0, 0, 0, 0.5);
+    -moz-box-shadow: 0px 12px 31px -13px rgba(0, 0, 0, 0.5);
+    box-shadow: 0px 12px 31px -13px rgba(0, 0, 0, 0.5);
+}
+
+
+/*-------------------------------
+
+04. SPACING-N-POSITIONS
+
+--------------------------------*/
+
+.width25 {
+    width: 25% !important;
+}
+
+.width50 {
+    width: 50% !important;
+}
+
+.width75 {
+    width: 75% !important;
+}
+
+.widthFull {
+    width: 100% !important;
+}
+
+.widthAuto {
+    width: auto !important;
+}
+
+.height25 {
+    height: 25% !important;
+}
+
+.height50 {
+    height: 50% !important;
+}
+
+.height75 {
+    width: 75% !important;
+}
+
+.heightFull {
+    height: 100% !important;
+}
+
+.heightAuto {
+    height: auto !important;
+}
+
+.p0 {
+    padding: 0px !important;
+}
+
+.pl0 {
+    padding-left: 0px !important;
+}
+
+.pr0 {
+    padding-right: 0px !important;
+}
+
+.pt0 {
+    padding-top: 0px !important;
+}
+
+.pb0 {
+    padding-bottom: 0px !important;
+}
+
+.p10 {
+    padding: 10px !important;
+}
+
+.pt10 {
+    padding-top: 10px !important;
+}
+
+.m0 {
+    margin: 0px !important;
+}
+
+.ml0 {
+    margin-left: 0px !important;
+}
+
+.mr0 {
+    margin-right: 0px !important;
+}
+
+.mt0 {
+    margin-top: 0px !important;
+}
+
+.mb0 {
+    margin-bottom: 0px !important;
+}
+
+.mAuto {
+    margin: 0 auto !important;
+}
+
+.clear {
+    clear: both !important;
+}
+
+.absolute {
+    position: absolute !important;
+}
+
+.relative {
+    position: relative !important;
+}
+
+.fixed {
+    position: fixed !important;
+}
+
+.borderNone {
+    border: none !important;
+}
+
+
+/*-------------------------------
+
+05. ALIGMENTS
+
+--------------------------------*/
+
+.floatLeft {
+    float: left !important;
+}
+
+.floatRight {
+    float: right !important;
+}
+
+.textLeft {
+    text-align: left !important;
+}
+
+.textRight {
+    text-align: right !important;
+}
+
+.textCenter {
+    text-align: center !important;
+}
+
+
+/*-------------------------------
+
+06. ALERTS-N-MESSAGES
+
+--------------------------------*/
+
+.alert {
+    padding: 15px;
+    margin-bottom: 20px;
+    border: 1px solid transparent;
+    font-weight: 600;
+    transition: all 0.5s ease;
+    position: fixed;
+    border-bottom: 0px;
+    left: 0px;
+    right: 0px;
+}
+
+.warning {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+
+.success {
+    color: #fff;
+    background-color: #3c763d;
+}
+
+.error {
+    color: #fff;
+    background-color: #a94442;
+}
+
+
+/*-------------------------------
+
+07. ERROR - MESSAGE
+
+--------------------------------*/
+
+.s_alert {
+    padding: 5px;
+    font-size: 13px;
+    width: 100%;
+    padding-right: 10px !important;
+    padding-left: 10px !important;
+    font-weight: 300;
+    border-radius: 2px;
+}
+
+.s_error {
+    padding-bottom: 2px;
+}
+
+.s_error .s_validation {
+    background: #990000 !important;
+    padding: 2px !important;
+    font-size: 13px;
+    position: relative;
+    display: inline-block !important;
+    box-shadow: 1px 1px 1px #aaaaaa;
+    margin-top: 0px;
+    border-radius: 2px;
+    color: #fff;
+    width: 100%;
+    padding-right: 10px !important;
+    padding-left: 10px !important;
+    font-weight: 300;
+}
+
+.s_error .s_validation:before {
+    content: '';
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid #990000;
+    position: absolute;
+    top: -8px;
+    left: 10px;
+}
+
+.s_label:after {
+    color: #990000 !important;
+}
+
+.s_error input,
+.c-error select,
+.s_error .s_choice-option {
+    background: #fff0f4;
+    color: #990000;
+}
+
+.s_error input,
+.s_error select {
+    border: 1px solid #990000 !important;
+}
+
+
+/*-------------------------------
+
+08. BODY-STRUCTURE
+
+--------------------------------*/
+
+section.module.parallax {
+    background-repeat: no-repeat !important;
+    background-attachment: fixed !important;
+    background-size: cover !important;
+}
+
+.bs-datepicker-container {
+    padding: 0px !important;
+}
+
+.bs-datepicker-body table.days span {
+    width: 40px !important;
+    height: 40px !important;
+    font-size: 18px;
+    padding: 2px;
+}
+
+.bs-datepicker-head {
+    background-color: $primary-color !important;
+    text-align: center !important;
+}
+
+.bs-datepicker-head button.current {
+    font-size: 20px;
+}
+
+.bs-datepicker-body table td span.selected {
+    background-color: $primary-color !important;
+    border-radius: 6px !important;
+}
+
+.bs-datepicker-body table.days span {
+    line-height: 38px !important;
+}
+
+.is-other-month {
+    display: none !important;
+}
+
+.cursor {
+    cursor: pointer;
+}
+
+.modal-content {
+    background-color: transparent !important;
+    border: none !important;
+}
+
+.loader_wrapper {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    padding: 6px;
+}
+
+.loader {
+    border: 16px solid #ff7800;
+    border-top: 16px solid #2c47c4;
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+}
+
+.loader_small {
+    border: 5px solid #ff7800;
+    border-top: 5px solid #2c47c4;
+    border-radius: 50%;
+    width: 35px;
+    height: 35px;
+    animation: spin 2s linear infinite;
+}
+
+.loader_common_main_wrapper {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    bottom: 0px;
+    padding: 6px;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(273, 273, 273, 0.8);
+    z-index: 9999;
+}
+
+.loader_common_main_wrapper .loader {
+    border: 16px solid #ff7800;
+    border-top: 16px solid #2c47c4;
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.slick-slide {
+    outline: none;
+}
+
+
+/* SLIDER-CSS */
+
+.advertise_slider {
+    .slick-slider {
+        .slick-arrow {
+            width: 50px;
+            height: 50px;
+            background-color: rgba(199, 201, 204, 0.5);
+            position: absolute;
+            top: 140px;
+            z-index: 99;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 40px;
+            &::before {
+                content: none;
+            }
+        }
+        .slick-next {
+            right: 0px;
+            background-image: url("/assets/imgs/arrow_right.png");
+        }
+        .slick-prev {
+            left: 0px;
+            background-image: url("/assets/imgs/arrow_left.png");
+        }
+    }
+}
+
+.whoare_we_slider {
+    .slick-slider {
+        .slick-arrow {
+            width: 60px;
+            height: 60px;
+            z-index: 99;
+            position: absolute;
+            bottom: 40px;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            &::before {
+                content: none;
+            }
+        }
+        .slick-next {
+            right: -25px;
+            background-image: url("/assets/imgs/right_arw.png");
+        }
+        .slick-prev {
+            left: -25px;
+            background-image: url("/assets/imgs/left_arw.png");
+        }
+    }
+}
+
+.offer_slider {
+    .slick-slider {
+        .slick-arrow {
+            width: 60px;
+            height: 60px;
+            position: absolute;
+            top: 220px;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 60px;
+            z-index: 9;
+            &::before {
+                content: none;
+            }
+        }
+        .slick-next {
+            right: -15px;
+            background-image: url("/assets/imgs/right_arw.png");
+        }
+        .slick-prev {
+            left: -15px;
+            background-image: url("/assets/imgs/left_arw.png");
+        }
+    }
+}
+
+
+/* MODAL-CSS */
+
+.cmn_modal_wrapper {
+    background: $white-color;
+    border-radius: 10px;
+    min-height: 300px;
+    padding: 30px;
+    padding-top: 50px;
+    .cmn_modal_header {
+        position: relative;
+        .close {
+            position: absolute;
+            top: -35px;
+            right: -10px;
+            outline: none;
+        }
+        h2 {
+            margin: 0px;
+            padding: 0px;
+            font-size: 40px;
+            font-weight: 600;
+            color: $dark-color;
+        }
+    }
+    .cmn_modal_content {
+        padding-top: 30px;
+        .custom_row {
+            padding-bottom: 25px;
+            p {
+                margin: 0px;
+                font-size: 14px;
+                color: $dark-color;
+                padding-bottom: 10px;
+                font-weight: 500;
+            }
+            input {
+                border: 1px solid $cm-border-color;
+                height: 45px;
+                padding-left: 10px;
+                padding-right: 10px;
+                width: 100%;
+                border-radius: 8px;
+                &:focus {
+                    outline: none;
+                }
+            }
+            .modal_btn {
+                width: 100%;
+                color: $white-color;
+                background-color: $primary-color;
+                height: 45px;
+                border-radius: 8px;
+                border: none;
+                line-height: 1px;
+                cursor: pointer;
+                &:focus {
+                    outline: none;
+                }
+            }
+            h6 {
+                margin: 0px;
+                padding: 0px;
+                color: $primary-color;
+                font-size: 14px;
+                text-align: center;
+                font-weight: 500;
+            }
+            h5 {
+                margin: 0px;
+                padding: 0px;
+                font-size: 14px;
+                text-align: center;
+                font-weight: 500;
+                color: #727272;
+                a {
+                    color: $primary-color;
+                    cursor: pointer;
+                }
+            }
+            .styled-checkbox {
+                position: absolute; // take it out of document flow
+                opacity: 0; // hide it
+                &+label {
+                    position: relative;
+                    cursor: pointer;
+                    padding: 0;
+                    padding-left: 7px;
+                    font-size: 16px;
+                    p {
+                        margin: 0px;
+                        padding: 0px;
+                        color: #353535;
+                        position: absolute;
+                        width: 250px;
+                        top: 0px;
+                        left: 50px;
+                        font-size: 17px;
+                    }
+                }
+                // Box.
+                &+label:before {
+                    content: '';
+                    margin-right: 10px;
+                    display: inline-block;
+                    vertical-align: text-top;
+                    width: 25px;
+                    height: 25px;
+                    background: white;
+                    border: 1px solid #acacac;
+                    border-radius: 4px;
+                }
+                // Box hover
+                &:hover+label:before {
+                    background: transparent;
+                }
+                // Box focus
+                &:focus+label:before {
+                    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
+                }
+                // Box checked
+                &:checked+label:before {
+                    background: #f79a2a;
+                }
+                // Disabled state label.
+                &:disabled+label {
+                    color: #b8b8b8;
+                    cursor: auto;
+                }
+                // Disabled box.
+                &:disabled+label:before {
+                    box-shadow: none;
+                    background: #ddd;
+                }
+                // Checkmark. Could be replaced with an image
+                &:checked+label:after {
+                    content: '';
+                    position: absolute;
+                    left: 14px;
+                    top: 12px;
+                    background: white;
+                    width: 2px;
+                    color: #2d2d2d;
+                    height: 2px;
+                    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
+                    transform: rotate(45deg);
+                    border: none;
+                }
+            }
+        }
+    }
+    .social_icon {
+        width: 40px;
+        height: 40px;
+        border: 1px solid $cm-border-color;
+        border-radius: 50%;
+        margin-left: 10px;
+        background-image: url("/assets/imgs/icon_sprite.png");
+        background-size: 400px;
+        background-repeat: no-repeat;
+    }
+    .fb_social {
+        background-position: top -6px left -238px;
+    }
+    .g_social {
+        background-position: top -7px left -180px;
+    }
+}
\ No newline at end of file

src/test.ts

+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);

src/tsconfig.app.json

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}

src/tsconfig.json

+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+      "outDir": "../out-tsc/app",
+      "experimentalDecorators": true,
+      "allowJs": true,
+      "types": []
+    },
+    "exclude": [
+      "test.ts",
+      "**/*.spec.ts"
+    ]
+}
\ No newline at end of file

src/tsconfig.spec.json

+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts",
+    "polyfills.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

src/tslint.json

+{
+    "extends": "../tslint.json",
+    "rules": {
+        "directive-selector": [
+            true,
+            "attribute",
+            "app",
+            "camelCase"
+        ],
+        "component-selector": [
+            true,
+            "element",
+            "app",
+            "kebab-case"
+        ]
+    }
+}

tsconfig.json

+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "module": "es2015",
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ]
+  }
+}

tslint.json

+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "arrow-return-shorthand": true,
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "deprecation": {
+      "severity": "warn"
+    },
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [
+      true,
+      "rxjs/Rx"
+    ],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      {
+        "order": [
+          "static-field",
+          "instance-field",
+          "static-method",
+          "instance-method"
+        ]
+      }
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-super": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": [
+      true,
+      "ignore-params"
+    ],
+    "no-misused-new": true,
+    "no-non-null-assertion": true,
+    "no-redundant-jsdoc": true,
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unnecessary-initializer": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      true,
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+    "no-output-on-prefix": true,
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true
+  }
+}