@extends('user.layouts.template')

  @section('styles')
      <style>
          .sidebar-icons {
              width: 40px;
          }

          .mainnav__inner .mainnav__menu .nav-link {
              padding: 10px 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;
          }

          /*----Form Wizard-----*/



          .flex-fill {
              display: flex;
              align-items: top;
              gap: 20px;
          }

          .form-content-wizard {
              width: 100%;
              position: relative;
              top: -20px;
          }

          #_dm-customWizardSteps {
              width: 100%;
          }

          .nav-underline .nav-link {
              text-align: left;
          }

          #_dm-customWizardSteps a {
              display: grid;
              align-items: center;
              padding: 5px;
              text-align: center;

          }

          a.nav-link.menu-btn img {
              margin: 0 36%;
          }

          a.nav-link.menu-btn span {
              font-size: 11px;
          }


          #_dm-customWizardSteps {
              width: 100%;
              background: #dadce13a;
              padding: 10px;
              height: fit-content;
              justify-content: center !important;
          }

          #_dm-customWizardSteps a span {
              padding: 5px;
          }

          #_dm-customWizardSteps {
              width: 100%;
              background: #dadce13a;
              padding: 10px;

          }

          .add-item {
              display: flex;
              align-items: center;
          }


          .big-icon {
              font-size: 30px;
              /* Change this to your desired size */
              margin-left: 5px;
          }

          .form-select {
              color: #b3bcc1 !important;
          }

          .form-control {
              color: #b3bcc1 !important;
          }

          .header {

              position: sticky !important;
              top: 0 !important;
              z-index: 99999 !important;
          }

          .dropdown-toggle::after {
              display: none;
              margin-left: .255em;
              vertical-align: .255em;
              content: "";
              border-top: .3em solid;
              border-right: .3em solid transparent;
              border-bottom: 0;
              border-left: .3em solid transparent;
          }

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

          .root:not(.mn--min) .mainnav__menu>.nav-item.has-sub>.mininav-content {
              border-inline-start: 1px dashed var(--nf-mainnav-submenu-dashed-color);
              margin-inline-start: var(--nf-mainnav-submenu-dashed-margin) !important;
              padding: 10px 25px !important;
              margin: 0px 20px !important;
          }

          .tm--expanded-hd .content__header,
          .tm--tall-hd .content__header {


              background-size: cover;
              height: auto !important;
              display: flex;
              flex-direction: column;
              position: relative;
              width: 100%;
              background-image: linear-gradient(var(--nf-header-bg), transparent),
                  url('assets/img/Vector-bg.png') !important;

          }

          /* .tm--expanded-hd .content__header,
                                                                                                          .tm--tall-hd .content__header::before {
                                                                                                             
                                                                                                            background-color: var(--nf-header-bg);
                                                                                                          } */

          .menu-content {
              display: none;
          }

          .menu-content.active {
              display: block;
          }

          .nav-underline .nav-link.active,
          .nav-underline .show>.nav-link {
              font-weight: 700;
              color: var(--bs-nav-underline-link-active-color);
              border-bottom-color: var(--nf-header-bg) !important;
          }

          .card-body {
              padding: 20px !important;
          }

          .row-div {
              display: flex;
              display: -webkit-box;
          }

          .stepform-header {
              position: sticky;
              top: 50px;
              z-index: 999;
              background: rgb(247, 247, 247) !important;
              width: 100%;
              padding: 0px;
              margin: 0px;
              border-radius: 5px;
          }

          #page-tit {
              position: sticky;
              top: 50px;
              z-index: 99999 !important;
              overflow: auto;

          }

          .page-title {
              color: white !important;
              font-size: 26px;
          }

          /* .form-content-wizard {
                                                                                                        width: 100%;
                                                                                                        z-index: -1!important;
                                                                                                    } */

          .row-div input {
              width: 80%;
          }

          .row-div select {
              width: 80%;
          }

          .row-div textarea {
              width: 80%;
          }

          .form-content-wizard {
              width: 100%;
              padding: 0px 0px 0px 0px;
          }
      </style>

      <style>
          #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;

          }

          /*---Data Tables----*/

          table.dataTable {
              position: relative;
              top: 10px;
              margin-bottom: 30px;
              font-size: 14px;
              text-align: center;
          }

          table.dataTable tbody th,
          table.dataTable tbody td {
              padding: 15px 10px;
              text-align: center;
          }

          table.dataTable>thead>tr>th,
          table.dataTable>thead>tr>td {
              padding: 10px;
              border-bottom: 1px solid rgba(0, 0, 0, 0.3);
              text-align: center;
          }
      </style>
  @endsection

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

              <div id="page-tit">


              </div>


              <div class="row">
                  <div class="col-12">
                      <div class="page-title-box">
                          <div class="le-tit">
                          </div>

                          <div class="right-tit d-flex">


                              <!-- <form class="input-group">
                                                                                                                                    <input class="form-control border-end-0 border" type="text" value="Search"
                                                                                                                                        id="example-search-input">
                                                                                                                                    <span class="input-group-append">
                                                                                                                                        <button
                                                                                                                                            class="btn btn-outline-secondary bg-white border-start-0 border ms-n3 sea-bar"
                                                                                                                                            type="button">
                                                                                                                                            <i class="ri-search-line"></i>
                                                                                                                                        </button>
                                                                                                                                    </span>
                                                                                                                                </form> -->
                              {{-- 
                              <form class="input-group select-grp-top w-10">
                                  <span class="input-group-text"><i class="ri-sort-asc"></i></span>
                                  <select class="form-select">

                                      <option selected>Sort by</option>
                                      <option value="1">Role Name</option>


                                  </select>
                              </form> --}}
                          </div>



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

              <div class="row">
                  <div class="col-md-12 col-xl-12">
                      <div class="card" id="tab-content-pagination">
                          <div class="card-body">
                              <div class="row align-items-center justify-content-between">

                                  <div class="col-12">

                                      <table class="table table-hover align-middle price-table" id="user-list-table">
                                          <thead>
                                              <tr>

                                                  <th scope="col">Invoice ID</th>
                                                  <th scope="col">Plan</th>
                                                  <th scope="col">Price</th>
                                                  <th scope="col">Last Billing</th>
                                                  <th scope="col">Payment Status</th>
                                                  <th scope="col">Invoice</th>


                                              </tr>
                                          </thead>
                                          <tbody>
                                              @foreach ($payment as $pt)
                                                                                                    <tr>
                                                      <td scope="row">#{{ $pt->id }}</td>
                                                      <td scope="row">{{ $pname }} </td>
                                                      <td scope="row">${{ $pt->amount }}</td>
                                                      <td scope="row">{{ date('M-d-Y', strtotime($pt->created_at)) }}
                                                      </td>
                                                      <td scope="row">Paid</td>


                                                      <td scope="row">
                                                          <div class="plan-btn justify-content-center d-flex p-0">


                                                              <a href="/invoice/download/{{ $pt->id }}"
                                                                  class="btn btn-success mx-2"><i
                                                                      class="ri-download-2-line"></i> </a>
                                                          </div>
                                                      </td>




                                                  </tr>
                                              @endforeach



                                          </tbody>
                                      </table>



                                  </div>
                                  <!-- end col -->

                              </div>
                              <!-- end row-->
                          </div>
                          <!-- end card body -->
                      </div>
                      <!-- end card -->
                  </div>
                  <!-- end col -->

              </div>





              <div class="card">

                  <!-- Custom style form wizard -->
                  <div class="align-content-stretch">







                  </div>
                  <!-- END : Custom style form wizard -->

              </div>




          </div>
      </div>
  @endsection