@extends('layouts.app')

@section('content')


<div class="layout-wrapper layout-content-navbar">
    <div class="layout-container">
      <!-- Menu -->

      @include('users.includes.sidebar')
      <!-- / Menu -->

      <!-- Layout container -->
      <div class="layout-page">
        <!-- Navbar -->

        @include('users.includes.header')

        <!-- / Navbar -->

        <!-- Content wrapper -->
        <div class="content-wrapper">
            <!-- Content -->

            <div class="container-xxl flex-grow-1 container-p-y">
              <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Home /</span> Subscription History</h4>

              

              <!-- Bootstrap Table with Caption -->
              <div class="card">
                <h5 class="card-header">Subscription List</h5>
                <div class="" style="padding-left: 10px">
                  <button
                          type="button"
                          class="btn btn-primary"
                          data-bs-toggle="modal"
                          data-bs-target="#backDropModal"
                        >
                          Subscribe Now (Digital Copy)
                        </button>
                          
                </div>
                <div class="table-responsive text-nowrap">
                  <table class="table">
                    {{-- <caption class="ms-4">
                      List of Projects
                    </caption> --}}
                    <thead>
                      <tr>
                        <th>S/N</th>
                        <th>Description</th>
                        <th>Amount</th>
                        <th>Start</th>
                        <th>End</th>
                        {{-- <th>Status</th> --}}
                        <th>Payment Status</th>
                        <th>Date Subscribed</th>
                      </tr>
                    </thead>
                    <tbody>
                        @if(!empty($subscribes) && $subscribes->count())
                            @php $sn=1;   @endphp
                            @foreach($subscribes as $key => $value)
                                <tr>
                                    <td>{{$sn}}</td>
                                    <td><i class="fab fa-angular fa-lg text-danger me-3"></i> <strong>{{$value->subscription->description}}</strong></td>
                                    <td>
                                        {{$value->subscription->price}}
                                    </td>
                                    <td>{{date('M-Y', strtotime($value->start_date))}}</td>
                                    <td>
                                        {{date('M-Y', strtotime($value->end_date))}}
                                    </td>
                                    {{-- <td>
                                        @if(strtotime($value->end_date) <= time())
                                            <span class="badge bg-label-primary me-1">Active</span>
                                        @else
                                            <span class="badge bg-label-danger me-1">Expired</span>
                                        @endif
                                    </td> --}}
                                    <td>
                                      @if($value->payment_status == 1)
                                          <span class="badge bg-label-success me-1">Payment Recieved</span>
                                      @else
                                          <span class="badge bg-label-primary me-1">Payment Pending</span>
                                      @endif
                                  </td>
                                    <td>
                                        {{date('d M Y', strtotime($value->created_at))}}
                                    </td>
                                </tr>
                                @php $sn++;   @endphp
                            @endforeach
                        @else
                            <tr>
                              <td colspan="7" style="text-align: center">
                                No data yet
                              </td>
                            </tr>
                        @endif
                    </tbody>
                  </table>
                  {!! $subscribes->links() !!}
                </div>
              </div>
              <!-- Bootstrap Table with Caption -->

              
            </div>
            <!-- / Content -->

            <!-- Footer -->
            @include('users.includes.footer')
            <!-- / Footer -->

            <div class="content-backdrop fade"></div>
        </div>
        <!-- Content wrapper -->
      </div>
      <!-- / Layout page -->
    </div>

    <!-- Overlay -->
    <div class="layout-overlay layout-menu-toggle"></div>
</div>

<div class="modal fade" id="backDropModal" data-bs-backdrop="static" tabindex="-1">
  <div class="modal-dialog">
    <form class="modal-content" id="paymentForm" method="POST" action="{{route('paynow')}}">
      @csrf
      <div class="modal-header">
        <h5 class="modal-title" id="backDropModalTitle">Subscription</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        
        <div class="row">
          <div class="col mb-3">
            <label for="nameBackdrop" class="form-label">Subscription Plan</label>
            <select class="form-control" name="subscription_plan" id="subscription_plan">
              <option value=""> Select </option>
              @if (isset($subscription_plan))
                @foreach ($subscription_plan as $value)
                  <option value="{{$value->id}}">{{$value->description}} - ${{$value->price}}</option>
                @endforeach
              @endif
            </select>
          </div>
        </div>
        <div class="row">
          <div class="col mb-3">
            <label for="nameBackdrop" class="form-label">Email Address</label>
            <input type="email" value="{{Auth::user()->email}}" id="email-address" class="form-control" readonly>
          </div>
        </div>
      </div>
      
      <div class="modal-footer">
        <button type="submit" class="btn btn-outline-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="submit" class="btn btn-primary">Pay Now</button>
      </div>
    </form>
  </div>
</div>


<script src="https://js.paystack.co/v1/inline.js"></script>
<script>
  // const paymentForm = document.getElementById('paymentForm');
  // paymentForm.addEventListener("submit", payWithPaystack, false);
  function payWithPaystack(amount, email, id, ref) {
    // e.preventDefault();

    // var pos = $("#subscription_plan").val()
    // var ty = pos.split('|');
    // var amount  = ty[1];
    let handler = PaystackPop.setup({
      key: 'pk_test_adcdd71619f7ad9a107696bd40330d5f4d64d9ef', // Replace with your public key
      email: email,
      amount: amount * 100,
      ref: ref,
      // label: "Optional string that replaces customer email"
      onClose: function(){
        alert('Window closed.');
      },
      callback: function(response){
        let message = 'Payment complete! Reference: ' + response.reference;
        alert(message);
      }
    });

    handler.openIframe();
  }

</script>

@if (isset($subscription))
  <script>
    payWithPaystack({{$subscription->price}}, "{{Auth::user()->email}}", {{$subscription->id}}, "{{$payment_id}}")
  </script>
@else
  no show
@endif
@endsection