@extends('layouts.admin')
<style>
    #table-clients td {
        text-align: left !important;
        padding: 8px !important;
    }

    #table-clients th {
        padding: 8px !important;
    }


</style>
@php
    $pageLimit = $searchData['pageLimit'];
    $search_value = $searchData['search_value'];
@endphp
@section('content')
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="row" style="padding-left: 20px;padding-right: 15px">
                        <h3 class="pull-left">Employee List</h3>
                        @if(isShowContent('create.employee'))
                            <a  href="{{route('create.employee')}}" class="btn btn-success btn-flat pull-right">
                                <i class="fa fa-user" aria-hidden="true"></i>
                                Add Employee
                            </a>
                        @endif
                    </div>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="x_panel">
                                <div class="x_content">

                                    <form action="{{route('employee.list')}}" method="get" role="search">
                                        <div class="row">
                                        <div class="col-md-2 col-xs-12">
                                                <div class="form-group">
                                                    <label>Show</label>
                                                <select name="pageLimit" id="pagination" class="form-control"
                                                        onchange="this.form.submit()">
                                                    <option value="10" @if($pageLimit == 10) selected @endif>10</option>
                                                    <option value="20" @if($pageLimit == 20) selected @endif>20</option>
                                                    <option value="50" @if($pageLimit == 50) selected @endif>50</option>
                                                    <option value="100" @if($pageLimit == 100) selected @endif>100</option>
                                                    <option value="500" @if($pageLimit == 500) selected @endif>500</option>
                                                </select>
                                                </div>
                                         </div>
                                        <div class="col-md-4 col-xs-12">
                                            <div class="form-group">
                                                <label>Employee Name/Email</label>
                                                <input id="search_value"
                                                       type="text"
                                                       value="{{$searchData['search_value']}}"
                                                       placeholder="Search By Name/Email"
                                                       class="form-control" name="search_value" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-2 col-xs-12">
                                            <div class="form-group" style="margin-top: 25px;">
                                                <button class="btn btn-outline-info"  style="width:100%" type="submit">Search</button>
                                            </div>
                                        </div>

                                        </div>
                                        <div class="row">
                                            <div class="col-md-2">
                                                @if(isShowContent('admin.ajax.process'))
                                                    <button style="margin-top: 15px;" onclick="return multipleEmployeeDelete()" type="button"
                                                            class="btn btn-danger pull-left" style="margin-left: 10px"
                                                            id="btnDeleteMultipleEmployee" disabled>Delete Employee
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                     </form>
                                <div class="table-responsive py-5">
                                    <table id="table-clients" class="table table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th><input type="checkbox" name="allChecked" value="all"
                                                       onclick="common_helper.allChecked(this,'checkedBoxEmployee')"></th>
                                            <th>Employee Name</th>
                                            <th>Email</th>
                                            <th>Created At</th>
                                            <th>Actions</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @if(!empty($employees))
                                            @foreach ($employees as $key => $obj)
                                                @php
                                                    $employee_info = json_encode([$obj->id,$obj->email]);
                                                    $action = 'DELETE_EMPLOYEE';
                                                @endphp
                                                <tr class="tr-height">
                                                    <td style="text-align: center !important;"><input type="checkbox" name="checkedBoxEmployee"
                                                               value="{{$employee_info}}" onclick="checkedornot(this)"></td>
                                                    <td>{{$obj->first_name.' '.$obj->last_name}}</td>
                                                    <td>{{ $obj->email}}</td>
                                                    <td> {{ getStringToDateTime($obj->created_at,'m/d/Y h:i:s a') }} </td>
                                                    <td>
                                                        @if(isShowContent('get.employee.info'))
                                                            <a href="{{route('get.employee.info',$obj->id)}}"
                                                               class="btn btn-success" style="padding: 5px;"> <span
                                                                    class="glyphicon glyphicon-pencil" title="Edit"></span></a>
                                                        @endif

                                                        @if(isShowContent('get.employee.info'))
                                                            <button onclick="return employeeDelete({{$employee_info}},'{{$action}}')"
                                                                    class="btn btn-danger" style="padding: 5px;"><span
                                                                    class="glyphicon glyphicon-trash" title="Delete"></span>
                                                            </button>
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        @endif
                                        </tbody>
                                    </table>

                                </div>
                                <div id="pagination_panel">
                                    {{ $employees->appends(compact('pageLimit' , 'search_value')) ->links('basic.pagination') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    </div>
@endsection
@push('script')
    <script>
        const allEmployeeChecked =(e)=>{
            $('input:checkbox').prop('checked',e.checked);
            $('#btnDeleteMultipleEmployee').prop('disabled',(!e.checked));
        }

        const multipleEmployeeDelete = () => {
            let action = 'DELETE_MULTIPLE_EMPLOYEE';
            let checkedData = $("[name='checkedBoxEmployee']");
            let clientId = [];
            for (let checkbox of checkedData) {
                if (checkbox.checked)
                    clientId.push(checkbox.value);
            }
            if (clientId.length > 0) {
                employeeDelete(clientId,action);
            }
        }

        const employeeDelete = (userData,action) => {
            let html_content = `<h4>Are you sure you want to delete employee?</h4>`;
            const swalresponse = common_helper.swalAleart(html_content, 'warning', 450, true, '', true, true, 'Yes');
            swalresponse.then(async function (result) {
                if (result.isConfirmed) {
                    let response = await common_helper.globalAjaxRequest('{{route('admin.ajax.process')}}', 'POST', {
                        action: action,
                        userData: userData,
                        delete_type:'employee',
                        _token: "{{ csrf_token() }}"
                    });
                    if (response.status) {
                        Swal.fire({icon: response.type, title: response.message, width: 450, closeOnConfirm: true});
                        window.location = `{{route('employee.list')}}`;
                    } else {
                        Swal.fire({icon: response.type, title: response.message, width: 450, closeOnConfirm: true});
                    }
                }
            })
        }

        const checkedornot = (e) => {

            let allData = $("[name='checkedBoxEmployee']");
            let checkedData = $("[name='checkedBoxEmployee']:checked");
            let allChecked = false;
            let alldelete = false;

            if(allData.length === checkedData.length){
                 allChecked = true;
            }

            if(checkedData.length === 0){
                alldelete = true;
            }

            $("[name='allChecked']").prop('checked', allChecked);

            $('#btnDeleteMultipleEmployee').prop('disabled', alldelete);

        }

    </script>
@endpush