@extends('companyAdmin.layouts.auth')

@section('title')
{{ env('APP_NAME') }} | Employee List
@endsection

@section('styles')
<!-- Data table css -->
	<link href="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.css') }}" rel="stylesheet"	/>
	<link href="{{ asset('assets/plugins/datatable/jquery.dataTables.min.css') }}" rel="stylesheet"	/>
@endsection

@section('content')
    <!-- MAIN BODY CONTENT -->
    <div class="top-header">
        <h1>Employees</h1>
        <a href="{{ route('companyAdmin.addEmployee') }}">
            <div class="action-group">
                <span class="add-company">
                    Add New Employee <img src="{{ asset('assets/images/circle-plus.svg') }}" alt="">
                </span>
            </div>
        </a>
    </div>
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3">
                            <select name="checkstatus" id="checkstatus" class="form-control">
	                    		<option value="">Select status</option>
								<option value="1">Active</option>
								<option value="0">Deactive</option>
	                  		</select>
                        </div>
                    </div>

                    <!-- COmpanies table -->
                    <div class="table-responsive">
                        <table id="employees-table" class="table card-table dataTable table-hover table-vcenter text-nowrap" style="width:100%">
                            <thead>
                                <tr>
                                    <th>Points</th>
                                    <th>User Name</th>
                                    <th>Location</th>
                                    <th>Messages</th>
                                    <th>Id</th>
                                </tr>
                            </thead>
                        
                        </table>


                    </div>
                </div>
            </div>
        </div>
    </div>
	<!--// MAIN BODY CONTENT -->
@endsection

@section('scripts')

<!-- Data tables -->
<script src="{{ asset('assets/plugins/datatable/jquery.dataTables.min.js') }}"></script>
	<script src="{{ asset('assets/plugins/datatable/dataTables.bootstrap4.min.js') }}"></script>
	<!-- <script src="{{ asset('assets/js/datatable.js') }}"></script> -->

<script type="text/javascript">

var oTable = '';
$(document).ready(function () {
    oTable = $('#employees-table').DataTable({
        "language": {
            "lengthMenu": "Show: _MENU_ records per page",
            "zeroRecords": "Oops No record Found",
            "infoEmpty": "No records available",
            "infoFiltered": "(filtered from _MAX_ total records)"
        },
        paging: true,
        processing: true,
        serverSide: true,
        pagingType: 'full_numbers',
        ajax: {
            "url": "{{ route('companyAdmin.employeeList') }}",
            "type": "GET",
            "data": function(d) {
                d.checkstatus = $('#checkstatus').val();
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            }
        },
        columns: [
            {
              data: 'point', 
              name: ''
            },
            {
              data: 'user_image',
               name: ''
             },
            {
               className: 'details-control',
               data: 'active_location',
               name: ''
             },
             {
              data: 'message',
               name: ''
            },
             { data: 'id', name: 'id' },
        ],

        'columnDefs': [
            {
                "targets": [4],
                "visible": false
            },
            // {
            //     "targets": [3],
            //     "visible": false
            // }
        ],
        createdRow: function (row, data, index) {
                $(row).addClass("view");
        },
        'aaSorting': [4, 'DESC']

    });

	$("#checkstatus").change(function() {
		oTable.draw();
	});

    // Add event listener for opening and closing details
        $('#employees-table tbody').on('click', 'td.details-control', function () {            
            var tr = $(this).closest('tr');
            var row = oTable.row( tr );

            oTable.rows().every(function(){
              if(this.child.isShown()){
                this.child.hide();
                $(this.node()).removeClass('open');
              }
            });
     
            if ( row.child.isShown() ) {
                row.child.hide();
                tr.removeClass('open');
            }else {
                row.child( format(row.data()) ).show();
                tr.addClass('open');
            }
        } );


        $('#employees-table tbody').on('click', '.open', function () {  
         
            var tr = $(this).closest('tr');
            var row = oTable.row( tr );
     
            if ( row.child.isShown() ) {
                row.child.hide();
                tr.removeClass('open');
            }else {
                row.child( format(row.data()) ).show();
                tr.addClass('open');
            }

        } );

});

function format ( d ) {
        var listLoc =d.listLocation.split(",");
        var html ='<ul>';
        listLoc.forEach(function( item ) {
            html += '<li>'+item+'</li>';
        });
        html +='</ul>';
        return `<div class="find-table-content side-panel">
                  <div class="sub-content">`+html+`</div>                  
                </div>`;
      // var collapse_data=`<div class="find-table-content">
      //       <div class="find-sub-img">
      //         <img src="../assets/images/house.jpg" alt="">
      //       </div>
      //       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
      //     </div>`;
    }

</script>

@endsection