@extends('layouts.app')
@section('content')
<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">Therapy</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">Therapy</li>
        </ol>
    </div>

</div>
<!-- <a  class="btn btn-primary pull-right">ADD</a> -->
<div class="row">
@can('user.create')
    <div class="btn-block pull-right" style="margin-right:50px;margin-bottom:10px;">
        <a href="{{ URL::to('/create-therapy-list1') }}" class="btn btn-success waves-effect waves-light pull-right">Add Therapy</a>
    </div>
    @endcan
</div>
<!-- <a  class="btn btn-primary pull-right">ADD</a> -->
<div class="container-fluid">

<div class="row justify-content-center">
<div class="col-md-12">

<div class="card">
<div class="card-body">

<table class="table table-bordered table-striped" id="therapylist" width="100%">
   <thead>
      <tr>
        <th>ID</th>
         <th>S. No</th>
         <th>Title</th>
         <th>Description</th>
         <th>Therapy Type</th>
         <th>Duration</th>
         <th>Frequency Type</th>
         <th>Private Mode</th>
         <th>Status</th>
         <th>Action</th>
      </tr>
   </thead>
</table>
</div>

<div class="modal" id="ajax-therapy-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="therapyModal"></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>
    <div class="modal-body">
        <div class="col-lg-12">
        <p class="font-medium" id="title-head">Title</p>
        <p id="title-theraphy"></p>
        </div>
        <div class="col-lg-12">
        <p class="font-medium"  id="head-description">Description</p>
        <p id="description"></p>
        </div>
        <div class="col-lg-12">
        <div class="row">
        <div class="col-lg-4">
        <p class="font-medium" id="head-therapy-type">Therapy Type</p>
        <p id="therapy_type"></p>
        </div>
        <div class="col-lg-4">
        <p class="font-medium" id="head-duration">Duration</p>
        <p id="duration"></p>
        </div>
        <div class="col-lg-4">
        <p class="font-medium" id="headfrequency-type">Frequency Type</p>
        <p id="frequency_type"></p>
        </div>
        </div>
        </div>
        <div class="col-lg-12">
        <p class="font-medium">Audio File</p>
        <p id="therapy_audio"></p>
        <p class="font-medium"  id="head-ffmpeg_m3u8">FFMPEG M3U8</p>
        <p id="ffmpeg_m3u8"></p>
        </div>
        <div class="col-lg-12">
        <div class="row" id="package">
        <p class="font-medium">Package</p>
        </div>
        </div>
        <div class="col-lg-12 py-2">
        <p class="font-medium">Status </p><p id="status"></p>
      </div>    
      <div class="col-lg-12 py-2">
        <p class="font-medium">Private Mode : <span id="private_mode"></span></p>
      </div> 
      <div class="col-lg-12 py-2">
        <p class="font-medium">Private Users </p><p id="private_users"></p>
      </div>      
    </div>
</div>
</div>
</div>

</div>
</div>
	</div>
  </div>
</div>
<script type="text/javascript">
$(document).ready( function ()
{
		$.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      		}
      });

      function fn(description, count)
      { 
        return description.slice(0, count) + (description.length > count ? "..." : "");
      }
      var pathurl = "{{ URL::to('/') }}/";
    $('#therapylist').DataTable({
         processing: true,
         serverSide: true,
         ajax: {
          url: "{{ URL::to('/get-therapy-list1') }}",
          type: 'GET',
         },
         columns: [
                  {data: 't_id', name: 't_id', 'visible': false},
                  {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false,searchable: false},
                  { data: 'therapy_title', name: 'therapy_title' },
                  { data: 'description', name: 'description', "autoWidth": true , "render": function (data, type, row, meta) {return fn(data, 100);
                  }},
                  { data: 'therapy_type', name: 'therapy_type'},
                  { data: 'duration', name: 'duration'},
                  { data: 'frequency_type', name: 'frequency_type'},
                  { data: 'private_mode', name: 'private_mode', "render": function (data) {
                    if(data==1){
                      return "<span>Yes</span>";
                    }else if(data==0){
                      return "<span>No</span>";
                    }
                  }},
                  /*{ data: 'path', name: 'path',  render: function (data, type, row) {
                    return '<audio controls><source src="'+pathurl+data+'" type="audio/mp3"></audio>';
                  }
                },*/
                { data: 'status', name: 'status' , "render": function (data) {
                    if(data==1){
                      return "<span>Active</span>";
                    }else if(data==0){
                      return "<span>InActive</span>";
                    }
                  }},
                  { data: 'action', name: 'action', orderable: false},
               ],
        order: [[1, 'desc']],
        
      });
  /*  When user click add user button */
  var x = document.getElementById("myAudio"); 
function playAudio() { 
  x.play(); 
} 

    $('#therapy').click(function ()
    {
        $('#btn-save').val("create-product");
        $('#therapy_id').val('');
        $('#therapyForm').trigger("reset");
        $('#therapyModal').html("Therapy");
        $('#ajax-therapy-modal').modal('show');
        //alert('asdasd');
    });

    /* When click Show user */
    $('body').on('click', '.close', function ()
    {
      $("#therapy_audio").html("");
    });
    $('body').on('click', '.show-therapy', function ()
    {
      var therapy_id = $(this).data('id');
      $.get("{{URL::to('/get-therapy-list1/show/') }}/"+therapy_id, function (data)
      {
         //console.log(data.package);
         $("#package").html("");
         $("#therapy_audio").html("");
          $('#title-error').hide();
          $('#therapyModal').html("View therapy");
          $('#btn-save').val("view-therapy");
          $('#ajax-therapy-modal').modal('show');
          //$('#faqid').val(data.id);
          $('#title-theraphy').text(data.theraphy.therapy_title);
          $('#description').text(data.theraphy.description);
          $('#ffmpeg_m3u8').text(data.theraphy.ffmpeg_m3u8);
          $('#therapy_type').text(data.theraphy.therapy_type);
          $('#duration').text(data.theraphy.duration);
          $('#private_users').text(data.private_users);
          var t_status = "";
          if(data.theraphy.status===1){
            t_status = "Active";
            }else{
              t_status = "InActive";
            }
          var private_mode=data.theraphy.private_mode;
          var private_mode_text="No";
          if(private_mode>0){
            private_mode_text="Yes";
          }
          $("#private_mode").text(private_mode_text);
          $('#status').text(t_status);
          if(data.theraphy.therapy_type=="Free"){
            $('#frequency_type').hide();
            $('#headfrequency-type').hide();
            $('#package').hide();
          }
          else{
            $('#frequency_type').show();
            $('#headfrequency-type').show();
            $('#frequency_type').text(data.theraphy.frequency_type);$('#package').show();
            }
          var my_orders = $("#package");
          if(data.theraphy.frequency_type=="days" || data.theraphy.frequency_type=="Days")
          {
            $('#frequency_type').show();
            $('#headfrequency-type').show();
            $('#frequency_type').text(data.theraphy.frequency_type);
          my_orders.append('<div class="col-lg-12"><div class="row"><div class="col-lg-3 font-medium">Duration</div><div class="col-lg-3 font-medium">Month</div><div class="col-lg-3 font-medium">Cost</div><div class="col-lg-3 font-medium">App Purchase Id</div></div></div>');
          }
          else if(data.theraphy.frequency_type=="Sessions" || data.theraphy.frequency_type=="sessions" || data.theraphy.frequency_type=="Session")
          {
            $('#frequency_type').show();
            $('#headfrequency-type').show();
            $('#frequency_type').text(data.theraphy.frequency_type);
            my_orders.append('<div class="col-lg-12"><div class="row"><div class="col font-medium">Number Session</div><div class="col font-medium">Interval Days</div><div class="col font-medium">Session Days</div><div class="col font-medium">Cost</div><div class="col font-medium">App Purchase Id</div></div></div>');
          }
          $.each(data.package, function(key,val)
          { 

            if(data.theraphy.frequency_type=="days" || data.theraphy.frequency_type=="Days")
            {
              my_orders.append('<div class="col-md-12">');
              if(val.duration_type =="Lifetime")
              {
                my_orders.append('<div class="col-lg-3">-</div>');
              }
              else
              {
                my_orders.append('<div class="col-lg-3">'+ val.duration_count + '</div>');
              }
              my_orders.append('<div class="col-lg-3">'+ val.duration_type + '</div>');
              my_orders.append('<div class="col-lg-3">'+ val.cost + '</div>');
              my_orders.append('<div class="col-lg-3">'+ val.in_app_purchase_id + '</div>');
              my_orders.append('</div>');
            }
            else if(data.theraphy.frequency_type=="Sessions" || data.theraphy.frequency_type=="sessions" || data.theraphy.frequency_type=="Session")
            {
            my_orders.append('<div class="col-md-12">');
            my_orders.append('<div class="col">'+ val.no_session + '</div>');
            my_orders.append('<div class="col">'+ val.interval_days + '</div>');
            my_orders.append('<div class="col">'+ val.session_days + '</div>');
            my_orders.append('<div class="col">'+ val.cost + '</div>');
            my_orders.append('<div class="col">'+ val.in_app_purchase_id + '</div>');
            my_orders.append('</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>');
          $('audio').prop('controlsList','nodownload');
      })
   });

    $('body').on('click', '#delete-therapy', function ()
    {

        var therapy_id = $(this).data("id");
        if(confirm("Are You sure want to delete !"))
        {
          $.ajax({
              type: "get",
              url: "{{URL::to('/get-therapy-list1/delete')}}/"+therapy_id,
              success: function (data)
              {
                //var msg = array('msg' => 'Delete Successfully');
                console.log(data);
                toastr.success("Successfully deleted");
                $('#therapylist').DataTable().ajax.reload()
                var oTable = $('#therapylist').dataTable();
                oTable.fnDraw(false);
              },
              error: function (data)
              {
                console.log('Error:', data);
                toastr.error("Sorry, something went wrong.");
              }
          });
        }
    });

    $('.duration_type').on('change', function()
    {
        var type = $('.duration_type0').val();
        if(type == "Lifetime" || type == "lifetime"){
            $('.duration_count0').val('-');
        }
    });
    $('.duration_type').on('change', function()
    {
        var type = $('.duration_type1').val();
        if(type == "Lifetime" || type == "lifetime"){
            $('.duration_count1').val('-');
        }
    });

if ($("#therapyForm").length > 0)
{
  $("#therapyForm").validate({
    rules: {
      therapy_title: {
        required: true,
      },
      description: {
        required: true,
        minlength: 2,
        maxlength: 250
      },
      therapy_type: {
        required: true
      },
      duration: {
        required: true
      },
      frequency_type:
      {
        required: true
      },
      },
      messages:
      {
        therapy_title: {
        required: "Please enter Therapy Title",
        maxlength: "Your last name maxlength should be 50 characters long."
        },
        description:
        {
          required: "Please enter Therapy Description",
          maxlength: "Your last Description maxlength should be 250 characters long."
        },
        therapy_type:
        {
          required: "Please enter Therapy Type"
        },
        duration:
        {
          required: "Please enter Therapy Duration"
        },
        frequency_type:
        {
          required: "Please enter Frequency Type"
        },

      },

     submitHandler: function(form) {

      var actionType = $('#btn-save').val();
      $('#btn-save').html('Processing....');

      $.ajax({
          data: $('#therapyForm').serialize(),
          url: "{{URL::to('/get-therapy-list1/store')}}",
          type: "POST",
          dataType: 'json',
          success: function (data) {
            if(data.success===1)
              {
              toastr.success(data.msg);
              $('#therapyForm').trigger("reset");
              $('#ajax-therapy-modal').modal('hide');
              $('#btn-save').html('Save Changes');
                  setTimeout(function(){// wait for 5 secs(2)
                    window.location.href = "{{ URL::to('/get-therapy-list1') }}";
                  }, 2000); 
              }
              else(data.success===0)
              {
                toastr.error(data.msg);
               }
          },
          error: function (data)
          {
            if(data.success==0)
            {
              toastr.success(data.msg);
              console.log('Error:', data);
              $('#btn-save').html('Save Changes');
            }
          }
      });
    }
  })
}
});

//prevent from right clck
$(function() {
        $(this).bind("contextmenu", function(e) {
            e.preventDefault();
        });
    });
</script>
@endsection