@extends('user.layouts.template')

  @section('styles')
  <style>




  </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 mt-2" 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 mx-2">
                          <h1 class="pop-box-head text-left py-2" style="font-size:15px;">My plan</h1>

                          <!-- <a href="#" class="get-str-btn"><i class="ri-file-text-fill"></i> </a> -->
                          <span style="color: #252525; font-weight:700;"><a
                                  href="/invoice/download/{{ $payment[0]->id }}">View Invoice</a></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;">Plan </span>
                          <span style="color: #252525; font-weight:700;font-size:14px;">{{ $data['current_plan_name'] }}</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;">Price</span>
                          <span
                              style="color: #252525; font-weight:700;font-size:14px;">${{ $data['current_plan_cost'] }}/{{ $data['current_plan_duration'] }}</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;">{{ $data['last_billing_date'] }}</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
                                  style="color: #252525; font-weight:400; font-size:12px">{{ $data['remaining_days'] }}
                                  Days Left</span></span>

                          @if ($data['remaining_days'] <= 45) <a href="#" class="start-free-btn text-center">Upgrade</a>
                              @else
                              <a href="#" class="get-str-btn w-70 text-center">Renew Plan</a>
                              @endif
                      </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;">{{ $data['payment_status'] }}</span>

                      </div><br><br>





                  </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:black; position: relative; top:50px;">
                                                  Features</h3>

                                          </div>
                                          <ul class="feature-list" style="margin-top: 110px; color:black!important;">
                                              <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-premium">
                                                                                    <div class="price text-center">

                                               <span class="badge bg-success">Current
                                                  Plan</span>                                              <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>


          <style>
          .price-card {
              padding: 45px !important;
          }

          .price-card-premium {
              top: -10px !important;

          }
          </style>




      </div>
  </div>
  @endsection