@extends('user.layouts.template')

  @section('styles')
      <style>




      </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 mt-2">



                          <div class="price-drop d-flex justify-content-between align-items-center">
                              <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->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;">Plan </span>
                              <span style="color: #252525; font-weight:700;">{{ $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;">Price</span>
                              <span
                                  style="color: #252525; font-weight:700;">${{ $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:700;">Last Billing</span>
                              <span style="color: #252525; font-weight:700;">{{ $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:700; font-size:16px;">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:700;">Payment Status</span>
                              <span style="color: #252525; font-weight:700;">{{ $data['payment_status'] }}</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;">Plan Start Date</span>
                              <span style="color: #252525; font-weight:700;">{{ $data['last_billing_date'] }}</span>

                          </div>
                          @if (date('Y-m-d', strtotime(Auth::user()->valid_plan_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:700;">Plan End Date</span>
                                  <span style="color: #252525; font-weight:700;">{{ $data['valid_plan_date'] }}</span>

                              </div>
                          @elseif(date('Y-m-d', strtotime(Auth::user()->valid_plan_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:700;">Grace Period End Date</span>
                                  <span style="color: #252525; font-weight:700;">{{ $data['grace_plan_date'] }}</span>

                              </div>
                          @endif


                      </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;">
                                                      Features</h3>

                                              </div>
                                              <ul class="feature-list" style="margin-top: 110px;">
                                                  <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;

                  }

                    ul.feature-list-pro.text-center{
            position:relative!important;
            right:15px!important;
          }
              </style>




          </div>
      </div>
  @endsection