@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: 34px 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-tit">


          </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;">-</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;">Package End Date</span>
                          <span style="color: #252525; font-weight:700;font-size:14px;">-</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;">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>

                      <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;">Next 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;">Expiration</span>
                          <span style="color: #252525; font-weight:700;font-size:14px;">{{ $data['remaining_days'] }} Days Left</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>
                                      <form>
                                          <input type="text" class="form-control" placeholder="Reason">
                                      </form>
                                  </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" style="background:white!important;border:1px solid #eb3b04!important;">Confirm cancellation</button>
                                  </div>
                              </div>
                          </div>
                      </div>

                  </div>


                  <div class="price-right-box mt-2" style="
                                background: #ffff;
                                border: 1px solid #de5208;
                                padding: 10px 10px !important;
                                border-top-right-radius: 10px;">

                      <div class="renewal-box d-flex align-items-top justify-content-between">

                          <div class="renewal-left">
                              <h1 class="pop-box-head text-left py-2 mb-0" style="font-size:16px;color:#de5220!important;">Auto-Renewal
                              </h1>
                              <p class="mb-2" style="color: #252525; font-weight:500;font-size:14px;">Automatically
                                  Renew subscription</p>

                              <div class="d-flex justify-content-between">
                                  <div class="first">
                                      <span style="color: #252525; font-weight:500;font-size:12px;">Next
                                          Billing</span><br>
                                      <span style="color: #252525; font-weight:700;font-size:12px;">August
                                          29,2025</span>
                                  </div>
                                  <div class="first">
                                      <span style="color: #252525; font-weight:500;font-size:12px;">Status</span><br>
                                      <span style="color: #252525; font-weight:700;font-size:12px;">Auto-Renewing</span>


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

                          <div class="renewal-rig p-2">
                              <div class="form-check form-switch">
                                  <input class="form-check-input" type="checkbox" id="autoRenew" checked="">

                              </div>
                          </div>


                      </div>


                  </div>


                  <div class="price-right-box mt-2" style="
                                background: #ffff;
                                border: 1px solid #de5208;
                                padding: 10px 10px !important;
                                border-top-right-radius: 10px;">

                      <div class="renewal-box d-flex align-items-top justify-content-between">

                          <div class="renewal-left">
                              <h1 class="pop-box-head text-left py-2 mb-0" style="font-size:16px;color:#de5220!important;">Cancel Subscription
                              </h1>
                              <p class="mb-2" style="color: #252525; font-weight:500;font-size:12px;">If you cancel your
                                  subscription, you willl retain access until the end of your billing period.</p>

                              <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>

                          <div class="renewal-rig p-2">

                          </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" id="pay-now">Pay Now</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>

  <script>
  const toggle = document.getElementById('autoRenew');
  const button = document.getElementById('pay-now');

  toggle.addEventListener('change', function () {
    if (this.checked) {
      button.style.display = "none"; 
    } else {
      button.style.display = "inline-block"; 
    }
  });
</script>

  @endsection