@extends('user.layouts.template')

  @section('styles')
      <style>
          .tm--expanded-hd .content_header.overlapping+.contentboxed,
          .tm--tall-hd .contentheader.overlapping+.content_boxed {
              margin-top: calc((var(--nf-header-expand-height) + 1rem) * -1) !important;
              z-index: 99;
          }

          #modalWindow {
              position: absolute;
              width: 400px;
              height: 300px;
              background-color: #fff;
              border: 1px solid #ccc;
              border-radius: 8px;
              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
              resize: both;
              min-width: 200px;
              min-height: 150px;
              overflow: hidden;
              cursor: default;
          }

          #modalWindow.fullscreen {
              width: 100vw;
              height: 100vh;
              top: 0;
              left: 0;
              margin: 0;
              border-radius: 0;
          }

          .headerone {
              background-color: var(--nf-header-bg);
              color: white;
              padding: 10px;
              display: flex;
              justify-content: end;
              align-items: center;
              cursor: move;
          }

          .controlBtn {
              background: transparent;
              border: none;
              color: white;
              font-size: 18px;
              cursor: pointer;
          }

          #modalBody {
              padding: 20px;
              font-size: 14px;
              height: calc(100% - 40px);
              /* Subtract header height */
              overflow: auto;
          }

          /* Minimized style */
          .minimized {
              display: none;
          }

          .modal-content {
              position: relative;
              display: flex;
              flex-direction: column;
              width: 100%;
              color: #1a1d21b7 !important;
              pointer-events: auto;
              background-color: var(--bs-modal-bg);
              background-clip: padding-box;
              border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
              border-radius: var(--bs-modal-border-radius);
              box-shadow: var(--bs-modal-box-shadow);
              outline: 0;
          }

          .backdrop {
              position: fixed;
              top: 0;
              left: 0;
              width: 100vw;
              height: 100vh;
              background: rgba(0, 0, 0, 0.5);
              /* black semi-transparent */
              display: none;
              /* hidden by default */
              z-index: 999;
              /* make sure it's behind modal */
          }

          #modalWindow {
              position: fixed;
              z-index: 1000;
              /* above backdrop */
          }

          .mn--min header .header__inner .brand-wrap .logo-sm {
              display: block;
          }

          .mn--max header .header__inner .brand-wrap .logo-sm {
              display: none;
          }

          .mn--max .header__brand {
              padding: 5px;
          }

          .modal-backdrop.fade.show {
              background: transparent !important;
              display: none !important;
          }

          /*---Subscription--*/


          .pricing-banner {
              /* background-size: contain!important;
                                                                                                                                                                                                                                                    height: 50vh !important;
                                                                                                                                                                                                                                                    display: flex;
                                                                                                                                                                                                                                                    width: 100%;
                                                                                                                                                                                                                                                    align-items: center;
                                                                                                                                                                                                                                                    background: url(/frontend/assets/img/top-bg-image.png) !important;
                                                                                                                                                                                                                                                    padding-bottom: 120px; */
              background-size: cover;
              height: 60vh !important;
              display: flex;
              align-items: center;
              padding-bottom: 100px;
              position: relative;
              width: 100%;
              background-image: linear-gradient(#e35205, transparent),
                  url('/frontend/assets/img/Vector-bg.png') !important;
          }

          .img-box {
              margin-left: 30px;
              display: flex;
              align-items: center;
          }

          .img-box img {
              padding: 10px;
              width: 50px;
          }

          .img-box h6 {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: white;
              font-size: 15px;
              text-align: justify;
              margin: 0px;
          }

          .card {
              padding: 0px;
              border-radius: none !important;
              border: 1px solid #66666633 !important;
          }


          .pricing-table {
              margin-top: -130px;

          }

          .pricing-table .table {
              border: 1px solid #66666633 !important;

          }

          .pricing-table .table tbody td {
              border: 1px solid #66666633 !important;
              padding: 20px;
          }

          .pricing-table .table thead th {
              border: 1px solid #66666633 !important;
              padding: 20px;
          }

          .price h2 {
              font-family: 'SF Pro Display';
              font-weight: 700;
              color: black;
              font-size: 60px;
              text-align: justify;
              margin: 0px;
          }

          .price h3 {
              font-family: 'SF Pro Display';
              font-weight: 500;
              color: black;
              font-size: 32px;
              text-align: justify;
              margin: 0px;
          }


          .price p {
              font-family: 'SF Pro Display';
              font-weight: 500;
              color: black;
              font-size: 15px;
              text-align: justify;
              margin: 0px;
          }

          .price h6 {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: black;
              font-size: 14px;
              text-align: center;
              margin: 0px 0px 15px 0px;
          }

          .currency {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: black;
              font-size: 20px;
              text-align: center;
              margin: 0px;
              padding: 5px;
              position: relative;
              bottom: 25px;
          }

          .start-free-btn {
              background: #e35205;
              padding: 6px 10px;
              border-radius: 5px;
              font-size: 15px;
              color: white;
              text-decoration: none;
              font-family: 'SF Pro Display';
              font-weight: 400;
              position: relative;
              left: 20px;
          }

          .start-free-btn-bt {
              background: transparent;
              padding: 5px 10px;
              border-radius: 5px;
              font-size: 15px;
              color: black;
              text-decoration: underline;
              font-family: 'SF Pro Display';
              font-weight: 400;
          }

          .start-free-btn-bt:hover {
              background: transparent;
              padding: 5px 10px;
              border-radius: 5px;
              font-size: 15px;
              color: black;
              text-decoration: none;
              font-family: 'SF Pro Display';
              font-weight: 400;
          }

          .parameter-title {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: 313131;
              font-size: 22px;
              text-align: center;
              margin: 0px;
              padding-top: 25px !important;


          }

          .price-check .ri-check-fill {
              font-size: 40px;
              font-weight: 800;
          }

          .price-check .ri-circle-fill {
              font-size: 15px;
              font-weight: 800;
              position: relative;
              top: 20px;
          }

          /*----Popup----*/

          .pop-head {
              color: #252525;
              font-family: 'SF Pro Display';
              font-weight: 700;
              font-size: 34px;
              line-height: 1.3;
              text-align: left;
          }

          .pop-box-head {
              color: #de5220 !important;
              font-family: 'SF Pro Display';
              font-weight: 700;
              font-size: 24px;
              line-height: 1.3;
              text-align: left;
          }

          .pop-para {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: #252525;
              font-size: 15px;
              text-align: left;
          }

          .box-one {
              border: 1px solid #1a181853;
              border-radius: 10px;
              padding: 20px;
          }


          .price-box {
              display: flex;
              gap: 20px;
          }

          .box-one {
              background: white;
          }

          .box-one:hover {
              border: 1px solid #252525;
              border-radius: 10px;
              box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
              transition: 0.5s;
          }

          .price-box-list {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: #252525;
              font-size: 15px;
              text-align: left;
              margin: 0;
              padding: 0;
          }

          .price-box-list li {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: #252525;
              font-size: 15px;
              text-align: left;
              list-style-type: none;
              margin: 0;
              padding: 0;
              border-bottom: 1px solid grey;
              padding-bottom: 5px;
              padding-top: 5px;
          }

          .price-box-list li::before {
              font-family: 'remixicon';
              content: '\eb81';
              /* Unicode for ri-eye-line */
              font-size: 20px;
              color: #555;
              cursor: pointer;
              padding: 5px;

          }


          .payment-box {
              border: 1px solid #1a181853;
              border-radius: 10px;
              padding: 15px 20px;
              background: white;
          }


          .payment-box:hover {
              border: 1px solid #252525;
              border-radius: 10px;
              box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
              transition: 0.5s;
          }

          .pay-bt {
              float: right;
          }

          .price-right-box {
              background: white !important;
              border: 1px solid #de5208 !important;
              padding: 20px 20px !important;
              border-top-right-radius: 10px;
          }

          .get-str-btn {

              background: #28a745;
              padding: 6px 10px;
              border-radius: 5px;
              font-size: 15px;
              color: white;
              text-decoration: none;
              font-family: 'SF Pro Display';
              font-weight: 400;
          }

          .get-str-btn-lg {
              background: #28a745;
              padding: 10px 12px;
              border-radius: 5px;
              font-size: 15px;
              color: white;
              text-decoration: none;
              font-family: 'SF Pro Display';
              font-weight: 400;
              position: relative;
              left: 15px;
          }


          /*----Checkout---*/


          .pop-head {
              color: #252525;
              font-family: 'SF Pro Display';
              font-weight: 700;
              font-size: 34px;
              line-height: 1.3;
              text-align: left;
          }

          .pop-box-head {
              color: #de5220;
              font-family: 'SF Pro Display';
              font-weight: 700;
              font-size: 24px;
              line-height: 1.3;
              text-align: left;
          }

          .pop-para {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: #252525;
              font-size: 15px;
              text-align: left;
          }

          .box-one {
              border: 1px solid #1a181853;
              border-radius: 10px;
              padding: 20px;
          }


          .price-box {
              display: flex;
              gap: 20px;
          }

          .box-one {
              background: white;
          }

          .box-one:hover {
              border: 1px solid #252525;
              border-radius: 10px;
              box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
              transition: 0.5s;
          }

          .price-box-list {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: #252525;
              font-size: 15px;
              text-align: left;
              margin: 0;
              padding: 0;
          }

          .price-box-list li {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: #252525;
              font-size: 15px;
              text-align: left;
              list-style-type: none;
              margin: 0;
              padding: 0;
              border-bottom: 1px solid grey;
              padding-bottom: 5px;
              padding-top: 5px;
          }

          .price-box-list li::before {
              font-family: 'remixicon';
              content: '\eb81';
              /* Unicode for ri-eye-line */
              font-size: 20px;
              color: #555;
              cursor: pointer;
              padding: 5px;

          }


          .payment-box {
              border: 1px solid #1a181853;
              border-radius: 10px;
              padding: 15px 20px;
              background: white;
          }


          .payment-box:hover {
              border: 1px solid #252525;
              border-radius: 10px;
              box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
              transition: 0.5s;
          }

          .pay-bt {
              float: right;
          }

          .price-right-box {
              background: white;
              border: 1px solid #de5208;
              padding: 20px 20px !important;
              height: auto;
              border-radius: 5px;

          }

          .pricebox-left {
              padding: 50px;
          }

          .get-str-btn {

              background: #28a745;
              padding: 5px 10px;
              border-radius: 5px;
              font-size: 15px;
              color: white;
              text-decoration: none;
              font-family: 'SF Pro Display';
              font-weight: 400;
          }


          /*-----Pricing Table-----*/


          /*---Pricing Page----*/

          .pricing-banner {
              /* background-size: contain!important;
                                                                                                                                                                                                                                                    height: 50vh !important;
                                                                                                                                                                                                                                                    display: flex;
                                                                                                                                                                                                                                                    width: 100%;
                                                                                                                                                                                                                                                    align-items: center;
                                                                                                                                                                                                                                                    background: url(/frontend/assets/img/top-bg-image.png) !important;
                                                                                                                                                                                                                                                    padding-bottom: 120px; */
              background-size: cover;
              height: 50vh !important;
              display: flex;
              align-items: center;
              padding-bottom: 100px;
              position: relative;
              width: 100%;
              background-image: linear-gradient(#e35205, transparent),
                  url('/frontend/assets/img/Vector-bg.png') !important;
          }

          .img-box {
              margin-left: 30px;
              display: flex;
              align-items: center;
          }

          .img-box img {
              padding: 10px;
              width: 50px;
          }

          .img-box h6 {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: white;
              font-size: 15px;
              text-align: justify;
              margin: 0px;
          }

          .card {
              padding: 0px;
              border-radius: none !important;
              border: 1px solid #66666633 !important;
          }


          .pricing-table {
              margin-top: 10px;
              padding-bottom: 50px;

          }

          .pricing-table .table {
              border: 1px solid #66666633 !important;

          }

          .pricing-table .table tbody td {
              border: 1px solid #66666633 !important;
              padding: 20px;
          }

          .pricing-table .table thead th {
              border: 1px solid #66666633 !important;
              padding: 10px;
          }

          .price h2 {
              font-family: 'SF Pro Display';
              font-weight: 700;
              color: black;
              font-size: 60px;
              text-align: justify;
              margin: 0px;
          }

          .price h3 {
              font-family: 'SF Pro Display';
              font-weight: 500;
              color: black;
              font-size: 32px;
              text-align: justify;
              margin: 0px;
          }


          .price p {
              font-family: 'SF Pro Display';
              font-weight: 500;
              color: black;
              font-size: 15px;
              text-align: justify;
              margin: 0px;
          }

          .price h6 {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: black;
              font-size: 14px;
              text-align: center;
              margin: 0px 0px 15px 0px;
          }

          .currency {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: black;
              font-size: 20px;
              text-align: center;
              margin: 0px;
              padding: 5px;
              position: relative;
              bottom: 25px;
          }

          .duration {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: black;
              font-size: 15px;
              text-align: center;
              margin: 0px;
              padding: 5px;
              position: relative;
              bottom: 0px;
          }

          .start-free-btn {
              background: #e35205;
              padding: 10px 12px;
              border-radius: 5px;
              font-size: 15px;
              color: white;
              text-decoration: none;
              font-family: 'SF Pro Display';
              font-weight: 400;
          }

          .start-free-btn-bt {
              background: transparent;
              padding: 5px 30px;
              border-radius: 5px;
              font-size: 15px;
              color: black;
              text-decoration: underline;
              font-family: 'SF Pro Display';
              font-weight: 400;
          }

          .start-free-btn-bt:hover {
              background: transparent;
              padding: 5px 40px !important;
              border-radius: 5px;
              font-size: 15px;
              color: black;
              text-decoration: none;
              font-family: 'SF Pro Display';
              font-weight: 400;
          }

          .parameter-title {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: 313131;
              font-size: 22px;
              text-align: center;
              margin: 0px;
              padding-top: 25px !important;


          }

          .price-check .ri-check-fill {
              font-size: 40px;
              font-weight: 800;
          }

          .price-check .ri-circle-fill {
              font-size: 15px;
              font-weight: 800;
              position: relative;
              top: 20px;
          }

          /*----Popup----*/

          .pop-head {
              color: #252525;
              font-family: 'SF Pro Display';
              font-weight: 700;
              font-size: 34px;
              line-height: 1.3;
              text-align: left;
          }

          .pop-box-head {
              color: #de5220;
              font-family: 'SF Pro Display';
              font-weight: 700;
              font-size: 24px;
              line-height: 1.3;
              text-align: left;
          }

          .pop-para {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: #252525;
              font-size: 15px;
              text-align: left;
          }

          .box-one {
              border: 1px solid #1a181853;
              border-radius: 10px;
              padding: 20px;
          }


          .price-box {
              display: flex;
              gap: 20px;
          }

          .box-one {
              background: white;
          }

          .box-one:hover {
              border: 1px solid #252525;
              border-radius: 10px;
              box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
              transition: 0.5s;
          }

          .price-box-list {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: #252525;
              font-size: 15px;
              text-align: left;
              margin: 0;
              padding: 0;
          }

          .price-box-list li {
              font-family: 'SF Pro Display';
              font-weight: 400;
              color: #252525;
              font-size: 15px;
              text-align: left;
              list-style-type: none;
              margin: 0;
              padding: 0;
              border-bottom: 1px solid grey;
              padding-bottom: 5px;
              padding-top: 5px;
          }

          .price-box-list li::before {
              font-family: 'remixicon';
              content: '\eb81';
              /* Unicode for ri-eye-line */
              font-size: 20px;
              color: #555;
              cursor: pointer;
              padding: 5px;

          }


          .payment-box {
              border: 1px solid #1a181853;
              border-radius: 10px;
              padding: 15px 20px;
              background: white;
          }


          .payment-box:hover {
              border: 1px solid #252525;
              border-radius: 10px;
              box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
              transition: 0.5s;
          }

          .pay-bt {
              float: right;
          }

          .price-right-box {

              background: #ffff;
              border: 1px solid #de5208;
              padding: 20px 20px !important;
              border-top-right-radius: 10px;
          }

          .get-str-btn {

              background: #57a805;
              padding: 5px 5px;
              border-radius: 5px;
              font-size: 10px;
              color: white;
              text-decoration: none;
              font-family: 'SF Pro Display';
              font-weight: 400;
          }

          .contact-btn {
              background: transparent;
              padding: 10px 20px;
              border-radius: 5px;
              font-size: 15px;
              color: #E35205;
              text-decoration: none;
              font-family: 'SF Pro Display';
              font-weight: 400;
              border: 1px solid #E35205;
          }

          .contact-btn:hover {
              background: #E35205;
              padding: 10px 20px;
              border-radius: 5px;
              font-size: 15px;
              color: white;
              text-decoration: none;
              font-family: 'SF Pro Display';
              font-weight: 400;
              border: 1px solid #E35205;
          }

          .box-one.selected {
              border-color: #e35205;
              background: #e3530535;
              box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
          }

          .payment-box.selected {
              border-color: #e35205;
              background: #e3530535;
              box-shadow: 0 4px 10px rgba(0, 123, 255, 0.2);
          }

          .price-card {
              height: auto;
              width: 100%;
              border: none;
              box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
              padding: 20px;
              border-radius: 0.375rem;
          }

          .price-card-premium {
              height: auto;
              width: 100%;
              border: 2px solid #57a805 !important;
              box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
              padding: 40px 20px !important;
              margin: -20px;
              z-index: 999;
              border-radius: 0.375rem;

          }

          .price-card-one {
              height: auto;
              width: 100%;
              border: none;
              box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
              padding: 20px 10px;
          }

          .feature-list {
              list-style-type: none;
              margin-top: 90px;
          }

          .feature-list li {
              font-size: 15px;
              color: #75868f;
              margin-bottom: 14px;
          }

          .feature-list-pro {
              list-style-type: none;
              margin-top: 20px;
          }

          .feature-list-pro li {
              font-size: 15px;
              color: #75868f;
              margin-bottom: 11px;
          }

          .drop-btn {
              background: none;
              border: none;
              font-size: 15px;
              color: #75868f;
              margin-bottom: 0px;
              padding: 0px;
              line-height: 0;
          }

          .accept-img {
              width: 25px;
          }

          .dropdown-menu li {
              margin: 0px;
          }

          .ri-arrow-down-s-line {
              font-size: 24px;
              position: relative;
              top: 5px;
              left: 5px;
          }

          /*---Rippon---*/


          .ribbon {
              height: 75px;
              overflow: hidden;
              position: absolute;
              right: -5px;
              text-align: right;
              top: -5px;
              width: 75px;
              z-index: 1
          }

          .ribbon span {
              background: #e53f50;
              box-shadow: 0 3px 10px -3px rgba(var(--bs-box-shadow-color), 1);
              color: #fff;
              display: block;
              font-size: 10px;
              font-weight: 700;
              line-height: 20px;
              position: absolute;
              right: -21px;
              text-align: center;
              text-transform: uppercase;
              top: 19px;
              transform: rotate(45deg);
              width: 100px
          }

          .ribbon span:before {
              border-bottom: 3px solid transparent;
              border-left: 3px solid #e53f50;
              border-right: 3px solid transparent;
              border-top: 3px solid #e53f50;
              content: "";
              left: 0;
              position: absolute;
              top: 100%;
              z-index: -1
          }

          .ribbon span:after {
              border-bottom: 3px solid transparent;
              border-left: 3px solid transparent;
              border-right: 3px solid #e53f50;
              border-top: 3px solid #e53f50;
              content: "";
              position: absolute;
              right: 0;
              top: 100%;
              z-index: -1
          }

          /*----Dropdown---*/
          .sidebar-icons {
              width: 40px;
          }

          .mainnav__inner .mainnav__menu .nav-link {
              padding: 0px 0px !important;
          }

          .mn--max .header__brand {
              padding-inline-start: calc(.625rem + var(--nf-mainnav-link-padding-x));
              max-width: var(--nf-mainnav-max-width);
              width: var(--nf-mainnav-max-width);
              will-change: max-width;
              background-color: var(--nf-mainnav-bg);
          }

          .mn--min .header__brand {
              justify-content: center;
              max-width: var(--nf-mainnav-min-width);
              padding-inline-start: 0;
              transition: max-width var(--nf-mainnav-min-transition-duration) var(--nf-mainnav-min-transition-timing);
              width: 100%;
              background: white;
          }

          button#openModalBtn {
              background: none;
          }

          i.demo-psi-gear.fs-1 {
              font-size: 20px !important;
          }


          /*---Accordion---*/

          .accordion-button {
              padding: 0px;
              font-size: 15px;
              color: #75868f;
              margin-bottom: 13px;
          }

          .accordion-button:not(.collapsed) {
              background-color: rgb(117 134 143 / 0%) !important;
          }

          .accordion-button::after {
              flex-shrink: 0;
              width: var(--bs-accordion-btn-icon-width);
              height: var(--bs-accordion-btn-icon-width);
              margin-left: 10px;
              margin-top: 4px;
              content: "";
              background-image: var(--bs-accordion-btn-icon);
              background-repeat: no-repeat;
              background-size: var(--bs-accordion-btn-icon-width);
              transition: var(--bs-accordion-btn-icon-transition);

          }

          .accor-list {
              list-style-type: none;
              padding: 10px 10px;
              margin: 0;
              background: white;
              box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

          }

          .accor-list li {
              padding: 0px;
              margin: 0px;

          }

          .accordion-list-link {
              text-decoration: none;
              color: #75868f;
              padding: 0px;
              line-height: 2.2;
          }

          .toggle-btn {
              display: flex;
              justify-content: space-between;
              align-items: center;
              transition: background-color 0.3s;

          }

          .toggle-btn.active-toggle {
              background-color: #E35205;
              /* Light blue for active */
              color: white;
          }

          .toggle-hea {
              font-size: 18px;
          }

          .toggle-para {
              font-size: 15px;
          }

          .modal {
              background: black;
          }
      </style>
  @endsection

  @section('content')
      <div class="content__boxed">
          <div class="content__wrap">

              <div id="page-titl">
                Subscription Management <i class="ri-arrow-right-s-line"></i> My Subscription
            </div>
              <div class="row py-3">

                  <div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12">
                      <div class="price-right-box"
                          style="
    background: #ffff;
    border: 1px solid #de5208;
    padding: 10px 10px !important;
    border-top-right-radius: 10px;">




                          <div class="price-drop d-flex justify-content-between align-items-center">

                              <h1 class="pop-box-head text-left py-2 mx-2" style="font-size:16px;color:#de5220!important;">
                                  Subscription</h1>


                          </div>






                          <div class="price-drop d-flex justify-content-between align-items-center px-2 py-2">


                              <span style="color: #252525; font-weight:500;font-size:14px;">Package Start Date</span>
                              <span
                                  style="color: #252525; font-weight:700;font-size:14px;">{{ $data['package_start_date'] }}</span>

                          </div>
                          @if (date('Y-m-d', strtotime(Auth::user()->valid_trial_date)) > date('Y-m-d'))
                              <div class="price-drop d-flex justify-content-between align-items-center px-2 py-2">


                                  <span style="color: #252525; font-weight:500;font-size:14px;">Package End Date</span>
                                  <span
                                      style="color: #252525; font-weight:700;font-size:14px;">{{ $data['package_end_date'] }}</span>

                              </div>
                          @elseif(date('Y-m-d', strtotime(Auth::user()->valid_trial_date)) < date('Y-m-d'))
                              <div class="price-drop d-flex justify-content-between align-items-center px-2 py-2">


                                  <span style="color: #252525; font-weight:500;font-size:14px;">Grace Period Date</span>
                                  <span
                                      style="color: #252525; font-weight:700;font-size:14px;">{{ $data['grace_period_date'] }}</span>

                              </div>
                          @endif
                          <div class="price-drop d-flex justify-content-between align-items-center px-2 py-2">

                              <span style="color: #252525; font-weight:500;font-size:14px;">Pricing</span>
                              <span style="color: #252525; font-weight:700;font-size:14px;">NA</span>

                          </div>

                          <div class="price-drop d-flex justify-content-between align-items-center px-2 py-2">

                              <span style="color: #252525; font-weight:500;font-size:14px;">Last Billing</span>
                              <span style="color: #252525; font-weight:700;font-size:14px;">NA</span>

                          </div>

                          <div class="price-drop d-flex justify-content-between align-items-center px-2 py-2">

                              <span style="color: #252525; font-weight:500;font-size:14px;">Payment Status</span>
                              <span style="color: #252525; font-weight:700;font-size:14px;">Trial</span>

                          </div>

                          <hr>

                          <!-- <div class="price-drop d-flex justify-content-between align-items-center px-2 py-2">

                              <span style="color: #252525; font-weight:500; font-size:14px;">Expiration</span>
                              <span style="color: #252525; font-weight:700;font-size:14px;">{{ $data['remaining_days'] }} Days Left</span>

                          </div> -->

                          <div class="price-drop d-flex justify-content-between align-items-center px-2 py-2">

                              <span style="color: #252525; font-weight:700;font-size:14px;">Auto-Renewal</span>

                              <span style="color: #252525; font-weight:500;font-size:14px;">
                                  <div class="form-check form-switch">
                                      <input class="form-check-input" type="checkbox" id="autoRenew" checked>

                                  </div>
                              </span>


                          </div>
                          <div class="price-drop d-flex justify-content-between align-items-center px-2 py-2">

                              <span style="color: #252525; font-weight:500;font-size:14px;"><a href="#"
                                      data-bs-toggle="modal" data-bs-target="#cancelsub">Cancel Subscription</a></span>


                          </div>



                          <!-- Cancel Subscription Modal -->
                          <div class="modal fade" id="cancelsub" tabindex="-1" aria-labelledby="exampleModalLabel"
                              aria-hidden="true" style="background:#00000094;">
                              <div class="modal-dialog">
                                  <div class="modal-content text-center">
                                      <div class="modal-header">
                                          <h1 class="modal-title w-100" id="exampleModalLabel"
                                              style="font-size:20px;color:#de5220!important;text-align:center;">
                                              Cancel Subscription</h1>
                                          <!-- <button type="button" class="btn-close" data-bs-dismiss="modal"
                                              aria-label="Close"></button> -->
                                      </div>
                                      <div class="modal-body">
                                          <p style="color: #252525; font-weight: 500; font-size: 14px; text-align:center;">
                                              If you cancel your subscription, you willl retain access until the end of
                                              your billing period.</p>
                                      </div>
                                      <div class="modal-footer">
                                          <button type="button" class="btn btn-primary fs-6"
                                              data-bs-dismiss="modal">Back</button>
                                          <button type="button" class="btn btn-secondary fs-6">Confirm
                                              cancellation</button>
                                      </div>
                                  </div>
                              </div>
                          </div>

                      </div>


                  </div>

                  <div class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12">



                      <section class="pricing-table">
                          <div class="container">
                              <div class="row">

                                  <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-12">

                                      <div class="p-card d-flex w-100 justify-content-center">

                                          <!----First-->
                                          <div class="card price-card-one">
                                              <div class="price text-center">

                                                  <h3 class="text-center"
                                                      style="font-weight:600; color:#75868f; position: relative; top:50px;">
                                                      My Features</h3>

                                              </div>
                                              <ul class="feature-list">
                                                  <li>Number of Properties</li>
                                                  <li>Number of Users</li>


                                                  <!---Accordion---->
                                                  <div class="accordion accordion-flush" id="accordionFlushExample">

                                                      <div class="accordion-item p-0">
                                                          <h2 class="accordion-header p-0">
                                                              <button class="accordion-button collapsed" type="button"
                                                                  data-bs-toggle="collapse"
                                                                  data-bs-target="#flush-collapseOne" aria-expanded="false"
                                                                  aria-controls="flush-collapseOne">
                                                                  Interactive Visual Stacking Plan
                                                              </button>
                                                          </h2>
                                                          <div id="flush-collapseOne" class="accordion-collapse collapse"
                                                              data-bs-parent="#accordionFlushExample">
                                                              <ul class="accor-list">
                                                                  <li><a href="#" class="accordion-list-link">Floor
                                                                          & Unit-Level
                                                                          Details</a></li>
                                                                  <li><a href="#"
                                                                          class="accordion-list-link">Filters</a>
                                                                  </li>
                                                                  <li><a href="#" class="accordion-list-link">Lease
                                                                          Expiry Timeline
                                                                          &
                                                                          Tracker</a></li>
                                                                  <li><a href="#"
                                                                          class="accordion-list-link">Time-Based
                                                                          Views</a>
                                                                  </li>
                                                              </ul>
                                                          </div>
                                                      </div>


                                                  </div>
                                                  <!---End Accordion---->

                                                  <li>Annotations and Notes</li>

                                                  <li>Contact Management</li>

                                                  <li>Exporting Stacking Plan</li>

                                                  <li>File Cabinet</li>

                                                  <li>Multi Property View</li>



                                                  <!---Accordion---->
                                                  <div class="accordion accordion-flush" id="accordionFlushExample">

                                                      <div class="accordion-item p-0">
                                                          <h2 class="accordion-header p-0">
                                                              <button class="accordion-button collapsed" type="button"
                                                                  data-bs-toggle="collapse"
                                                                  data-bs-target="#flush-collapseThree"
                                                                  aria-expanded="false" aria-controls="flush-collapseOne">
                                                                  Dashboard
                                                              </button>
                                                          </h2>
                                                          <div id="flush-collapseThree"
                                                              class="accordion-collapse collapse"
                                                              data-bs-parent="#accordionFlushExample">
                                                              <ul class="accor-list">
                                                                  <li><a href="#" class="accordion-list-link">KPI
                                                                          Dashboard</a></li>
                                                                  <li><a href="#"
                                                                          class="accordion-list-link">Predefined
                                                                          Reports</a>
                                                                  </li>
                                                                  <li><a href="#" class="accordion-list-link">Custom
                                                                          Reports</a>
                                                                  </li>
                                                                  <li><a href="#"
                                                                          class="accordion-list-link">Drill-Down
                                                                          Dashboard</a>
                                                                  </li>
                                                                  <li><a href="#"
                                                                          class="accordion-list-link">Property-Level
                                                                          Benchmarking</a></li>
                                                              </ul>
                                                          </div>
                                                      </div>


                                                  </div>
                                                  <!---End Accordion---->

                                                  <li>Alerts & Notifications</li>

                                                  <!------Dropdown---->
                                                  <!-- <li>
                                                                                                                                                                                                                                                                                    <div class="dropdown">

                                                                                                                                                                                                                                                                                        <button class="drop-btn dropdown-toggle" data-bs-toggle="dropdown">
                                                                                                                                                                                                                                                                                            User & Role Management <i class="ri-arrow-down-s-line"></i>
                                                                                                                                                                                                                                                                                        </button>
                                                                                                                                                                                                                                                                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                                                                                                                                                                                                                                                            <li><a class="dropdown-item" href="#">Role-Based Access</a></li>
                                                                                                                                                                                                                                                                                        </ul>
                                                                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                                                                </li> -->
                                                  <!-----End Dropdown-->

                                                  <!---Accordion---->
                                                  <div class="accordion accordion-flush" id="accordionFlushExample">

                                                      <div class="accordion-item p-0">
                                                          <h2 class="accordion-header p-0">
                                                              <button class="accordion-button collapsed" type="button"
                                                                  data-bs-toggle="collapse"
                                                                  data-bs-target="#flush-collapseTwo"
                                                                  aria-expanded="false" aria-controls="flush-collapseOne">
                                                                  User & Role Management
                                                              </button>
                                                          </h2>
                                                          <div id="flush-collapseTwo" class="accordion-collapse collapse"
                                                              data-bs-parent="#accordionFlushExample">
                                                              <ul class="accor-list">
                                                                  <li><a href="#"
                                                                          class="accordion-list-link">Role-Based
                                                                          Access</a>
                                                                  </li>
                                                              </ul>
                                                          </div>
                                                      </div>


                                                  </div>
                                                  <!---End Accordion---->


                                                  <li>CRM & ERP Integration</li>

                                                  <li>Website Embed (Widget)</li>

                                                  <li>Custom Stacking Plan</li>

                                                  <li>Video Tour Integration</li>

                                                  <li>Dedicated Account Manager</li>

                                                  <li>Support</li>

                                                  <li>Data Import / Sync</li>


                                              </ul>

                                          </div>

                                          <!---Second-->
                                          @foreach ($plan as $pn)
                                              <div
                                                  class="card price-card">
                                                                                                    <div class="price text-center">


                                                      <p class="text-center py-1">{{ $pn->plan_name }}</p>
                                                      <h2 class="text-center"
                                                          style="color:#24447f;">
                                                          <span class="currency"
                                                              style="color:#24447f;;">$</span><span
                                                              class="mon_per">{{ $pn->monthly_offer_price }}</span><span
                                                              class="duration">/mo</span>
                                                      </h2>
                                                      <!-- <h6 class="py-0">/user/month billed annually</h6> -->


                                                  </div>


                                                  <ul class="feature-list-pro text-center">
                                                      <li>{{ $pn->number_of_property }}</li>
                                                      <li>{{ $pn->number_of_team_members }}</li>
                                                      <li><img src="/frontend/assets/img/Accept.png"
                                                              class="img-fluid accept-img"></li>
                                                      <li><img src="/frontend/assets/img/Accept.png"
                                                              class="img-fluid accept-img"></li>
                                                      <li><img src="/frontend/assets/img/Accept.png"
                                                              class="img-fluid accept-img"></li>
                                                      <li><img src="/frontend/assets/img/Accept.png"
                                                              class="img-fluid accept-img"></li>
                                                      <li><img src="/frontend/assets/img/Accept.png"
                                                              class="img-fluid accept-img"></li>
                                                      <li><img src="/frontend/assets/img/Accept.png"
                                                              class="img-fluid accept-img"></li>
                                                      <li><img src="/frontend/assets/img/Accept.png"
                                                              class="img-fluid accept-img"></li>
                                                      <li>{{ $pn->description }}</li>
                                                      <li><img src="/frontend/assets/img/Accept.png"
                                                              class="img-fluid accept-img"></li>
                                                      <li><img src="/frontend/assets/img/Decline.png"
                                                              class="img-fluid accept-img"></li>
                                                      <li><img src="/frontend/assets/img/Decline.png"
                                                              class="img-fluid accept-img"></li>
                                                      <li><img src="/frontend/assets/img/Decline.png"
                                                              class="img-fluid accept-img"></li>
                                                      <li><img src="/frontend/assets/img/Decline.png"
                                                              class="img-fluid accept-img"></li>
                                                      <li><img src="/frontend/assets/img/Decline.png"
                                                              class="img-fluid accept-img"></li>
                                                      <li><img src="/frontend/assets/img/Decline.png"
                                                              class="img-fluid accept-img"></li>
                                                      <li><img src="/frontend/assets/img/Decline.png"
                                                              class="img-fluid accept-img"></li>


                                                  </ul>

                                                  <div class="price text-center">

                                                      <div class="getst py-3">

                                                          <a href="signup.html" class="get-str-btn-lg">Renew</a>

                                                          <a class="start-free-btn" data-bs-toggle="modal"
                                                              data-bs-target="#startfree">
                                                              Upgrade</a>

                                                      </div>

                                                  </div>



                                              </div>
                                          @endforeach
                                          <!---Third---->
                                          {{--         <div class="card price-card-premium">

                                              <div class="ribbon"><span>POPULAR</span></div>

                                              <div class="price text-center">

                                                  <p class="text-center py-1">Premium</p>
                                                  <h2 class="text-center" style="color:#57a805;"><span class="currency"
                                                          style="color:#57a805;">$</span>99 <span
                                                          class="duration">/mo</span></h2>
                                                  <!-- <h6 class="py-0">/user/month billed annually</h6> -->


                                              </div>

                                              <ul class="feature-list-pro text-center">
                                                  <li>Unlimited</li>
                                                  <li>Unlimited</li>
                                                  <li><img src="/frontend/assets/img/Accept.png"
                                                          class="img-fluid accept-img"></li>
                                                  <li><img src="/frontend/assets/img/Accept.png"
                                                          class="img-fluid accept-img"></li>
                                                  <li><img src="/frontend/assets/img/Accept.png"
                                                          class="img-fluid accept-img"></li>
                                                  <li><img src="/frontend/assets/img/Accept.png"
                                                          class="img-fluid accept-img"></li>
                                                  <li><img src="/frontend/assets/img/Accept.png"
                                                          class="img-fluid accept-img"></li>
                                                  <li><img src="/frontend/assets/img/Accept.png"
                                                          class="img-fluid accept-img"></li>
                                                  <li><img src="/frontend/assets/img/Accept.png"
                                                          class="img-fluid accept-img"></li>
                                                  <li>Advanced</li>
                                                  <li><img src="/frontend/assets/img/Accept.png"
                                                          class="img-fluid accept-img"></li>
                                                  <li><img src="/frontend/assets/img/Accept.png"
                                                          class="img-fluid accept-img"></li>
                                                  <li><img src="/frontend/assets/img/Accept.png"
                                                          class="img-fluid accept-img"></li>
                                                  <li><img src="/frontend/assets/img/Accept.png"
                                                          class="img-fluid accept-img"></li>
                                                  <li><img src="/frontend/assets/img/Accept.png"
                                                          class="img-fluid accept-img"></li>
                                                  <li><img src="/frontend/assets/img/Accept.png"
                                                          class="img-fluid accept-img"></li>
                                                  <li><img src="/frontend/assets/img/Accept.png"
                                                          class="img-fluid accept-img"></li>
                                                  <li><img src="/frontend/assets/img/Accept.png"
                                                          class="img-fluid accept-img"></li>

                                              </ul>

                                              <div class="price text-center">

                                                  <div class="getst py-3">


                                                      <a class="start-free-btn">
                                                          Upgrade</a>

                                                  </div>

                                              </div>


                                          </div>
 --}}




                                      </div>

                                  </div>
                              </div>
                          </div>
                      </section>

                  </div>

              </div>






          </div>
      </div>
  @endsection