@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-list') }}" class="btn btn-success waves-effect waves-light pull-right">Add Therapy</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">Language</label>
                            <div class="col-sm-12">
                                <select name="language_filter" id="language_filter" class="form-control">
                                    <option value="">Select</option>
                                    <option value="Tamil">Tamil</option>
                                    <option value="English">English</option>
                                    <option value="Hindi">Hindi</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="from_date" class="col-sm-12 control-label">Therapy Type</label>
                            <div class="col-sm-12">
                              <select name="therapy_type"  class="form-control therapy_type">
                                <option value="">Select</option>
                                <option value="Free">Free</option>
                                <option value="Meditation">Meditation</option>
                                <option value="Therapy">Therapy</option>
                            </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="from_date" class="col-sm-12 control-label">Frequency Type</label>
                            <div class="col-sm-12">
                              <select name="frequency_type"  class="form-control frequency_type">
                                <option value="">Select</option>
                                <option value="days">Days</option>
                                <option value="Session">Session</option>
                            </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <label for="from_date" class="col-sm-12 control-label">Sort By</label>
                            <div class="col-sm-12">
                              <select name="sort_by" id="sort_by" class="form-control">
                                <option value="">Select</option>
                                <option value="1">A-Z</option>
                                <option value="2">Z-A</option>
                                <option value="3">Low-High</option>
                                <option value="4">High-Low</option>
                            </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 py-4">
                        <button type="submit" class="btn btn-success pull-left filter" id="filter" value="Apply"
                            style="margin:10px;">Filter</button>
                        <button type="button" name="refresh" id="refresh" class="btn btn-primary pull-left reset_filter"
                            style="margin:10px;">Reset</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</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>Image</th>
         <th>Description</th>
         <th>Therapy Type</th>
         <th>Language</th>
         <th>Duration</th>
         <th>Frequency Type</th>
         <th>Cost</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">
        <p class="font-medium"  id="head-image">Image</p>
        <p id="image"></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 class="col-lg-4">
        <p class="font-medium" id="headcost-type">cost</p>
        <p id="cost"></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 class="col-lg-12 py-2">
        <p class="font-medium">Created By</p>
        <p id="created_by"></p>
      </div>
      <div class="col-lg-12 py-2">
        <p class="font-medium">Updated By</p>
        <p id="updated_by"></p>
      </div>
    </div>
</div>
</div>
</div>

</div>
</div>
	</div>
  </div>
</div>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.8/js/jquery.dataTables.min.js" "></script>

<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('/') }}/";

     var table_filter =   $('#therapylist').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
            url: "{{ URL::to('/get-therapy-list') }}",
            type: 'GET',
            data: function (filter) {
                filter.sort_by = $('#sort_by').val();
                filter.language_filter = $('#language_filter').val();
                filter.therapy_type = $('.therapy_type').val();
                filter.frequency_type = $('.frequency_type').val();
            },
            },
            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: 'therapy_image', name: 'therapy_image' },
            { data: 'description', name: 'description', "autoWidth": true, "render": function (data, type, row, meta) { return fn(data, 100); } },
            { data: 'therapy_type', name: 'therapy_type' },
            { data: 'language_name', name: 'language_name' },
            { data: 'duration', name: 'duration' },
            { data: 'frequency_type', name: 'frequency_type' },
            { data: 'cost', name: 'cost' },
            { 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: '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']],
            });

            $('body').on('click','.filter',function(){
                table_filter.draw()
            })
            $('body').on('click','#refresh',function(){
                $('#language_filter').val('')
                $('.therapy_type').val('')
                $('.frequency_type').val('')
                $('#sort_by').val('')
                table_filter.draw(true, true);
            })

  /*  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-list/show/') }}/"+therapy_id, function (data)
      {
        console.log(data);
         $("#package").html("");
         $("#therapy_audio").html("");
         $('#image').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);
          $('#created_by').text(data.theraphy.created_by);
          $('#updated_by').text(data.theraphy.updated_by);
          if(data.theraphy.therapy_image){
              $('#image').append(`<img src="${data.theraphy.therapy_image}" width="100px" height="100px">`);
            }else{
                $('#image').append(`<img src="therapy-image/default.png" width="100px" height="100px">`);
          }
          $('#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-list/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-list/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-list') }}";
                  }, 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