Merge branch 'jensa' into 'master'

Jensa See merge request !34

Merge branch 'jensa' into 'master'
ccda95a6 · Tobin · 49be1901 · c0808a97 · ccda95a6 · ccda95a6
Commit ccda95a6 authored May 23, 2019 by Tobin
41 changed files
--- a/package-lock.json
+++ b/package-lock.json
@@ -72,6 +72,55 @@
        "webpack-subresource-integrity": "1.1.0-rc.6"
      },
      "dependencies": {
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true,
+          "optional": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "node-sass": {
+          "version": "4.11.0",
+          "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.11.0.tgz",
+          "integrity": "sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "async-foreach": "^0.1.3",
+            "chalk": "^1.1.1",
+            "cross-spawn": "^3.0.0",
+            "gaze": "^1.0.0",
+            "get-stdin": "^4.0.1",
+            "glob": "^7.0.3",
+            "in-publish": "^2.0.0",
+            "lodash.assign": "^4.2.0",
+            "lodash.clonedeep": "^4.3.2",
+            "lodash.mergewith": "^4.6.0",
+            "meow": "^3.7.0",
+            "mkdirp": "^0.5.1",
+            "nan": "^2.10.0",
+            "node-gyp": "^3.8.0",
+            "npmlog": "^4.0.0",
+            "request": "^2.88.0",
+            "sass-graph": "^2.2.4",
+            "stdout-stream": "^1.4.0",
+            "true-case-path": "^1.0.2"
+          }
+        },
        "semver": {
          "version": "5.6.0",
          "resolved": "https://registry.npmjs.org/semver/-/semver-5.6.0.tgz",
@@ -93,6 +142,13 @@
            "buffer-from": "^1.0.0",
            "source-map": "^0.6.0"
          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true,
+          "optional": true
        }
      }
    },
@@ -1551,13 +1607,13 @@
    "@yarnpkg/lockfile": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
-      "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
+      "integrity": "sha1-53qX+9NFt22DJF7c0X05OxtB+zE=",
      "dev": true
    },
    "JSONStream": {
      "version": "1.3.5",
      "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.5.tgz",
-      "integrity": "sha512-E+iruNOY8VV9s4JEbe1aNEm6MiszPRr/UfcHMz0TQh1BXSxHK+ASV1R6W4HpjBhSeS+54PIsAMCBmwD06LLsqQ==",
+      "integrity": "sha1-MgjB8I06TZkmGrZPkjArwV4RHKA=",
      "dev": true,
      "requires": {
        "jsonparse": "^1.2.0",
@@ -1565,9 +1621,9 @@
      }
    },
    "abbrev": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz",
-      "integrity": "sha1-kbR5JYinc4wl813W9jdSovh3YTU="
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q=="
    },
    "accepts": {
      "version": "1.3.5",
@@ -1615,7 +1671,7 @@
    "agentkeepalive": {
      "version": "3.5.2",
      "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-3.5.2.tgz",
-      "integrity": "sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==",
+      "integrity": "sha1-oROSTdP6JKC8O3gQjEUMKr7gD2c=",
      "dev": true,
      "requires": {
        "humanize-ms": "^1.2.1"
@@ -1731,7 +1787,7 @@
    "are-we-there-yet": {
      "version": "1.1.5",
      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
-      "integrity": "sha1-SzXClE8GKov82mZBB2A1D+nd/CE=",
+      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
      "requires": {
        "delegates": "^1.0.0",
        "readable-stream": "^2.0.6"
@@ -2520,7 +2576,7 @@
    },
    "camelcase-keys": {
      "version": "2.1.0",
-      "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz",
      "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=",
      "requires": {
        "camelcase": "^2.0.0",
@@ -2558,7 +2614,7 @@
    "chardet": {
      "version": "0.7.0",
      "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
-      "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
+      "integrity": "sha1-kAlISfCTfy7twkJdDSip5fDLrZ4=",
      "dev": true
    },
    "chokidar": {
@@ -2585,7 +2641,7 @@
    "chownr": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.1.tgz",
-      "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==",
+      "integrity": "sha1-VHJri4//TfBTxCGH6AH7RBLfFJQ=",
      "dev": true
    },
    "chrome-trace-event": {
@@ -2850,7 +2906,7 @@
    "concat-stream": {
      "version": "1.6.2",
      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
-      "integrity": "sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==",
+      "integrity": "sha1-kEvfGUzTEi/Gdcd/xKw9T/D9GjQ=",
      "dev": true,
      "requires": {
        "buffer-from": "^1.0.0",
@@ -2956,7 +3012,7 @@
    "copy-concurrently": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
-      "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
+      "integrity": "sha1-kilzmMrjSTf8r9bsgTnBgFHwteA=",
      "dev": true,
      "requires": {
        "aproba": "^1.1.1",
@@ -3496,7 +3552,7 @@
    "end-of-stream": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
-      "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
+      "integrity": "sha1-7SljTRm6ukY7bOa4CjchPqtx7EM=",
      "dev": true,
      "requires": {
        "once": "^1.4.0"
@@ -3856,7 +3912,7 @@
    "external-editor": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/external-editor/-/external-editor-3.0.3.tgz",
-      "integrity": "sha512-bn71H9+qWoOQKyZDo25mOMVpSmXROAsTJVVVYzrrtol3d4y+AsKjf4Iwl2Q+IuT0kFSQ1qo166UuIwqYq7mGnA==",
+      "integrity": "sha1-WGbbKal4Jtvkvzr9JAcOrZ6kOic=",
      "dev": true,
      "requires": {
        "chardet": "^0.7.0",
@@ -3867,7 +3923,7 @@
        "iconv-lite": {
          "version": "0.4.24",
          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
-          "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+          "integrity": "sha1-ICK0sl+93CHS9SSXSkdKr+czkIs=",
          "dev": true,
          "requires": {
            "safer-buffer": ">= 2.1.2 < 3"
@@ -3973,7 +4029,7 @@
    "figgy-pudding": {
      "version": "3.5.1",
      "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
-      "integrity": "sha512-vNKxJHTEKNThjfrdJwHc7brvM6eVevuO5nTj6ez8ZQ1qbXTvGthucRF7S4vf2cr71QVnT70V34v0S1DyQsti0w==",
+      "integrity": "sha1-hiRwESkBxyeg5JWoB0S9W6odZ5A=",
      "dev": true
    },
    "figures": {
@@ -4188,7 +4244,7 @@
    "fs-minipass": {
      "version": "1.2.5",
      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
-      "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
+      "integrity": "sha1-BsJ3IYRU7CiN93raVKA7hwKqy50=",
      "dev": true,
      "requires": {
        "minipass": "^2.2.1"
@@ -4773,7 +4829,7 @@
    "gaze": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/gaze/-/gaze-1.1.3.tgz",
-      "integrity": "sha1-xEFzPhO5J6yMD/C0w7Az8ogSkko=",
+      "integrity": "sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==",
      "requires": {
        "globule": "^1.0.0"
      }
@@ -4781,7 +4837,7 @@
    "genfun": {
      "version": "5.0.0",
      "resolved": "https://registry.npmjs.org/genfun/-/genfun-5.0.0.tgz",
-      "integrity": "sha512-KGDOARWVga7+rnB3z9Sd2Letx515owfk0hSxHGuqjANb1M+x2bGZGqHLiozPsYMdM2OubeMni/Hpwmjq6qIUhA==",
+      "integrity": "sha1-ndlxCgaQClxKW/V6yl2k5S/nZTc=",
      "dev": true
    },
    "get-caller-file": {
@@ -4871,7 +4927,7 @@
    "globule": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/globule/-/globule-1.2.1.tgz",
-      "integrity": "sha1-Xf+xsZHyLSB5epNptJ6rTpg5aW0=",
+      "integrity": "sha512-g7QtgWF4uYSL5/dn71WxubOrS7JVGCnFPEnoeChJmBnyR9Mw8nGoEwOgJL/RC2Te0WhbsEUCejfH8SZNJ+adYQ==",
      "requires": {
        "glob": "~7.1.1",
        "lodash": "~4.17.10",
@@ -5070,7 +5126,7 @@
    "http-cache-semantics": {
      "version": "3.8.1",
      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
-      "integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
+      "integrity": "sha1-ObDhat2bYFvwqe89nar0hDtMrNI=",
      "dev": true
    },
    "http-deceiver": {
@@ -5111,7 +5167,7 @@
    "http-proxy-agent": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-2.1.0.tgz",
-      "integrity": "sha512-qwHbBLV7WviBl0rQsOzH6o5lwyOIvwp/BdFnvVxXORldu5TmjFfjzBcWUWS5kWAZhmv+JtiDhSuQCp4sBfbIgg==",
+      "integrity": "sha1-5IIb7vWyFCogJr1zkm/lN2McVAU=",
      "dev": true,
      "requires": {
        "agent-base": "4",
@@ -5121,7 +5177,7 @@
        "debug": {
          "version": "3.1.0",
          "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
-          "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==",
+          "integrity": "sha1-W7WgZyYotkFJVmuhaBnmFRjGcmE=",
          "dev": true,
          "requires": {
            "ms": "2.0.0"
@@ -5223,7 +5279,7 @@
    "ignore-walk": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
-      "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
+      "integrity": "sha1-qD5i59JyrA47VRqqgoMaGbafgvg=",
      "dev": true,
      "requires": {
        "minimatch": "^3.0.4"
@@ -6002,9 +6058,9 @@
      "integrity": "sha1-BvAzXxbjU6aV5yBr9QUDy1I6buU="
    },
    "js-base64": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.0.tgz",
-      "integrity": "sha512-wlEBIZ5LP8usDylWbDNhKPEFVFdI5hCHpnVoT/Ysvoi/PRhJENm/Rlh9TvjYB38HFfKZN7OzEbRjmjvLkFw11g=="
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.5.1.tgz",
+      "integrity": "sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw=="
    },
    "js-tokens": {
      "version": "3.0.2",
@@ -6036,7 +6092,7 @@
    "json-parse-better-errors": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "integrity": "sha1-u4Z8+zRQ5pEHwTHRxRS6s9yLyqk=",
      "dev": true
    },
    "json-schema": {
@@ -6327,7 +6383,7 @@
    },
    "load-json-file": {
      "version": "1.1.0",
-      "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
      "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
      "requires": {
        "graceful-fs": "^4.1.2",
@@ -6339,7 +6395,7 @@
      "dependencies": {
        "pify": {
          "version": "2.3.0",
-          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
        }
      }
@@ -6379,12 +6435,15 @@
    "lodash.assign": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-4.2.0.tgz",
-      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc="
+      "integrity": "sha1-DZnzzNem0mHRm9rrkkUAXShYCOc=",
+      "dev": true,
+      "optional": true
    },
    "lodash.clonedeep": {
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
-      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8="
+      "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
+      "dev": true
    },
    "lodash.debounce": {
      "version": "4.0.8",
@@ -6395,7 +6454,9 @@
    "lodash.mergewith": {
      "version": "4.6.1",
      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
-      "integrity": "sha1-Y5BX5ybDr72z59QnQcqo1uQzWSc="
+      "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ==",
+      "dev": true,
+      "optional": true
    },
    "lodash.tail": {
      "version": "4.1.1",
@@ -6493,7 +6554,7 @@
    "make-fetch-happen": {
      "version": "4.0.1",
      "resolved": "https://registry.npmjs.org/make-fetch-happen/-/make-fetch-happen-4.0.1.tgz",
-      "integrity": "sha512-7R5ivfy9ilRJ1EMKIOziwrns9fGeAD4bAha8EB7BIiBBLHm2KeTUGCrICFt2rbHfzheTLynv50GnNTK1zDTrcQ==",
+      "integrity": "sha1-FBSXy4ePJDupMTbIPYq6EsIWwIM=",
      "dev": true,
      "requires": {
        "agentkeepalive": "^3.4.1",
@@ -6545,7 +6606,7 @@
        "mississippi": {
          "version": "3.0.0",
          "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
-          "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==",
+          "integrity": "sha1-6goykfl+C16HdrNj1fChLZTGcCI=",
          "dev": true,
          "requires": {
            "concat-stream": "^1.5.0",
@@ -6563,7 +6624,7 @@
        "pump": {
          "version": "3.0.0",
          "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
-          "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+          "integrity": "sha1-tKIRaBW94vTh6mAjVOjHVWUQemQ=",
          "dev": true,
          "requires": {
            "end-of-stream": "^1.1.0",
@@ -6573,7 +6634,7 @@
        "ssri": {
          "version": "6.0.1",
          "resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
-          "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==",
+          "integrity": "sha1-KjxBso3UW2K2Nnbst0ABJlrp7dg=",
          "dev": true,
          "requires": {
            "figgy-pudding": "^3.5.1"
@@ -6672,7 +6733,7 @@
    },
    "meow": {
      "version": "3.7.0",
-      "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz",
      "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=",
      "requires": {
        "camelcase-keys": "^2.0.0",
@@ -6689,7 +6750,7 @@
      "dependencies": {
        "minimist": {
          "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
        }
      }
@@ -6802,7 +6863,7 @@
    "minipass": {
      "version": "2.3.5",
      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
-      "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
+      "integrity": "sha1-ys6+SSAiSX9law8PUeJoKp7S2Eg=",
      "dev": true,
      "requires": {
        "safe-buffer": "^5.1.2",
@@ -6812,7 +6873,7 @@
        "yallist": {
          "version": "3.0.3",
          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
-          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
+          "integrity": "sha1-tLBJ4xS+VF486AIjbWzSLNkcPek=",
          "dev": true
        }
      }
@@ -6820,7 +6881,7 @@
    "minizlib": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.2.1.tgz",
-      "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
+      "integrity": "sha1-3SfqYTYkPHyIBoToZyuzpF/ZthQ=",
      "dev": true,
      "requires": {
        "minipass": "^2.2.1"
@@ -6949,7 +7010,9 @@
    "nan": {
      "version": "2.12.1",
      "resolved": "https://registry.npmjs.org/nan/-/nan-2.12.1.tgz",
-      "integrity": "sha512-JY7V6lRkStKcKTvHO5NVSQRv+RV+FIL5pvDoLiAtSL9pKlC5x9PKQcZDsq7m4FO4d57mkhC6Z+QhAh3Jdk5JFw=="
+      "integrity": "sha512-JY7V6lRkStKcKTvHO5NVSQRv+RV+FIL5pvDoLiAtSL9pKlC5x9PKQcZDsq7m4FO4d57mkhC6Z+QhAh3Jdk5JFw==",
+      "dev": true,
+      "optional": true
    },
    "nanomatch": {
      "version": "1.2.13",
@@ -7054,7 +7117,7 @@
    "node-fetch-npm": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/node-fetch-npm/-/node-fetch-npm-2.0.2.tgz",
-      "integrity": "sha512-nJIxm1QmAj4v3nfCvEeCrYSoVwXyxLnaPBK5W1W5DGEJwjlKuC2VEUycGw5oxk+4zZahRrB84PUJJgEmhFTDFw==",
+      "integrity": "sha1-cljJBGGC3KNFtCCO2pGNrzNpf/c=",
      "dev": true,
      "requires": {
        "encoding": "^0.1.11",
@@ -7071,7 +7134,7 @@
    "node-gyp": {
      "version": "3.8.0",
      "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
-      "integrity": "sha1-VAMEJhwzDoDQ1e3OJTpoyzlkIYw=",
+      "integrity": "sha512-3g8lYefrRRzvGeSowdJKAKyks8oUpLEd/DyPV4eMhVlhJ0aNaZqIrNUIPuEWWTAoPqyFkfGrM67MC69baqn6vA==",
      "requires": {
        "fstream": "^1.0.0",
        "glob": "^7.0.3",
@@ -7089,7 +7152,7 @@
      "dependencies": {
        "semver": {
          "version": "5.3.0",
-          "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8="
        }
      }
@@ -7143,9 +7206,9 @@
      }
    },
    "node-sass": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.11.0.tgz",
-      "integrity": "sha512-bHUdHTphgQJZaF1LASx0kAviPH7sGlcyNhWade4eVIpFp6tsn7SV8xNMTbsQFpEV9VXpnwTTnNYlfsZXgGgmkA==",
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/node-sass/-/node-sass-4.12.0.tgz",
+      "integrity": "sha512-A1Iv4oN+Iel6EPv77/HddXErL2a+gZ4uBeZUy+a8O35CFYTXhgA8MgLCWBtwpGZdCvTvQ9d+bQxX/QC36GDPpQ==",
      "requires": {
        "async-foreach": "^0.1.3",
        "chalk": "^1.1.1",
@@ -7154,12 +7217,10 @@
        "get-stdin": "^4.0.1",
        "glob": "^7.0.3",
        "in-publish": "^2.0.0",
-        "lodash.assign": "^4.2.0",
-        "lodash.clonedeep": "^4.3.2",
-        "lodash.mergewith": "^4.6.0",
+        "lodash": "^4.17.11",
        "meow": "^3.7.0",
        "mkdirp": "^0.5.1",
-        "nan": "^2.10.0",
+        "nan": "^2.13.2",
        "node-gyp": "^3.8.0",
        "npmlog": "^4.0.0",
        "request": "^2.88.0",
@@ -7175,7 +7236,7 @@
        },
        "chalk": {
          "version": "1.1.3",
-          "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
          "requires": {
            "ansi-styles": "^2.2.1",
@@ -7185,9 +7246,14 @@
            "supports-color": "^2.0.0"
          }
        },
+        "nan": {
+          "version": "2.13.2",
+          "resolved": "https://registry.npmjs.org/nan/-/nan-2.13.2.tgz",
+          "integrity": "sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw=="
+        },
        "supports-color": {
          "version": "2.0.0",
-          "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
        }
      }
@@ -7235,7 +7301,7 @@
    "npm-package-arg": {
      "version": "6.1.0",
      "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.0.tgz",
-      "integrity": "sha512-zYbhP2k9DbJhA0Z3HKUePUgdB1x7MfIfKssC+WLPFMKTBZKpZh5m13PgexJjCq6KW7j17r0jHWcCpxEqnnncSA==",
+      "integrity": "sha1-Fa4eJ1ilAn77TCUFVLhac323/ME=",
      "dev": true,
      "requires": {
        "hosted-git-info": "^2.6.0",
@@ -7257,7 +7323,7 @@
    "npm-pick-manifest": {
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/npm-pick-manifest/-/npm-pick-manifest-2.2.3.tgz",
-      "integrity": "sha512-+IluBC5K201+gRU85vFlUwX3PFShZAbAgDNp2ewJdWMVSppdo/Zih0ul2Ecky/X7b51J7LrrUAP+XOmOCvYZqA==",
+      "integrity": "sha1-MhEdKpViY4uyyPK/J/fzCSyPrkA=",
      "dev": true,
      "requires": {
        "figgy-pudding": "^3.5.1",
@@ -7291,7 +7357,7 @@
    "npmlog": {
      "version": "4.1.2",
      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
-      "integrity": "sha1-CKfyqL9zRgR3mp76StXMcXq7lUs=",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
      "requires": {
        "are-we-there-yet": "~1.1.2",
        "console-control-strings": "~1.1.0",
@@ -7477,7 +7543,7 @@
    },
    "os-locale": {
      "version": "1.4.0",
-      "resolved": "http://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
      "integrity": "sha1-IPnxeuKe00XoveWDsT0gCYA8FNk=",
      "requires": {
        "lcid": "^1.0.0"
@@ -8018,7 +8084,7 @@
    "protoduck": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/protoduck/-/protoduck-5.0.1.tgz",
-      "integrity": "sha512-WxoCeDCoCBY55BMvj4cAEjdVUFGRWed9ZxPlqTKYyw1nDDTQ4pqmnIMAGfJlg7Dx35uB/M+PHJPTmGOvaCaPTg==",
+      "integrity": "sha1-A8NlnKGAB7aaUP2Cp+vMUWJhFR8=",
      "dev": true,
      "requires": {
        "genfun": "^5.0.0"
@@ -8199,7 +8265,7 @@
    "pump": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
-      "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+      "integrity": "sha1-Ejma3W5M91Jtlzy8i1zi4pCLOQk=",
      "dev": true,
      "requires": {
        "end-of-stream": "^1.1.0",
@@ -8209,7 +8275,7 @@
    "pumpify": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.5.1.tgz",
-      "integrity": "sha512-oClZI37HvuUJJxSKKrC17bZ9Cu0ZYhEAGPsPUy9KlMUmv9dKX2o77RUmq7f3XjIxbwyGwYzbzQ1L2Ks8sIradQ==",
+      "integrity": "sha1-NlE74karJ1cLGjdKXOJ4v9dDcM4=",
      "dev": true,
      "requires": {
        "duplexify": "^3.6.0",
@@ -8343,7 +8409,7 @@
        },
        "pify": {
          "version": "2.3.0",
-          "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
        }
      }
@@ -8767,7 +8833,7 @@
      "dependencies": {
        "source-map": {
          "version": "0.4.4",
-          "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
          "requires": {
            "amdefine": ">=0.0.4"
@@ -8830,7 +8896,7 @@
    "semver-intersect": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/semver-intersect/-/semver-intersect-1.4.0.tgz",
-      "integrity": "sha512-d8fvGg5ycKAq0+I6nfWeCx6ffaWJCsBYU0H2Rq56+/zFePYfT8mXkB3tWBSjR5BerkHNZ5eTPIk1/LBYas35xQ==",
+      "integrity": "sha1-vdnAa+3N0v7bjNNSw8Q+6MYTIfM=",
      "dev": true,
      "requires": {
        "semver": "^5.0.0"
@@ -9294,7 +9360,7 @@
    "source-map": {
      "version": "0.7.3",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+      "integrity": "sha1-UwL4FpAxc1ImVECS5kmB91F1A4M=",
      "dev": true
    },
    "source-map-loader": {
@@ -9538,7 +9604,7 @@
    "stdout-stream": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.1.tgz",
-      "integrity": "sha1-WsF0zdXNcmEEqgwLK9g4FdjVNd4=",
+      "integrity": "sha512-j4emi03KXqJWcIeF8eIXkjMFN1Cmb8gUlDYGeBALLPo5qdyTfA9bOtl8m33lRoC+vFMkP3gl0WsDr6+gzxbbTA==",
      "requires": {
        "readable-stream": "^2.0.1"
      }
@@ -9556,7 +9622,7 @@
    "stream-each": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.3.tgz",
-      "integrity": "sha512-vlMC2f8I2u/bZGqkdfLQW/13Zihpej/7PmSiMQsbYddxuTsJp8vRe2x2FvVExZg7FaOds43ROAuFJwPR4MTZLw==",
+      "integrity": "sha1-6+J6DDibBPvMIzZClS4Qcxr6m64=",
      "dev": true,
      "requires": {
        "end-of-stream": "^1.1.0",
@@ -9732,7 +9798,7 @@
    "symbol-observable": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==",
+      "integrity": "sha1-wiaIrtTqs83C3+rLtWFmBWCgCAQ=",
      "dev": true
    },
    "tapable": {
@@ -9742,9 +9808,9 @@
      "dev": true
    },
    "tar": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.2.tgz",
-      "integrity": "sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+      "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
      "requires": {
        "block-stream": "*",
        "fstream": "^1.0.12",
@@ -9978,7 +10044,7 @@
    "through2": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz",
-      "integrity": "sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==",
+      "integrity": "sha1-AcHjnrMdB8t9A6lqcIIyYLIxMs0=",
      "dev": true,
      "requires": {
        "readable-stream": "~2.3.6",
@@ -10105,7 +10171,7 @@
    "true-case-path": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/true-case-path/-/true-case-path-1.0.3.tgz",
-      "integrity": "sha1-+BO1qMhrQNpZYGcisUTjIleZ9H0=",
+      "integrity": "sha512-m6s2OdQe5wgpFMC+pAJ+q9djG82O2jcHPOI6RNg1yy9rCYR+WD6Nbpl32fDpfC56nirdRy+opFa/Vk7HYhqaew==",
      "requires": {
        "glob": "^7.1.2"
      }
@@ -10264,7 +10330,7 @@
    "unique-filename": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz",
-      "integrity": "sha512-Vmp0jIp2ln35UTXuryvjzkjGdRyf9b2lTXuSYUiPmzRcl3FDtYqAwOnTJkAngD9SWhnoJzDbTKwaOrZ+STtxNQ==",
+      "integrity": "sha1-HWl2k2mtoFgxA6HmrodoG1ZXMjA=",
      "dev": true,
      "requires": {
        "unique-slug": "^2.0.0"
@@ -10273,7 +10339,7 @@
    "unique-slug": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.1.tgz",
-      "integrity": "sha512-n9cU6+gITaVu7VGj1Z8feKMmfAjEAQGhwD9fE3zvpRRa0wEIx8ODYkVGfSc94M2OX00tUFV8wH3zYbm1I8mxFg==",
+      "integrity": "sha1-Xp7cbRzo+yZNsYpQfvm9hURFHKY=",
      "dev": true,
      "requires": {
        "imurmurhash": "^0.1.4"
@@ -10974,7 +11040,7 @@
    "wide-align": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
-      "integrity": "sha1-rgdOa9wMFKQx6ATmJFScYzsABFc=",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
      "requires": {
        "string-width": "^1.0.2 || 2"
      }
@@ -11058,7 +11124,7 @@
    "y18n": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
-      "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==",
+      "integrity": "sha1-le+U+F7MgdAHwmThkKEg8KPIVms=",
      "dev": true
    },
    "yallist": {

--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
    "ngx-google-places-autocomplete": "^2.0.3",
    "ngx-malihu-scrollbar": "^7.0.0",
    "ngx-slick": "^0.2.1",
-    "node-sass": "^4.11.0",
+    "node-sass": "^4.12.0",
    "rebuild": "^0.1.2",
    "rxjs": "~6.3.3",
    "rxjs-compat": "^6.3.3",

--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -6,7 +6,7 @@ const routes: Routes = [
 ];

 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
  exports: [RouterModule]
 })
 export class AppRoutingModule { }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -28,7 +28,7 @@ import { ForgotComponent } from './forgot/forgot.component';
    HttpClientModule,
    MalihuScrollbarModule.forRoot()
  ],
-  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
+  providers: [],
  bootstrap: [AppComponent]
 })
 export class AppModule { }
--- a/src/app/home/dashboard/dashboard.component.html
+++ b/src/app/home/dashboard/dashboard.component.html
@@ -21,7 +21,7 @@
                    </a>
                </li>
                <li class="nav-item">
-                    <a class="nav-link appointment" data-toggle="tab" href="#appointment">Appointments
+                    <a class="nav-link appointment" data-toggle="tab" href="#appointment" #appointmentTab>Appointments
                        <div class="notification" *ngIf="successBookDtls">{{ successBookDtls?.length || '0' }}</div>
                    </a>
                </li>
@@ -197,7 +197,7 @@
                                                    <div class="button_bay">
                                                        <div class="btn-group-justified" role="group" aria-label="Basic example">
                                                            <button type="button" class="btn book btn-sm" data-toggle="modal" data-target="#wizard" (click)="bookVechile(vehicle.customer_veh_id)">Book Now</button>
-                                                            <button type="button" class="btn btn-danger btn-sm" (click)="deleteCustomerCar(vehicle.customer_id,vehicle.customer_veh_id)">Delete</button>
+                                                            <button type="button" class="btn btn-danger btn-sm" (click)="cnfdeleteCustomerCar(vehicle.customer_id,vehicle.customer_veh_id)">Delete</button>
                                                        </div>
                                                    </div>
                                                </li>
@@ -231,28 +231,25 @@
                                                    <tr>
                                                        <th></th>
                                                        <th>Order Date</th>
-                                                        <th>Vehicle Model</th>
                                                        <th>Vehicle Make</th>
                                                        <th>Mechanic</th>
-                                                        <!-- <th>Cost</th> -->
                                                        <th>Action</th>
                                                    </tr>
                                                </thead>
                                            </table>
-                                            <div *ngFor="let bookData of successBookDtls; let i = index">
+                                            <div *ngFor="let bookData of successBookDtls; let i = index" id="accordion">
                                                <table>
                                                    <tbody>
                                                        <tr>
                                                            <td>{{i+1}}</td>
                                                            <td>{{bookData.scheduled_date+' '+bookData.scheduled_time}}</td>
                                                            <td>{{bookData.car_name}}</td>
-                                                            <td>{{bookData.car_name}}</td>
-                                                            <td>{{(bookData.is_multiple ==='0')? bookData.mechanic_data[0].first_name+' '+bookData.mechanic_data[0].last_name : bookData.mechanic_data.length+' Requests'}}</td>
-                                                            <!-- <td>{{bookData.cost}}</td> -->
+                                                            <td>{{(bookData.is_multiple === '0')? bookData.mechanic_data[0].first_name+' '+bookData.mechanic_data[0].last_name : bookData.mechanic_data.length+' Requests'}}</td>
                                                            <td>
                                                                <div class="floatLeft">
                                                                    <div class="btn-group btn-group-justified">
-                                                                        <button (click)="cancelBooking(bookData.booking_id)" class="btn btn-danger btn-sm">Cancel</button>
+                                                                        <button class="btn btn-default btn-sm">{{bookData.status === '1' ? 'Accepted' : 'Pending'}}</button>
+                                                                        <button (click)="cnfCancelBook(bookData.booking_id)" class="btn btn-danger btn-sm">Cancel</button>
                                                                    </div>
                                                                </div>
                                                                <div class="booking_drop" data-toggle="collapse" [attr.data-target]="'#quote_list_'+bookData.booking_id"></div>
@@ -260,7 +257,7 @@
                                                        </tr>
                                                    </tbody>
                                                </table> 
-                                                <table [attr.id]="'quote_list_'+bookData.booking_id" class="collapse">
+                                                <table [attr.id]="'quote_list_'+bookData.booking_id" class="collapse quote_list_table" data-parent="#accordion">
                                                    <thead>
                                                        <tr>
                                                            <th>Mechanic</th>
@@ -277,12 +274,13 @@
                                                            <td>{{mechdata.phone}}</td>
                                                            <td>{{mechdata.rating > 0?mechdata.rating+'/5':''}}</td>
                                                            <td>{{mechdata.location}}</td>
-                                                            <td>{{mechdata.custom_amount > 0 ?mechdata.custom_amount:bookData.cost}}</td>
+                                                            <td>{{mechdata.custom_amount > 0 ?mechdata.custom_amount:mechdata.mechanic_amount}}</td>
                                                            <td>
                                                                <div class="btn-group btn-group-justified">
-                                                                    <button class="btn btn-default btn-sm" *ngIf="mechdata.status =='0'">Waiting for Approval</button>
-                                                                    <button class="btn btn-success btn-sm" *ngIf="mechdata.status =='1'">Accept</button>
-                                                                    <button class="btn btn-info btn-sm"  data-toggle="modal" data-target="#failure" *ngIf="mechdata.status =='1'">View Quote</button>
+                                                                    <button class="btn btn-default btn-sm" *ngIf="bookData.status == '1' && !mechdata.custom_service_quote">Accepted</button>
+                                                                    <button class="btn btn-default btn-sm" *ngIf="mechdata.status == '0'">Waiting for Approval</button>
+                                                                    <button class="btn btn-success btn-sm" [attr.bookAmount]="mechdata.custom_amount > 0 ?mechdata.custom_amount:mechdata.mechanic_amount" *ngIf="mechdata.status == '1' && bookData.status != '1'" (click)="mechanicQuoteAccept($event,bookData.booking_id,mechdata.mechanic_id)">Accept</button>
+                                                                    <button class="btn btn-info btn-sm" (click)="showCustQuote(bookData.booking_id,mechdata.mechanic_id,1)" data-toggle="modal" data-target="#quote" *ngIf="mechdata.status =='1' && mechdata.custom_service_quote">View Quote</button>
                                                                </div>
                                                            </td>
                                                        </tr>
@@ -313,7 +311,7 @@
                                            <p>No Data Found</p>
                                        </div>
                                        <ng-template #allBookDtls>
-                                            <table>
+                                            <!-- <table>
                                                <thead>
                                                    <tr>
                                                        <th>Orders</th>
@@ -326,20 +324,79 @@
                                                </thead>
                                                <tbody>
                                                    <tr *ngFor="let bookData of bookingDetails;let i = index">
-                                                        <!-- <td>{{bookData.booking_id}}</td> -->
                                                        <td>{{i+1}}</td>
                                                        <td>{{bookData.scheduled_date+' '+bookData.scheduled_time}}</td>
                                                        <td>{{bookData.car_name}}</td>
-                                                        <td>{{bookData.mechanic_data.first_name+' '+bookData.mechanic_data.last_name}}</td>
+                                                        <td>{{bookData.mechanic_data[0].first_name+' '+bookData.mechanic_data[0].last_name}}</td>
                                                        <td class="service-align-center">{{bookData.cost}}</td>
                                                        <td [ngSwitch]="bookData.status">
                                                            <p *ngSwitchCase="3" class="success_status">Completed</p>
                                                            <p *ngSwitchCase="4" class="canceled_status">Canceled</p>
-                                                            <p *ngSwitchCase="5" class="canceled_status">Canceled</p>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table> -->
+
+
+
+
+
+                                        <table>
+                                                <thead>
+                                                    <tr>
+                                                        <th></th>
+                                                        <th>Order Date</th>
+                                                        <th>Vehicle Make</th>
+                                                        <th>Mechanic</th>
+                                                        <th>Action</th>
+                                                    </tr>
+                                                </thead>
+                                            </table>
+                                            <div *ngFor="let bookData of bookingDetails; let i = index" id="accordion">
+                                                <table>
+                                                    <tbody>
+                                                        <tr>
+                                                            <td>{{i+1}}</td>
+                                                            <td>{{bookData.scheduled_date+' '+bookData.scheduled_time}}</td>
+                                                            <td>{{bookData.car_name}}</td>
+                                                            <td>{{(bookData.is_multiple ==='0')? bookData.mechanic_data[0].first_name+' '+bookData.mechanic_data[0].last_name : bookData.mechanic_data.length+' Requests'}}</td>
+                                                            <td [ngSwitch]="bookData.status">
+                                                                <div class="floatLeft">
+                                                                    <p *ngSwitchCase="3" class="success_status">Completed</p>
+                                                                    <p *ngSwitchCase="4" class="canceled_status">Canceled</p>
+                                                                </div>
+                                                                <div *ngIf="bookData.status === '3'" class="booking_drop" data-toggle="collapse" [attr.data-target]="'#quote_list_'+bookData.booking_id"></div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table> 
+                                                <table [attr.id]="'quote_list_'+bookData.booking_id" class="collapse quote_list_table" data-parent="#accordion">
+                                                    <thead>
+                                                        <tr>
+                                                            <th>Mechanic</th>
+                                                            <th>Contact</th>
+                                                            <th>Rating</th>
+                                                            <th>Location</th>
+                                                            <th>Amount</th>
+                                                            <th>Action</th>
+                                                        </tr>   
+                                                    </thead>
+                                                    <tbody>
+                                                        <tr *ngFor="let mechdata of bookData.mechanic_data;">
+                                                            <td>{{mechdata.first_name+' '+mechdata.last_name}}</td>
+                                                            <td>{{mechdata.phone}}</td>
+                                                            <td>{{mechdata.rating > 0?mechdata.rating+'/5':''}}</td>
+                                                            <td>{{mechdata.location}}</td>
+                                                            <td>{{mechdata.custom_amount > 0 ?mechdata.custom_amount:mechdata.mechanic_amount}}</td>
+                                                            <td>
+                                                                <div class="btn-group btn-group-justified">
+                                                                    <button class="btn btn-info btn-sm" (click)="showCustQuote(bookData.booking_id,mechdata.mechanic_id,2)" data-toggle="modal" data-target="#quote" *ngIf="mechdata.status =='1' && mechdata.custom_service_quote">View Quote</button>
+                                                                </div>
+                                                            </td>
+                                                        </tr>
+                                                    </tbody>
+                                                </table>
+                                            </div>
                                        </ng-template>
                                    </div>
                                </div>
@@ -537,7 +594,7 @@
                                                <div class="arrow_btn up_arrow" (click)="scrollToTop('issue_cntr')"></div>
                                                <ul class="nav services_tab" id="issue_cntr">
                                                    <li class="nav-item" *ngFor="let issue_data of issuesData; let i = index;">
-                                                        <a [ngClass]="(i == 0)?'nav-link text_truncate active':'nav-link text_truncate'" data-toggle="pill" [attr.href]="'#issue_'+issue_data.issue_id"><img src="../../../assets/images/default.png">{{issue_data.issue}}</a>
+                                                        <a [ngClass]="(i == 0)?'nav-link text_truncate active':'nav-link text_truncate'" data-toggle="pill" [attr.href]="'#issue_'+issue_data.issue_id" tooltip="{{issue_data.issue}}" placement="top" show-delay="500" z-index="99999"><img src="../../../assets/images/default.png">{{issue_data.issue}}</a>
                                                    </li>
                                                </ul>
                                                <div class="arrow_btn down_arrow" (click)="scrollToBottom('issue_cntr')"></div>
@@ -551,7 +608,7 @@
                                                                <button id="custom_check_button">
                                                                    <label>
                                                                        <input type="checkbox" name="services" [attr.id]="'issue_' + issue_data.issue_id + '_' + sub_issue_data.issue_cat_id" [attr.issue_id]="issue_data.issue_id" [attr.sub_issue_id]="sub_issue_data.issue_cat_id" (click)="setIssueSelected($event)">
-                                                                        <p class="text_truncate">{{sub_issue_data.issue_category}}</p>
+                                                                        <p class="text_truncate" tooltip="{{sub_issue_data.issue_category}}" placement="top" show-delay="500" z-index="99999">{{sub_issue_data.issue_category}}</p>
                                                                    </label>
                                                                </button>
                                                            </li>
@@ -693,7 +750,7 @@
 <div class="modal" id="quotes">
    <div class="modal-dialog modal-full">
        <div class="modal-content login_modal_wrapper" malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
-            <div #closeQuoteWizard class="modal_close" data-dismiss="modal" (click)="scheduleDateInit = false; scheduleMechanic = false">
+            <div #closeQuoteWizard class="modal_close" data-dismiss="modal" (click)="scheduleDateInit = false; scheduleMechanic = false; selMechanics = [];">
                &times;
            </div>
            <div class="modal-body">
@@ -742,8 +799,8 @@
                                                        </div>
                                                        <div class="mechanic_detail relative">
                                                                <div class="custom_checkbox_stack">
-                                                                        <input class="custom_checkbox" id="custom_checkbox-1" type="checkbox" value="value1">
-                                                                        <label for="custom_checkbox-1"></label>
+                                                                        <input class="custom_checkbox" [attr.id]="'custom_checkbox-1'+i" (click)="checkboxChange(i,mechanic.mechanic_id,$event,mechanic.estimate)" type="checkbox" value="value1">
+                                                                        <label [attr.for]="'custom_checkbox-1'+i"></label>
                                                                </div>
                                                            <h4>{{mechanic.display_name}}</h4>
                                                            <div *ngIf="mechanic.shop_id != 0; else mechanicDetails">
@@ -758,8 +815,8 @@
                                                                <p>{{mechanic.distance | number:'1.2-2'}} miles away from you</p>
                                                            </ng-template>
                                                            <button (click)="scheduleNow(mechanic.mechanic_id,mechanic.estimate)"
-                                                                    [ngClass]="{'book_now':scheduleDateInit == true && scheduleMechanic == mechanic.mechanic_id,
-                                                                                'book_now_disabled':scheduleDateInit == false || (scheduleDateInit == true && scheduleMechanic != mechanic.mechanic_id)}">
+                                                                    [ngClass]="{'book_now':scheduleDateInit == true && scheduleMechanic == mechanic.mechanic_id && selMechanics.length <= 0,
+                                                                                'book_now_disabled':scheduleDateInit == false || (scheduleDateInit == true && scheduleMechanic != mechanic.mechanic_id) || selMechanics.length > 0}">
                                                                {{loginDetails ? 'Book now' : 'Login and Continue' }}
                                                            </button>
                                                        </div>
@@ -834,7 +891,7 @@
                                <div class="clear"></div>
                                <p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
                                <div class="clear"></div>
-                                <button class="request_all_btn">Request All</button>
+                                <button class="request_all_btn" *ngIf="selMechanics.length > 0 && scheduleDateInit == true" (click)="scheduleMultipleRequest()">{{loginDetails? 'Request All' : 'Login and Continue'}}</button>
                            </div>
                            <div class="service_map">
                                <agm-map #gm [latitude]="lat" [longitude]="lng"  [fitBounds]="true">
@@ -866,18 +923,19 @@
 </div>
 <!-- QUOTES-MODAL-ENDS-->

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

 <!-- BOOKING-QUOTE-MODAL-STARTS -->
-
 <div class="modal" id="quote">
    <div class="modal-dialog modal-full">
+        <div class="loader_overlay" *ngIf="loader"></div>
        <div class="modal-content login_modal_wrapper">
                <div class="modal_close" data-dismiss="modal"> × </div>
           <div class="modal-body quote_modal">
               <div class="login_modal_content">
                   <div class="login_modal_inner">
                       <h3>View quotes</h3>
-                       <table>
+                       <table width=100%>
                           <thead>
                               <tr>
                                   <th width= 20%;>Issues</th>
@@ -886,32 +944,16 @@
                               </tr>
                           </thead>
                           <tbody>
-                               <tr>
-                                   <td>Oil Change</td>
-                                   <td>
-                                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
-                                   </td>
-                                   <td>$340</td>
-                               </tr>
-                               <tr>
-                                    <td>Oil Change</td>
-                                    <td>
-                                         Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
-                                    </td>
-                                    <td>$340</td>
-                                </tr>
-                                <tr>
-                                        <td>Oil Change</td>
-                                        <td>
-                                             Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
-                                        </td>
-                                        <td>$340</td>
+                               <tr *ngFor="let quote of mechCustQuote">
+                                   <td>{{quote.issue_category}}</td>
+                                   <td>{{quote.description}}</td>
+                                   <td>{{quote.amount}}</td>
                               </tr>
                           </tbody>
                       </table>
                       <div class="row">
                           <div class="col-md-12 textCenter" style="padding-top:40px;">
-                                <button class="log_btn">Close</button>
+                                <button class="log_btn" data-dismiss="modal">Close</button>
                           </div>
                       </div>
                   </div>
@@ -920,14 +962,10 @@
        </div>
    </div>
 </div>
-
-
 <!-- BOOKING-QUOTE-MODAL-ENDS -->

-
-
 <!-- BOOKING-SUCCESS-MODAL-STARTS -->
-
+<button #successModel class="hide" data-toggle="modal" data-target="#success"></button>
 <div class="modal" id="success">
    <div class="modal-dialog modal-full">
        <div class="modal-content login_modal_wrapper">
@@ -942,7 +980,7 @@

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

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

 <div class="modal" id="failure">
    <div class="modal-dialog modal-full">
@@ -980,6 +1017,29 @@
        </div>
    </div>
 </div>
-
-
 <!-- BOOKING-FAILURE-MODAL-ENDS -->
+
+<!-- BOOKING-CONFIRMATION-MODAL-STARTS -->
+<button #confirmModal class="hide" data-toggle="modal" data-target="#confirm">Add Vehicle</button>
+<div class="modal" id="confirm" >
+    <div class="modal-dialog modal-full">
+        <div class="modal-content background_transparent">
+           <div class="modal-body quote_modal">
+               <div class="confirm_modal_content">
+                   <div class="login_modal_inner">
+                        <div class="login_success">
+                            <h4>Do You Want to Confirm ?</h4>
+                        </div>
+                        <div class="row">
+                            <div class="col-md-12 textCenter">
+                                <button class="btn btn-success" data-dismiss="modal" (click)="confirmCallBack(confirmCallBak,confirmParam)">Yes</button>
+                                <button class="btn btn-danger" data-dismiss="modal">No</button>
+                            </div>
+                        </div>
+                   </div>
+               </div>
+           </div>
+        </div>
+    </div>
+</div>
+<!-- BOOKING-CONFIRMATION-MODAL-ENDS -->
--- a/src/app/home/dashboard/dashboard.component.scss
+++ b/src/app/home/dashboard/dashboard.component.scss
@@ -95,7 +95,7 @@
            .dashboard_tab_content {
                padding-bottom: 80px;

-                #quote_list{
+                .quote_list_table{
                    background: darkgray;
                    thead {
                        
@@ -107,12 +107,51 @@
                                font-weight: 400;
                                padding: 5px;
                                padding-left:20px;
+                                &:nth-child(1){
+                                    width:20%;
+                                }
+                                &:nth-child(2){
+                                    width:20%;
+                                }
+                                &:nth-child(3){
+                                    width:10%;
+                                }
+                                &:nth-child(4){
+                                    width:20%;
+                                }
+                                &:nth-child(5){
+                                    width:10%;
+                                }
+                                &:nth-child(6){
+                                    width:20%;
+                                }
                            }
                        }
                    }
                    
                    tbody {
-                        
+                        tr{
+                            td{
+                                &:nth-child(1){
+                                    width:20%;
+                                }
+                                &:nth-child(2){
+                                    width:20%;
+                                }
+                                &:nth-child(3){
+                                    width:10%;
+                                }
+                                &:nth-child(4){
+                                    width:20%;
+                                }
+                                &:nth-child(5){
+                                    width:10%;
+                                }
+                                &:nth-child(6){
+                                    width:20%;
+                                }
+                            }
+                        }
                    }
                }
                table {
@@ -688,7 +727,7 @@
                            text-transform: uppercase;
                            color: #1e1e1e;
                            font-weight: 600;
-                            padding-bottom: 10px;
+                            padding-bottom: 30px;
                        }
                        .facebook_btn {
                            background-color: #3b5998;
@@ -718,10 +757,15 @@
                            padding: 0px;
                        }
                        .search {
-                            background: url("/assets/images/asset_search.png");
-                            background-position: right 10px top 5px;
+                            text-align: center;
                            background-repeat: no-repeat;
-                            padding-right: 50px;
+                            border:none;
+                            border-bottom: 1px solid #f4f4f4;
+                            font-size: 28px;
+                            padding-bottom: 20px;
+                            &::placeholder{
+                                color: #e7e7e7;
+                            }
                        }
                        .service_tab_inner{
                            width: 100%;

--- a/src/app/home/dashboard/dashboard.component.ts
+++ b/src/app/home/dashboard/dashboard.component.ts
@@ -6,6 +6,7 @@ import { WebService } from './../../provider/web.service';
 import { MapsAPILoader } from '@agm/core';
 import { SubjectService } from './../../provider/subject.service';
 import { google } from '@google/maps';
+import { apiConfig } from '../../../environments/server.config';
 import { ImageStorage } from '../../../environments/server.config';
 import { formatDate } from '@angular/common';

@@ -20,28 +21,33 @@ declare const google: any;
 export class DashboardComponent implements OnInit {
  tab: any;
  loader: boolean;
+  carModel: any;
  imageUrl: any;
  user_name: string;
  vehDetails: any;
  testMilage: any = '';
  errMessage: any;
+  modelDates: number[] = new Array();
+  monthArray: any[] = new Array(12);
+  mechanics: string = ''; 
  editProfile;
  loginDetails: any;
  selectedFile: File;
+  selMechanics: any[] = new Array();
  profile_image: any;
+  mechCustQuote: number[] = new Array();
+  confirmParam: string = '';
+  confirmCallBak: string = '';
+  cfautocomplete: any;
  searchLocError: boolean;
  bookingDetails: any;
  successBookDtls: any;
  profileEditResp: any;
  autocompleteVin: any;
+  carSearchJsonData: any;
  autocompleteDetails: any;
-  editProfileSubmitClick: boolean;
  optionalDescription: string;
-  cfautocomplete: any;
-  carModel: any;
-  modelDates: number[] = new Array();
-  monthArray: any[] = new Array(12);
-  carSearchJsonData: any;
+  editProfileSubmitClick: boolean;

  vehicleVinAddForm;
  vehicleVinFormSubmitClick;
@@ -70,8 +76,8 @@ export class DashboardComponent implements OnInit {
  currDate: any;
  nextDate: any;
  dateStep: number = 0;
-  activeTab: any;
  dateSection: any[] = new Array();
+  serverUrl: string;
  imageServer: string;
  mechanicData: any;
  autoSchedule: boolean;
@@ -90,13 +96,17 @@ export class DashboardComponent implements OnInit {
  //minRoute:any;

  @ViewChild("closeWizard") public closeWizardRef: ElementRef;
+  @ViewChild("confirmModal") public confirmModalRef: ElementRef;
  @ViewChild("googleLocVin") public googleLocVinRef: ElementRef;
  @ViewChild("goTostep1") public goTostep1Ref: ElementRef;
+  @ViewChild("failureModel") public failureModelRef: ElementRef;
+  @ViewChild("successModel") public successModelRef: ElementRef;
  @ViewChild("step2nextBtn") public step2nextRef: ElementRef;
  @ViewChild("step3nextBtn") public step3nextRef: ElementRef;
  @ViewChild("closeQuoteWizard") closeQuoteWizardRef: ElementRef;
  @ViewChild("googleLocDetails") public googleLocDetailsRef: ElementRef;
  @ViewChild("newGoogleLocSearch") public newGoogleLocRef: ElementRef;
+  @ViewChild("appointmentTab") public appointmentTabRef: ElementRef;
  @ViewChild("serviceHistoryTab") public serviceHistoryTabRef: ElementRef;
  @ViewChild("closeVehicleAddForm") public closeVehicleAddFormRef: ElementRef;

@@ -114,9 +124,9 @@ export class DashboardComponent implements OnInit {
    this.nextDate                       = new Date();
    this.issuesData      	            	= false;
    this.loader                         = false;
-    this.activeTab                      = 'profile';
    this.errMessage                     = false;
    this.vehDetails                     = false;
+    this.serverUrl                      = apiConfig;
    this.imageServer                    = ImageStorage;
    this.searchLocError                 = false;
    this.showLeftArrow    	          	= false;
@@ -133,11 +143,24 @@ export class DashboardComponent implements OnInit {
    this.tab = 'active';

    this.route.queryParams.subscribe(params => {
-      this.activeTab = params['tab'];
+      let payStatus = params['status'];
+      let activeTab = params['tab'];

-      if(this.activeTab == 'service'){
+      if(payStatus && payStatus !=''){
+        if(payStatus == 'success')
+          this.successModelRef.nativeElement.click();
+        if(payStatus == 'failure')
+          this.failureModelRef.nativeElement.click();
+      }
+
+      if(activeTab && activeTab !=''){
+        if(activeTab == 'service'){
          this.serviceHistoryTabRef.nativeElement.click();
        }
+        if(activeTab == 'appointment'){
+          this.appointmentTabRef.nativeElement.click();
+        }
+      }
    });

    this.vehicleVinAddForm = new FormGroup({
@@ -206,7 +229,7 @@ export class DashboardComponent implements OnInit {
    this.webService.post_data('getCustBookDetails', {'customer_id':this.loginDetails.customer_id}).subscribe(response => {
      if ( response.status == '1' && response.bookData != 'undefined' && response.bookData != undefined && response.bookData != 'null' && response.bookData != null ) {
        let bookings = response.bookData;
-
+        console.log(bookings);
        let successBooking: any[] = new Array();
        let bookingDetails: any[] = new Array();

@@ -460,19 +483,9 @@ export class DashboardComponent implements OnInit {
    });
  }

-  cancelBooking(bookingId){
-    this.loader = true;
-    this.webService.post_data('cancelBooking', {'customer_id':this.loginDetails.customer_id,'booking_id':bookingId}).subscribe(response => {
-      if ( response.status == '1' ) {
-        this.getCustBookDetails();
-        this.loader = false;
-      }
-    });
-  }
-
-  deleteCustomerCar(customer_id,customer_veh_id){
+  deleteCustomerCar(params){
    this.loader = true;
-    this.webService.post_data('deleteCustomerCar', {'customer_id':customer_id,'customer_veh_id':customer_veh_id}).subscribe(response => {
+    this.webService.post_data('deleteCustomerCar', params).subscribe(response => {
      if ( response.status == '1' ) {
        this.getCustVehDetails();
        this.loader = false;
@@ -654,7 +667,6 @@ export class DashboardComponent implements OnInit {
    this.webService.post_data('getNearByMechanics',searchData).subscribe(response => {
      if(response.status == '1'){
        this.mechanicData = response.mechanic_data;
-        
        this.dateSection.push(new Date(this.today.setDate(this.today.getDate())));
        this.dateSection.push(new Date(this.today.setDate(this.today.getDate() + 1)));

@@ -738,6 +750,24 @@ export class DashboardComponent implements OnInit {
    this.loader = true;

    this.wizardData['cost'] = cost;
+    this.wizardData['multiple'] ='0';
+    this.confirmBooking();
+  }
+
+  scheduleMultipleRequest(){
+    if(!this.loginDetails){
+      this.routeToIndex();
+    }
+    let coma = '';
+    const thisObj = this;
+    this.mechanics = '';
+    this.selMechanics.forEach(function (mechanic_data) {
+      thisObj.mechanics += coma+mechanic_data.mechanic_id+':'+mechanic_data.amount; 
+      coma = ',';
+    })      
+    this.wizardData['mechanic_id'] = thisObj.mechanics;
+    this.wizardData['cost'] = this.estimatedPrice;
+    this.wizardData['multiple'] ='1';
    this.confirmBooking();
  }

@@ -765,7 +795,7 @@ export class DashboardComponent implements OnInit {
        this.goTostep1Ref.nativeElement.click();
        this.selectedIssues = [];

-        this.serviceHistoryTabRef.nativeElement.click();
+        this.appointmentTabRef.nativeElement.click();
        
        this.getCustBookDetails();
      } else {
@@ -791,6 +821,116 @@ export class DashboardComponent implements OnInit {
    this.optionalDescription = '';
  }

+  showCustQuote(booking_id,mechanic_id,type){
+    if(!booking_id || !mechanic_id){
+      return false;
+    }
+    this.loader = true;
+    const thisObj= this;
+    
+    if(type == '2'){
+      thisObj.successBookDtls = this.bookingDetails;
+    }
+    thisObj.successBookDtls.forEach(function (data,index) {
+      if(data.booking_id == booking_id){
+       // let bookdata = data;
+        data.mechanic_data.forEach(function (mechdata,mechindex) {
+          if(mechdata.mechanic_id == mechanic_id){
+            let mechdatadetails = mechdata;
+            thisObj.mechCustQuote = mechdatadetails.custom_service_quote;
+          }
+        })
+      }
+    });
+    this.loader = false;
+  }
+
+  cancelBooking(booking: any){
+    let bookingId: number;
+    if(!booking.bookingId){
+      return false;
+    }
+    bookingId = booking.bookingId;
+
+    this.loader = true;
+    this.webService.post_data('cancelBooking', {'customer_id':this.loginDetails.customer_id,'booking_id':bookingId}).subscribe(response => {
+      if ( response.status == '1' ) {
+        this.getCustBookDetails();
+        this.loader = false;
+      }
+    });
+  }
+
+  mechanicQuoteAccept(event,booking_id,mechanic_id){
+    if(!booking_id || !mechanic_id){
+      return false;
+    }
+
+    let amount = event.target.attributes.bookAmount.value;
+    this.showConfirmPopUp('acceptQuote',{bookingId:booking_id,mechanicId:mechanic_id,amount:amount});
+  }
+
+  cnfCancelBook(booking_id){
+    if(!booking_id){
+      return false;
+    }
+    this.showConfirmPopUp('cancelBooking',{bookingId:booking_id});
+  }
+
+  cnfdeleteCustomerCar(customer_id,vehicle_id){
+    if(!customer_id || !vehicle_id){
+      return false;
+    }
+    this.showConfirmPopUp('deleteCustomerCar',{'customer_id':customer_id,'customer_veh_id':vehicle_id});
+  }
+
+  showConfirmPopUp(fn_name: string, param: any){
+    if(fn_name === ''){
+      return false;
+    }
+    if(param){
+      param = JSON.stringify(param);
+    }
+    this.confirmParam = param;
+    this.confirmCallBak = fn_name;
+    this.confirmModalRef.nativeElement.click();
+  }
+
+  confirmCallBack(fn_name: string,param: string){
+    if(fn_name === '' || !this[fn_name]){
+      return false;
+    }
+    if(param !== ''){
+      param = JSON.parse(param);
+      this[fn_name](param);
+    } else {
+      this[fn_name]();
+    }
+  }
+
+  acceptQuote(param: any){
+    this.webService.post_data('acceptMechanicQuote',param).subscribe(response => {
+      if(response.status == 'success'){
+        document.location.href = this.serverUrl+'payNow/'+response.data;
+
+
+
+        // this.getCustBookDetails();
+      }
+    })
+  }
+
+  checkboxChange(index,mechanic_id,event,estimate){
+    if (event.target.checked) {
+      this.selMechanics.push({id:index,mechanic_id:mechanic_id,amount:estimate});
+    } else {
+      let id = this.selMechanics.findIndex(x => x.id == index);
+      if (id != -1) {
+        this.selMechanics.splice(id, 1);
+      }
+    }
+  }
+
  scrollToTop(id){
    $('#'+id).stop().animate({scrollTop: 0}, 800);
  }

--- a/src/app/home/home.routing.ts
+++ b/src/app/home/home.routing.ts
@@ -6,15 +6,12 @@ import { TncComponent } from './tnc/tnc.component';
 import { PrivacyComponent } from './privacy/privacy.component';
 import { TnsComponent } from './tns/tns.component';

-
 const ModuleRoutes: Routes = [
-    
-    { path: 'index', component: IndexComponent},
-    { path: 'dashboard', component: DashboardComponent},
-    { path: 'termscondition', component: TncComponent},
-    { path: 'termsservice', component: TnsComponent},
-    { path: 'privacy', component: PrivacyComponent}
-    
+    { path: 'index', component: IndexComponent },
+    { path: 'privacy', component: PrivacyComponent },
+    { path: 'dashboard', component: DashboardComponent },
+    { path: 'termsservice', component: TnsComponent },
+    { path: 'termscondition', component: TncComponent }
 ];

 export const moduleRouting: ModuleWithProviders = RouterModule.forChild(ModuleRoutes)

--- a/src/app/home/index/index.component.html
+++ b/src/app/home/index/index.component.html
@@ -331,7 +331,7 @@
                                                <div class="arrow_btn up_arrow" (click)="scrollToTop('issue_cntr')"></div>
                                                <ul class="nav services_tab" id="issue_cntr">
                                                    <li class="nav-item" *ngFor="let issue_data of issuesData; let i = index;">
-                                                        <a [ngClass]="(i == 0)?'nav-link text_truncate active':'nav-link text_truncate'" data-toggle="pill" [attr.href]="'#issue_'+issue_data.issue_id"><img src="../../../assets/images/default.png">{{issue_data.issue}}</a>
+                                                        <a [ngClass]="(i == 0)?'nav-link text_truncate active':'nav-link text_truncate'" data-toggle="pill" [attr.href]="'#issue_'+issue_data.issue_id" tooltip="{{issue_data.issue}}" placement="top" show-delay="500" z-index="99999"><img src="../../../assets/images/default.png">{{issue_data.issue}}</a>
                                                    </li>
                                                </ul>
                                                <div class="arrow_btn down_arrow" (click)="scrollToBottom('issue_cntr')"></div>
@@ -345,7 +345,7 @@
                                                                <button id="custom_check_button">
                                                                    <label>
                                                                        <input type="checkbox" name="services" [attr.id]="'issue_' + issue_data.issue_id + '_' + sub_issue_data.issue_cat_id" [attr.issue_id]="issue_data.issue_id" [attr.sub_issue_id]="sub_issue_data.issue_cat_id" (click)="setIssueSelected($event)">
-                                                                        <p class="text_truncate">{{sub_issue_data.issue_category}}</p>
+                                                                        <p class="text_truncate" tooltip="{{sub_issue_data.issue_category}}" placement="top" show-delay="500" z-index="99999">{{sub_issue_data.issue_category}}</p>
                                                                    </label>
                                                                </button>
                                                            </li>
@@ -489,7 +489,7 @@
 <div class="modal" id="quotes">
    <div class="modal-dialog modal-full">
        <div class="modal-content login_modal_wrapper" malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
-            <div #closeQuoteWizard class="modal_close" data-dismiss="modal" (click)="scheduleDateInit = false; scheduleMechanic = false">
+            <div #closeQuoteWizard class="modal_close" data-dismiss="modal" (click)="scheduleDateInit = false; scheduleMechanic = false; selMechanics = [];">
                &times;
            </div>
            <div class="modal-body">
@@ -537,8 +537,8 @@
                                                            </div>
                                                            <div class="mechanic_detail relative">
                                                                <div class="custom_checkbox_stack">
-                                                                        <input class="custom_checkbox" id="custom_checkbox-1" type="checkbox" value="value1">
-                                                                        <label for="custom_checkbox-1"></label>
+                                                                        <input class="custom_checkbox"  [attr.id]="'custom_checkbox-1'+i" (click)="checkboxChange(i,mechanic.mechanic_id,$event,mechanic.estimate)" type="checkbox" value="value1">
+                                                                        <label [attr.for]="'custom_checkbox-1'+i"></label>
                                                                </div>
                                                                   
                                                                <h4>{{mechanic.display_name}}</h4>
@@ -553,8 +553,8 @@
                                                                    <h6>{{mechanic.phone}}</h6>
                                                                    <p>{{mechanic.distance | number:'1.2-2' }} miles away from you</p>
                                                                </ng-template>
-                                                                <button (click)="scheduleNow(mechanic.mechanic_id,mechanic.estimate)" [ngClass]="{'book_now':scheduleDateInit == true && scheduleMechanic == mechanic.mechanic_id,
-                                                                'book_now_disabled':scheduleDateInit == false || (scheduleDateInit == true && scheduleMechanic != mechanic.mechanic_id)}">
+                                                                <button (click)="scheduleNow(mechanic.mechanic_id,mechanic.estimate)" [ngClass]="{'book_now':scheduleDateInit == true && scheduleMechanic == mechanic.mechanic_id && selMechanics.length <= 0,
+                                                                'book_now_disabled':scheduleDateInit == false || (scheduleDateInit == true && scheduleMechanic != mechanic.mechanic_id) || selMechanics.length > 0}">
                                                                {{loginDetails ? 'Book now' : 'Login and Continue' }}
                                                            </button>
                                                        </div>
@@ -629,7 +629,7 @@
                                    <div class="clear"></div>
                                    <p>Estimated Price : <strong>{{estimatedPrice}}</strong></p>
                                    <div class="clear"></div>
-                                    <button class="request_all_btn">Request All</button>
+                                    <button class="request_all_btn" *ngIf="selMechanics.length > 0 && scheduleDateInit == true" (click)="scheduleMultipleRequest()">{{loginDetails? 'Request All' : 'Login and Continue'}}</button>
                                </div>
                                <div class="service_map">
                                    <agm-map #gm [latitude]="lat" [longitude]="lng" [fitBounds]="true">

--- a/src/app/home/index/index.component.ts
+++ b/src/app/home/index/index.component.ts
@@ -68,7 +68,9 @@ export class IndexComponent implements OnInit {
  currDate: any;
  nextDate: any;
  dateStep: number = 0;
+  mechanics: string = ''; 
  dateSection: any[] = new Array();
+  selMechanics: any[] = new Array();
  imageServer: string;
  mechanicData: any;
  autoSchedule: boolean;
@@ -456,6 +458,25 @@ export class IndexComponent implements OnInit {
    this.confirmBooking();
  }

+  scheduleMultipleRequest(){
+    if(!this.loginDetails){
+      this.autoSchedule = true;
+      this.loginModalRef.nativeElement.click();
+      return false;
+    }
+    let coma = '';
+    const thisObj = this;
+    this.mechanics = '';
+    this.selMechanics.forEach(function (mechanic_data) {
+      thisObj.mechanics += coma+mechanic_data.mechanic_id+':'+mechanic_data.amount; 
+      coma = ',';
+    })       
+    this.wizardData['mechanic_id'] = thisObj.mechanics;
+    this.wizardData['cost'] = this.estimatedPrice;
+    this.wizardData['multiple'] ='1';
+    this.confirmBooking();
+  }
+
  confirmBooking(){
    this.wizardData['customer_id'] = this.loginDetails.customer_id;
    this.wizardData['selected_issues'] = this.selectedIssues;
@@ -476,7 +497,7 @@ export class IndexComponent implements OnInit {
      if(response.status == '1'){
        this.closeWizardRef.nativeElement.click();
        this.closeQuoteWizardRef.nativeElement.click();
-        this.router.navigate(['../dashboard'],{queryParams: {tab: 'service'}});
+        this.router.navigate(['../dashboard'],{queryParams: {tab: 'appointment'}});
      } else {
        this.loader = false;
        return false;
@@ -526,6 +547,17 @@ export class IndexComponent implements OnInit {
    reader.readAsDataURL(optionalImg);
  }

+  checkboxChange(index,mechanic_id,event,estimate){
+    if (event.target.checked) {
+      this.selMechanics.push({id:index,mechanic_id:mechanic_id,amount:estimate});
+    } else {
+      let id = this.selMechanics.findIndex(x => x.id == index);
+      if (id != -1) {
+        this.selMechanics.splice(id, 1);
+      }
+    }
+  }
+
  scrollToBottom(id){
    $('#'+id).stop().animate({scrollTop: $('#'+id)[0].scrollHeight}, 1500);
  }

--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -25,7 +25,7 @@
                    </a>
                </li>
                <li class="nav-item">
-                        <a class="nav-link" (click)="goToPage('productlist')">
+                    <a class="nav-link" (click)="goToPage('purchaseHome')">
                        PURCHASE
                    </a>
                </li>

--- a/src/app/navbar/navbar.component.ts
+++ b/src/app/navbar/navbar.component.ts
@@ -47,9 +47,9 @@ export class NavbarComponent implements OnInit {
  forgotForm;
  signupForm;
  autospsignupForm;
+  @ViewChild('spModal') spModal: ElementRef;
  @ViewChild('loginModal') loginModal: ElementRef;
  @ViewChild('signupModal') signupModal: ElementRef;
-  @ViewChild('spModal') spModal: ElementRef;

  public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };


--- a/src/app/provider/dataservice.service.ts
+++ b/src/app/provider/dataservice.service.ts
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+
+export class DataserviceService {
+  serviceData: any = new Array(); 
+}
--- a/src/app/provider/web.service.ts
+++ b/src/app/provider/web.service.ts
@@ -51,6 +51,9 @@ export class WebService {
    localStorage.removeItem(data);
    localStorage.clear();
  }
+  removeLocalItem(data) {
+    localStorage.removeItem(data);
+  }
  get_stored_json(json_file: string) {
    return this.http.get("assets/json_data/" + json_file);
  }

--- a/src/app/purchase/addaddress/addaddress.component.html
+++ b/src/app/purchase/addaddress/addaddress.component.html
 <div class="purchase_wrapper">
  <div class="container-fluid">
-        <app-searchbar>
-        </app-searchbar>
+    <div class="loader_overlay" *ngIf="loader"></div>
    <div class="add_address_wrapper">
+      <form [formGroup]="addaddressForm" (ngSubmit)="addressFormSubmit(addaddressForm.value)">
        <h4>Add New Address</h4>
        <div class="row">
-            <div class="col-md-12">
+          <div class="col-md-6">
            <p>Name*</p>
-              <input class="" type="text">
+            <input class="" type="text" formControlName="name" 
+            [ngClass]="{'input_error': !addaddressForm.controls['name'].valid && (addaddressForm.controls['name'].dirty || addaddressForm.controls['name'].touched || addressSubmitClick),
+                        'input_success': addaddressForm.controls['name'].valid}" (click)="addressSubmitClick = false">
+              <div class="s_error" *ngIf="(!addaddressForm.controls['name'].valid && addaddressForm.controls['name'].touched) || (!addaddressForm.controls['name'].valid && addressSubmitClick)">
+                  <div class="s_validation" *ngIf="addaddressForm.controls['name'].hasError('required')">{{errorMsg.errorList.required}} </div>
              </div>
          </div>
-          <div class="row">
-              <div class="col-md-12">
+          <div class="col-md-6">
            <p>Phone Number*</p>
-                <input class="" type="text">
+            <input class="" type="text" formControlName="phone_no" 
+            [ngClass]="{'input_error': !addaddressForm.controls['phone_no'].valid && (addaddressForm.controls['phone_no'].dirty || addaddressForm.controls['phone_no'].touched || addressSubmitClick),
+                        'input_success': addaddressForm.controls['phone_no'].valid}" (click)="addressSubmitClick = false">
+            <div class="s_error" *ngIf="(!addaddressForm.controls['phone_no'].valid && addaddressForm.controls['phone_no'].touched) || (!addaddressForm.controls['phone_no'].valid && addressSubmitClick)">
+                <div class="s_validation" *ngIf="addaddressForm.controls['phone_no'].hasError('required')">{{errorMsg.errorList.required}} </div>
+                <div class="s_validation" *ngIf="addaddressForm.controls['phone_no'].hasError('pattern')">{{errorMsg.errorList.valid}} Mobile Number</div>
+              </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <p>House number or Building number*</p>
-                  <input class="" type="text">
+            <input class="" type="text" formControlName="house_no" 
+            [ngClass]="{'input_error': !addaddressForm.controls['house_no'].valid && (addaddressForm.controls['house_no'].dirty || addaddressForm.controls['house_no'].touched || addressSubmitClick),
+                        'input_success': addaddressForm.controls['house_no'].valid}" (click)="addressSubmitClick = false">
+              <div class="s_error" *ngIf="(!addaddressForm.controls['house_no'].valid && addaddressForm.controls['house_no'].touched) || (!addaddressForm.controls['house_no'].valid && addressSubmitClick)">
+                  <div class="s_validation" *ngIf="addaddressForm.controls['house_no'].hasError('required')">{{errorMsg.errorList.required}} </div>
+              </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <p>Area, Road or Colony*</p>
-                    <input class="" type="text">
+            <input class="" type="text" formControlName="area" 
+            [ngClass]="{'input_error': !addaddressForm.controls['area'].valid && (addaddressForm.controls['area'].dirty || addaddressForm.controls['area'].touched || addressSubmitClick),
+                        'input_success': addaddressForm.controls['area'].valid}" (click)="addressSubmitClick = false">
+              <div class="s_error" *ngIf="(!addaddressForm.controls['area'].valid && addaddressForm.controls['area'].touched) || (!addaddressForm.controls['area'].valid && addressSubmitClick)">
+                  <div class="s_validation" *ngIf="addaddressForm.controls['area'].hasError('required')">{{errorMsg.errorList.required}} </div>
+              </div>
          </div>
        </div>
        <div class="row">
-                    <div class="col-md-12">
+          <div class="col-md-6">
+            <p>City*</p>
+            <input class="" type="text" formControlName="city" 
+            [ngClass]="{'input_error': !addaddressForm.controls['city'].valid && (addaddressForm.controls['city'].dirty || addaddressForm.controls['city'].touched || addressSubmitClick),
+                        'input_success': addaddressForm.controls['city'].valid}" (click)="addressSubmitClick = false">
+            <div class="s_error" *ngIf="(!addaddressForm.controls['city'].valid && addaddressForm.controls['city'].touched) || (!addaddressForm.controls['city'].valid && addressSubmitClick)">
+                <div class="s_validation" *ngIf="addaddressForm.controls['city'].hasError('required')">{{errorMsg.errorList.required}} </div>
+            </div>
+          </div>
+          <div class="col-md-6">
            <p>State*</p>
-                      <input class="" type="text">
+            <input class="" type="text" formControlName="state" 
+            [ngClass]="{'input_error': !addaddressForm.controls['state'].valid && (addaddressForm.controls['state'].dirty || addaddressForm.controls['state'].touched || addressSubmitClick),
+                        'input_success': addaddressForm.controls['state'].valid}" (click)="addressSubmitClick = false">
+            <div class="s_error" *ngIf="(!addaddressForm.controls['state'].valid && addaddressForm.controls['state'].touched) || (!addaddressForm.controls['state'].valid && addressSubmitClick)">
+                <div class="s_validation" *ngIf="addaddressForm.controls['state'].hasError('required')">{{errorMsg.errorList.required}} </div>
+            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
-                        <p>City*</p>
-                        <input class="" type="text">
+            <p>Land mark <span>(Optional)</span></p>
+            <input class="" type="text" formControlName="landmark" (click)="addressSubmitClick = false">
          </div>
        </div>
        <div class="row">
-                        <div class="col-md-12">
-                          <p>Land mark <span>(Optional)</span></p>
-                          <input class="" type="text">
+          <div class="col-md-2"></div>
+          <div class="col-md-5">
+            <input class="custom_checkbox" id="custom_checkbox_1" name="address_type" type="radio" value="1" formControlName="address_type">
+            <label for="custom_checkbox_1">Home</label>
          </div>
+          <div class="col-md-5">
+            <input class="custom_checkbox" id="custom_checkbox_2" name="address_type" type="radio" value="2" formControlName="address_type">
+            <label for="custom_checkbox_2">Office</label>
+          </div>
+        </div>
+        <div *ngIf="addressResponse" class="s_alert" [ngClass]="(addressResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
+            <strong>{{addressResponse.message}}<br></strong>
        </div>
        <div class="row">
-                          <div class="col-md-12">
-                        <button class="add_btn" (click)="goToPage('address')">Add Address</button>
+          <div class="col-md-6">
+            <!-- <button type="submit" class="btn_cart"  (click)="goToPage('address')">Add Address</button> -->
+
+            <button type="submit" class="btn_cart"  (click)="addressSubmitClick = true">{{address_id > 0?'Update Address' : 'Add Address'}}</button>
+          </div>
+          <div class="col-md-6">
+            <button class="add_btn" (click)="goToPage('address')">Cancel</button>
          </div>
        </div>
+      </form>
    </div>
  </div>
 </div>
\ No newline at end of file
--- a/src/app/purchase/addaddress/addaddress.component.scss
+++ b/src/app/purchase/addaddress/addaddress.component.scss
@@ -34,6 +34,15 @@ box-shadow: 0px 1px 21px -10px rgba(0,0,0,0.2);
            padding-bottom: 20px;
        }

+        .btn_cart{
+            width:100%;
+            background: #fef160;
+            color: #000000;
+            text-align: center;
+            height: 45px;
+            border:none;
+            
+           } 
        .add_btn{
            width:100%;
            background: #2655bf;
@@ -43,4 +52,6 @@ box-shadow: 0px 1px 21px -10px rgba(0,0,0,0.2);
            border:none;
        }
    }
+
+
 }
\ No newline at end of file
--- a/src/app/purchase/addaddress/addaddress.component.ts
+++ b/src/app/purchase/addaddress/addaddress.component.ts
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit , HostListener } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
+import { FormGroup, FormControl, FormBuilder, Validators, ValidationErrors } from '@angular/forms';
+import { WebService } from '../../provider/web.service';
+import { ValidationService } from '../../provider/validation.service';
+import { SubjectService } from '../../provider/subject.service';

 @Component({
  selector: 'app-addaddress',
  templateUrl: './addaddress.component.html',
  styleUrls: ['./addaddress.component.scss']
 })
+
 export class AddaddressComponent implements OnInit {
+  loader              : boolean;
+  address_id          : any;
+  loginDetails        : any;
+  editAddressResp     : any;
+  addressResponse     : any;
+  addressSubmitClick  : boolean;
+  prdtData:any = new Array();
+  product_id:any;
+  
+  addaddressForm: FormGroup;
+  name = new FormControl('', [Validators.required]);
+  city = new FormControl('', [Validators.required]);
+  area = new FormControl('', [Validators.required]);
+  state = new FormControl('', [Validators.required]);
+  landmark = new FormControl('');
+  house_no = new FormControl('', [Validators.required]);
+  phone_no = new FormControl('', [Validators.required, Validators.pattern("^[0-9\ ( ) + , - ]+$")]);
+  address_type = new FormControl('1');

-  constructor(
-    private router        : Router, 
-    private route         : ActivatedRoute
-  ) { }
+  constructor(private router        : Router, 
+              private route         : ActivatedRoute,
+              public errorMsg       : ValidationService,
+              public webService     : WebService,
+              private formBuilder   : FormBuilder,
+              public subjectService : SubjectService) { 
+    this.loginDetails        = false;
+    this.addressSubmitClick  = false;
+  }

  ngOnInit() {
+    this.prdtData = JSON.parse(this.webService.getLocalStorageItem('productDetails'));
+    this.subjectService.getLoginData().subscribe(loginData => {
+      this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+    });
+    this.checkProductId(this.prdtData['product_id']);
+
+    this.route.params.subscribe(val => {
+      this.route.queryParams.subscribe(params => {
+        this.address_id = params['address_id'];
+      });
+    });
+    if(this.address_id != ''){
+      this.getUserAddressById(this.address_id);
+    }
+    this.buildAddressForm();
+  }
+
+  buildAddressForm(){
+    this.addaddressForm = this.formBuilder.group({
+      name: this.name,
+      city: this.city,
+      area: this.area,
+      state: this.state,
+      landmark: this.landmark,
+      house_no: this.house_no,
+      phone_no: this.phone_no,
+      address_type: this.address_type
+    });
+  }
+
+  checkProductId(product_id){
+    if(product_id > 0){
+      this.product_id = product_id;
+    }else{
+      this.goToPage('purchaseHome','');
+    }
+  }
+
+  addressFormSubmit(data){
+    if(this.addaddressForm.invalid){
+      return false;
+    }
+    if(this.address_id > 0){
+      this.updateAddressFormSubmit(data,this.address_id);
+    }else{
+      this.addaddressFormSubmit(data)
+    }
+  }
+  
+  addaddressFormSubmit(data){
+    this.loader = true;
+    const This = this;
+    data.customer_id = this.loginDetails.customer_id;
+    this.webService.post_data('saveUserAddress',data).subscribe(response => {
+      this.loader = false;
+      if(response.status == 'success'){
+        this.addressResponse = response;
+
+        setTimeout( function() {
+          This.addressResponse = false;
+          This.goToPage('address','');
+          This.addaddressForm.reset();
+          This.addressResponse = false;
+          This.addressSubmitClick = false;
+        }, 3000);
+      }else{
+        response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
+        this.addressResponse = response;
+        setTimeout( function() {
+          This.addressResponse = false;
+        }, 3000);
+      }
+    })
+  }
+  updateAddressFormSubmit(data,id){
+    this.loader = true;
+    const This = this;
+    data.customer_id = this.loginDetails.customer_id;
+    this.webService.post_data('updateUserAddress',{"data":data,"address_id":id}).subscribe(response => {
+      this.loader = false;
+      if(response.status == 'success'){
+        this.addressResponse = response;
+
+        setTimeout( function() {
+          This.addressResponse = false;
+          This.goToPage('address','');
+          This.addaddressForm.reset();
+          This.addressResponse = false;
+          This.addressSubmitClick = false;
+        }, 3000);
+      }else{
+        response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
+        this.addressResponse = response;
+        setTimeout( function() {
+          This.addressResponse = false;
+        }, 3000);
+      }
+    })
+  }
+
+  getUserAddressById(address_id){
+    this.loader = true;
+    this.webService.post_data('getUserAddressById',{"address_id":address_id,'customer_id':this.loginDetails.customer_id}).subscribe(response => {
+      this.loader = false;
+      if(response.status == 'success'){
+        this.editAddressResp = response.data;
+
+        this.addaddressForm.controls["city"].setValue(this.editAddressResp.city);
+        this.addaddressForm.controls["area"].setValue(this.editAddressResp.area);
+        this.addaddressForm.controls["state"].setValue(this.editAddressResp.state);
+        this.addaddressForm.controls["landmark"].setValue(this.editAddressResp.landmark);
+        this.addaddressForm.controls["house_no"].setValue(this.editAddressResp.house_no);
+        this.addaddressForm.controls["phone_no"].setValue(this.editAddressResp.phone_no);
+        this.addaddressForm.controls["name"].setValue(this.editAddressResp.name);
+        this.addaddressForm.controls["address_type"].setValue(this.editAddressResp.address_type);
+      }
+    })
  }

  goToPage(path,data=null){
-    this.router.navigateByUrl(path,{queryParams:data});
+    this.router.navigate([path],{queryParams:  data});
    document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
  }
 }
--- a/src/app/purchase/address/address.component.html
+++ b/src/app/purchase/address/address.component.html
 <div class="purchase_wrapper">
  <div class="container-fluid">
-      <app-searchbar>
-      </app-searchbar>
+      <div class="loader_overlay" *ngIf="loader"></div>
      <div class="address_wrapper">
        <h3>Delivery Address</h3>
        <div class="address_inner_wrapper">
          <ul>
-            <li>
-              <h4>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h4>
-              <p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala 682030</p>
-              <div class="edit">
+            <div *ngIf="userAddress && userAddress.length > 0;else noAddress">
+              <li *ngFor="let addrs of userAddress" 
+                  [ngClass]="address_id == addrs.id ? 'selected_add' : '' "
+                  (click)="select_address(addrs.id)">
+                <h4>{{addrs.name}} <span class="address">({{addrs.address_type === '1'?'Home':'Office'}})</span><span class="number">{{addrs.phone_no}}</span></h4>
+                <p>{{addrs.house_no+', '+addrs.area+', '+addrs.state+', '+addrs.city}}</p>
+                <div class="edit" (click)="editAddress(addrs.id)">
                  Edit
                </div>
              </li>
-            <li>
-              <h4>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h4>
-              <p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala 682030</p>
-              <div class="edit">
-                Edit
            </div>
-            </li>
-            <li>
-              <h4>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h4>
-              <p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala 682030</p>
-              <div class="edit">
-                Edit
-              </div>
-            </li>
            <div class="add_new" (click)="goToPage('addaddress')">
              Add new Address
            </div>
          </ul>
+          <ng-template #noAddress>
+            Address is Not Added!
+          </ng-template>
          <div class="row">
            <div class="col-md-6">
-                <h2>$ 3,200</h2>
-                <h5>Delivery expected by Thur 1 May 2019</h5> 
+                <h2>$ {{prdtData.total_amount}}</h2>
+                <!-- <h5>Delivery expected by Thur 1 May 2019</h5>  -->
                
            </div>
            <div class="col-md-6 textRight">
              <h4>
-                  <div class="delivery_btn floatRight" (click)="goToPage('summary')">Deliver here</div>
+                  <div [ngClass]="(address_id > 0)?'delivery_btn floatRight':'delivery_btn floatRight disable_btn'" (click)="deliverProduct()">Deliver here</div>
                  <div class="clear"></div>
              </h4>
                

--- a/src/app/purchase/address/address.component.scss
+++ b/src/app/purchase/address/address.component.scss
@@ -22,12 +22,12 @@
                
                cursor: pointer;
                &:hover{
-                    border:2px solid #2655bf;
+                    border:2px solid #a0b9f3;
                    // transition-delay: 1s;
                    // transition-timing-function: ease-in-out;
                }
                &:focus{
-                    border:2px solid #2655bf;
+                    border:2px solid #a0b9f3;
                    // transition-delay: 1s;
                    // transition-timing-function: ease-in-out;
                }
@@ -62,6 +62,9 @@
                    margin: 0px;
                }
             }
+             .selected_add{
+                border:2px solid #2655bf !important;
+             }

           


--- a/src/app/purchase/address/address.component.ts
+++ b/src/app/purchase/address/address.component.ts
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit} from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
+import { WebService } from '../../provider/web.service';
+import { SubjectService } from '../../provider/subject.service';
+import { DataserviceService } from '../../provider/dataservice.service';

 @Component({
  selector: 'app-address',
  templateUrl: './address.component.html',
  styleUrls: ['./address.component.scss']
 })
+
 export class AddressComponent implements OnInit {
+  loader : boolean;
+  prdtData : any = new Array();
+  product_id : any;
+  address_id : number;
+  userAddress : any;
+  loginDetails : any;

-  constructor(
+  constructor(private route         : ActivatedRoute,
              private router        : Router, 
-    private route         : ActivatedRoute
-  ) { }
+              public webService     : WebService,
+              public subjectService : SubjectService,
+              public dataService    : DataserviceService) { 
+    this.loader     = true;
+    this.address_id = 0;
+  }

  ngOnInit() {
+    this.checkUserLogin();
+    this.checkProductId();
+    this.getUserAddress();
+  }
+
+  checkUserLogin(){
+    this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+    if(!this.loginDetails){
+      this.goToPage('purchaseHome','');
+    }
+  }
+
+  checkProductId(){
+    this.prdtData = JSON.parse(this.webService.getLocalStorageItem('productDetails'));
+  
+    if(this.prdtData && this.prdtData['product_id'] > 0){
+      this.product_id = this.prdtData['product_id'];
+    }else{
+      this.goToPage('purchaseHome','');
+    }
+  }
+
+  getUserAddress(){
+    if(!this.loginDetails || !this.loginDetails.customer_id){
+      return false;
+    }
+    this.loader = true;
+    this.webService.post_data('getUserAddress',{'user_id':this.loginDetails.customer_id}).subscribe(response => {
+      if(response.status == 'success'){
+        this.userAddress = response.data;
+      }else{
+        this.userAddress = false;
+      }
+      this.loader = false;
+    })
+  }
+
+  editAddress(address_id){
+    if(address_id == ''){
+      return false;
+    }
+    this.goToPage('addaddress',{"address_id":address_id});
+  }
+
+  select_address(address_id){
+    if(address_id === ''){
+      return false;
+    }
+    this.address_id = address_id;
+  }
+
+  deliverProduct(){
+    if(this.address_id > 0){
+      this.prdtData.address_id =  this.address_id;
+      this.webService.setLocalStorageItem('productDetails', JSON.stringify(this.prdtData));
+      this.goToPage('summary','');
+    }
  }
  
  goToPage(path,data=null){
-    this.router.navigateByUrl(path,{queryParams:data});
+    this.router.navigate([path],{queryParams:  data});
    document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
  }


--- a/src/app/purchase/productdetails/productdetails.component.html
+++ b/src/app/purchase/productdetails/productdetails.component.html
@@ -2,45 +2,43 @@
  <div class="container-fluid">
    <app-searchbar>
    </app-searchbar>
+    
+    <div class="loader_overlay" *ngIf="loader"></div>
    <div class="purchase_content_wrapper">
        <div class="row">
            <div class="col-md-4">
              <div class="product_gallery">
-                <div class="product_gallery_inner">
+                <div class="product_gallery_inner" *ngIf="galleryImages;else nogalleryimage">
                    <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
                </div>
+                <ng-template #nogalleryimage>
+                  No Image Found
+                </ng-template>
              </div>
            </div>
-            <div class="col-md-8">
+            <div class="col-md-8" *ngIf="productDetails">
                <div class="product_details">
-                  <h1>Apollo Amazer 4G Tubeless 4 Wheeler Tyre  (155/80R13, Tube Less)</h1>
-                  <h2>265/65R17, Tube Less</h2>
-                  <h3>$ 3,200</h3>
-                  <div class="rating_div">
-                      <fieldset class="rating">
-                          <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                          <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                          <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                          <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                          <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                          <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                          <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                          <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                          <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                          <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                      </fieldset>
-                      <div class="clear"></div>
-                  </div>
-                  <h2>21 Reviews</h2>
-                  <h4>Product Details</h4>
-                  <ul>
-                    <li>Lorem Ipsum is simply dummy text of the printing and <br>
-                        typesetting industry. </li>
-                    <li>Lorem Ipsum is simply dummy text of the printing and <br>
-                            typesetting industry. </li>
-                    <li>Lorem Ipsum is simply dummy text of the printing and <br>
-                                typesetting industry. </li>
-                  </ul>
+                  <h1>{{productDetails.product_name}}</h1>
+                  <h2>{{productDetails.short_description}}</h2>
+                  <h3>$ {{productDetails.amount}}</h3>
+                  <div class="rating_div" *ngIf="productDetails.rating">
+                      <fieldset class="rating prevent-click">
+                          <input type="radio" [checked]="(productDetails.rating >= 4.75) ? 'true':''" id="firstStar5" name="firstRating" value="5" /><label class = "full" for="firstStar5"></label>
+                          <input type="radio" [checked]="(productDetails.rating >= 4.25 && productDetails.rating < 4.75) ? 'true':''" id="firstStar4half" name="firstRating" value="4.5" /><label class="half" for="firstStar4half"></label>
+                          <input type="radio" [checked]="(productDetails.rating >= 3.75 && productDetails.rating < 4.25) ? 'true':''" id="firstStar4" name="firstRating" value="4" /><label class = "full" for="firstStar4"></label>
+                          <input type="radio" [checked]="(productDetails.rating >= 3.25 && productDetails.rating < 3.75) ? 'true':''" id="firstStar3half" name="firstRating" value="3.5" /><label class="half" for="firstStar3half"></label>
+                          <input type="radio" [checked]="(productDetails.rating >= 2.75 && productDetails.rating < 3.25) ? 'true':''" id="firstStar3" name="firstRating" value="3" /><label class = "full" for="firstStar3"></label>
+                          <input type="radio" [checked]="(productDetails.rating >= 2.25 && productDetails.rating < 2.75) ? 'true':''" id="firstStar2half" name="firstRating" value="2.5" /><label class="half" for="firstStar2half"></label>
+                          <input type="radio" [checked]="(productDetails.rating >= 1.75 && productDetails.rating < 2.25) ? 'true':''" id="firstStar2" name="firstRating" value="2" /><label class = "full" for="firstStar2"></label>
+                          <input type="radio" [checked]="(productDetails.rating >= 1.25 && productDetails.rating < 1.75) ? 'true':''" id="firstStar1half" name="firstRating" value="1.5" /><label class="half" for="firstStar1half"></label>
+                          <input type="radio" [checked]="(productDetails.rating >= 0.75 && productDetails.rating < 1.25) ? 'true':''" id="firstStar1" name="firstRating" value="1" /><label class = "full" for="firstStar1"></label>
+                          <input type="radio" [checked]="(productDetails.rating < 0.75) ? 'true':''" id="firstStarhalf" name="firstRating" value="0.5" /><label class="half" for="firstStarhalf"></label>
+                      </fieldset>
+                      <div class="clear"></div>
+                  </div>
+                  <h2 *ngIf="productDetails.count > 0">{{productDetails.count}} Reviews</h2>
+                  <h4 *ngIf="productDetails.description">Product Details</h4>
+                  <div *ngIf="productDetails.description" [innerHTML]="productDetails.description"></div>
                  <h4>Quantity</h4>
                  <div class="counter_wrapper">
                    <div class="count_btn" (click)="minus()">-</div>
@@ -49,194 +47,53 @@
                  </div>  
                  <div class="btn_bay">
                    <button class="btn_cart btn">Add to Cart</button>
-                    <button class="btn_buy btn" (click)="goToPage('address')">Buy Now</button>
-                  </div>  
-                </div>
-                <div class="product_details">
-                    <h4 class="pt0">General Details</h4>
-                    <div class="row">
-                      <div class="col-md-2">
-                        <p>Model Name</p></div>
-                      <div class="col-md-10">
-                        <h6>Amazer 4G Tubeless</h6>
-                      </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-md-2">
-                          <p>Vehicle Brand</p></div>
-                        <div class="col-md-10">
-                          <h6>Marithi Suzuki, Chevorlet, Toyota</h6>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-md-2">
-                          <p>Vehicle Modal Name</p></div>
-                        <div class="col-md-10">
-                          <h6>Celerio, Eeco, Spark, Beat, Etios, WagonR</h6>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-md-2">
-                          <p>Construction Type</p></div>
-                        <div class="col-md-10">
-                          <h6>Radial</h6>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-md-2">
-                          <p>Speed Index</p></div>
-                        <div class="col-md-10">
-                          <h6>T</h6>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-md-2">
-                          <p>Suitable for</p></div>
-                        <div class="col-md-10">
-                          <h6>Road</h6>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-md-2">
-                          <p>Uninstallation Details</p></div>
-                        <div class="col-md-10">
-                          <h6> In case of returns, Carfixxers team will visit the customer location 
-                              where the  product was delivered to pack and pick up the prooduct.</h6>
-                        </div>
-                    </div>
-                    <br>
-                    <h4 class="pt0">Dimensions</h4>
-                    <div class="row">
-                        <div class="col-md-2">
-                          <p>Section width</p></div>
-                        <div class="col-md-10">
-                          <h6>155mm</h6>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-md-2">
-                          <p>Weight</p></div>
-                        <div class="col-md-10">
-                          <h6>7kg</h6>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col-md-2">
-                          <p> Height</p></div>
-                        <div class="col-md-10">
-                          <h6>15.5</h6>
+                    <!-- <button class="btn_buy btn" (click)="goToPage('address')">Buy Now</button> -->
+                    <button class="btn_buy btn" (click)="buyProduct(productDetails.amount)">{{loginDetails?'Buy Now':'Login And Continue'}}</button>
                  </div>  
                </div>
-                    <br>
-                    <h4 class="pt0">Warranty</h4>
-                    <div class="row">
-                        <div class="col-md-2">
-                          <p> Warranty Summary</p></div>
-                        <div class="col-md-10">
-                          <h6>2 Years Brand Warranty</h6>
-                        </div>
-                    </div>
-                </div>
-                <div class="product_details">
+                <div *ngIf="productDetails.about" [innerHTML]="productDetails.about" class="product_details"></div>
+                <div class="product_details"  *ngIf="productDetails.rating">
                    <h4 class="pt0">Rating & Reviews</h4>
-                    <div class="big_rating_div">
-                        <fieldset class="rating">
-                            <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                            <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                            <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                            <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                            <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                            <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                            <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                            <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                            <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                            <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                        </fieldset>
-                        <div class="btn_bay floatRight p10">
-                            <button class="btn_cart btn" style="width: 150px;" (click)="goToPage('rating')">Rate Product</button>
-                        </div>
-                        <div class="clear"></div>
-                    </div>
-                    <br>
-                    <h4 class="pt0">4 Rating & 23 Reviews</h4>
-                    <hr>
-                    <div class="rate_review">
+                    <div class="big_rating_div" >
+                            <fieldset class="rating prevent-click">
+                                <input type="radio" [checked]="(productDetails.rating >= 4.75) ? 'true':''" id="secondStar5" name="secondRating" value="5" /><label class = "full" for="secondStar5"></label>
+                                <input type="radio" [checked]="(productDetails.rating >= 4.25 && productDetails.rating < 4.75) ? 'true':''" id="secondStar4half" name="secondRating" value="4.5" /><label class="half" for="secondStar4half"></label>
+                                <input type="radio" [checked]="(productDetails.rating >= 3.75 && productDetails.rating < 4.25) ? 'true':''" id="secondStar4" name="secondRating" value="4" /><label class = "full" for="secondStar4"></label>
+                                <input type="radio" [checked]="(productDetails.rating >= 3.25 && productDetails.rating < 3.75) ? 'true':''" id="secondStar3half" name="secondRating" value="3.5" /><label class="half" for="secondStar3half"></label>
+                                <input type="radio" [checked]="(productDetails.rating >= 2.75 && productDetails.rating < 3.25) ? 'true':''" id="secondStar3" name="secondRating" value="3" /><label class = "full" for="secondStar3"></label>
+                                <input type="radio" [checked]="(productDetails.rating >= 2.25 && productDetails.rating < 2.75) ? 'true':''" id="secondStar2half" name="secondRating" value="2.5" /><label class="half" for="secondStar2half"></label>
+                                <input type="radio" [checked]="(productDetails.rating >= 1.75 && productDetails.rating < 2.25) ? 'true':''" id="secondStar2" name="secondRating" value="2" /><label class = "full" for="secondStar2"></label>
+                                <input type="radio" [checked]="(productDetails.rating >= 1.25 && productDetails.rating < 1.75) ? 'true':''" id="secondStar1half" name="secondRating" value="1.5" /><label class="half" for="secondStar1half"></label>
+                                <input type="radio" [checked]="(productDetails.rating >= 0.75 && productDetails.rating < 1.25) ? 'true':''" id="secondStar1" name="secondRating" value="1" /><label class = "full" for="secondStar1"></label>
+                                <input type="radio" [checked]="(productDetails.rating < 0.75) ? 'true':''" id="secondStarhalf" name="secondRating" value="0.5" /><label class="half" for="secondStarhalf"></label>
+                            </fieldset>
+                        <div class="clear"></div>
+                    </div>
+                    <div class="rate_review" *ngIf="productDetails.reviews">
                      <ul>
-                        <li>
+                        <li *ngFor="let revws of productDetails.reviews">
                          <div class="row">
                            <div class="col-md-9">
-                                <h4 class="pt0">Good Product</h4>
-                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+                                <h4 class="pt0">{{revws.title}}</h4>
+                                <p>{{revws.description}}</p>
                            </div>
                            <div class="col-md-3">
                              <div class="feed_rating">
-                                  <fieldset class="rating">
-                                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                                  <fieldset class="rating prevent-click">
+                                    <input type="radio" [checked]="(revws.rating >= 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_5'" [attr.name]="'usrReviewName_'+revws.id" value="5" /><label class = "full" for="secondStar5"></label>
+                                    <input type="radio" [checked]="(revws.rating >= 4.25 && revws.rating < 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_4half'" [attr.name]="'usrReviewName_'+revws.id" value="4.5" /><label class="half" for="secondStar4half"></label>
+                                    <input type="radio" [checked]="(revws.rating >= 3.75 && revws.rating < 4.25) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_4'" [attr.name]="'usrReviewName_'+revws.id" value="4" /><label class = "full" for="secondStar4"></label>
+                                    <input type="radio" [checked]="(revws.rating >= 3.25 && revws.rating < 3.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_3half'" [attr.name]="'usrReviewName_'+revws.id" value="3.5" /><label class="half" for="secondStar3half"></label>
+                                    <input type="radio" [checked]="(revws.rating >= 2.75 && revws.rating < 3.25) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_3'" [attr.name]="'usrReviewName_'+revws.id" value="3" /><label class = "full" for="secondStar3"></label>
+                                    <input type="radio" [checked]="(revws.rating >= 2.25 && revws.rating < 2.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_2half'" [attr.name]="'usrReviewName_'+revws.id" value="2.5" /><label class="half" for="secondStar2half"></label>
+                                    <input type="radio" [checked]="(revws.rating >= 1.75 && revws.rating < 2.25) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_2'" [attr.name]="'usrReviewName_'+revws.id" value="2" /><label class = "full" for="secondStar2"></label>
+                                    <input type="radio" [checked]="(revws.rating >= 1.25 && revws.rating < 1.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_1half'" [attr.name]="'usrReviewName_'+revws.id" value="1.5" /><label class="half" for="secondStar1half"></label>
+                                    <input type="radio" [checked]="(revws.rating >= 0.75 && revws.rating < 1.25) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_1'" [attr.name]="'usrReviewName_'+revws.id" value="1" /><label class = "full" for="secondStar1"></label>
+                                    <input type="radio" [checked]="(revws.rating < 0.75) ? 'true':''" [attr.id]="'usrReviewId_'+revws.id+'_half'" [attr.name]="'usrReviewName_'+revws.id" value="0.5" /><label class="half" for="secondStarhalf"></label>
                                </fieldset>
                              </div>
                              <div class="clear"></div>
-                                <p class="textRight">16 April 2019</p>
-                            </div>
-                          </div>
-                        </li>
-                        <li>
-                            <div class="row">
-                              <div class="col-md-9">
-                                  <h4 class="pt0">Good Product</h4>
-                                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
-                              </div>
-                              <div class="col-md-3">
-                                <div class="feed_rating">
-                                    <fieldset class="rating">
-                                        <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                        <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                        <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                        <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                        <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                        <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                        <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                        <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                        <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                        <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                    </fieldset>
-                                </div>
-                                <div class="clear"></div>
-                                  <p class="textRight">16 April 2019</p>
-                              </div>
-                            </div>
-                          </li>
-                          <li>
-                              <div class="row">
-                                <div class="col-md-9">
-                                    <h4 class="pt0">Good Product</h4>
-                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
-                                </div>
-                                <div class="col-md-3">
-                                  <div class="feed_rating">
-                                      <fieldset class="rating">
-                                          <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                          <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                          <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                          <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                          <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                          <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                          <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                          <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                          <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                          <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                      </fieldset>
-                                  </div>
-                                  <div class="clear"></div>
-                                    <p class="textRight">16 April 2019</p>
+                                <p class="textRight">{{revws.datetime | date:'dd MMMM yyyy'}}</p>
                            </div>
                          </div>
                        </li>
@@ -244,376 +101,13 @@
                    </div>
                </div>
            </div>
+            <input type="hidden" #indexLoginModal data-toggle="modal" data-target="#login">
        </div>
    </div>
  </div>
  <div class="bottom_product_list">
    <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()">
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
-        <li (click)="goToPage('productdetails')">
-          <div class="inner_div_product">
-              <div class="product_wrapper">
-                      <img src="/assets/images/asset_product.png">
-              </div>
-              <h5>JK Victory Wheelers type</h5>
-              <p>265/65 R17, Tubeless</p>
-              <div class="star_ratting">
-                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                  </fieldset>
-                  <span class="floatRight">$320</span>
-                  <div class="clear"></div>
-                  <p>21 Reviews</p>
-              </div>
-          </div>
-      </li>
-      </ngx-tile>
-      <ngx-tile NgxCarouselItem>
+      <ngx-tile NgxCarouselItem> <!-- LOOP THIS -->
        <li (click)="goToPage('productdetails')">
          <div class="inner_div_product">
              <div class="product_wrapper">
@@ -623,16 +117,16 @@
              <p>265/65 R17, Tubeless</p>
              <div class="star_ratting">
                  <fieldset class="rating">
-                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5"></label>
+                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half"></label>
+                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4"></label>
+                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half"></label>
+                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3"></label>
+                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half"></label>
+                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2"></label>
+                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half"></label>
+                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1"></label>
+                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf"></label>
                  </fieldset>
                  <span class="floatRight">$320</span>
                  <div class="clear"></div>

--- a/src/app/purchase/productdetails/productdetails.component.ts
+++ b/src/app/purchase/productdetails/productdetails.component.ts
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
 import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
-import * as $ from 'jquery';
+import { WebService } from '../../provider/web.service';
 import { NgxCarousel } from 'ngx-carousel';
+import { ImageStorage } from '../../../environments/server.config';
+import { SubjectService } from '../../provider/subject.service';
+import * as $ from 'jquery';

 @Component({
  selector: 'app-productdetails',
@@ -10,35 +13,105 @@ import { NgxCarousel } from 'ngx-carousel';
  styleUrls: ['./productdetails.component.scss']
 })
 export class ProductdetailsComponent implements OnInit {
+  
+  loader: boolean;
  count:any;
+  product_id: number;
+  imageServer: string;
+  productDetails:any;
+  product_data:any = new Array();
+  galleryImages: NgxGalleryImage[];
+  galleryOptions: NgxGalleryOptions[];
+  loginDetails:any;
+
+  @ViewChild("indexLoginModal") loginModalRef: ElementRef;
+
  public carouselTile: NgxCarousel;
-  constructor(
-    private router        : Router, 
-    private route         : ActivatedRoute
-  ) {
-    this.count = 0;
+  constructor(private router: Router, 
+              private route: ActivatedRoute,
+              public webService: WebService,
+              public subjectService : SubjectService) {
+                
+    this.loader       = true;
+    this.count        = 1;
+    this.product_id   = 0;
+    this.imageServer  = ImageStorage; 
+    this.router.routeReuseStrategy.shouldReuseRoute = function(){
+      return false;
    }

+    route.params.subscribe(val => {
+      this.route.queryParams.subscribe(params => {
+        this.product_id = params['product_id'];
+      });
+      this.getProductDetails();
+    });

+    if(!this.product_id){
+      this.goToPage('purchaseHome','');
+    }
+  }

-add(){
-  this.count = this.count + 1;
-}
+  add(){this.count = this.count + 1;}
+  minus(){this.count = this.count - 1;
+    if(this.count < 1){this.count = 1;}
+  }
  
-minus(){
-  this.count = this.count - 1;
-  if(this.count < 0){
-    this.count = 0;
+  ngOnInit(): void {
+    
+    this.designModules();
+    this.checkUserLogin();
  }
-}

+  checkUserLogin(){
+    this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+    this.subjectService.getLoginData().subscribe(loginData => {
+      this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+    });
+  }

- galleryOptions: NgxGalleryOptions[];
-    galleryImages: NgxGalleryImage[];
+  getProductDetails(){
+    this.webService.post_data('SingleProductSearch',{"product_id":this.product_id}).subscribe(response => {
+      if(response.status == 'success'){
+        let image: string = '';
+        let imageArr: any[] = new Array();
+        const thisObj = this;
+        this.productDetails = response.data;
+        console.log(response.data)
+        if(this.productDetails.images.length > 0){
+          thisObj.productDetails.images.forEach(function (data) {
+            image = thisObj.imageServer + data.image;
+            imageArr.push({small: image,medium: image,big: image});
+          });
+        }else{
+          image = thisObj.imageServer +'assets/images/no_image_text.png';
+          imageArr.push({small: image,medium: image,big: image});
+        }
+        this.galleryImages = imageArr;
+      }else{
+        this.productDetails = false;
+      }
+      this.loader = false;
+    });
+  }

-    ngOnInit(): void {
-      this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
+  buyProduct(amount){
+    if(!this.loginDetails){
+      this.loginModalRef.nativeElement.click();
+      return false;
+    }
+    this.product_data = {amount:amount,product_id:this.product_id,quantity:this.count,total_amount:this.count*amount};
+    this.webService.setLocalStorageItem('productDetails', JSON.stringify(this.product_data));
+    this.goToPage('address','');
+  }
+  
+  goToPage(path,data=null){
+    this.router.navigate([path],{queryParams:  data});
+    document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
+  }
  
+  designModules(){
+    this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
    this.galleryOptions = [
      {
        width: '100%',
@@ -46,7 +119,6 @@ minus(){
        thumbnailsColumns: 4,
        imageAnimation: NgxGalleryAnimation.Slide
      },
-            // max-width 800
      {
        breakpoint: 1440,
        width: '100%',
@@ -56,41 +128,12 @@ minus(){
        thumbnailsMargin: 20,
        thumbnailMargin: 20
      },
-            // max-width 400
      {
        breakpoint: 400,
        preview: false
      }
    ];
-
-        this.galleryImages = [
-            {
-                small: 'assets/images/tyre_shot1.png',
-                medium: 'assets/images/tyre_shot1.png',
-                big: 'assets/images/tyre_shot1.png'
-            },
-            {
-              small: 'assets/images/tyre_shot2.png',
-              medium: 'assets/images/tyre_shot2.png',
-              big: 'assets/images/tyre_shot2.png'
-          },
-          {
-            small: 'assets/images/tyre_shot3.png',
-            medium: 'assets/images/tyre_shot3.png',
-            big: 'assets/images/tyre_shot3.png'
-        },
-        {
-          small: 'assets/images/tyre_shot4.png',
-          medium: 'assets/images/tyre_shot4.png',
-          big: 'assets/images/tyre_shot4.png'
-      }
-            
-        ];
-    }
-  goToPage(path,data=null){
-    this.router.navigateByUrl(path,{queryParams:data});
-    document.body.scrollTop = document.documentElement.scrollTop = 0;
  }
  carouselTileLoad(){ return ''; }
-
 }
+  
\ No newline at end of file
--- a/src/app/purchase/productlist/productlist.component.html
+++ b/src/app/purchase/productlist/productlist.component.html
@@ -5,40 +5,21 @@
        <div class="purchase_content_wrapper">
            <div class="purchase_filter_section">
                <h5>FILTERS</h5>
+                <div *ngIf="productBrand && productBrand.length > 0">
                    <h6 href="#ac1" data-toggle="collapse">Brands</h6>
-                <ul id="ac1" class="collapse in show">
-                    <li class="relative">
+                    <ul id="ac1" class="collapse in show" malihu-scrollbar [scrollbarOptions]="scrollbarOptions">
+                        <li class="relative" *ngFor="let brands of productBrand; let i=index">
                            <div class="custom_checkbox_filter">
-                            <input class="custom_checkbox" id="custom_checkbox-1" type="checkbox" value="value1">
-                            <label for="custom_checkbox-1">Acura</label>
+                                <input class="custom_checkbox" id="custom_checkbox_{{i}}" (click) ="selectBrand($event,brands.brand_id)" type="checkbox" value="value1">
+                                <label for="custom_checkbox_{{i}}">{{brands.brand_name}}</label>
                            </div>
                        </li>
-                    <li class="relative">
-                        <div class="custom_checkbox_filter">
-                            <input class="custom_checkbox" id="custom_checkbox-2" type="checkbox" value="value2">
-                            <label for="custom_checkbox-2">List one</label>
-                        </div>
-                    </li>
-                    <li class="relative">
-                        <div class="custom_checkbox_filter">
-                            <input class="custom_checkbox" id="custom_checkbox-3" type="checkbox" value="value2">
-                            <label for="custom_checkbox-3">List two</label>
-                        </div>
-                    </li>
-                    <li class="relative">
-                        <div class="custom_checkbox_filter">
-                            <input class="custom_checkbox" id="custom_checkbox-4" type="checkbox" value="value2">
-                            <label for="custom_checkbox-4">List three</label>
-                        </div>
-                    </li>
-                    <div class="more">
-                        11 More
-                    </div>
                    </ul>
+                </div>
                <h6 href="#ac2" data-toggle="collapse">Price</h6>
                <ul id="ac2" class="collapse in show">
                    <li>
-                        <ng5-slider [(value)]="value" [(highValue)]="highValue" [options]="options"></ng5-slider>
+                        <ng5-slider #slider [(value)]="sliderMinvalue" [(highValue)]="sliderhighValue" [options]="slideroptions" (userChangeEnd)="getPrice(slider.value,slider.highValue)"></ng5-slider>
                        <span class="floatLeft">Min</span>
                        <span class="floatRight">Max</span>
                        <div class="clear"></div>
@@ -68,62 +49,6 @@
                            </select>
                        </h6>
                </ul>
-                <h6 href="#ac4" data-toggle="collapse">Color</h6>
-                <ul id="ac4" class="collapse in show">
-                    <div class="color_select">
-                        <div id="custom_check_button">
-                            <label>
-                                <input type="radio">  
-                                <p>
-                                    <img src="/assets/images/color_1.png">
-                                </p>
-                            </label>
-                        </div>
-                        <div id="custom_check_button">
-                                <label>
-                                    <input type="radio">  
-                                    <p>
-                                        <img src="/assets/images/color_2.png">
-                                    </p>
-                                </label>
-                            </div> 
-                            <div id="custom_check_button">
-                                    <label>
-                                        <input type="radio">  
-                                        <p>
-                                            <img src="/assets/images/color_3.png">
-                                        </p>
-                                    </label>
-                                </div>  
-                    </div>
-                </ul>
-                <h6 href="#ac5" data-toggle="collapse">Customer Ratings</h6>
-                <ul id="ac5" class="collapse in show">
-                    <li class="relative">
-                        <div class="custom_checkbox_filter">
-                            <input class="custom_checkbox" id="custom_checkbox-4" type="checkbox" value="value1">
-                            <label for="custom_checkbox-4">4 ★ & above</label>
-                        </div>
-                    </li>
-                    <li class="relative">
-                        <div class="custom_checkbox_filter">
-                            <input class="custom_checkbox" id="custom_checkbox-5" type="checkbox" value="value2">
-                            <label for="custom_checkbox-5">3 ★ & above</label>
-                        </div>
-                    </li>
-                    <li class="relative">
-                        <div class="custom_checkbox_filter">
-                            <input class="custom_checkbox" id="custom_checkbox-6" type="checkbox" value="value2">
-                            <label for="custom_checkbox-6">2 ★ & above</label>
-                        </div>
-                    </li>
-                    <li class="relative">
-                        <div class="custom_checkbox_filter">
-                            <input class="custom_checkbox" id="custom_checkbox-7" type="checkbox" value="value2">
-                            <label for="custom_checkbox-7">1 ★ & above</label>
-                        </div>
-                    </li>
-                </ul>
            </div>
            <div class="purchase_content_section">
                <div class="search_list_header">
@@ -131,229 +56,51 @@
                        <div class="col-md-8">
                            <p>Showing 1 -40 of 202 results for "Audi tyres"</p>
                        </div>
-                        <div class="col-md-4">
+                        <!-- <div class="col-md-4">
                            <select class="floatRight">
                                <option>Select by popularity</option>
                                <option>Select by price</option>
                            </select>
                            <div class="clear"></div>
+                        </div> -->
                    </div>
                </div>
-                </div>
-                <div class="search_listing_content">
+                <div class="loader_overlay" *ngIf="loader"></div>
+                <div class="search_listing_content" *ngIf="productArray && productArray.length > 0;else noProductData">
                    <ul>
-                        <li (click)="goToPage('productdetails')">
-                            <div class="inner_div_product">
-                                <div class="product_wrapper">
-                                        <img src="/assets/images/asset_product.png">
-                                </div>
-                                <h5>JK Victory Wheelers type</h5>
-                                <p>265/65 R17, Tubeless</p>
-                                <div class="star_ratting">
-                                    <fieldset class="rating">
-                                        <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                        <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                        <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                        <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                        <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                        <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                        <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                        <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                        <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                        <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                    </fieldset>
-                                    <span class="floatRight">$320</span>
-                                    <div class="clear"></div>
-                                    <p>21 Reviews</p>
-                                </div>
-                            </div>
-                        </li>
-                        <li (click)="goToPage('productdetails')">
-                                <div class="inner_div_product">
-                                    <div class="product_wrapper">
-                                            <img src="/assets/images/asset_product.png">
-                                    </div>
-                                    <h5>JK Victory Wheelers type</h5>
-                                    <p>265/65 R17, Tubeless</p>
-                                    <div class="star_ratting">
-                                        <fieldset class="rating">
-                                            <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                            <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                            <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                            <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                            <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                            <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                            <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                            <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                            <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                            <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                        </fieldset>
-                                        <span class="floatRight">$320</span>
-                                        <div class="clear"></div>
-                                        <p>21 Reviews</p>
-                                    </div>
-                                </div>
-                            </li>
-                            <li (click)="goToPage('productdetails')">
-                                    <div class="inner_div_product">
-                                        <div class="product_wrapper">
-                                                <img src="/assets/images/asset_product.png">
-                                        </div>
-                                        <h5>JK Victory Wheelers type</h5>
-                                        <p>265/65 R17, Tubeless</p>
-                                        <div class="star_ratting">
-                                            <fieldset class="rating">
-                                                <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                                <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                                <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                                <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                                <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                                <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                                <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                                <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                                <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                                <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                            </fieldset>
-                                            <span class="floatRight">$320</span>
-                                            <div class="clear"></div>
-                                            <p>21 Reviews</p>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li (click)="goToPage('productdetails')">
-                                        <div class="inner_div_product">
+                        <li *ngFor="let prdt of productArray">
+                            <div class="inner_div_product cpoint" (click)="getSingleProductDetails(prdt.product_id)">
                                <div class="product_wrapper">
-                                                    <img src="/assets/images/asset_product.png">
+                                    <img src="{{imageServer + prdt.image}}" onerror="this.src='assets/images/user_avatar.jpg'">
                                </div>
-                                            <h5>JK Victory Wheelers type</h5>
-                                            <p>265/65 R17, Tubeless</p>
+                                <h5>{{prdt.product_name}}</h5>
+                                <p>{{prdt.short_description}}</p>
                                <div class="star_ratting">
-                                                <fieldset class="rating">
-                                                    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                                    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                                    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                                    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                                    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                                    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                                    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                                    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                                    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                                    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                                    <fieldset class="rating"  *ngIf="prdt.rating > 0">
+                                            <input type="radio" [checked]="(prdt.rating >= 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_5'" [attr.name]="'usrReviewName_'+prdt.product_id" value="5" /><label class = "full" for="secondStar5"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 4.25 && prdt.rating < 4.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_4half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="4.5" /><label class="half" for="secondStar4half"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 3.75 && prdt.rating < 4.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_4'" [attr.name]="'usrReviewName_'+prdt.product_id" value="4" /><label class = "full" for="secondStar4"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 3.25 && prdt.rating < 3.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_3half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="3.5" /><label class="half" for="secondStar3half"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 2.75 && prdt.rating < 3.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_3'" [attr.name]="'usrReviewName_'+prdt.product_id" value="3" /><label class = "full" for="secondStar3"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 2.25 && prdt.rating < 2.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_2half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="2.5" /><label class="half" for="secondStar2half"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 1.75 && prdt.rating < 2.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_2'" [attr.name]="'usrReviewName_'+prdt.product_id" value="2" /><label class = "full" for="secondStar2"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 1.25 && prdt.rating < 1.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_1half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="1.5" /><label class="half" for="secondStar1half"></label>
+                                            <input type="radio" [checked]="(prdt.rating >= 0.75 && prdt.rating < 1.25) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_1'" [attr.name]="'usrReviewName_'+prdt.product_id" value="1" /><label class = "full" for="secondStar1"></label>
+                                            <input type="radio" [checked]="(prdt.rating < 0.75) ? 'true':''" [attr.id]="'usrReviewId_'+prdt.product_id+'_half'" [attr.name]="'usrReviewName_'+prdt.product_id" value="0.5" /><label class="half" for="secondStarhalf"></label>
                                        </fieldset>
-                                                <span class="floatRight">$320</span>
+                                    <span class="floatRight">$ {{prdt.amount}}</span>
                                    <div class="clear"></div>
-                                                <p>21 Reviews</p>
-                                            </div>
-                                        </div>
-                                    </li>
-                                    <li (click)="goToPage('productdetails')">
-                                            <div class="inner_div_product">
-                                                <div class="product_wrapper">
-                                                        <img src="/assets/images/asset_product.png">
-                                                </div>
-                                                <h5>JK Victory Wheelers type</h5>
-                                                <p>265/65 R17, Tubeless</p>
-                                                <div class="star_ratting">
-                                                    <fieldset class="rating">
-                                                        <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                                        <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                                        <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                                        <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                                        <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                                        <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                                        <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                                        <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                                        <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                                        <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                                    </fieldset>
-                                                    <span class="floatRight">$320</span>
-                                                    <div class="clear"></div>
-                                                    <p>21 Reviews</p>
-                                                </div>
-                                            </div>
-                                        </li>
-                                        <li>
-                                                <div class="inner_div_product">
-                                                    <div class="product_wrapper">
-                                                            <img src="/assets/images/asset_product.png">
-                                                    </div>
-                                                    <h5>JK Victory Wheelers type</h5>
-                                                    <p>265/65 R17, Tubeless</p>
-                                                    <div class="star_ratting">
-                                                        <fieldset class="rating">
-                                                            <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                                            <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                                            <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                                            <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                                            <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                                            <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                                            <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                                            <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                                            <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                                            <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                                        </fieldset>
-                                                        <span class="floatRight">$320</span>
-                                                        <div class="clear"></div>
-                                                        <p>21 Reviews</p>
-                                                    </div>
-                                                </div>
-                                            </li>
-                                            <li>
-                                                    <div class="inner_div_product">
-                                                        <div class="product_wrapper">
-                                                                <img src="/assets/images/asset_product.png">
-                                                        </div>
-                                                        <h5>JK Victory Wheelers type</h5>
-                                                        <p>265/65 R17, Tubeless</p>
-                                                        <div class="star_ratting">
-                                                            <fieldset class="rating">
-                                                                <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                                                <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                                                <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                                                <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                                                <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                                                <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                                                <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                                                <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                                                <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                                                <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                                            </fieldset>
-                                                            <span class="floatRight">$320</span>
-                                                            <div class="clear"></div>
-                                                            <p>21 Reviews</p>
-                                                        </div>
-                                                    </div>
-                                                </li>
-                                                <li>
-                                                        <div class="inner_div_product">
-                                                            <div class="product_wrapper">
-                                                                    <img src="/assets/images/asset_product.png">
-                                                            </div>
-                                                            <h5>JK Victory Wheelers type</h5>
-                                                            <p>265/65 R17, Tubeless</p>
-                                                            <div class="star_ratting">
-                                                                <fieldset class="rating">
-                                                                    <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                                                                    <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                                                                    <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                                                                    <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                                                                    <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                                                                    <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                                                                    <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                                                                    <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                                                                    <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                                                                    <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
-                                                                </fieldset>
-                                                                <span class="floatRight">$320</span>
-                                                                <div class="clear"></div>
-                                                                <p>21 Reviews</p>
+                                    <p>{{(prdt.count > 0)?prdt.count+' Reviews':'Be the first one to review.'}} </p>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
+                <ng-template #noProductData>
+                    No Data Found
+                </ng-template>
                <hr>
-                <div class="pagination">
+                <!-- <div class="pagination">
                    <ul>
                        <li class="prev"><</li>
                        <li class="select">1</li>
@@ -363,7 +110,7 @@
                        <li>5</li>
                        <li class="next">></li>
                    </ul>
-                </div>
+                </div> -->
            </div>
            <div class="clear"></div>
        </div>

--- a/src/app/purchase/productlist/productlist.component.scss
+++ b/src/app/purchase/productlist/productlist.component.scss
@@ -44,6 +44,7 @@
                padding:0px;
                padding-top: 10px;
                padding-bottom: 10px;
+                height: 150px;
                li{
                    list-style: none;
                    padding-left: 25px;
@@ -249,7 +250,7 @@
                                padding: 10px;
                                img{
                                    height: 180px;
-                                    width: auto;
+                                    max-width: 100%;
                                }
                            }
                            h5{

--- a/src/app/purchase/productlist/productlist.component.ts
+++ b/src/app/purchase/productlist/productlist.component.ts
 import { Component, OnInit } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
 import { Options } from 'ng5-slider';
+import { WebService } from '../../provider/web.service';
+import { ImageStorage } from '../../../environments/server.config';

 @Component({
  selector: 'app-productlist',
@@ -8,25 +10,88 @@ import { Options } from 'ng5-slider';
  styleUrls: ['./productlist.component.scss']
 })
 export class ProductlistComponent implements OnInit {
+  loader: boolean;
+  searchKey:string;
+  imageServer: any;
+  productArray: any;
+  productBrand: any;
+  brandArr: any[] = new Array();
+  sliderMinvalue: number;
+  sliderhighValue: number;
+  slideroptions: Options;

  constructor(
    private router        : Router, 
-    private route         : ActivatedRoute
-  ) { }
+    private route         : ActivatedRoute,
+    public webService     : WebService
+  ){ 
+    this.loader = true;
+    this.productArray = true;

-  value: number = 40;
-  highValue: number = 60;
-  options: Options = {
-    floor: 0,
-    ceil: 100
-  };
+    this.imageServer = ImageStorage;
+    route.params.subscribe(val => {
+      this.route.queryParams.subscribe(params => {
+        this.searchKey = params['key'];
+        this.getProductDetails({"key":this.searchKey});
+      });
+    });
+    if(this.searchKey == ''){
+      this.goToPage('purchaseHome','');
+    }
+  }
+  
+  public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };

  ngOnInit() {
+    this.getBrand();
  }

  goToPage(path,data=null){
-    this.router.navigateByUrl(path,{queryParams:data});
+    this.router.navigate([path],{queryParams:  data});
    document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
  }

+  getProductDetails(params:any = ''){
+    this.loader = true;
+    this.webService.post_data('productSearch',params).subscribe(response => {
+      if(response.status == 'success'){
+        console.log(response.data);
+        this.productArray = response.data;
+      } else {
+        this.productArray = false;
+      }
+      this.loader = false;
+    });
+  }
+
+  getBrand(){
+    this.webService.get_data('getBrands').subscribe(brandResponse => {
+      if(brandResponse.status == 'success'){
+        this.productBrand = brandResponse.brands;
+        this.sliderMinvalue = 0;
+        this.sliderhighValue = brandResponse.maxamount;
+        this.slideroptions = { floor: 0, ceil: brandResponse.maxamount, step: 100 };
+      }
+    });
+  }
+
+  getSingleProductDetails(prdt_id){
+    this.goToPage('productdetails',{"product_id":prdt_id});
+  }
+
+  selectBrand(event,brand_id){
+    if (event.target.checked) {
+      this.brandArr.push(brand_id);
+    } else {
+      let id = this.brandArr.findIndex(x => x == brand_id);
+      if (id != -1) {
+        this.brandArr.splice(id, 1);
+      }
+    }
+    this.getProductDetails({"key":this.searchKey,"brand_id":this.brandArr});
+  }
+
+  getPrice(low,top){
+    this.getProductDetails({"key":this.searchKey,"brand_id":this.brandArr,"minPrice":low,"maxPrice":top});
+  }
 }
--- a/src/app/purchase/purchase-home/purchase-home.component.html
+++ b/src/app/purchase/purchase-home/purchase-home.component.html
+<div class="purchase_wrapper">
+  <div class="container-fluid">
+      <app-searchbar>
+      </app-searchbar>
+      <div class="purchase_content_wrapper">
+          <div class="purchase_content_section">
+              <div class="search_list_header">
+                  <div class="row">
+                      <div class="col-md-8">
+                          <p>Showing 1 -40 of 202 results for "Audi tyres"</p>
+                      </div>
+                      <div class="col-md-4">
+                          <select class="floatRight">
+                              <option>Select by popularity</option>
+                              <option>Select by price</option>
+                          </select>
+                          <div class="clear"></div>
+                      </div>
+                  </div>
+              </div>
+              <div class="search_listing_content">
+                  <ul>
+                      <li (click)="goToPage('productdetails')">
+                          <div class="inner_div_product">
+                              <div class="product_wrapper">
+                                      <img src="/assets/images/asset_product.png">
+                              </div>
+                              <h5>JK Victory Wheelers type</h5>
+                              <p>265/65 R17, Tubeless</p>
+                              <div class="star_ratting">
+                                  <fieldset class="rating">
+                                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                                  </fieldset>
+                                  <span class="floatRight">$320</span>
+                                  <div class="clear"></div>
+                                  <p>21 Reviews</p>
+                              </div>
+                          </div>
+                      </li>
+                      <li (click)="goToPage('productdetails')">
+                              <div class="inner_div_product">
+                                  <div class="product_wrapper">
+                                          <img src="/assets/images/asset_product.png">
+                                  </div>
+                                  <h5>JK Victory Wheelers type</h5>
+                                  <p>265/65 R17, Tubeless</p>
+                                  <div class="star_ratting">
+                                      <fieldset class="rating">
+                                          <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                          <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                          <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                          <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                          <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                          <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                          <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                          <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                          <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                          <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                                      </fieldset>
+                                      <span class="floatRight">$320</span>
+                                      <div class="clear"></div>
+                                      <p>21 Reviews</p>
+                                  </div>
+                              </div>
+                          </li>
+                          <li (click)="goToPage('productdetails')">
+                                  <div class="inner_div_product">
+                                      <div class="product_wrapper">
+                                              <img src="/assets/images/asset_product.png">
+                                      </div>
+                                      <h5>JK Victory Wheelers type</h5>
+                                      <p>265/65 R17, Tubeless</p>
+                                      <div class="star_ratting">
+                                          <fieldset class="rating">
+                                              <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                              <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                              <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                              <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                              <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                              <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                              <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                              <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                              <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                              <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                                          </fieldset>
+                                          <span class="floatRight">$320</span>
+                                          <div class="clear"></div>
+                                          <p>21 Reviews</p>
+                                      </div>
+                                  </div>
+                              </li>
+                              <li (click)="goToPage('productdetails')">
+                                      <div class="inner_div_product">
+                                          <div class="product_wrapper">
+                                                  <img src="/assets/images/asset_product.png">
+                                          </div>
+                                          <h5>JK Victory Wheelers type</h5>
+                                          <p>265/65 R17, Tubeless</p>
+                                          <div class="star_ratting">
+                                              <fieldset class="rating">
+                                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                                              </fieldset>
+                                              <span class="floatRight">$320</span>
+                                              <div class="clear"></div>
+                                              <p>21 Reviews</p>
+                                          </div>
+                                      </div>
+                                  </li>
+                                  <li (click)="goToPage('productdetails')">
+                                          <div class="inner_div_product">
+                                              <div class="product_wrapper">
+                                                      <img src="/assets/images/asset_product.png">
+                                              </div>
+                                              <h5>JK Victory Wheelers type</h5>
+                                              <p>265/65 R17, Tubeless</p>
+                                              <div class="star_ratting">
+                                                  <fieldset class="rating">
+                                                      <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                                      <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                                      <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                                      <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                                      <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                                      <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                                      <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                                      <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                                      <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                                      <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                                                  </fieldset>
+                                                  <span class="floatRight">$320</span>
+                                                  <div class="clear"></div>
+                                                  <p>21 Reviews</p>
+                                              </div>
+                                          </div>
+                                      </li>
+                                      <li>
+                                              <div class="inner_div_product">
+                                                  <div class="product_wrapper">
+                                                          <img src="/assets/images/asset_product.png">
+                                                  </div>
+                                                  <h5>JK Victory Wheelers type</h5>
+                                                  <p>265/65 R17, Tubeless</p>
+                                                  <div class="star_ratting">
+                                                      <fieldset class="rating">
+                                                          <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                                          <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                                          <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                                          <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                                          <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                                          <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                                          <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                                          <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                                          <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                                          <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                                                      </fieldset>
+                                                      <span class="floatRight">$320</span>
+                                                      <div class="clear"></div>
+                                                      <p>21 Reviews</p>
+                                                  </div>
+                                              </div>
+                                          </li>
+                                          <li>
+                                                  <div class="inner_div_product">
+                                                      <div class="product_wrapper">
+                                                              <img src="/assets/images/asset_product.png">
+                                                      </div>
+                                                      <h5>JK Victory Wheelers type</h5>
+                                                      <p>265/65 R17, Tubeless</p>
+                                                      <div class="star_ratting">
+                                                          <fieldset class="rating">
+                                                              <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                                              <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                                              <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                                              <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                                              <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                                              <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                                              <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                                              <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                                              <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                                              <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                                                          </fieldset>
+                                                          <span class="floatRight">$320</span>
+                                                          <div class="clear"></div>
+                                                          <p>21 Reviews</p>
+                                                      </div>
+                                                  </div>
+                                              </li>
+                                              <li>
+                                                      <div class="inner_div_product">
+                                                          <div class="product_wrapper">
+                                                                  <img src="/assets/images/asset_product.png">
+                                                          </div>
+                                                          <h5>JK Victory Wheelers type</h5>
+                                                          <p>265/65 R17, Tubeless</p>
+                                                          <div class="star_ratting">
+                                                              <fieldset class="rating">
+                                                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                                                              </fieldset>
+                                                              <span class="floatRight">$320</span>
+                                                              <div class="clear"></div>
+                                                              <p>21 Reviews</p>
+                                                          </div>
+                                                      </div>
+                                                  </li>
+                  </ul>
+              </div>
+              <div class="bottom_product_list">
+                <ngx-carousel [inputs]="carouselTile" (carouselLoad)="carouselTileLoad()">
+                  <ngx-tile NgxCarouselItem>
+                    <li (click)="goToPage('productdetails')">
+                      <div class="inner_div_product">
+                          <div class="product_wrapper">
+                                  <img src="/assets/images/asset_product.png">
+                          </div>
+                          <h5>JK Victory Wheelers type</h5>
+                          <p>265/65 R17, Tubeless</p>
+                          <div class="star_ratting">
+                              <fieldset class="rating">
+                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                              </fieldset>
+                              <span class="floatRight">$320</span>
+                              <div class="clear"></div>
+                              <p>21 Reviews</p>
+                          </div>
+                      </div>
+                  </li>
+                  </ngx-tile>
+                  <ngx-tile NgxCarouselItem>
+                    <li (click)="goToPage('productdetails')">
+                      <div class="inner_div_product">
+                          <div class="product_wrapper">
+                                  <img src="/assets/images/asset_product.png">
+                          </div>
+                          <h5>JK Victory Wheelers type</h5>
+                          <p>265/65 R17, Tubeless</p>
+                          <div class="star_ratting">
+                              <fieldset class="rating">
+                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                              </fieldset>
+                              <span class="floatRight">$320</span>
+                              <div class="clear"></div>
+                              <p>21 Reviews</p>
+                          </div>
+                      </div>
+                  </li>
+                  </ngx-tile>
+                  <ngx-tile NgxCarouselItem>
+                    <li (click)="goToPage('productdetails')">
+                      <div class="inner_div_product">
+                          <div class="product_wrapper">
+                                  <img src="/assets/images/asset_product.png">
+                          </div>
+                          <h5>JK Victory Wheelers type</h5>
+                          <p>265/65 R17, Tubeless</p>
+                          <div class="star_ratting">
+                              <fieldset class="rating">
+                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                              </fieldset>
+                              <span class="floatRight">$320</span>
+                              <div class="clear"></div>
+                              <p>21 Reviews</p>
+                          </div>
+                      </div>
+                  </li>
+                  </ngx-tile>
+                  <ngx-tile NgxCarouselItem>
+                    <li (click)="goToPage('productdetails')">
+                      <div class="inner_div_product">
+                          <div class="product_wrapper">
+                                  <img src="/assets/images/asset_product.png">
+                          </div>
+                          <h5>JK Victory Wheelers type</h5>
+                          <p>265/65 R17, Tubeless</p>
+                          <div class="star_ratting">
+                              <fieldset class="rating">
+                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                              </fieldset>
+                              <span class="floatRight">$320</span>
+                              <div class="clear"></div>
+                              <p>21 Reviews</p>
+                          </div>
+                      </div>
+                  </li>
+                  </ngx-tile>
+                  <ngx-tile NgxCarouselItem>
+                    <li (click)="goToPage('productdetails')">
+                      <div class="inner_div_product">
+                          <div class="product_wrapper">
+                                  <img src="/assets/images/asset_product.png">
+                          </div>
+                          <h5>JK Victory Wheelers type</h5>
+                          <p>265/65 R17, Tubeless</p>
+                          <div class="star_ratting">
+                              <fieldset class="rating">
+                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                              </fieldset>
+                              <span class="floatRight">$320</span>
+                              <div class="clear"></div>
+                              <p>21 Reviews</p>
+                          </div>
+                      </div>
+                  </li>
+                  </ngx-tile>
+                  <ngx-tile NgxCarouselItem>
+                    <li (click)="goToPage('productdetails')">
+                      <div class="inner_div_product">
+                          <div class="product_wrapper">
+                                  <img src="/assets/images/asset_product.png">
+                          </div>
+                          <h5>JK Victory Wheelers type</h5>
+                          <p>265/65 R17, Tubeless</p>
+                          <div class="star_ratting">
+                              <fieldset class="rating">
+                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                              </fieldset>
+                              <span class="floatRight">$320</span>
+                              <div class="clear"></div>
+                              <p>21 Reviews</p>
+                          </div>
+                      </div>
+                  </li>
+                  </ngx-tile>
+                  <ngx-tile NgxCarouselItem>
+                    <li (click)="goToPage('productdetails')">
+                      <div class="inner_div_product">
+                          <div class="product_wrapper">
+                                  <img src="/assets/images/asset_product.png">
+                          </div>
+                          <h5>JK Victory Wheelers type</h5>
+                          <p>265/65 R17, Tubeless</p>
+                          <div class="star_ratting">
+                              <fieldset class="rating">
+                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                              </fieldset>
+                              <span class="floatRight">$320</span>
+                              <div class="clear"></div>
+                              <p>21 Reviews</p>
+                          </div>
+                      </div>
+                  </li>
+                  </ngx-tile>
+                  <ngx-tile NgxCarouselItem>
+                    <li (click)="goToPage('productdetails')">
+                      <div class="inner_div_product">
+                          <div class="product_wrapper">
+                                  <img src="/assets/images/asset_product.png">
+                          </div>
+                          <h5>JK Victory Wheelers type</h5>
+                          <p>265/65 R17, Tubeless</p>
+                          <div class="star_ratting">
+                              <fieldset class="rating">
+                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                              </fieldset>
+                              <span class="floatRight">$320</span>
+                              <div class="clear"></div>
+                              <p>21 Reviews</p>
+                          </div>
+                      </div>
+                  </li>
+                  </ngx-tile>
+                  <ngx-tile NgxCarouselItem>
+                    <li (click)="goToPage('productdetails')">
+                      <div class="inner_div_product">
+                          <div class="product_wrapper">
+                                  <img src="/assets/images/asset_product.png">
+                          </div>
+                          <h5>JK Victory Wheelers type</h5>
+                          <p>265/65 R17, Tubeless</p>
+                          <div class="star_ratting">
+                              <fieldset class="rating">
+                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                              </fieldset>
+                              <span class="floatRight">$320</span>
+                              <div class="clear"></div>
+                              <p>21 Reviews</p>
+                          </div>
+                      </div>
+                  </li>
+                  </ngx-tile>
+                  <ngx-tile NgxCarouselItem>
+                    <li (click)="goToPage('productdetails')">
+                      <div class="inner_div_product">
+                          <div class="product_wrapper">
+                                  <img src="/assets/images/asset_product.png">
+                          </div>
+                          <h5>JK Victory Wheelers type</h5>
+                          <p>265/65 R17, Tubeless</p>
+                          <div class="star_ratting">
+                              <fieldset class="rating">
+                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                              </fieldset>
+                              <span class="floatRight">$320</span>
+                              <div class="clear"></div>
+                              <p>21 Reviews</p>
+                          </div>
+                      </div>
+                  </li>
+                  </ngx-tile>
+                  <ngx-tile NgxCarouselItem>
+                    <li (click)="goToPage('productdetails')">
+                      <div class="inner_div_product">
+                          <div class="product_wrapper">
+                                  <img src="/assets/images/asset_product.png">
+                          </div>
+                          <h5>JK Victory Wheelers type</h5>
+                          <p>265/65 R17, Tubeless</p>
+                          <div class="star_ratting">
+                              <fieldset class="rating">
+                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                              </fieldset>
+                              <span class="floatRight">$320</span>
+                              <div class="clear"></div>
+                              <p>21 Reviews</p>
+                          </div>
+                      </div>
+                  </li>
+                  </ngx-tile>
+                  <ngx-tile NgxCarouselItem>
+                    <li (click)="goToPage('productdetails')">
+                      <div class="inner_div_product">
+                          <div class="product_wrapper">
+                                  <img src="/assets/images/asset_product.png">
+                          </div>
+                          <h5>JK Victory Wheelers type</h5>
+                          <p>265/65 R17, Tubeless</p>
+                          <div class="star_ratting">
+                              <fieldset class="rating">
+                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                              </fieldset>
+                              <span class="floatRight">$320</span>
+                              <div class="clear"></div>
+                              <p>21 Reviews</p>
+                          </div>
+                      </div>
+                  </li>
+                  </ngx-tile>
+                  <ngx-tile NgxCarouselItem>
+                    <li (click)="goToPage('productdetails')">
+                      <div class="inner_div_product">
+                          <div class="product_wrapper">
+                                  <img src="/assets/images/asset_product.png">
+                          </div>
+                          <h5>JK Victory Wheelers type</h5>
+                          <p>265/65 R17, Tubeless</p>
+                          <div class="star_ratting">
+                              <fieldset class="rating">
+                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                              </fieldset>
+                              <span class="floatRight">$320</span>
+                              <div class="clear"></div>
+                              <p>21 Reviews</p>
+                          </div>
+                      </div>
+                  </li>
+                  </ngx-tile>
+                  <ngx-tile NgxCarouselItem>
+                    <li (click)="goToPage('productdetails')">
+                      <div class="inner_div_product">
+                          <div class="product_wrapper">
+                                  <img src="/assets/images/asset_product.png">
+                          </div>
+                          <h5>JK Victory Wheelers type</h5>
+                          <p>265/65 R17, Tubeless</p>
+                          <div class="star_ratting">
+                              <fieldset class="rating">
+                                  <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                  <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                  <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                  <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                  <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                  <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                  <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                  <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                  <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                  <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                              </fieldset>
+                              <span class="floatRight">$320</span>
+                              <div class="clear"></div>
+                              <p>21 Reviews</p>
+                          </div>
+                      </div>
+                  </li>
+                  </ngx-tile>
+                  <button NgxCarouselPrev class='leftRs'>&lt;</button>
+                  <button NgxCarouselNext class='rightRs'>&gt;</button>
+              </ngx-carousel>
+              </div>
+              <hr>
+          </div>
+          <div class="clear"></div>
+      </div>
+  </div>
+</div>
+
+<button #failureModel class="hide" data-toggle="modal" data-target="#failure"></button>
+
+<div class="modal" id="failure">
+    <div class="modal-dialog modal-full">
+        <div class="modal-content login_modal_wrapper">
+                <div class="modal_close" data-dismiss="modal"> × </div>
+           <div class="modal-body quote_modal">
+               <div class="login_modal_content">
+                   <div class="login_modal_inner">
+                    <div class="login_success">
+                        <img src="assets/images/asset_error.png">
+                        <h4>Your Booking is failure</h4>
+                    </div>
+
+                       <div class="row">
+                           <div class="col-md-12 textCenter" style="padding-top:40px;">
+                                <button class="log_btn" data-dismiss="modal">Close</button>
+                           </div>
+                       </div>
+                   </div>
+               </div>
+           </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
--- a/src/app/purchase/purchase-home/purchase-home.component.scss
+++ b/src/app/purchase/purchase-home/purchase-home.component.scss
+.purchase_wrapper{
+    .purchase_content_wrapper{
+        .purchase_filter_section{
+            float: left;
+            width:290px;
+            background: #fff;
+            h5{
+                padding: 20px;
+                margin: 0px;
+                color: #9ba8b7;
+                font-size: 15px;
+            }
+            h6{
+                color: #262626;
+                padding: 15px;
+                margin-top: 10px;
+                margin-bottom: 10px;
+                border-left:8px solid #fef160;
+                padding-top: 0px;
+                padding-bottom: 0px;
+                font-size: 18px;
+                background: url("/assets/images/asset_down_arrow.png");
+                background-repeat: no-repeat;
+                background-position: right 15px top 2px;
+                cursor: pointer;
+                select{
+                    width: 100%;
+                    border:1px solid #929db6;
+                    background: url("/assets/images/asset_down_arrow.png");
+                    background-repeat: no-repeat;
+                    background-position: right 10px top 10px;
+                    -webkit-appearance: none;
+                    -moz-appearance: none;
+                    height:40px;
+                    padding:10px;
+                    margin-bottom: 10px;
+                    &:focus{
+                        outline: none;
+                    }
+                }
+            }
+            ul{
+                margin: 0px;
+                padding:0px;
+                padding-top: 10px;
+                padding-bottom: 10px;
+                li{
+                    list-style: none;
+                    padding-left: 25px;
+                    padding-right: 25px;
+                    margin-bottom: 10px;
+                    .custom_checkbox_filter{
+                        .custom_checkbox {
+                            position: absolute; // take it out of document flow
+                            opacity: 0; // hide it
+                          
+                            & + label {
+                              position: relative;
+                              cursor: pointer;
+                              padding: 0;
+                            }
+                          
+                            // Box.
+                            & + label:before {
+                              content: '';
+                              margin-right: 15px;
+                              display: inline-block;
+                              vertical-align: text-top;
+                              width: 22px;
+                              height: 22px;
+                              background: white;
+                              border:1px solid #898989;
+                              box-shadow: none;
+                              border-radius: 6px;
+                            }
+                          
+                            // Box hover
+                            &:hover + label:before {
+                              background: #2655bf;
+                            }
+                            
+                            // Box focus
+                            &:focus + label:before {
+                                border:1px solid #898989;
+                                box-shadow: none;
+                                border-radius: 6px;
+                            }
+                          
+                            // Box checked
+                            &:checked + label:before {
+                              background: #2655bf;
+                              border:1px solid #898989;
+                              box-shadow: none;
+                            }
+                            
+                            // 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: 5px;
+                              top: 11px;
+                              background: white;
+                              width: 2px;
+                              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);
+                            }
+                          }
+                    }
+                   
+                }
+                .more{
+                    text-align: right;
+                    color: #2655bf;
+                    padding: 15px;
+                    cursor: pointer;
+                }
+
+                .color_select{
+                    padding:15px;
+                    #custom_check_button {
+                        width: 30px;
+                        height: 30px;
+                        border-radius: 0px !important;
+                        overflow: auto;
+                        position: relative;
+                        outline: none;
+                        color: #908d8d;
+                        -webkit-border-radius: 5px !important;
+                        -moz-border-radius: 5px !important;
+                        -ms-border-radius: 5px !important;
+                        -o-border-radius: 5px !important;
+                        display: inline-block;
+                        margin: 4px;
+                    
+                    }
+                    #custom_check_button p {
+                        margin: 0px;
+                        position: absolute;
+                        color: #908d8d;
+                        left: 0px;
+                        right: 0px;
+                        top: 0px;
+                        bottom: 0px;
+                        padding:0px;
+                        cursor: pointer;
+                        img{
+                            width:100%;
+                            height:100%;
+                            object-fit: cover;
+                            object-position: center;
+                            -webkit-border-radius: 5px !important;
+                        -moz-border-radius: 5px !important;
+                        -ms-border-radius: 5px !important;
+                        -o-border-radius: 5px !important;
+                        }
+                    }
+                    #custom_check_button label {
+                        width: 100%;
+                    }
+                    #custom_check_button label span {
+                        text-align: center;
+                        display: block;
+                    }
+                    #custom_check_button label input {
+                        position: absolute;
+                        top: -20px;
+                    }
+                    #custom_check_button input:checked+p {
+                        border:2px solid #262626;
+                        color: #fff;
+                        border-radius: 0px !important;
+                        margin: 0px;
+                        -webkit-border-radius: 5px !important;
+                        -moz-border-radius: 5px !important;
+                        -ms-border-radius: 5px !important;
+                        -o-border-radius: 5px !important;
+                    }
+                }
+            }
+        }
+        .purchase_content_section{
+            float:right;
+            width:100%;
+            margin-left: 10px;
+            background: #fff;
+            padding:20px;
+            .search_list_header{
+                p{
+                    margin:0px;
+                    padding:0px;
+                    font-size: 17px;
+                    height: 40px
+
+                }
+
+                select{
+                    background: url("/assets/images/asset_sort.png"),url("/assets/images/asset_down_arrow.png");
+                    background-repeat: no-repeat;
+                    background-position:left 10px top 10px,right 10px top 10px;
+                    height:40px;
+                    border:none;
+                    font-size: 17px;
+                    -webkit-appearance: none;
+                    -moz-appearance: none;
+                    padding-right: 40px;
+                    padding-left: 40px;
+                    &:focus{
+                        outline: none;
+                    }
+                }
+            }
+            .search_listing_content{
+                width:100%;
+                ul{
+                    margin:0px;
+                    padding:0px;
+                    li{
+                        list-style: none;
+                        padding:10px;
+                        width: calc(100% - 75%) !important;
+                        display: inline-block;
+                        .inner_div_product{
+                            border:1px solid #eeeeee;
+                            min-height: 300px;
+                            padding: 15px;
+                            margin:0 auto;
+                            width:100%;
+                            .product_wrapper{
+                                text-align: center;
+                                padding: 10px;
+                                img{
+                                    height: 180px;
+                                    max-width: 100%;
+                                }
+                            }
+                            h5{
+                                padding:0px;
+                                margin:0px;
+                                color: #424242;
+                                font-size: 16px;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                padding-bottom: 5px;
+                            }
+                            p{
+                                padding:0px;
+                                margin:0px;
+                                color: #a3afbd;
+                                font-size: 14px;
+                                
+                            }
+
+                            .star_ratting{
+                                padding-top: 2px;
+                                span{
+                                    float: right;
+                                    color: #000000;
+                                }
+                                .rating { 
+                                    border: none;
+                                    float: left;
+                                  }
+                                  
+                                  .rating > input { display: none; } 
+                                  .rating > label:before { 
+                                    margin: 2px;
+                                    font-size: 16px;
+                                    font-family: FontAwesome;
+                                    display: inline-block;
+                                    content: "\f005";
+                                  }
+                                  
+                                  .rating > .half:before { 
+                                    content: "\f089";
+                                    position: absolute;
+                                  }
+                                  
+                                  .rating > label { 
+                                    color: #ddd; 
+                                   float: right; 
+                                   margin:0px;
+                                  }
+                                  
+                                  /***** CSS Magic to Highlight Stars on Hover *****/
+                                  
+                                  .rating > input:checked ~ label, /* show gold star when clicked */
+                                  .rating:not(:checked) > label:hover, /* hover current star */
+                                  .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+                                  
+                                  .rating > input:checked + label:hover, /* hover current star when changing rating */
+                                  .rating > input:checked ~ label:hover,
+                                  .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+                                  .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+                            }
+                        }
+                    }
+                }
+            }
+            .pagination{
+                width:100%;
+                ul{
+                    margin:0px;
+                    padding:0px;
+                    width: 100%;
+                    text-align: center;
+                    li{
+                        display: inline-block;
+                        padding:7px;
+                        cursor: pointer;
+                        width: 40px;
+                        height: 40px;
+                        background-position: center !important;
+                        background-repeat: no-repeat !important;
+                        background-size: cover !important;
+                        border-radius: 50%;
+                        margin: 4px;
+                    }
+                    .select{
+                        background-color: #fef160;
+                    }
+                    .prev{
+                        background: url("/assets/images/asset_left.png");
+                        content: none;
+                    }
+                    .next{
+                        background: url("/assets/images/asset_right.png");
+                        content: none;
+                    }
+                }
+            }
+        }
+    }
+
+    .bottom_product_list{
+        background: #fff;
+        position: relative;
+        .leftRs{
+            position: absolute;
+            left:10px;
+            top: 35%;
+            width:50px;
+            height:50px;
+            border-radius: 50px;
+            background: url("/assets/images/asset_left.png");
+            border:none;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            &:focus{
+                outline: none;
+            }
+
+        }
+        .rightRs{
+            position: absolute;
+            right:10px;
+            top: 35%;
+            width:50px;
+            height:50px;
+            border-radius: 50px;
+            background: url("/assets/images/asset_right.png");
+            border:none;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            &:focus{
+                outline: none;
+            }
+
+        }
+        li{
+            list-style: none;
+            padding:10px;
+            width:100%;
+            display: inline-block;  
+            .inner_div_product{
+                border:1px solid #eeeeee;
+                min-height: 300px;
+                padding: 15px;
+                margin:0 auto;
+                width:100%;
+                .product_wrapper{
+                    text-align: center;
+                    padding: 10px;
+                    img{
+                        height: 180px;
+                        max-width:100%;
+                    }
+                }
+                h5{
+                    padding:0px;
+                    margin:0px;
+                    color: #424242;
+                    font-size: 16px;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    padding-bottom: 5px;
+                }
+                p{
+                    padding:0px;
+                    margin:0px;
+                    color: #a3afbd;
+                    font-size: 14px;
+                    
+                }
+
+                .star_ratting{
+                    padding-top: 2px;
+                    span{
+                        float: right;
+                        color: #000000;
+                    }
+                    .rating { 
+                        border: none;
+                        float: left;
+                      }
+                      
+                      .rating > input { display: none; } 
+                      .rating > label:before { 
+                        margin: 2px;
+                        font-size: 16px;
+                        font-family: FontAwesome;
+                        display: inline-block;
+                        content: "\f005";
+                      }
+                      
+                      .rating > .half:before { 
+                        content: "\f089";
+                        position: absolute;
+                      }
+                      
+                      .rating > label { 
+                        color: #ddd; 
+                       float: right; 
+                       margin:0px;
+                      }
+                      
+                      /***** CSS Magic to Highlight Stars on Hover *****/
+                      
+                      .rating > input:checked ~ label, /* show gold star when clicked */
+                      .rating:not(:checked) > label:hover, /* hover current star */
+                      .rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */
+                      
+                      .rating > input:checked + label:hover, /* hover current star when changing rating */
+                      .rating > input:checked ~ label:hover,
+                      .rating > label:hover ~ input:checked ~ label, /* lighten current selection */
+                      .rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
--- a/src/app/purchase/purchase-home/purchase-home.component.spec.ts
+++ b/src/app/purchase/purchase-home/purchase-home.component.spec.ts
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PurchaseHomeComponent } from './purchase-home.component';
+
+describe('PurchaseHomeComponent', () => {
+  let component: PurchaseHomeComponent;
+  let fixture: ComponentFixture<PurchaseHomeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PurchaseHomeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PurchaseHomeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/purchase/purchase-home/purchase-home.component.ts
+++ b/src/app/purchase/purchase-home/purchase-home.component.ts
+import { Component, OnInit, ViewChild,  ElementRef} from '@angular/core';
+import { Router,ActivatedRoute } from '@angular/router';
+import { WebService } from '../../provider/web.service';
+import { Options } from 'ng5-slider';
+import { NgxCarousel } from 'ngx-carousel';
+
+@Component({
+  selector: 'app-purchase-home',
+  templateUrl: './purchase-home.component.html',
+  styleUrls: ['./purchase-home.component.scss']
+})
+export class PurchaseHomeComponent implements OnInit {
+  public carouselTile: NgxCarousel;
+
+  @ViewChild("failureModel") public failureModelRef: ElementRef;
+  
+  constructor(
+    private router        : Router, 
+    private route         : ActivatedRoute,
+    public webService     : WebService
+  ) { }
+
+  value: number = 40;
+  highValue: number = 60;
+  options: Options = {
+    floor: 0,
+    ceil: 100
+  };
+
+  ngOnInit() {
+    this.route.queryParams.subscribe(params => {
+      let payStatus = params['status'];
+
+      if(payStatus && payStatus !=''){
+        if(payStatus == 'failure')
+          this.failureModelRef.nativeElement.click();
+      }
+    });
+    this.unsetProdDetails();
+    this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
+  }
+
+  unsetProdDetails(){
+    this.webService.removeLocalItem('productDetails');
+  }
+
+  goToPage(path,data=null){
+    this.router.navigateByUrl(path,{queryParams:data});
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+  }
+
+  carouselTileLoad(){ return ''; }
+
+}
--- a/src/app/purchase/purchase.module.ts
+++ b/src/app/purchase/purchase.module.ts
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { ProductlistComponent } from './productlist/productlist.component';
 import { ProductdetailsComponent } from './productdetails/productdetails.component';
 import { moduleRouting } from './purchase.routing';
 import { SearchbarComponent } from './searchbar/searchbar.component';
 import { Ng5SliderModule } from 'ng5-slider';
+import { MalihuScrollbarModule } from 'ngx-malihu-scrollbar';
 import { NgxGalleryModule } from 'ngx-gallery';
 import { NgxCarouselModule } from 'ngx-carousel';
 import { CartComponent } from './cart/cart.component';
@@ -16,17 +18,20 @@ import { SummaryComponent } from './summary/summary.component';
 import { TooltipModule } from 'ng2-tooltip-directive';
 import { AddaddressComponent } from './addaddress/addaddress.component';
 import { OrdersuccessComponent } from './ordersuccess/ordersuccess.component';
+import { PurchaseHomeComponent } from './purchase-home/purchase-home.component';


 @NgModule({
-  declarations: [ProductlistComponent, ProductdetailsComponent, SearchbarComponent, CartComponent, OrdersComponent, RatingComponent, TrackComponent, AddressComponent, SummaryComponent, AddaddressComponent, OrdersuccessComponent],
+  declarations: [ProductlistComponent, ProductdetailsComponent, SearchbarComponent, CartComponent, OrdersComponent, RatingComponent, TrackComponent, AddressComponent, SummaryComponent, AddaddressComponent, OrdersuccessComponent, PurchaseHomeComponent],
  imports: [
    CommonModule,
    moduleRouting,
    Ng5SliderModule,
    NgxGalleryModule,
    NgxCarouselModule,
-    TooltipModule
+    ReactiveFormsModule,
+    TooltipModule,
+    MalihuScrollbarModule.forRoot()
  ]
 })
 export class PurchaseModule { }
--- a/src/app/purchase/purchase.routing.ts
+++ b/src/app/purchase/purchase.routing.ts
@@ -10,6 +10,7 @@ import { AddressComponent } from './address/address.component';
 import { SummaryComponent } from './summary/summary.component';
 import { AddaddressComponent } from './addaddress/addaddress.component';
 import { OrdersuccessComponent } from './ordersuccess/ordersuccess.component';
+import { PurchaseHomeComponent } from './purchase-home/purchase-home.component';

 const ModuleRoutes: Routes = [
    { path: 'productlist', component: ProductlistComponent},
@@ -21,7 +22,8 @@ const ModuleRoutes: Routes = [
    { path: 'address', component: AddressComponent},
    { path: 'summary', component: SummaryComponent},
    { path: 'addaddress', component: AddaddressComponent},
-    { path: 'ordersuccess', component: OrdersuccessComponent}
+    { path: 'ordersuccess', component: OrdersuccessComponent},
+    { path: 'purchaseHome', component: PurchaseHomeComponent}

 ];


--- a/src/app/purchase/rating/rating.component.html
+++ b/src/app/purchase/rating/rating.component.html
@@ -4,30 +4,41 @@
        </app-searchbar>
        <div class="ratting_div">
            <div class="row">
-            <div class="col-md-3">
+                <div class="col-md-3" *ngIf="productDetails">
                    <div class="auto_part_container">
-                    <img src="/assets/images/asset_product.png">
+                            <img src="{{imageServer + productDetails.images[0].image}}" onerror="this.src='assets/images/user_avatar.jpg'">
                    </div>
                    <div class="clear"></div>
-                <h3>Apollo Amazer 4G Tubeless 4</h3>
-                <p>Audi Q7</p>
+                    <h3>{{productDetails.product_name}}</h3>
+                    <p>{{productDetails.short_description}}</p>
                </div>
                <div class="col-md-9">
                    <div class="ratting_inner">
+                        <form [formGroup]="rateForm" (ngSubmit)="rateFormSubmit(rateForm.value)">
                            <div class="row">
                                <p>Rate this Product</p>
                                <div class="ratting_star">
                                    <fieldset class="rating">
-                            <input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
-                            <input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
-                            <input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
-                            <input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
-                            <input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
-                            <input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
-                            <input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
-                            <input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
-                            <input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
-                            <input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
+                                        <input type="radio" id="star5" name="rating" value="5" formControlName="rating"/>
+                                        <label class = "full" for="star5" title="Awesome - 5 stars"></label>
+                                        <input type="radio" id="star4half" name="rating" value="4.5" formControlName="rating"/>
+                                        <label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
+                                        <input type="radio" id="star4" name="rating" value="4" formControlName="rating"/>
+                                        <label class = "full" for="star4" title="Pretty good - 4 stars"></label>
+                                        <input type="radio" id="star3half" name="rating" value="3.5" formControlName="rating"/>
+                                        <label class="half" for="star3half" title="Meh - 3.5 stars"></label>
+                                        <input type="radio" id="star3" name="rating" value="3" formControlName="rating"/>
+                                        <label class = "full" for="star3" title="Meh - 3 stars"></label>
+                                        <input type="radio" id="star2half" name="rating" value="2.5" formControlName="rating"/>
+                                        <label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
+                                        <input type="radio" id="star2" name="rating" value="2" formControlName="rating"/>
+                                        <label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
+                                        <input type="radio" id="star1half" name="rating" value="1.5" formControlName="rating" />
+                                        <label class="half" for="star1half" title="Meh - 1.5 stars"></label>
+                                        <input type="radio" id="star1" name="rating" value="1" formControlName="rating"/>
+                                        <label class = "full" for="star1" title="Sucks big time - 1 star"></label>
+                                        <input type="radio" id="starhalf" name="rating" value="0.5" formControlName="rating" />
+                                        <label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
                                    </fieldset>
                                    <div class="clear"></div>
                                </div>
@@ -35,15 +46,29 @@
                            <hr>
                            <div class="row">
                                <p>Give a Title</p>
-                    <input class="title_input" placeholder="Type Here">
+                                <input class="title_input" placeholder="Type Here" formControlName="title"
+                                 [ngClass]="{'input_error': !rateForm.controls['title'].valid && (rateForm.controls['title'].dirty || rateForm.controls['title'].touched || rateFormClick),
+                                            'input_success': rateForm.controls['title'].valid}" (click)="rateFormClick = false">
+                                <div class="s_error" *ngIf="(!rateForm.controls['title'].valid && rateForm.controls['title'].touched) || (!rateForm.controls['title'].valid && rateFormClick)">
+                                    <div class="s_validation" *ngIf="rateForm.controls['title'].hasError('required')">{{errorMsg.errorList.required}} </div>
+                                </div>
                            </div>
                            <hr>
                            <div class="row">
                                <p>Write a Review</p>
-                    <input class="title_input" placeholder="Type Here">
+                                <input class="title_input" placeholder="Type Here" formControlName="description"
+                                 [ngClass]="{'input_error': !rateForm.controls['description'].valid && (rateForm.controls['description'].dirty || rateForm.controls['description'].touched || rateFormClick),
+                                            'input_success': rateForm.controls['description'].valid}" (click)="rateFormClick = false">
+                                <div class="s_error" *ngIf="(!rateForm.controls['description'].valid && rateForm.controls['description'].touched) || (!rateForm.controls['description'].valid && rateFormClick)">
+                                    <div class="s_validation" *ngIf="rateForm.controls['description'].hasError('required')">{{errorMsg.errorList.required}} </div>
+                                </div>
+                            </div>
+                            <div *ngIf="rateFormResponse" class="s_alert" [ngClass]="(rateFormResponse.status == 'success') ? 'alert-success' : 'alert-danger'">
+                                <strong>{{rateFormResponse.message}}<br></strong>
                            </div>
                            <hr>
-                <button class="submit_btn">Submit</button>
+                            <button class="submit_btn" (click)="rateFormClick = true">Submit</button>
+                        </form>
                    </div>
                </div>
            </div>
@@ -448,4 +473,4 @@
            <button NgxCarouselNext class='rightRs'>&gt;</button>
        </ngx-carousel>
    </div>
-  </div>
\ No newline at end of file
+</div>
\ No newline at end of file
--- a/src/app/purchase/rating/rating.component.ts
+++ b/src/app/purchase/rating/rating.component.ts
 import { Component, OnInit } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
+import { FormGroup, FormControl, Validators, ValidationErrors } from '@angular/forms';
+import { ValidationService } from '../../provider/validation.service';
+import { WebService } from '../../provider/web.service';
+import { ImageStorage } from '../../../environments/server.config';
 import { NgxCarousel } from 'ngx-carousel';

 @Component({
@@ -8,18 +12,97 @@ import { NgxCarousel } from 'ngx-carousel';
  styleUrls: ['./rating.component.scss']
 })
 export class RatingComponent implements OnInit {
+  prdt_id:any;
+  loginDetails:any;
+  rateFormClick:boolean;
+  loader:boolean;
+  productDetails:any;
+  imageServer: any;
+  rateFormResponse:any;
+
  public carouselTile: NgxCarousel;
  constructor(
    private router        : Router, 
-    private route         : ActivatedRoute
-  ) { }
-
+    private route         : ActivatedRoute,
+    public errorMsg       : ValidationService,
+    public webService     : WebService
+  ) { 
+    this.rateFormClick = false;
+    this.loader = true;
+    this.imageServer = ImageStorage;
+  }
+  rateForm;
  ngOnInit() {
+    this.route.queryParams.subscribe(params => {
+      this.prdt_id = params['pId'];
+    });
+
+    if(this.prdt_id > 0){
+      this.getProductDetails();
+    }
+
+    this.rateForm = new FormGroup({
+      rating: new FormControl('5'),
+      title: new FormControl('',[Validators.required]),
+      description: new FormControl('',[Validators.required])
+    });
+
+    this.checkUserLogin();
    this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
  }

+  checkUserLogin(){
+    this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+    if(!this.loginDetails){
+      this.goToPage('purchaseHome','');
+    }
+  }
+
+  getProductDetails(){
+    this.loader = true;
+    this.webService.post_data('SingleProductSearch',{'product_id':this.prdt_id}).subscribe(response => {
+      if(response.status == 'success'){
+        this.productDetails = response.data;
+      }else{
+        this.productDetails = false;
+      }
+      this.loader = false;
+    })
+  }
+
+  rateFormSubmit(data){
+    if(this.rateForm.invalid){
+      return false;
+    }
+    data.product_id = this.prdt_id;
+    data.customer_id = this.loginDetails.customer_id;
+    this.loader = true;
+    const This = this;
+    this.webService.post_data('rateProduct',data).subscribe(response => {
+      if(response.status == 'success'){
+        this.rateFormResponse = response;
+        setTimeout( function() {
+          This.rateFormResponse = false;
+        }, 3000);
+      }else{
+        response.status = 'error';
+        response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message;
+
+        this.rateFormResponse = response;
+        setTimeout( function() {
+          This.rateFormResponse = false;
+        }, 3000);
+      }
+    },error => {
+      this.rateFormResponse = {'status':'error','message':this.errorMsg.errorList.req_failure};
+      setTimeout( function() {
+        This.rateFormResponse = false;
+      }, 3000);
+    });
+  }
+
  goToPage(path,data=null){
-    this.router.navigateByUrl(path,{queryParams:data});
+    this.router.navigate([path],{queryParams:  data});
    document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
  }


--- a/src/app/purchase/searchbar/searchbar.component.html
+++ b/src/app/purchase/searchbar/searchbar.component.html
 <div class="purchase_taskbar">
  <div class="purchase_searchbar">
    <div class="purchase_inner_search_bar">
-      <input class="" type="text" placeholder="Search here">
-      <button class="search_btn">Search</button>
+      <input #productSearch type="text" placeholder="Search here" (keyup)="productSearchfun(productSearch.value)">
+      <button class="search_btn" (click)="productSearchFunClick(productSearch.value)">Search</button>
      <div class="clear"></div>
    </div>
+    <div *ngIf="!productArray && productSearch.value != ''" style="text-align: center;">
+      <!-- <img  class="imageSize"  src="assets/images/no_result.png"><br> -->
+      <small>No Data Found</small>
+    </div>
+    <div  *ngIf="productArray && productArray.length > 0" class="nav_bar_search_list">
+      <ul  class="filter-select">
+        <li  class="cpoint" *ngFor="let prdt of productArray" (click)="clickProduct(prdt.product_id)">{{prdt.product_name}}</li>
+      </ul>
+    </div>
  </div>
  <div class="purchase_other">
    <ul>

--- a/src/app/purchase/searchbar/searchbar.component.ts
+++ b/src/app/purchase/searchbar/searchbar.component.ts
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
+import { WebService } from '../../provider/web.service';

 @Component({
  selector: 'app-searchbar',
@@ -8,17 +9,45 @@ import { Router,ActivatedRoute } from '@angular/router';
 })
 export class SearchbarComponent implements OnInit {
  
-  constructor(
-    private router        : Router, 
-    private route         : ActivatedRoute
-  ) { }
+  productArray: any;
+  SingleProductData:any;
+  @ViewChild("productSearch") public productSearchRef: ElementRef;
+  
+  constructor(private router : Router, private route: ActivatedRoute, public webService: WebService) {
+    this.productArray = true;
+  }

  ngOnInit() {
  }

  goToPage(path,data=null){
-    this.router.navigateByUrl(path,{queryParams:data});
+    this.router.navigate([path],{queryParams:  data});
    document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
  }

+  productSearchfun(product){
+    if(product == ''){
+      this.productArray = false;
+      return;
+    }
+    this.webService.post_data('productSearch',{"key":product}).subscribe(response => {
+      if(response.status == 'success'){
+        this.productArray = response.data;
+      } else {
+        this.productArray = false;
+      }
+      console.log(this.productArray);
+    });
+  }
+
+  productSearchFunClick(key){
+      this.productArray = false;
+      this.goToPage('productlist',{"key":key});
+  }
+
+    clickProduct(product_id){
+      this.productArray = false;
+      this.productSearchRef.nativeElement.value = ''; 
+      this.goToPage('productdetails',{"product_id":product_id});
+    }
 }
--- a/src/app/purchase/summary/summary.component.html
+++ b/src/app/purchase/summary/summary.component.html
 <div class="purchase_wrapper">
    <div class="container-fluid">
-      <app-searchbar>
-      </app-searchbar>
+      <div class="loader_overlay" *ngIf="loader"></div>
      <div class="summary_wrapper">
        <h3>Order Summary</h3>
        <div class="summary_wrapper_inner">
          <h4>Product Details</h4>
          <div class="row">
-            <div class="col-md-6">
-              <div class="image_div"></div>
+            <div class="col-md-6" *ngIf="productDetails">
+              <div class="image_div">
+                  <img src="{{(productDetails.images[0] && productDetails.images[0].image)?imageServer + productDetails.images[0].image:''}}" onerror="this.src='assets/images/user_avatar.jpg'">
+              </div>
              <div class="image_detail">
-                <h5>Appolo Amazer Tubeless 4 Wheeler</h5>
-                <p>Audi Q7</p>
+                <h5>{{productDetails.product_name}}</h5>
+                <p>{{productDetails.short_description}}</p>
              </div>
              <div class="clear"></div>
            </div>
            <div class="col-md-6">
-              <h6>
+              <!-- <h6>
                <span class="head">Color</span>
                <span>Black</span>
-              </h6>
+              </h6> -->
            </div>
          </div>
          <hr>
          <h4>Delivery Address</h4>
          <div class="row">
-            <div class="col-md-6">
-                <h2>Loius Morgan <span class="address">(Home)</span><span class="number">+91 996548752</span></h2>
-                <p> Ground Floor, Carnival Infopark, Phase- 2 Kusumagiri PO, Kakkanad, Kochi, Kerala <strong>Pin 682030</strong> </p>
+            <div class="col-md-6" *ngIf="userAddress">
+                <h2>{{userAddress.name}}<span class="address">({{userAddress.address_type === '1'?'Home':'Office'}})</span><span class="number">{{userAddress.phone_no}}</span></h2>
+                <p>{{userAddress.house_no+', '+userAddress.area+', '+userAddress.state+', '+userAddress.city}} 
+                  <!-- <strong>Pin 682030</strong>  -->
+                </p>
            </div>
            <div class="col-md-6">
-                <p>Delivery Expected by Thursday 29 April, 2019</p>
+                <!-- <p>Delivery Expected by Thursday 29 April, 2019</p> -->
              </div>
          </div>
          <hr>
          <h4>Payment Details</h4>
-          <div class="row">
+          <div class="row" *ngIf="prdtData">
            <div class="col-md-6">
                <p class="p0">Quantity </p>
            </div>
            <div class="col-md-6">
-                <p><strong>1</strong></p>
+                <p><strong>{{prdtData.quantity}}</strong></p>
              </div>
          </div>
-          <div class="row">
+          <div class="row" *ngIf="prdtData">
              <div class="col-md-6">
                  <p>Total Amount</p>
              </div>
              <div class="col-md-6">
-                  <p><strong style="font-size: 18px;">$ 399</strong></p>
+                  <p><strong style="font-size: 18px;">$ {{prdtData.total_amount}}</strong></p>
                </div>
            </div>
            <hr>
            <div class="row">
                <div class="col-md-6">
-                    <p>Order Confirmation mail will be sent to your mail ID <a>[email protected]</a> </p>
+                    <p>Order Confirmation mail will be sent to your mail ID <a>{{loginDetails.email}}</a> </p>
                </div>
                <div class="col-md-6">
-                    <button class="continue_btn">Continue</button>
-                    <span tooltip="Tooltip" placement="top" show-delay="500">Tooltip on top</span>
+                    <button class="continue_btn" (click)="paymentButton()">Continue</button>
+                    <!-- <span tooltip="Tooltip" placement="top" show-delay="500">Tooltip on top</span> -->
                    <div class="clear"></div>
                  </div>
              </div>
@@ -67,3 +70,29 @@
      </div>
    </div>
 </div>
+
+<button #failureModel class="hide" data-toggle="modal" data-target="#failure"></button>
+
+<div class="modal" id="failure">
+    <div class="modal-dialog modal-full">
+        <div class="modal-content login_modal_wrapper">
+                <div class="modal_close" data-dismiss="modal"> × </div>
+           <div class="modal-body quote_modal">
+               <div class="login_modal_content">
+                   <div class="login_modal_inner">
+                    <div class="login_success">
+                        <img src="assets/images/asset_error.png">
+                        <h4>Something Went Wrong.. Try Again</h4>
+                    </div>
+
+                       <div class="row">
+                           <div class="col-md-12 textCenter" style="padding-top:40px;">
+                                <button class="log_btn" data-dismiss="modal">Close</button>
+                           </div>
+                       </div>
+                   </div>
+               </div>
+           </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
--- a/src/app/purchase/summary/summary.component.ts
+++ b/src/app/purchase/summary/summary.component.ts
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
+import { WebService } from '../../provider/web.service';
+import { apiConfig } from '../../../environments/server.config';
+import { ImageStorage } from '../../../environments/server.config';

 @Component({
  selector: 'app-summary',
@@ -7,18 +10,95 @@ import { Router,ActivatedRoute } from '@angular/router';
  styleUrls: ['./summary.component.scss']
 })
 export class SummaryComponent implements OnInit {
+  loader:boolean;
+  loginDetails:any;
+  prdtData : any = new Array();
+  product_id : any;
+  userAddress:any;
+  serverUrl: string;
+  productDetails : any;
+  imageServer: any;
+  ref_id : any;
+
+  @ViewChild("failureModel") public failureModelRef: ElementRef;

  constructor(
    private router        : Router, 
-    private route         : ActivatedRoute
-  ) { }
+    private route         : ActivatedRoute,
+    public webService     : WebService
+  ) { 
+    this.loader = true;
+    this.imageServer = ImageStorage;
+    this.serverUrl   = apiConfig;
+  }

  ngOnInit() {
+    this.checkUserLogin();
+    this.checkProductId();
+    this.getUserAddress();
+    this.getProductDetails();
+  }
+
+  checkUserLogin(){
+    this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+    if(!this.loginDetails){
+      this.goToPage('purchaseHome','');
+    }
+  }
+
+  checkProductId(){
+    this.prdtData = JSON.parse(this.webService.getLocalStorageItem('productDetails'));
+  
+    if(this.prdtData && this.prdtData['product_id'] > 0){
+      this.product_id = this.prdtData['product_id'];
+    }else{
+      this.goToPage('purchaseHome','');
+    }
  }
  
+  getUserAddress(){
+    if(!this.loginDetails || !this.loginDetails.customer_id){
+      return false;
+    }
+    this.loader = true;
+    this.webService.post_data('getUserAddressById',{'customer_id':this.loginDetails.customer_id,'address_id':this.prdtData.address_id}).subscribe(response => {
+      if(response.status == 'success'){
+        this.userAddress = response.data;
+      }else{
+        this.userAddress = false;
+      }
+      this.loader = false;
+    })
+  }
+
+  getProductDetails(){
+    this.loader = true;
+    this.webService.post_data('SingleProductSearch',{'product_id':this.product_id}).subscribe(response => {
+      if(response.status == 'success'){
+        this.productDetails = response.data;
+        console.log(this.productDetails)
+      }else{
+        this.productDetails = false;
+      }
+      this.loader = false;
+    })
+  }
+
+  paymentButton(){
+    this.loader = true;
+    this.prdtData.customer_id = this.loginDetails.customer_id;
+    this.webService.post_data('initOrderBooking',{'data':this.prdtData}).subscribe(response => {    
+      if(response.status == 'success'){
+        document.location.href = this.serverUrl+'orderPayNow/'+response.data;
+      }else{
+        this.failureModelRef.nativeElement.click();
+      }
+      this.loader = false;
+    })
+  }

  goToPage(path,data=null){
-    this.router.navigateByUrl(path,{queryParams:data});
+    this.router.navigate([path],{queryParams:  data});
    document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
  }


--- a/src/app/purchase/track/track.component.html
+++ b/src/app/purchase/track/track.component.html
 <div class="purchase_wrapper">
    <div class="container-fluid">
-      <app-searchbar>
-      </app-searchbar>
+      <div class="loader_overlay" *ngIf="loader"></div>
      <div class="purchase_content_wrapper">
          <div class="row">
              <div class="col-md-4">
                <div class="product_gallery">
-                  <div class="product_gallery_inner">
+                  <div class="product_gallery_inner" *ngIf="galleryImages;else nogalleryimage">
                      <ngx-gallery [options]="galleryOptions" [images]="galleryImages"></ngx-gallery>
                  </div>
+                  <ng-template #nogalleryimage>
+                    No Image Found
+                  </ng-template>
                </div>
              </div>
              <div class="col-md-8">
-                  <div class="product_details">
-                    <h1>Apollo Amazer 4G Tubeless 4 Wheeler Tyre  (155/80R13, Tube Less)</h1>
-                    <div class="review" (click)="goToPage('rating')">Write review</div>
+                  <div class="product_details" *ngIf="orderDetails">
+                    <h1>{{orderDetails.product_name}}</h1>
+                    <div class="review" (click)="reviewBtn()">Write review</div>
                    <div class="clear"></div>
-                    <h2>265/65R17, Tube Less</h2>
+                    <h2>{{orderDetails.short_description}}</h2>
                    <div class="others">
-                        <h4><div>Color</div><span>Black</span></h4>
-                        <h4><div>Quantity</div><span>1</span></h4>
+                        <!-- <h4><div>Color</div><span>Black</span></h4> -->
+                        <h4><div>Quantity</div><span>{{orderDetails.quantity}}</span></h4>
                      </div>
                      <div class="row">
                        <div class="col-md-5">
@@ -29,7 +31,7 @@
                            <div class="order_range_details">
                              <span>
                                <h5>Order Confirmed</h5>
-                                <p>Thurs, April 25th 2019</p>
+                                <p>{{orderDetails.datetime | date: "EEE, MMMM dd yyyy"}}</p>
                              </span>
                              <span>
                                  <h5>Packed</h5>
@@ -45,24 +47,23 @@
                        <div class="col-md-7">
                          <div class="order_delivery_details">
                            <div class="order_id">
-                              ORDID145879653
+                              {{orderDetails.format_order_id}}
                            </div>
-                            <div class="order_delivery">
-                              <h4>
-                                Delivered on Thur, April 25
-                              </h4>
-                              <p>
-                                Item has been delivered
-                              </p>
+                            <div class="order_delivery" *ngIf="(( orderDetails.odr_status === '2' || orderDetails.odr_status === '3' || orderDetails.odr_status === '4' ) && orderDetails.expected_delivery != null)">
+                              <h4> Expected Delivery On {{orderDetails.expected_delivery}} </h4>
+                              <p> Item will be delivered </p>
+                            </div>
+                            <div class="order_delivery" *ngIf="(( orderDetails.odr_status === '5' || orderDetails.odr_status === '6' || orderDetails.odr_status === '7' ) && orderDetails.delivered != null)">
+                              <h4> Delivered On {{orderDetails.delivered}} </h4>
+                              <p> Item has been delivered </p>
                            </div>
-
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                            <h4>Total Amount</h4> 
-                            <h3>$ 3,200</h3>
+                            <h3>$ {{orderDetails.amount}}</h3>
                        </div>
                        <div class="col-md-6">
                          <h4>

--- a/src/app/purchase/track/track.component.ts
+++ b/src/app/purchase/track/track.component.ts
 import { Component, OnInit } from '@angular/core';
 import { Router,ActivatedRoute } from '@angular/router';
+import { WebService } from '../../provider/web.service';
 import { NgxGalleryOptions, NgxGalleryImage, NgxGalleryAnimation } from 'ngx-gallery';
 import * as $ from 'jquery';
 import { NgxCarousel } from 'ngx-carousel';
+import { ImageStorage } from '../../../environments/server.config';
 import { Options } from 'ng5-slider';

 interface RangeSliderModel {
@@ -17,95 +19,106 @@ interface RangeSliderModel {
  styleUrls: ['./track.component.scss']
 })
 export class TrackComponent implements OnInit {
-
+  ref_id:any;
  count:any;
+  loginDetails:any;
+  loader:boolean;
+  imageServer: string;
+  orderDetails:any;
+  galleryOptions: NgxGalleryOptions[];
+  galleryImages: NgxGalleryImage[];
+
  public carouselTile: NgxCarousel;
-  constructor(
-    private router        : Router, 
-    private route         : ActivatedRoute
-  ) {
+    constructor(private router        : Router, 
+                private route         : ActivatedRoute,
+                public webService     : WebService){
      this.count = 0;
+      this.loader =true;
+      this.imageServer  = ImageStorage; 
    }
    
-   add(){
-    this.count = this.count + 1;
-  }
+    ngOnInit(): void {
+      this.route.queryParams.subscribe(params => {
+        let payStatus = params['status'];
+        this.ref_id = params['ref'];
  
-  minus(){
-    this.count = this.count - 1;
-    if(this.count < 0){
-      this.count = 0;
+        if(payStatus && payStatus !=''){
+          if(payStatus == 'success'){
+            if(this.ref_id > 0){
+              this.getOrderDetail();
            }
          }
+        }
+      });
+      this.designModule();
+      this.checkUserLogin();
+      this.unsetProdDetails();
+    }

-  verticalSlider2: RangeSliderModel = {
-    minValue: 50,
-    maxValue: 100,
-    options: {
-      floor: 0,
-      ceil: 100,
-      vertical: true
-    }
-  };
-  
-  
-   galleryOptions: NgxGalleryOptions[];
-      galleryImages: NgxGalleryImage[];
-      ngOnInit(): void {
-        this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
+    checkUserLogin(){
+      this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
+      if(!this.loginDetails){
+        this.goToPage('purchaseHome','');
+      }
+    }

-          this.galleryOptions = [
-              {
-                  width: '100%',
-                  height: '570px',
-                  thumbnailsColumns: 4,
-                  imageAnimation: NgxGalleryAnimation.Slide
-              },
-              // max-width 800
-              {
-                  breakpoint: 1440,
-                  width: '100%',
-                  height: '400px',
-                  imagePercent: 80,
-                  thumbnailsPercent: 20,
-                  thumbnailsMargin: 20,
-                  thumbnailMargin: 20
-              },
-              // max-width 400
-              {
-                  breakpoint: 400,
-                  preview: false
+    unsetProdDetails(){
+      this.webService.removeLocalItem('productDetails');
    }
-          ];

-          this.galleryImages = [
-              {
-                  small: 'assets/images/tyre_shot1.png',
-                  medium: 'assets/images/tyre_shot1.png',
-                  big: 'assets/images/tyre_shot1.png'
-              },
-              {
-                small: 'assets/images/tyre_shot2.png',
-                medium: 'assets/images/tyre_shot2.png',
-                big: 'assets/images/tyre_shot2.png'
-            },
-            {
-              small: 'assets/images/tyre_shot3.png',
-              medium: 'assets/images/tyre_shot3.png',
-              big: 'assets/images/tyre_shot3.png'
-          },
-          {
-            small: 'assets/images/tyre_shot4.png',
-            medium: 'assets/images/tyre_shot4.png',
-            big: 'assets/images/tyre_shot4.png'
+    getOrderDetail(){
+      if(this.ref_id <= 0){
+        this.goToPage('purchaseHome','');
+      }
+      this.loader = true;
+      this.webService.post_data('getOrderDetail',{'ref_id':this.ref_id}).subscribe(response => {
+        if(response.status == 'success'){
+          let image: string = '';
+          let imageArr: any[] = new Array();
+          const thisObj = this;
+          this.orderDetails = response.data;
+          if(this.orderDetails.images.length > 0){
+            thisObj.orderDetails.images.forEach(function (data) {
+              image = thisObj.imageServer + data.image;
+              imageArr.push({small: image,medium: image,big: image});
+            });
+          }else{
+            image = thisObj.imageServer +'assets/images/no_image_text.png';
+            imageArr.push({small: image,medium: image,big: image});
+          }
+          this.galleryImages = imageArr;
+        }else{
+          this.orderDetails = false;
+          this.goToPage('purchaseHome','');
+        }
+        this.loader = false;
+      });
    }

-          ];
+    reviewBtn(){
+      if(this.orderDetails.product_id <= 0){
+        this.goToPage('purchaseHome','');
      }
+      this.goToPage('rating',{"pId":this.orderDetails.product_id});
+    }
+  
    goToPage(path,data=null){
-      this.router.navigateByUrl(path,{queryParams:data});
+      this.router.navigate([path],{queryParams:  data});
      document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
    }
+
    carouselTileLoad(){ return ''; }
+    add(){this.count = this.count + 1;}
+    minus(){ this.count = this.count - 1; if(this.count < 0){ this.count = 0; }}
+    verticalSlider2: RangeSliderModel = { minValue: 50, maxValue: 100, options: { floor: 0, ceil: 100, vertical: true } };
+
+    designModule(){
+      this.carouselTile = {grid: {xs: 1, sm: 2 , md: 4, lg: 8, all: 0},slide: 1, speed: 400,point: { visible: false },load: 2, touch: true, easing: 'ease'}
+      this.galleryOptions = [
+        { width: '100%', height: '570px', thumbnailsColumns: 4, imageAnimation: NgxGalleryAnimation.Slide },
+        { breakpoint: 1440, width: '100%', height: '400px', imagePercent: 80, thumbnailsPercent: 20, thumbnailsMargin: 20, thumbnailMargin: 20 },
+        { breakpoint: 400, preview: false }
+      ];
+    }
+  }
  
\ No newline at end of file
-}
--- a/src/environments/server.config.ts
+++ b/src/environments/server.config.ts
 let apiConfigUrl,imageStorageUrl;

 // // Localhost
-// apiConfigUrl = 'http://localhost/dcarfixers/Webservices/';
-// imageStorageUrl = 'http://localhost/dcarfixers/';
+apiConfigUrl = 'http://localhost/dcarfixers/Webservices/';
+imageStorageUrl = 'http://localhost/dcarfixers/';

 // // Techlabz
-apiConfigUrl = 'http://techlabz.in/dcarfixers/Webservices/';
-imageStorageUrl = 'http://techlabz.in/dcarfixers/';
+// apiConfigUrl = 'https://techlabz.in/dcarfixers/Webservices/';
+// imageStorageUrl = 'https://techlabz.in/dcarfixers/';

 // carfixxers.com
 // apiConfigUrl = 'https://carfixxers.com/admin/Webservices/';

--- a/src/styles.scss
+++ b/src/styles.scss
@@ -224,6 +224,10 @@ body {
    background: #D94350;
 }

+.background_transparent{
+    background-color: transparent !important;
+}
+
 .tile {
    box-shadow: none !important;
 }
@@ -620,6 +624,17 @@ bs-datepicker-container{
    }
 }

+.confirm_modal_content{
+    width: 300px;
+    background: #fff;
+    border-radius: 10px;
+    margin: 0 auto;
+    padding: 15px;
+    button{
+        margin:5px;
+    }
+}
+
 .custom_checkbox_stack{
    position: absolute;
    top:0px;
@@ -817,3 +832,14 @@ bs-datepicker-container{
    }
  }

+  .cpoint{
+    cursor: pointer !important;
+  }
+
+  .disable_btn{
+    pointer-events: none;
+    cursor: default;
+    text-decoration: none;
+    background-color: #7e7f7fc9 !important;
+  }
+