@extends('layouts.app')
@section('content')
<style>
.inactive-users
{
  color:green;

}
.active-users
{
  color:red!important;
}
.fixTableHead {
  max-height: 500px;
  overflow-y: auto;
}
.fixTableHead thead th {
  position: sticky;
  top: 0;
}
.fixTable {
  border-collapse: collapse;
  width: 100%;
}
.fixTable th {
  background: #333;
  color:#fff;
}
</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">Customer</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">Customer</li>
        </ol>
    </div>

</div>
<div class="row">
  <div class="btn btn-block pull-right" style="    margin-right: 30px;">
<a class="btn btn-success waves-effect waves-light pull-right" href="{{ url('customerexport') }}" >Export File</a>
</div>
</div>
<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="Customerlist" width="100%">
   <thead>
      <tr>
        <th>ID</th>
         <th>S. No</th>
         <th>Name</th>
         <th>Date of Birth</th>
         <th>Contact Number</th>
         <th>Email</th>
         <th>City</th>
         <th>Country</th>
         <th>Create At</th>
         <th>Status</th>
         <th>Action</th>
      </tr>
   </thead>
</table>
</div>

<div class="modal" id="ajax-Customer-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="CustomerModal"></h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
    </div>
    <div class="modal-body">
    <div class="col-lg-12">
    <div class="row">
    <div class="col-lg-12">
    <div class="row">
    <div class="col-lg-5">
    <p class="font-medium">Name : <p>
    </div>
    <div class="col-lg-7">
    <p id="name"></p>
    </div>
    <div class="col-lg-5">
    <p class="font-medium">Date of Birth : <p></div>
    <div class="col-lg-7"><p id="dob"></p>
    </div>
    <div class="col-lg-5">
      <p class="font-medium">Contact Number : <p>
      </div>
      <div class="col-lg-7">
        <p id="contact_number"></p>
        </div>
    <div class="col-lg-5">
    <p class="font-medium">Email Id : <p>
    </div>

    <div class="col-lg-7">
    <p id="email"></p>
    </div>
    <div class="col-lg-5">
    <p class="font-medium">City : <p>
    </div>
    <div class="col-lg-7">
    <p id="city"></p>
    </div>
    <div class="col-lg-5">
    <p class="font-medium">Country : </p>
    </div>
    <div class="col-lg-7">
    <p id="country"></p>
    </div>
    <div class="col-lg-5">
      <p class="font-medium">Created At : </p>
      </div>
      <div class="col-lg-7">
      <p id="created_at"></p>
      </div>
      <div class="col-lg-5">
      <p class="font-medium">Status : </p>
      </div>
      <div class="col-lg-7">
      <p id="status"></p>
      </div>
    <div class="col-lg-6">
    </div>
    <!--<form id="active">
      <div class="form-group">
      @csrf
        <label for="payment_status" class="col-sm-12 control-label">Ative</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 class="col-sm-offset-2 col-sm-12 py-4 text-center" style="margin-top:-30px;">
      <button type="submit" class="btn btn-primary" id="btn-save" value="create">Add Therapy
      </button>
  </div>
    </form>-->
    </div>
    </div>
    </div>


    <h6>Therapy Play Logs</h6>
        <div class="table-responsive fixTableHead">
          <table class="table table-striped table-bordered fixTable">
            <thead>
              <tr>
                <th width="10%">S.No</th>
                <th width="40%">Therapy title</th>
                <th width="25%">Date & Time</th>
                <th width="25%">Status</th>
              </tr>
              <tbody class="logs_data">
                <tr>
                  <td colspan="4" style="text-align:center;">No log found</td>
                </tr>
              </tbody>
            </thead>
          </table>
        </div>


    </div>

    </div>
</div>
</div>
</div>

</div>
</div>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function ()
{
  var token = $("input[name='_token']").val();
		$.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      		}
  		});
    $('#theraphyLogs').DataTable();
		$('#Customerlist').DataTable({
         processing: true,
         serverSide: true,
         ajax: {
          //url: "{{ url('get-customer-list') }}",
          url: "{{ url('/get-customer-list')}}",
          type: 'GET',
         },
         columns: [
                  {data: 'id', name: 'id', 'visible': false},
                  {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false,searchable: false},
                  { data: 'name', name: 'name' },
                  { data: 'dob', name: 'dob' ,"render": function (data) {
                    if (data === null) return "-";
                    if (data === NaN-NaN-NaN) return "-";
                    var date = new Date(data);
                    var month = date.getMonth() + 1;
                    return date.getDate() + "-" + (month.toString().length > 1 ? month : "0" + month) + "-" + date.getFullYear();
                    }},
                  { data: 'mobile_number', name: 'mobile_number' },
                  { data: 'email', name: 'email'},
                  { data: 'city', name: 'city'},
                  { data: 'country', name: 'country' },
                  { data: 'created_at', name: 'created_at' },
                    { data: 'status', name: 'status' , "render": function (data) {
                    if(data==1){
                      return "<span>Active</span>";
                    }else{
                      return "<span>InActive</span>";
                    }
                  }},
                  {	data: 'action', name: 'action', orderable: false},
               ],
        order: [[1, 'desc']]
      });
    /*  When user click add user button */
    $('#Customer').click(function ()
    {
        $('#btn-save').val("Create Customer");
        $('#Customer_id').val('');
        $('#CustomerForm').trigger("reset");
        $('#CustomerModal').html("Customer");
        $('#ajax-Customer-modal').modal('show');
    });

   /* When click edit user */
    $('body').on('click', '.edit-subscribe', function ()
    {
      var Customer_id = $(this).data('id');
      $.get("{{ url('get-customer-list/edit')}}/"+Customer_id, function (data)
      {
          $('#title-error').hide();
          $('#CustomerModal').html("View Customer");
          $('#btn-save').val("edit-subscribe");
          $('#ajax-Customer-modal').modal('show');
          $('#faqid').text(data.id);
          $('#name').text(data.name);
          $('#contact_number').text(data.mobile_number);
          $('#dob').text(data.dob);
          $('#address').text(data.address);
          $('#email').text(data.email);
          $('#city').text(data.city);
          $('#country').text(data.country);
          $('#created_at').text(data.created_date);
          if(data.status==1){data.status ="Active"}else{data.status ="InActive"}
          $('#status').text(data.status);

          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>'+data.activity_logs[i].therapy_title+'</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="4" style="text-align:center">No log found</td>';
              y+='</tr> ';
          }
          $('.logs_data').html(y);

      })
   });

    $('body').on('click', '#inactive-users', function ()
    {
        var Customer_id = $(this).data("id");
        if(confirm("Are You Sure do you want to Inactive the User"))
        {
          $.ajax({
              type: "get",
              url: "{{ url('/get-customer-list/delete')}}/"+Customer_id,
              success: function (data)
              {
                if(data.success==1)
               {
                toastr.success(data.msg);
                setTimeout(function() {
                  $('#Customerlist').DataTable().ajax.reload()
                  var oTable = $('#Customerlist').dataTable();
                  oTable.fnDraw(false);
                  }, 500);
               }
               if(data.success==0)
               {
                toastr.error(data.msg);
               }
              },
              error: function (data)
              {
                if(data.success==0)
                {
                toastr.error(data.msg);
                }
              }
          });
        }
    });
    $('body').on('click', '#active-users', function ()
    {
        var Customer_id = $(this).data("id");
        if(confirm("Are You Sure do you want to Activate the User"))
        {
          $.ajax({
              type: "get",
              url: "{{ url('/get-customer-list/active')}}/"+Customer_id,
              success: function (data)
              {
               if(data.success==1)
               {
                toastr.success(data.msg);
                setTimeout(function() {
                  $('#Customerlist').DataTable().ajax.reload()
                  var oTable = $('#Customerlist').dataTable();
                  oTable.fnDraw(false);
                  }, 500);
               }
               if(data.success==0)
               {
                toastr.error(data.msg);
               }

              },
              error: function (data)
              {
                if(data.success==0)
                {
                toastr.error(data.msg);
                }
              }
          });
        }
    });



if ($("#CustomerForm").length > 0) {
    $("#CustomerForm").validate({

    rules: {
      name: {
        required: true,
        maxlength: 50
      },

        email: {
                required: true,
                maxlength: 50,
                email: true,

            },
            dob:
                {
                  required: true
                },
                address:
                {
                    required: true,
                    minlength: 3,
                    maxlength: 100
                },
                city:
                {
                   required: true,
                },
                country:
                {
                    required: true,
                },

    },
    messages: {

      name: {
        required: "Please enter name",
        maxlength: "Your last name maxlength should be 50 characters long."
      },
      email: {
          required: "Please enter valid email",
          email: "Please enter valid email",
          maxlength: "The email name should less than or equal to 50 characters",

        },
        dob:
                    {
                      required:"Please Enter Your Date of Birth",
                    },
                    address:
                    {
                        required: "Please Enter Address",
                        minlength: "Your name minlength should be 3 characters.",
                        maxlength: "Your name maxlength should be 50 characters long."
                    },
                    city:
                    {
                        required: "Please Select Yout City",
                    },
                    country:
                    {
                        required: "Please Select Yout State",
                    },

    },
    submitHandler: function(form) {
      $('#btn-save').html('Sending..');
      $.ajax({
        url: "{{ url('/get-customer-list/store')}}",
        type: "POST",
        data: $('#CustomerForm').serialize(),
        dataType: "json",
        success: function( response ) {
            $('#Customerlist').DataTable().ajax.reload();
                $('#CustomerForm').trigger("reset");
              $('#ajax-Customer-modal').modal('hide');
              var oTable = $('#Customerlist').dataTable();
              oTable.fnDraw(false);
        },
    error: function (response)
        {
            console.log('Error:', response);
              $('#CustomerForm').html(response);
              $('#btn-save').html('Save Changes');
    }
      });
    }
  })
}
});
</script>
@endsection