@extends('layouts.app')
@section('content')
<script src="{{ asset('js/jquery.min.js') }}"></script>
<script src="{{ asset('js/moment.min.js') }}"></script>
<style>
#ui-id-1
{
  margin-left:280px;
  margin-top:220px;
  
}
</style>
<!-- Script -->
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h3 class="text-themecolor">Add 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">Add Subscription</li>
        </ol>
    </div>

</div>
<div class="row">
  <div class="btn-block pull-right" style="margin-right:30px;margin-bottom:10px;">
      <a href="{{ url('/get-subscription-list') }}" class="btn btn-success waves-effect waves-light pull-right">Back</a>
  </div>
</div>
<div class="container-fluid">

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                <form id="subscriptionForm" name="subscriptionForm" class="form-horizontal" autocomplete="off">
                @csrf
                <input type="hidden" name="id" id="faqid">
                <div class="form-group">
                <div class="row">
                <div class="col-lg-6">
                <label for="name" class="col-sm-6 control-label">Customer <span class="red">*</span></label>
                <div class="col-sm-12">
                <div class="form-group">
                        <input type="text" name="user_name" id="user_name" placeholder="Enter Customer Name Or Email" class="form-control" value="">
                        <input type="hidden" name="user_id" id="user_id">
                    </div>
                    <div id="customer_list"></div>   
                </div>
                </div>
                <div class="col-lg-6">
                <label for="name" class="col-sm-6 control-label">Therapy / Meditation <span class="red">*</span></label>
                <div class="col-sm-12">
                    <select class="form-control" id="therapy_id" name="therapy_id" required="">
                        <option value="">-- Select a Therapy / Meditation --</option>
                        <optgroup label="Therapy">
                        @foreach($theraphy as $key=>$value)
                            @if($value->therapy_type == "Therapy")
                                <option value="{{$value->id}}">{{$value->therapy_title}}</option>
                            @endif
                        @endforeach
                        <optgroup label="Meditation">
                        @foreach($theraphy as $meditation)
                            @if($meditation->therapy_type == "Meditation")
                                <option value="{{$meditation->id}}">{{$meditation->therapy_title}}</option>
                            @endif
                        @endforeach
                    </select>
                </div>
                </div>
                </div>
            </div>
            <div id="theraphy_dtl">
            <div class="form-group">
                <div class="row">
                <div class="col-lg-6">
                <label for="name" class="col-sm-12 control-label">Therapy / Meditation <span class="red">*</span></label>
                <div class="col-sm-12">
                <input type="text" class="form-control" id="therapy_type" name="therapy_type" value="" readonly>
                </div>
                </div>
                <div class="col-lg-6">
                <label for="name" class="col-sm-12 control-label">Frequency Type</label>
                <div class="col-sm-12">
                <input type="text" class="form-control" id="frequency_type" name="frequency_type" value="" readonly>
                </div>
                </div>
                </div>
            </div>
            <div class="form-group">
            <div class="row">
            <div class="col-lg-6">
            <label for="name" class="col-sm-12 control-label">Duration <span class="red">*</span></label>
            <div class="col-sm-12">
            <input type="text" class="form-control" id="duration" name="duration" value="" readonly>
            </div>
            </div>
            <div class="col-lg-6">
            <label for="name" class="col-sm-12 control-label">Audio</label>
            <div class="col-sm-12">
            <div id="therapy_audio"></div>
            </div>
            </div>
            </div>
            </div>
            <div class="form-group">
            <div class="row">
            <div class="col-lg-12">
            <label for="name" class="col-sm-12 control-label">Select Plan <span class="red">*</span></label>
            <div class="col-sm-12" id="package">
            <div class="row">
            <div id="days" style="margin-left:30px;">
            
            </div>
            <div id="session">
            
            </div>
            </div>
            </div>
            </div>
            </div>
            </div>
            <div class="row">
            <div class="col-lg-4">
            <div id="paymentstatus">
            <div class="form-group">
            <label for="payment_status" class="col-sm-12 control-label">Payment Status <span class="red">*</span></label>
            <div class="col-sm-12">
            <select class="form-control" id="payment_status" name="payment_status" required="">
            <option value="">-- Select payment Status --</option>
            <option value="success">Success</option>
            <option value="pending">Pending</option>
            </select>
            </div>
            </div>
            </div>
            </div>
            <div class="col-lg-4">
            <div id="paymentdetail">
            <div class="form-group" style="margin-left:30px;">
            <label class="col-sm-12 control-label p-0">Payment Detail <span class="red">*</span></label>
            <select class="form-control" id="paymentmode" name="paymentmode" required="">
            <option value="">-- Select payment Detail --</option>
            <option value="cash">Cash</option>
            <option value="debit">Debit Card</option>
            <option value="credit">Credit Card</option>
            <option value="netbanking">Net Banking</option>
            <option value="googlepay_or_phonepe">Google Pay / Phonepe</option>
            <option value="other">Other</option>
            </select>
            </div>
            </div>
            </div>
            <div class="col-lg-4" id="transaction">
            <div class="form-group">
            <label for="name" class="col-sm-12 control-label"> Transaction ID </label>
            <div class="col-sm-12">
            <input type="text" class="form-control" id="transaction" name="transaction" value="" placeholder="Please Enter Transaction ID" >
            </div>
            </div>
            </div>
            <div class="col-lg-4">
            <div class="form-group" id="payment-date">
            <label for="name" class="col-sm-12 control-label">Subscription / Payment Date <span class="red">*</span></label>
            <div class="col-sm-12">
            <input type="text" class="form-control" id="paymentdate" name="paymentdate" value="" placeholder="Payment Date" >
            </div>
            </div>
            </div>
            <div class="col-lg-4" id="expriy_date">
            <div class="form-group">
            <label for="name" class="col-sm-6 control-label">Expiry Date <span class="red">*</span></label>
            <div class="col-sm-12">
            <input type="text" class="form-control" id="expriydate" name="expriydate" value="" placeholder="Expriy Date" readonly>
            </div>
            </div>
            </div>
            
            </div>
            <div class="col-sm-12 py-3">
             <button type="submit" class="btn btn-primary pull-right" id="btn-save" value="create">Save changes
             </button>
        </form>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
function toChangeExpiryDate(durac) {
    var dtype = $('#duration_type_'+durac).val();
    var dcount = $('#duration_count_'+durac).val();
}
$(document).ready( function ()
{
  var dateToday = new Date();  
  $('#paymentdate').datepicker({
      uiLibrary: 'bootstrap4',
      dateFormat: 'dd-mm-yy',
      //minDate: dateToday
      //maxDate: 0
      minDate: new Date()
  }).datepicker("setDate", "0");
  $('#purchasedate').datepicker({
      uiLibrary: 'bootstrap4',
      dateFormat: 'yy-mm-dd',
      //minDate: dateToday
      //maxDate: 0
      minDate: new Date()
  });
      $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var pathurl = "{{ url('/') }}/";
        $('body').on('change', '#paymentmode', function ()
        {
          var paymentmode = $('#paymentmode').val();
          if(paymentmode=="cash"){
            $('#transaction').hide();
          }else{
            $('#transaction').show();
          }
          
        });
        $('body').on('change', '.subscriptionplan', function ()
        {   
            var frequency_type = $('#frequency_type').val();
            var sub_date = $('#paymentdate').val();
            sub_date = moment(sub_date, "DD.MM.YYYY");
            if(sub_date !==null && sub_date !=="" && sub_date !=="undefined"){
              var date = new Date(sub_date);
            }else{
              var date = new Date();
            }
            var startdate = date;
            var new_date = moment(startdate, "DD.MM.YYYY");
            //var oneplus = new_date.add(1, 'days').format('DD-MM-YYYY')
            if(frequency_type=="days" || frequency_type=="Days" )
            {
            var duration_count = $(this).closest("#test").find('.duration_count')[0].value;
            var duration_type = $(this).closest("#test").find('.duration_type')[0].value;
            var cost = $(this).closest("#test").find('.cost')[0].value;
            if(duration_type =="days" || duration_type =="day" || duration_type =="Days")
            {
              var days = new_date.add(1, 'days').add(duration_count, 'days').format('DD-MM-YYYY');
              var expriy = days;
            }
            else if(duration_type =="Month" || duration_type =="month")
            {
              var days = new_date.add(1, 'days').add(duration_count, 'M').format('DD-MM-YYYY');
              var expriy = days;
            }
            else if(duration_type =="Year" || duration_type =="year")
            {
              var days = new_date.add(1, 'days').add(duration_count, 'years').format('DD-MM-YYYY');
              var expriy = days;
            }
            else if(duration_type =="lifetime" || duration_type =="Lifetime")
            {
              var days = new_date.add(1, 'days').add(75, 'years').format('DD-MM-YYYY');
              var expriy = days;
            }
            }
            else if(frequency_type=="Sessions" || frequency_type=="Session" || frequency_type=="sessions" || frequency_type=="session" )
            {
              var expriy = "";
              if ($("#subscriptionplan_0").prop("checked")) {
                var session_days =$("#session_days_0").val();
                var expriy = new_date.add(session_days, 'days').format('DD-MM-YYYY');  
              }
              if ($("#subscriptionplan_1").prop("checked")) {
                var session_days =$("#session_days_1").val();
                var expriy = new_date.add(session_days, 'days').format('DD-MM-YYYY');  
              }
              if ($("#subscriptionplan_2").prop("checked")) {
                var session_days =$("#session_days_2").val();
                var expriy = new_date.add(session_days, 'days').format('DD-MM-YYYY');  
              }
              if ($("#subscriptionplan_3").prop("checked")) {
                var session_days =$("#session_days_3").val();
                var expriy = new_date.add(session_days, 'days').format('DD-MM-YYYY');  
              }
              if ($("#subscriptionplan_4").prop("checked")) {
                var session_days =$("#session_days_4").val();
                var expriy = new_date.add(session_days, 'days').format('DD-MM-YYYY');  
              }
              if ($("#subscriptionplan_5").prop("checked")) {
                var session_days =$("#session_days_5").val();
                var expriy = new_date.add(session_days, 'days').format('DD-MM-YYYY');  
              }
              //console.log(session_days);
              
              //alert(session_days);
            }
            $('#expriydate').val(expriy);
        });
        $('body').on('change', '#paymentdate', function (expriy)
            {
              var expriy = "";
              var startdate = $('#paymentdate').val();
              var new_date = moment(startdate, "DD.MM.YYYY");
              var frequency_type = $('#frequency_type').val();
              if(frequency_type=="days" || frequency_type=="Days" ){
                if ($("#subscriptionplan_0").prop("checked")) {
                  var duration_count = $("#duration_count_0").val();
                  var duration_type = $("#duration_type_0").val();
                  if(duration_type =="lifetime" || duration_type =="Lifetime"){
                  var days = new_date.add(1, 'days').add(75, 'years').format('DD-MM-YYYY');
                  var expriy = days;
                  }else{
                    var days = new_date.add(1, 'days').add(duration_count, duration_type).format('DD-MM-YYYY');
                    var expriy = days;
                  }
                  expriy = days;
                }
                if ($("#subscriptionplan_1").prop("checked")) {
                  var duration_count = $("#duration_count_1").val();
                  var duration_type = $("#duration_type_1").val();
                  if(duration_type =="lifetime" || duration_type =="Lifetime"){
                  var days = new_date.add(1, 'days').add(75, 'years').format('DD-MM-YYYY');
                  var expriy = days;
                  }else{
                    var days = new_date.add(1, 'days').add(duration_count, duration_type).format('DD-MM-YYYY');
                    var expriy = days;
                  }
                  expriy = days;
                }
                if ($("#subscriptionplan_2").prop("checked")) {
                  var duration_count = $("#duration_count_2").val();
                  var duration_type = $("#duration_type_2").val();
                  if(duration_type =="lifetime" || duration_type =="Lifetime"){
                  var days = new_date.add(1, 'days').add(75, 'years').format('DD-MM-YYYY');
                  var expriy = days;
                  }else{
                    var days = new_date.add(1, 'days').add(duration_count, duration_type).format('DD-MM-YYYY');
                    var expriy = days;
                  }
                  expriy = days;
                }
                if ($("#subscriptionplan_3").prop("checked")) {
                  var duration_count = $("#duration_count_3").val();
                  var duration_type = $("#duration_type_3").val();
                  if(duration_type =="lifetime" || duration_type =="Lifetime"){
                  var days = new_date.add(1, 'days').add(75, 'years').format('DD-MM-YYYY');
                  var expriy = days;
                  }else{
                    var days = new_date.add(1, 'days').add(duration_count, duration_type).format('DD-MM-YYYY');
                    var expriy = days;
                  }
                  expriy = days;
                }
                if ($("#subscriptionplan_4").prop("checked")) {
                  var duration_count = $("#duration_count_4").val();
                  var duration_type = $("#duration_type_4").val();
                  if(duration_type =="lifetime" || duration_type =="Lifetime"){
                  var days = new_date.add(1, 'days').add(75, 'years').format('DD-MM-YYYY');
                  var expriy = days;
                  }else{
                    var days = new_date.add(1, 'days').add(duration_count, duration_type).format('DD-MM-YYYY');
                    var expriy = days;
                  }
                  expriy = days;
                }
                if ($("#subscriptionplan_5").prop("checked")) {
                  var duration_count = $("#duration_count_5").val();
                  var duration_type = $("#duration_type_5").val();
                  if(duration_type =="lifetime" || duration_type =="Lifetime"){
                  var days = new_date.add(1, 'days').add(75, 'years').format('DD-MM-YYYY');
                  var expriy = days;
                  }else{
                    var days = new_date.add(1, 'days').add(duration_count, duration_type).format('DD-MM-YYYY');
                    var expriy = days;
                  }
                  expriy = days;
                }
                if ($("#subscriptionplan_6").prop("checked")) {
                  var duration_count = $("#duration_count_6").val();
                  var duration_type = $("#duration_type_6").val();
                  if(duration_type =="lifetime" || duration_type =="Lifetime"){
                  var days = new_date.add(1, 'days').add(75, 'years').format('DD-MM-YYYY');
                  var expriy = days;
                  }else{
                    var days = new_date.add(1, 'days').add(duration_count, duration_type).format('DD-MM-YYYY');
                    var expriy = days;
                  }
                  expriy = days;
                }
              }
              else if(frequency_type=="Sessions" || frequency_type=="Session" || frequency_type=="sessions" || frequency_type=="session" ){
                var expriy = "";
              if ($("#subscriptionplan_0").prop("checked")) {
                var session_days =$("#session_days_0").val();
                var expriy = new_date.add(session_days, 'days').format('DD-MM-YYYY');  
              }
              if ($("#subscriptionplan_1").prop("checked")) {
                var session_days =$("#session_days_1").val();
                var expriy = new_date.add(session_days, 'days').format('DD-MM-YYYY');  
              }
              if ($("#subscriptionplan_2").prop("checked")) {
                var session_days =$("#session_days_2").val();
                var expriy = new_date.add(session_days, 'days').format('DD-MM-YYYY');  
              }
              if ($("#subscriptionplan_3").prop("checked")) {
                var session_days =$("#session_days_3").val();
                var expriy = new_date.add(session_days, 'days').format('DD-MM-YYYY');  
              }
              if ($("#subscriptionplan_4").prop("checked")) {
                var session_days =$("#session_days_4").val();
                var expriy = new_date.add(session_days, 'days').format('DD-MM-YYYY');  
              }
              if ($("#subscriptionplan_5").prop("checked")) {
                var session_days =$("#session_days_5").val();
                var expriy = new_date.add(session_days, 'days').format('DD-MM-YYYY');  
              }
            }
              $('#expriydate').val(expriy);
            });
    $('#theraphy_dtl').hide();
    $('#paymentdetail').hide();
    $("#transaction").hide();
    $("#payment-date").hide();
    $("#expriy_date").hide();
    
    $("#payment_status").change(function()
    {
        var status =  $("#payment_status").val();
        if(status=="success")
        {
          $("#paymentdetail").show();
          $("#transaction").show();
          $("#payment-date").show();
          $("#expriy_date").show();
        }
        else
        {
          $("#paymentdetail").hide();
          $("#transaction").hide();
          $("#payment-date").hide();
          $("#expriy_date").hide();
        }
        
    });
    
    $('body').on('change', '#therapy_id', function ()
    {
        var therapy_id = $('#therapy_id :selected').val();
        $.ajax({
        type:"GET",
        url : "{{url('/get-subscription-list/theraphy')}}/"+therapy_id,
        success: function (data)
        {
          $('#payment').show();
          $("#therapy_audio").html("");$("#duration_count").html("");$("#duration_type").html("");$("#cost").html("");$("#no_session").html("");$("#interval_days").html("");$("#session_days").html("");
          $(".cost").html("");
          $("#days").html("");
          $("#session").html("");
          $('#theraphy_dtl').show();
          $('#therapy_type').val(data.theraphy.therapy_type);
          $('#duration').val(data.theraphy.duration);
          $('#frequency_type').val(data.theraphy.frequency_type);
          var my_orders = $("#package");
          if(data.theraphy.frequency_type=="days" || data.theraphy.frequency_type=="Days")
          {
            $("#days").css("display", "block");
            $("#session").css("display", "none");
          }
          else if(data.theraphy.frequency_type=="Sessions" || data.theraphy.frequency_type=="sessions")
          {
            $("#session").css("display", "block");
            $("#days").css("display", "none");
          }
          else if(data.theraphy.frequency_type=="Free")
          {
            $("#session").css("display", "none");
            $("#days").css("display", "none");
          }
          $.each(data.package, function(key,val)
          { 
            if(data.theraphy.frequency_type=="days" || data.theraphy.frequency_type=="Days")
            {
              $("#days").append('<div id="test"><div class="row"><div class="col-lg-1 py-3"><label for="subscriptionplan" class="col-sm-12 control-label text-left fo"> </label><input type="radio" name="subscriptionplan" id="subscriptionplan_'+key+'" class="subscriptionplan" value="'+val.id+'" onclick="toChangeExpiryDate('+val.id+')"></div><div class="col"><label for="duration_count" class="col-sm-12 control-label fo">Duration</label><input type="text" class="form-control duration_count" name="days["'+key+'"][duration_count]" id="duration_count_'+key+'" value="'+val.duration_count+'" readonly></div><div class="col"><label for="duration_type" class="col-sm-12 control-label fo">Month</label><input type="text" class="form-control duration_type" name="days["'+key+'"][duration_type]" id="duration_type_'+key+'" value="'+val.duration_type+'" readonly></div><div class="col"><label for="cost" class="col-sm-12 control-label fo cost">Cost</label><input type="text" class="form-control" name="days["'+key+'"][cost]" value="'+val.cost+'" id="cost_'+val.id+'" readonly></div><div class="col"><label for="in_app_purchase_id" class="col-sm-12 control-label fo">App Purchase Id</label><input type="text" class="form-control" name="days["'+key+'"][in_app_purchase_id]" value="'+val.in_app_purchase_id+'" id="in_app_purchase_id_'+val.id+'" readonly></div></div>');
                
            }
            else if(data.theraphy.frequency_type=="Sessions" || data.theraphy.frequency_type=="sessions" || data.theraphy.frequency_type=="Session")
            {
              $("#session").css("display", "block");
               $("#days").css("display", "none");
              console.log(data.package);
              $("#session").append('<div id="testsession"><div class="row"><div class="col-lg-1 py-2 text-centre" ><label for="subscriptionplan" class="col-sm-12 control-label text-left fo"> </label><input type="radio" name="subscriptionplan" id="subscriptionplan_'+key+'" class="subscriptionplan py-4" value="'+val.id+'" style="margin-left:20px;"></div><div class="col-lg-2"><label for="no_session" class="col-sm-12 control-label text-left fo">No session</label><input type="text" class="form-control" name="session["'+key+'"][no_session]" id="no_session_'+key+'" value="'+val.no_session+'" readonly></div><div class="col-lg-2"><label for="interval_days" class="col-sm-12 control-label fo" >Interval</label><input type="text" class="form-control" name="session["'+key+'"][interval_days]" id="interval_days_'+key+'" value="'+val.interval_days+'" readonly></div><div class="col-lg-2"><label for="session_days" class="col-sm-12 control-label fo">Session</label><input type="text" class="form-control" name="session["'+key+'"][session_days]" id="session_days_'+key+'" value="'+val.session_days+'" readonly></div><div class="col-lg-2"><label for="cost" class="col-sm-12 control-label fo">Cost</label><input type="text" class="form-control" name="session["'+key+'"][cost]" id="cost" value="'+val.cost+'" readonly></div><div class="col-lg-2"><label for="in_app_purchase_id" class="col-sm-12 control-label fo">App Purchase Id</label><input type="text" class="form-control" name="session["'+key+'"][in_app_purchase_id]" id="in_app_purchase_id" value="'+val.in_app_purchase_id+'" readonly></div></div></div>');
                
            }
        }); 
            var audio = data.theraphy.path;
            audio = audio.split(".").pop();
          
          $("#therapy_audio").append('<audio controls><source src="'+pathurl+data.theraphy.path+'" type="audio/'+audio+'"></audio>');
            
        },
        error: function (data)
        {
            alert('Error occured');
        }
        });
        
    });
    

if ($("#subscriptionForm").length > 0) {
  $("#subscriptionForm").validate({
    rules: {
        user_name: {
        required: true,
      },
      therapy_id: {
        required: true,
      },
      therapy_type: {
        required: true
      },
      duration: {
        required: true
      },
      frequency_type:
      {
        required: true
      },
      expriydate:
      {
        required: true
      },
      paymentmode:
      {
        required: true
      },
      paymentdate:
      {
        required: true
      },
      subscriptionplan:
      {
        required: true
      },
      payment_status:
      {
        required: true
      },
      },
      messages:
      {
        user_name:
        {
            required: "Please Select Customer",
        },
        therapy_id: {
            required: "Please Select Therapy",
        },
        therapy_type:
        {
          required: "Please Select Therapy Type"
        },
        duration:
        {
          required: "Please Select Therapy Duration"
        },
        frequency_type:
        {
          required: "Please Select Frequency Type"
        },
        subscriptionplan:
        {
          required: "Please Select Customer Plan"
        },
        paymentmode:
        {
          required: "Please Select Payment Mode"
        },
        paymentdate:
        {
          required: "Please Select Payment Date"
        },
        payment_status:
        {
          required: "Please Select Payment Status"
        }
      },

     submitHandler: function(form)
     {
      var actionType = $('#btn-save').val();
      $('#btn-save').html('Processing....');
      $.ajax({
          data: $('#subscriptionForm').serialize(),
          url: "{{url('/get-subscription-list/store')}}",
          type: "POST",
          dataType: 'json',
          success: function (data) {
              if(data.success===1)  {
                toastr.success(data.msg);
                $('#subscriptionForm').trigger("reset");
                $('#btn-save').html('Save Changes');
                setTimeout(function(){// wait for 5 secs(2)
                  //window.location.href = "{{ url('/get-subscription-list') }}";
                }, 2000); 
              }
              if(data.success===0) {
                toastr.error(data.msg);
              }
          },
          error: function (data) {
              if(data.success==0){
                  toastr.error(data.msg);
              }
              $('#btn-save').html('Save Changes');
          }
      });
    }
  })
}
  $( "#user_name" ).autocomplete({
  source: function( request, response ) {
    $.ajax({
    url: "{{url('/customer')}}",
    type: 'post',
    dataType: "json",
    data: {
     search: request.term
    },
    success: function( data )
    {
     response( data );
    }
   });
  },
    select: function (event, ui) {
      $('#user_id').val(ui.item.value); // display the selected text
      $('#user_name').val(ui.item.label); // save selected id to input
      return false;
    }
  });
  
      
});
</script>

@endsection