@extends('layouts.admin')
@section('content')
   @php
   $ADD_ACCESS    = false;
   $EDIT_ACCESS   = false;
   $VIEW_ACCESS   = false;

   $ADD_ACCESS    = Helper::can_access('Add Customer');
   $EDIT_ACCESS    = Helper::can_access('Edit Customer Profile');
   $VIEW_ACCESS   = Helper::can_access('View Customer List');
 @endphp
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="main-content-wrap sidenav-open d-flex flex-column">
   <!-- ============ Body content start ============= -->
   <div class="main-content">
      <div class="row">
         <div class="card text-left">
            <div class="card-body">
              <form action="{{route('/export/customer-list')}}" method="POST">
              @csrf
               <div class="row">
                  <div class="col-md-3">
                     <h2 class="mb-3" style="font-weight:700">Learners</h2>
                  </div>
                  <div class="col-md-9">
                     <div class="" style="text-align:right">
                        <ul class="employee-top-btns">
                          @if($ADD_ACCESS)
                           <li>
                              <a href="{{ url('/admin/learners/create') }}" class="btn btn-blue text-white bg-blue">
                              <i class="fa fa-plus"></i> New Learner
                              </a>
                           </li>
                           @endif
                            <!-- <li>
                              <button class="btn btn-blue dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-download"></i> Export </button>
                              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                <button class="dropdown-item" type="submit" name="exportExcel">Excel</button>
                                <button class="dropdown-item" type="submit" name="exportPdf">PDF</button>
                              </div>

                           </li> -->
                        </ul>
                     </div>
                  </div>
                  <div class="col-md-4">
                     <div class="row text-center">
                        <div class="col">
                           <div class="row counter active-bg">
                              <!-- <i class="fa fa-lightbulb fa-2x"></i> -->
                              <h2 class="col-md-4 timer count-title count-number" data-to="{{$countActiveUsers}}" data-speed="1500">{{$countActiveUsers}}</h2>
                              <p class="col-md-8 count-text "> Active</p>
                           </div>
                        </div>
                        <div class="col">
                           <div class="row counter pending-bg">
                              <!-- <i class="fa fa-coffee fa-2x"></i> -->
                              <h2 class="col-md-4 timer count-title count-number" data-to="{{$countInactiveUsers}}" data-speed="1500">{{$countInactiveUsers}}</h2>
                              <p class="col-md-8 count-text ">Inactive</p>
                           </div>
                        </div>
                        <!--   <div class="col"><div class="counter"><i class="fa fa-bug fa-2x"></i><h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2><p class="count-text ">Coffee With Clients</p></div></div> -->
                     </div>
                  </div>
               </div>
             <div class="row" style="margin-top: 20px;">
                 <div class="col-md-2 form-group mb-1">
                    <label>Search by name or phone </label>
                    <input class="form-control keyword" type="text" name="keyword" placeholder="Enter name or phone">

                </div>
                <div class="col-md-2 form-group mb-1">
                    <label>Status</label><br>
                    <select class="form-control  empStatus" name="status">
                      <option value="" selected>All</option>
                      <option value="1">Active</option>
                      <option value="0">Inactive</option>
                    </select>
                   <i class="fa fa-sort-desc rel-ic" aria-hidden="true"></i>
                </div>
                <div class="col-md-2 form-group mb-1">
                    <label>Order By</label><br>
                    <select class="form-control order_by" name="order_by">
                      <option value="name">Name</option>
                      <option value="created_at">Created at</option>
                    </select>
                   <i class="fa fa-sort-desc rel-ic" aria-hidden="true"></i>
                </div>
                <div class="col-md-2 form-group mb-1">
                    <label> From date </label>
                    <input class="form-control from_date commonDatePicker" type="text" name="from" placeholder="From date">
                  <i class="fa fa-calendar" aria-hidden="true"></i>
                </div>
                <div class="col-md-2 form-group mb-1">
                    <label> To date </label>
                    <input class="form-control to_date commonDatePicker" type="text" name="to" placeholder="To date">
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                </div>
                <div class="col-md-2">
                <button class="btn btn-sm bg-blue text-white searchBtn" style="width: 100%;padding: 7px;margin: 18px 0px;"> Filter </button>
                </div>
            </div>
              @if($VIEW_ACCESS)
               <div id="empResult">
                @include('admin.learners.ajax')
                </div>
                @endif
            </form>
            </div>
         </div>
      </div>
   </div>
</div>

<!--note model  -->

<div class="modal fade" id="employee-note" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <form method="post" action="{{ url('/admin/save-note') }}" id="employeeNoteForm">
       @csrf
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Notes</h4>
      </div>
      <div class="modal-body h-model">
        <textarea name="note" placeholder="Enter text here......" rows="4" id="customernote" style="margin-bottom: 20px;"></textarea>
         <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-note"></p>
        <input type="hidden" name="user_id" class="user_id">
        <div id="reminderNoteDisplay">

        </div>
      </div>
      <div class="modal-footer">
         <button type="submit" id="employeeNoteBtn" class="btn btn-success">Save</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
      </form>
    </div>
  </div>
</div>

<script>
  $(function(){
        getData(0);
    $(document).on('click', '.employee-note',function(event){
    var user_id=$(this).attr('value');
    var noteData={"_token": "{{ csrf_token() }}",'user_id':user_id};

    $('.user_id').val(user_id);
    $.ajax({
    url: "{{route('admin.note')}}",
    type:"post",
    data:noteData,
    success:function(result){
      $('#reminderNoteDisplay').html(result);
    }
    });
    $('#employee-note').modal();
    });

    $('#employeeNoteBtn').click(function(e) {
     e.preventDefault();
     $("#employeeNoteForm").submit();
     });

  $(document).on('submit', 'form#employeeNoteForm', function (event) {
   event.preventDefault();
   //clearing the error msg
   $('p.error_container').html("");
   var form = $(this);
   var data = new FormData($(this)[0]);
   var url = form.attr("action");

    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (response) {

            console.log(response);
            if(response.success==true  ) {

                //notify
               toastr.success("Note added successfully.");
                // redirect to google after 5 seconds
                window.setTimeout(function() {
                    //window.location = "{{ url('/')}}"+"/employees/";
                    window.location.reload();
                    $("#employeeNoteForm").trigger('reset');
                }, 2000);

            }
            //show the form validates error
            if(response.success==false ) {
                for (control in response.errors) {
                    $('#error-' + control).html(response.errors[control]);
                }
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            // alert("Error: " + errorThrown);
        }
    });
    return false;
   });

  $(document).on('change','.empStatus,.from_date, .to_date, .order_by', function (e){
    $("#overlay").fadeIn(300);　
    getData(0);
    e.preventDefault();

  });

  $(document).on('click','.searchBtn', function (e){
    $("#overlay").fadeIn(300);　
    getData(0);
    e.preventDefault();

});

$(document).on('keyup','.keyword', function (e){
    $("#overlay").fadeIn(300);　
    getData(0);
    e.preventDefault();

});

 $(document).on('change','.from_date',function() {

    var from = $('.from_date').datepicker('getDate');
    var to_date   = $('.to_date').datepicker('getDate');

    if($('.to_date').val() !=""){
    if (from > to_date) {
    alert ("Please select appropriate date range!");
    $('.from_date').val("");
    $('.to_date').val("");

    }
    }

});
//
$(document).on('change','.to_date',function() {

    var to_date = $('.to_date').datepicker('getDate');
    var from   = $('.from_date').datepicker('getDate');
        if($('.from_date').val() !=""){
        if (from > to_date) {
        alert ("Please select appropriate date range!");
        $('.from_date').val("");
        $('.to_date').val("");

        }
        }

});

  //pagination
  $(document).on('click', '.pagination a',function(event){
    //loader
    $("#overlay").fadeIn(300);　
    $('li').removeClass('active');
    $(this).parent('li').addClass('active');
    event.preventDefault();
    var myurl = $(this).attr('href');
    var page=$(this).attr('href').split('page=')[1];
    getData(page);
});

function getData(page){
    var keyword     =    $(".keyword").val();
    var empStatus  =    $(".empStatus option:selected").val();
    var from_date   =    $(".from_date").val();
    var to_date     =    $(".to_date").val();
    var order_by     =    $(".order_by").val();

    if (from_date > to_date) { from_date = to_date = ''; }

    $.ajax(
    {
        url: '?page=' + page+'&keyword='+keyword+'&status='+empStatus+'&order_by='+order_by+'&from_date='+from_date+'&to_date='+to_date,
        type: "get",
        datatype: "html",
    })
    .done(function(data)
    {
        $("#empResult").empty().html(data);
        $("#overlay").fadeOut(300);
        //debug to check page number
        // location.hash = page;
    })
    .fail(function(jqXHR, ajaxOptions, thrownError)
    {
        alert('No response from server');

    });
}

//
$(document).on('click', '.status', function (event)
{
    var id = $(this).attr('data-id');
    var type =$(this).attr('data-type');
    var name = $(this).attr('data-name');
    swal({
    // icon: "warning",
    type: "warning",
    title: 'Are you Want to Change The Status for '+name+'?',
    text: "",
    dangerMode: true,
    showCancelButton: true,
    confirmButtonColor: "#007358",
    confirmButtonText: "YES",
    cancelButtonText: "CANCEL",
    closeOnConfirm: false,
    closeOnCancel: false
    },
    function(e){
    if(e==true)
    {
    $.ajax({
    type:'POST',
    url: "{{route('admin.change-status')}}",
    data: {"_token" : "{{ csrf_token() }}",'id':id,'type':type},
    success: function (response) {
    if(response.success==false)
    {
    toastr.error("Firstly, Complete or Assign Task to any other user ");
    }
    if (response.success) {
    // window.setTimeout(function(){
    //    location.reload();
    // },2000);
    // toastr.success("Status Changed Successfully");
    if(response.type=='enable')
    {
    $('table.userTable tr').find("[data-ac='" + id + "']").fadeIn("slow");
    $('table.userTable tr').find("[data-ac='" + id + "']").removeClass("d-none");
    $('table.userTable tr').find("[data-dc='" + id + "']").fadeOut("slow");
    $('table.userTable tr').find("[data-dc='" + id + "']").addClass("d-none");
    $('table.userTable tr').find("[data-a='" + id + "']").fadeOut("slow");
    $('table.userTable tr').find("[data-a='" + id + "']").addClass("d-none");
    $('table.userTable tr').find("[data-d='" + id + "']").fadeIn("slow");
    $('table.userTable tr').find("[data-d='" + id + "']").removeClass("d-none");
    }
    else if(response.type=='disable')
    {
    $('table.userTable tr').find("[data-dc='" + id + "']").fadeIn("slow");
    $('table.userTable tr').find("[data-dc='" + id + "']").removeClass("d-none");
    $('table.userTable tr').find("[data-ac='" + id + "']").fadeOut("slow");
    $('table.userTable tr').find("[data-ac='" + id + "']").addClass("d-none");
    $('table.userTable tr').find("[data-d='" + id + "']").fadeOut("slow");
    $('table.userTable tr').find("[data-d='" + id + "']").addClass("d-none");
    $('table.userTable tr').find("[data-a='" + id + "']").fadeIn("slow");
    $('table.userTable tr').find("[data-a='" + id + "']").removeClass("d-none");
    }
    }
    else {
    }
    swal.close();
    },
    error: function (xhr, textStatus, errorThrown) {
    // alert("Error: " + errorThrown);
    }
    });
    }
    else
    {
    swal.close();
    }
    });
});

});

</script>
@endsection