@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">Users</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/users/create') }}" class="btn btn-blue text-white bg-blue">
                              <i class="fa fa-plus"></i> New User
                              </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-6">
                     <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-6 timer count-title count-number" data-to="{{$countActiveUsers}}" data-speed="1500">{{$countActiveUsers}}</h2>
                              <p class="col-md-6 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-6 timer count-title count-number" data-to="{{$countInactiveUsers}}" data-speed="1500">{{$countInactiveUsers}}</h2>
                              <p class="col-md-6 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.users.ajax')
                </div>
                @endif
            </form>
            </div>
         </div>
      </div>
   </div>
</div>


<script>
  $(function(){
    getData(0);

  $(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