@extends('admin.layout') @section('content')

<style type="text/css">


.content-wrapper, .right-side, .main-footer {
    padding-top: 60px!important;
}


.product-buttons {

    padding: 30px 0px;

}

.sidenav{
  width: 0px;
}

.sidenav .closebtn{
    display: block;
}

.content-wrapper {
    margin-left: 0px !important;
}
.content-wrapper.close-wrapper {
    margin-left: 300px!important;
}


.pro-btn {

    background: #333;

    border: none;

    color: #fff;

    padding: 10px 25px;

    display: block;

    width: 100%;

    margin: 10px 0px;

    border-radius: 30px;

    cursor: pointer;

}



.pro-btn i {

    color: #fff;

    vertical-align: inherit;

}



.product-buttons .col-3 {

    text-align: center;

}



.product-buttons a{

  color: #fff!important;

}



.blue-color {

    background: #1f328e;

}



.pink-color {

    background: #F44336;

}



.green-color {

    background: #4CAF50;

}



.orange-color {

    background: #FF9800;

}



.light-blue-color {

    background: #03A9F4;

}



.pro-btn:hover{

  opacity: 0.8;

  color: #fff;

}



.pro-btn:focus{

  outline: none;

}



.close {

    position: absolute;

    right: 15px;

}

button.close {

    position: absolute;

    right: 15px;

}

.modal-body {

    padding: 5rem 4rem;

    text-align: center;

}

.modal-body {

    font-size: 16px;

}

.modal-content {

    min-height: auto;

}

.modal-title {

    padding-left: 0;

}

.modal-body p {

    margin-bottom: 0;

    font-size: 24px;

    font-weight: 600;

}
.orderleftBar {
    margin: 15px 15px 0 15px;
    background: white;
    border-radius: 4px;
}
.orderRight {
    background-color: #fff;
    margin: 15px 15px 0 0px;
    border-radius: 4px;
    height: 100vh;
    overflow-y: scroll;
    padding-bottom: 110px;
}
/* profile page */
.new_media img{
    border-radius: 50%;
}
.mynav {
    border-bottom: 1px solid #d3d3d3;
}

.mynav .nav > li > a:hover{
  background: #fff;
}
.new_media .newfontsize {
    font-size: 18px;
}
.purchase_hd {
    font-size: 20px;
    width: 100%;
    background-color: #36d8ff;
    color: white;
    padding: 7px 15px;
}
.myavailbox h5 {
    text-overflow: ellipsis;
    width: 100%;
    float: left;
    word-break: break-all;
}
.newitem a {
    text-align: left;
    font-weight: 500;
}
.history_box .newrow{
    padding: 20px 15px;
}
.big_size{
    font-size: 40px;
}
.big_size1{
    font-size: 60px !important; 
    color: #36d8ff;
}
.mybalance_box{
    padding: 51px 0;
}

.user-tab {
    padding: 6px 20px;
}

#tabs{
  background: #ffffff;
  color: #555;
}
#tabs h6.section-title{
    color: #eee;
}

#tabs .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #f3f3f3;
    background-color: transparent;
    border-color: transparent transparent #f3f3f3;
    border-bottom: 4px solid !important;
    font-size: 20px;
    font-weight: bold;
}
#tabs .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: #555;
    font-size: 20px;
}

.nav-tabs .nav-link.active {
    color: #36d8ff!important;
    background-color: transparent;
    border-color: #fff;
    border-bottom: 4px solid #36d8ff !important;
  }

  .table > thead > tr > th {

    border-color: #dedede;

    font-size: 16px !important;

    text-align: center;

    border-bottom: none;

}

.table-bordered > tbody > tr > td {
    border: 1px solid #e4e4e4;
    padding: 8px 15px;
}

.newfontsize ul {
    list-style-type: circle;
    padding-left: 15px;
    margin-top: 10px;
}

.newfontsize ul li {
    font-size: 14px;
    padding: 3px 0px;
}


</style>





<div class="content-wrapper"> 



<section class="orderPage">
              <div class="row no-gutters">
            <div class="col-md-4 col-sm-12">
              <div class="orderleftBar" style="margin: 15px 15px 0 15px;">
                <div class="row no-gutters">
                  <div class="col-7">
                    <div class="ordersearch">
                      <i class="fas fa-search"></i>
                      <input type="search" name="" value="" placeholder="Search..." id="searchable">
                    </div>
                  </div>
                  <div class="col-4 proDuct3">
                    <p class="tPro text-right tpcount">0 Employees</p>
                  </div>
                  <div class="col-1 text-center">
                    <a href="#" class="plusIcon"><i class="fas fa-plus"></i></a>
                  </div>
                </div>
                <!-- row -->


                <div class="row no-gutters">
                  <div class="col-12">
                    <div class="orderScroll search_custList">

                     
                      @if (count($customerData['result']) > 0) 
                         @foreach ($customerData['result'] as $key=>$listingCustomers)
                    <div class="productORder" onclick="Getproductinfo({{ $listingCustomers->emp_id }})">
                      <div class="media new_media">
                          <img class="mr-3" src="{{asset('').'/'.$listingCustomers->profile_pic}}" alt="">
                          <div class="media-body">
                            <h5 class="mt-0">{{ $listingCustomers->first_name }} {{ $listingCustomers->last_name }}</h5>
                            <span>Emp Code: {{ $listingCustomers->employee_code }}</span>
                            <div class="row inStock">
                              <div class="col-12">
                                <p>{{$listingCustomers->contact }}</p>
                              </div>
                             
                            </div>
                          </div>
                        </div>
                    </div>

                @endforeach 
                @endif

                                 

                 
                



                  </div>
                  </div>
                </div>
                <!-- row -->

              </div>
            </div>
            <!-- col -->

            <div class="col-md-8 col-sm-12">

              <div class="orderRight">
                    
                    
                    <ul class="nav nav-pills mb-3 nav-justified mynav" id="" role="tablist">

                          <li class="nav-item newitem">
                              <a class="nav-link">User Profile</a>
                          </li>

                        

                      </ul>
            <div class="apenddata">
              

              </div>
                    
                

            </div>
            <!-- col -->





          </div>
        <!-- row -->
        </div>

      </section>

</div>

<!-- deleteProductModal -->



  <div class="modal " id="deleteProductModal" tabindex="-1" role="dialog" aria-labelledby="deleteProductModalLabel">



    <div class="modal-dialog" role="document">



    <div class="modal-content">


      {!! Form::open(array('url' =>'admin/deleteEmp', 'name'=>'deleteEmp', 'id'=>'deleteEmp', 'method'=>'post', 'class' => 'form-horizontal', 'enctype'=>'multipart/form-data')) !!}



          {!! Form::hidden('action',  'delete', array('class'=>'form-control')) !!}



          {!! Form::hidden('emp_id',  '', array('class'=>'form-control', 'id'=>'products_id')) !!}



      <div class="modal-body">  



        <center><img style="width: 60px; padding-bottom: 20px;" src="/resources/views/outlets/common/images/cancel.svg" alt=""></center>

        <p>Are you sure you want to delete this user ?</p>



      </div>







      <div class="modal-footer">



              <button type="button" name="button" data-dismiss="modal">

                <img src="/resources/views/outlets/common/images/cancel.svg" alt="">

              </button>

              <button type="submit" id="deleteEmps" >

                <img src="/resources/views/outlets/common/images/verified.svg" alt="">

              </button>



            </div>



      {!! Form::close() !!}



    </div>



    </div>



  </div>

 <!-- ============end add to customer========= -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{!! asset('resources/pos1/js/bootstrap.min.js') !!}"></script>
<script type="text/javascript">
   function Getproductinfo(custid)

 {

     $.ajax({

         url: "{{ route('listingUserInfoEmp') }}",

         method: 'GET',

         data: {
             custid: custid
         },

         dataType: 'json',

         success: function(data)

         {

             $('.apenddata').html(data.table_data);

         }

     });

 }

 /** Search Customers***/



 function fetch_customer_data(query = '')
 {
  
$.ajax({

   url:"{{ route('listingCustomersInfoSearch') }}",

   method:'GET',

   data:{query:query},

   dataType:'json',

   success:function(data)

   {
  $('.search_custList').html(data.table_data);
  $('.tpcount').text('');
  $('.tpcount').text(data.total_data+' Users');
   }

  });
 }
  $(document).on('keyup', '#searchable', function(){

  var query = $(this).val();
  //console.log(query);
  fetch_customer_data(query);

 });
</script>

@endsection