@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> Hard Copy History</h4>

              

              <!-- Bootstrap Table with Caption -->
              <div class="card">
                <h5 class="card-header">Hardcopy Order List</h5>
                <div class="" style="padding-left: 10px">
                  <button
                          type="button"
                          class="btn btn-primary"
                          data-bs-toggle="modal"
                          data-bs-target="#exLargeModal"
                        >
                          Subscribe Now (Hard 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>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><a href="{{url('user/hardcopy/'.$value->id)}}">Bulk purchase with reference <strong>{{$value->payment_id}}</strong></a></td>
                                    <td>
                                      {{$value->total}}
                                     </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="exLargeModal" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-xl" role="document">
    <form class="modal-content" id="paymentForm" method="POST" action="{{route('zpaynow')}}">
      @csrf
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel4">Hardcopy Order </h3>
        
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <h5>Add items to order below</h5>
        <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 id="form-placeholder"></div>
            <hr/>
            <div class="row">
              <div class="col-4 text-center" style="font-weight:900">Total</div>
              <div class="col-4" style="font-weight:900" id="totalP">0</div>
            </div>
            <button id="btn-add" style="width: 90px" class="btn btn-primary">Add</button>
        </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($total))
  <script>
    payWithPaystack({{$total}}, "{{Auth::user()->email}}", 2, "{{$payment_id}}")
  </script>
@else
  no show
@endif

<script>
    function appendUserRow(id, user) {
            var html = "<div id=\"opt-row." + id + "\" class=\"form-group row\"  style=\"padding-bottom: 10px\">\n" +
                "            <div class=\"col-4\">\n" +
                "                <select required class=\"form-control\" id=\"edition." + id + "\" name=\"edition[]\" >\n"+
                "                   <option value=\"\"> Select Edition </option> \n" +
                                    @foreach ($contents as $content)
                                    "<option value=\"{{$content->id}}|{{$content->hard_up}}\"> {{$content->name}} ({{$content->level->name}}) - {{$content->hard_up}}/per copy </option> \n" +
                                    @endforeach
                
                "                </select>\n" +
                "                 <input type=\"hidden\" name=\"unit_price[]\" id=\"unit_price\" value=\"{{$content->hard_up}}\"> \n"+
                "            </div>\n" +
                
                "            <div class=\"col-4\">\n" +
                "                <input required type=\"number\" value=\"10\" class=\"form-control\" min=\"10\" onblur=\"totalZ()\" id=\"quantity." + id + "\" name=\"quantity[]\" placeholder=\"Quantity\" >\n" +
                "            </div>\n" +
                
                "             <button onclick=\"delRow(" + id + ")\"  style=\"width: 100px\" class=\"btn btn-danger\">Delete</button>\n" +
                "        </div>";
            $("#form-placeholder").append(html);
        }

function delRow(id) {
    var element = document.getElementById("opt-row." + id);
    element.parentNode.removeChild(element);
    totalZ()
}

$(document).ready(function () {
    var count = 0;
    $("#btn-add").click(function () {
        appendUserRow(count++, {
            type: "",
            name: "",
            email: "",
            no: ""
        })
    });
});

function totalZ(){
  var total = 0;
  $("input[name='quantity[]']").each(function(){
    // console.log($(this).val())
  })

  var unit_pricez = $("input[name='unit_price[]']")
  var contents = $("select[name='edition[]']")
  var quantityz = $("input[name='quantity[]']")
  for(var i=0; i<contents.length; i++){
      var unit_pric = parseInt(unit_pricez.eq(i).val());
      var quanti = parseInt(quantityz.eq(i).val());
      var cont = contents.eq(i).val()
      var myArray = cont.split("|");
      var unit_p = parseInt(myArray[1])
      console.log(cont)
      total += unit_p*quanti
      
  }
  console.log(total)
  $('#totalP').html(total)
  
}
</script>
@endsection