@extends('layouts.app')
@section('content')
<style>
    .modal-lg {
    max-width: 75%;
}
</style>
<script src="{{ asset('js/jquery.min.js') }}"></script>
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h3 class="text-themecolor">Subscription</h3>
    </div>
    <div class="col-md-7 align-self-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ action('HomeController@index') }}">Home</a></li>
            <li class="breadcrumb-item active">Subscription</li>
        </ol>
    </div>

</div>
<div class="row">
@can('user.create')
    <div class="btn-block pull-right" style="margin-right:30px;margin-bottom:10px;">
        <a href="{{ url('/create-subscription-list') }}" class="btn btn-success waves-effect waves-light pull-right">Add Subsciption</a>
    </div>
    @endcan
</div>

<div class="container-fluid">
	<div class="row justify-content-center">
		<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="row py-4">
<div class="col-lg-3">
<div class="form-group">
<label for="from_date" class="col-sm-12 control-label"> Purchase From </label>
<div class="col-sm-12">
<input type="text" name="from_date" id="from_date" class="form-control" placeholder="From Date"/>
</div>
</div>
</div>
<div class="col-lg-3">
    <div class="form-group">
        <label for="to_date" class="col-sm-12 control-label"> Purchase To </label>
        <div class="col-sm-12">
        
<input type="text" name="to_date" id="to_date" class="form-control" placeholder="To Date"/>
</div>
</div>
</div>
<div class="col-lg-3">
    <div class="form-group">
    <label for="from_date" class="col-sm-12 control-label"> Expiry From </label>
    <div class="col-sm-12">
    <input type="text" name="from_expiry_date" id="from_expiry_date" class="form-control" placeholder="From Date"/>
    </div>
    </div>
    </div>
    <div class="col-lg-3">
        <div class="form-group">
            <label for="from_date" class="col-sm-12 control-label"> Expiry To </label>
            <div class="col-sm-12">
            
    <input type="text" name="to_expiry_date" id="to_expiry_date" class="form-control" placeholder="To Date"/>
    </div>
    </div>
    </div>
    <div class="col-lg-3">
    <div class="form-group">
    <label for="payment_status" class="col-sm-12 control-label">Payment Status</label>
    <div class="col-sm-12">
    <select class="form-control" id="payment_status" name="payment_status" >
    <option value="">-- Select Status --</option>
    <option value="success">Success</option>
    <option value="pending">Pending</option>
    </select>
</div>
</div>
</div>

<div class="col-lg-3 py-4">
<button type="submit" class="btn btn-primary pull-left" id="filter" value="Apply" style="margin:10px;">Apply</button>
<button type="button" name="refresh" id="refresh" class="btn btn-primary pull-left" style="margin:10px;">Refresh</button>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered table-striped" id="subscriptionlist" width="100%">
   <thead>
      <tr>
        <th>ID</th>
         <th>S. No</th>
         <th>user_id</th>
         <th>payment_id</th>
         <th>therapy_id</th>
         <th>Name</th>
         <th>Email</th>
         <th>Therapy Title</th>
         <th>Therapy Type</th>
         <th>Frequency Type</th>
         <th>Subscription Date</th>
         <th>Expiry Date</th>
         <th>Payment Date</th>
         <th>Payment Status</th>
         <th>Status</th>
         <th>Action</th>
      </tr>
   </thead>
</table>
</div>
</div>
</div>
	</div>
</div>
</div>
<div class="modal" id="ajax-subscribe-modal" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title" id="subscriptionModal">View Subscription</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>
    <div class="modal-body">
    <p class="font-medium">Customer Detail</p>
    <div class="col-lg-12">
        <div class="row">
        <div class="col-lg-4">
        <p class="font-medium" id="title-head">Name</p>
        <p id="name"></p>
        </div>
        <div class="col-lg-4">
        <p class="font-medium" id="title-head">Email</p>
        <p id="email"></p>
        </div>
        <div class="col-lg-4">
        <p class="font-medium" id="title-head">Contact Number</p>
        <p id="mobile_number"></p>
        </div>
        </div>
        </div>
        <p class="font-medium">Package</p>
        <div class="col-lg-12">
        <div class="row">
        <div class="col-lg-3">
        <p class="font-medium"  id="head-description">Therapy Title</p>
        <p id="therapy_title"></p>
        </div>
        <div class="col-lg-3">
        <p class="font-medium" id="head-duration">Therapy / Meditation</p>
        <p id="therapy_type"></p>
        </div>
        <div class="col-lg-3">
        <p class="font-medium" id="headfrequency-type">Frequency Type</p>
        <p id="frequency_type"></p>
        </div>
        <div class="col-lg-3">
        <p class="font-medium" id="headfrequency-type">Duration</p>
        <p id="duration"></p>
        </div>
        </div>
        </div>
        <p class="font-medium">Plan</p>
        <div class="col-lg-12">
        <div id="package">
        </div>
        </div>
        <p class="font-medium">Payment Details</p>
        <div class="col-lg-12">
        <div class="row">
        <div class="col-lg-4">
        <p class="font-medium">Payment Status</p><p id="paymentstatus"></p>
        </div>
        <div class="col-lg-4 paystatus">
        <p class="font-medium">Payment Type</p><p id="paymentmode"></p>
        </div>
        <div class="col-lg-4 paystatus">
        <p class="font-medium" >Payment Date</p><p id="payment_date"></p>
        </div>
        <div class="col-lg-4 paystatus">
        <p class="font-medium">Subscription Date</p><p id="purchase_date"></p>
        </div>
        <div class="col-lg-4 paystatus">
        <p class="font-medium">Expiry Date</p><p id="view_expiry_date"></p>
        </div>
        <div class="col-lg-4">
        <p class="font-medium">Subscription Status </p><p id="status"></p>
        </div>
        </div>
        </div>
        
        {{--<h5>Therapy Play Logs</h5>
        <div class="table-responsive">
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <td width="10%">S.No</td>
                <td width="60%">Date & Time</td>
                <td width="30%">Status</td>
              </tr>
              <tbody class="logs_data">
                <tr>
                  <td colspan="3" style="text-align:center;">No log found</td>
                </tr>
              </tbody>
            </thead>
          </table>
        </div>--}}
    </div>
    </div>
</div>
</div>
<script>
 $(document).ready( function ()
{
    $('#from_date').datepicker({
      uiLibrary: 'bootstrap4',
      dateFormat: 'dd-mm-yy',
      autoclose: true,
  });
  $('#to_date').datepicker({
      uiLibrary: 'bootstrap4',
      dateFormat: 'dd-mm-yy',
      autoclose: true,
  });
  $('#from_expiry_date').datepicker({
      uiLibrary: 'bootstrap4',
      dateFormat: 'dd-mm-yy',
      autoclose: true,
  });
  $('#to_expiry_date').datepicker({
      uiLibrary: 'bootstrap4',
      dateFormat: 'dd-mm-yy',
      autoclose: true,
  });
  $('#from_date').val('');
  $('#to_date').val('');
  $('#from_expiry_date').val('');
  $('#to_expiry_date').val('');
  $('#payment_status').val('');
  $('#from_date').val('');
      $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        load_data();
        function load_data(from_date = '', to_date = '', from_expiry_date ='',to_expiry_date ='', payment_status='')
        {
        $('#subscriptionlist').DataTable({
         processing: true,
         serverSide: true,
         ajax: {
          url: "{{url('/get-subscription-list')}}",
          type: 'GET',
          data: function (d) {
                d.purchase_from = $('input[name=from_date]').val();
                d.purchase_to = $('input[name=to_date]').val();
                d.expiry_from = $('input[name=from_expiry_date]').val();
                d.expiry_to = $('input[name=to_expiry_date]').val();
                d.payment_status = $('#payment_status option:selected').val();
            }
         },
         columns: [
                  { data: 'pu_id', name: 'id', 'visible': false},
                  { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false,searchable: false},
                  { data: 'user_id', name: 'user_id', 'visible': false},
                  { data: 'pay_id', name: 'pay_id', 'visible': false},
                  { data: 'therapy_id', name: 'therapy_id', 'visible': false},
                  { data: 'name', name: 'name' },
                  { data: 'email', name: 'email'},
                  { data: 'therapy_title', name: 'therapy_title'},
                  { data: 'therapy_type', name: 'therapy_type'},
                  { data: 'frequency_type', name: 'frequency_type' },
                  { data: 'purchase_date', name: 'purchase_date'},
                  { data: 'expiry_date', name: 'expiry_date'},
                  { data: 'payment_date', name: 'payment_date' },
                  { data: 'payment_status', name: 'payment_status' },
                  { data: 'status', name: 'status', "render": function (data) {
                    if(data==1){return "Active";}else if(data==0){return "InActive";}
                  }},
                  { data: 'action', name: 'action', orderable: false},
               ],
        order: [[1, 'desc']]
        
      });
        }
        
    /*  When user click add user button */
    $('#subscription').click(function ()
    {
        $('#btn-save').val("Create subscription");
        $('#subscription_id').val('');
        $('#subscriptionForm').trigger("reset");
        $('#subscriptionModal').html("Subscription");
        $('#ajax-subscription-modal').modal('show');
        $('#myModal').modal('show');
    });

    /* When click edit user */
    $('body').on('click', '.edit-subscribe', function ()
    {
      var pu_id = $(this).data('id');
      var therapy_id = $(this).data('therapy_id');
      var user_id = $(this).data('user_id');
      var pay_id = $(this).data('pay_id');
      var session_id = $(this).data('session_id');
      var shoeArray = { boots : '3', wellingtons: '0', leather : '1', trainers: '3'};
      //console.log(shoeArray);
   });
   /* When click edit user */
   $('body').on('click', '.show-subscribe', function ()
    {
      var therapy_id = $(this).data('id');
      $.get("{{url('/get-subscription-list/show/') }}/"+therapy_id, function (data)
      {
        //console.log(data);
        $('#title-error').hide();
          $('#subscribeModal').html("View subscribe");
          $('#package').html("");
          $('#ajax-subscribe-modal').modal('show');
          $('#faqid').text(data.pu_id);
          $('#name').text(data.name);
          $('#email').text(data.email);
          //$('#email').text(data.email);
          $('#duration').text(data.duration);
          $('#therapy_title').text(data.therapy_title);
          $('#therapy_type').text(data.therapy_type);
          //$('#expiry_date').val(expiry_date);
          $('#mobile_number').text(data.mobile_number);
          $('#frequency_type').text(data.frequency_type);
          $('#paymentstatus').text(data.payment_status);
          if(data.payment_status=="success")
          {
            $('#purchase_date').show();
            $('#payment_date').show();
            $('#expiry_date').show();
            $('.paystatus').show();
            $('#paymentmode').text(data.paymentmode);
            $('#purchase_date').text(data.purchase_date);
            $('#payment_date').text(data.payment_date);
            $('#view_expiry_date').text(data.expiry_date);
          }
          else
          {
            $('.paystatus').hide();
            $('#paystatus').hide();
            $('#purchase_date').hide();
            $('#payment_date').hide();
            $('#expiry_date').hide();
            $('#paymentdt').hide();
            $('#paymentdays').hide();
          }
          if(data.in_app_purchase_id==null) data.in_app_purchase_id="";
          if(data.frequency_type == "days" || data.frequency_type == "Days")
          {
            $("#package").append('<div class="form-group"><div class="row"><div class="col"><label for="" class="col-sm-12 control-label font-medium">Duration Count</label><div class="col-sm-12"><input type="text" class="form-control" value="'+ data.duration_count +'" id="days" readonly></div></div><div class="col"><div class="form-group"><label for="" class="col-sm-12 control-label font-medium">Month</label><div class="col-sm-12"><input type="text" class="form-control" value="'+ data.duration_type +'" id="days" readonly></div></div></div><div class="col"><div class="form-group"><label for="" class="col-sm-12 control-label font-medium">Cost</label><div class="col-sm-12"><input type="text" class="form-control" value="'+ data.cost +'" id="days" readonly></div></div></div><div class="col"><div class="form-group"><label for="" class="col-sm-12 control-label font-medium">App Purchase Id</label><div class="col-sm-12"><input type="text" class="form-control" value="'+ data.in_app_purchase_id +'" id="in_app_purchase_id" readonly></div></div></div></div>');
          }
          else if(data.frequency_type == "Sessions" || data.frequency_type == "Session" || data.frequency_type == "session" || data.frequency_type == "sessions")
          {
            $("#package").append('<div class="row"><div class="col"><div class="form-group"><label for="" class="col-sm-12 control-label font-medium">No Session</label><div class="col-sm-12"><input type="text" class="form-control" value="'+ data.no_session +'" readonly></div></div></div><div class="col"><div class="form-group"><label for="" class="col-sm-12 control-label font-medium">Interval Days</label><div class="col-sm-12"><input type="text" class="form-control" value="'+ data.interval_days +'" readonly></div></div></div><div class="col"><div class="form-group"><label for="" class="col-sm-12 control-label font-medium">Session Days</label><div class="col-sm-12"><input type="text" class="form-control" value="'+ data.session_days +'" readonly></div></div></div><div class="col"><div class="form-group"><label for="" class="col-sm-12 control-label font-medium">Cost</label><div class="col-sm-12"><input type="text" class="form-control" value="'+ data.cost +'" readonly></div></div></div><div class="col"><div class="form-group"><label for="" class="col-sm-12 control-label font-medium">App Purchase Id</label><div class="col-sm-12"><input type="text" class="form-control" value="'+ data.in_app_purchase_id +'" readonly></div></div></div></div>');
          }
          var packstatus = "";
          if(data.status==1){packstatus = "Active";}else{packstatus = "InActive";}
          $('#status').text(packstatus);
          /*var y="";
          var log_status="";
          if((data.activity_logs).length>0){ 
            var sno=1;
            for(i in data.activity_logs){
              if(data.activity_logs[i].log_for==1){log_status = "Therapy Played";}else{log_status = "Therapy Finished";}
              y+='<tr>';
              y+='<td>'+sno+++'</td>';
              y+='<td style="border: 1px solid #dddddd; text-align: left; padding: 8px; width: 100px;">'+data.activity_logs[i].created_at+'</td>';
              y+='<td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">'+log_status+'</td>';
              y+='</tr> ';
            }
          }else{
              y+='<tr>';
              y+='<td colspan="3" style="text-align:center">No log found</td>';
              y+='</tr> ';
          }
          $('.logs_data').html(y);*/
      })
   });
   $('body').on('click', '#delete-subscribe', function ()
    {
      var id = $(this).data('id');
        if(confirm("Are You sure want to delete !"))
        {
          $.ajax({
              type: "get",
              url: "{{url('/get-subscription-list/delete')}}/"+id,
              success: function (data)
              {
              $('#subscriptionlist').DataTable().ajax.reload()
              var oTable = $('#subscriptionlist').dataTable();
              oTable.fnDraw(false);
              },
              error: function (data)
              {
                console.log('Error:', data);
              }
          });
        }
    });
  $('#filter').click(function()
  {
  var from_date = $('#from_date').val();
  var to_date = $('#to_date').val();
  var from_expiry_date = $('#from_expiry_date').val();
  var to_expiry_date = $('#to_expiry_date').val();
  var payment_status = $('#payment_status').val();
  if(from_date !="" && to_date !="" || from_expiry_date!="" && to_expiry_date!="" || payment_status!="")
  {
   $('#subscriptionlist').DataTable().destroy();
   load_data(from_date, to_date, from_expiry_date, to_expiry_date, payment_status);
  }
  else
  {
    toastr.error("Both Date is required");
  }
 });

 $('#refresh').click(function()
 {
  $('#from_date').val('');
  $('#to_date').val('');
  $('#from_expiry_date').val('');
  $('#to_expiry_date').val('');
  $('#payment_status').val('');
  $('#from_date').val('');
  $('#subscriptionlist').DataTable().destroy();
  load_data();
 });


});

</script>
@endsection