@extends('layouts.main')

@php
    $userStatusArray = config('constant.user_status');
    $counter = 1;
@endphp
@section('content')
    {{-- User Search Filter Begins --}}
        @if (Request::get('search_submit'))
            @endif

    <section class="content">
        <div class="container-fluid mt-2">
            <form class="form-horizontal" method="get" action="{{ url('/users') }}" name="search_filter" id="search_filter"
                enctype="multipart/form-data">
                <form class="form-horizontal" method="get" action="{{ url('/users') }}" name="search_filter"
                    id="search_filter" enctype="multipart/form-data">
                    @csrf
                    <div class="card ">
                        <div class="card-header bg-dark " data-widget="collapse">
                            <h3 class="card-title text-white">Search User</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="form-group col-md-4">
                                    <label>Name</label>
                                    <input type="text" class="form-control" name="search_by_name" id="search_by_name"
                                        value="{{ isset($request->search_by_name) ? $request->search_by_name : '' }}"
                                        placeholder="Name">
                                </div>

                                @if (auth()->check() && isset($departments) && count($departments) >= 1)
                                    <div class="form-group col-md-4">
                                        <label>Department</label>
                                        <select class="form-control select2" style="width: 100%; height:36px;"
                                            name="search_by_department[]" id="search_by_department" multiple="multiple">
                                            <option value="" disabled>Select Department</option>
                                            @if (isset($departments) && !empty($departments))
                                                @foreach ($departments as $key => $val)
                                                    <option value="{{ $key }}"
                                                        {{ isset($request->search_by_department) && in_array($key, $request->search_by_department) ? 'selected' : '' }}>
                                                        {{ $val }}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                @endif

                                <div class="form-group col-md-4">
                                    <label>Status</label>
                                    <select class="custom-select" name="search_by_status" id="search_by_status">
                                        <option value="2">All</option>
                                        @if (isset($userStatusArray) && !empty($userStatusArray))
                                            @foreach ($userStatusArray as $key => $userStatusVal)
                                                <option value="{{ $key }}"
                                                    {{ (isset($request->search_by_status) && $request->search_by_status == $key) || (!isset($request->search_by_status) && $key == 1) ? 'selected' : '' }}>
                                                    {{ $userStatusVal }}</option>
                                            @endforeach
                                        @endif

                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="float-left">
                                <button name="search_submit" id="search_submit" value="1" type="button"
                                    class="btn btn-primary btn-dark">
                                    Search
                                </button>
                                <button name="search_reset" type="button" class="btn btn-info btn-secondary"
                                    onclick="location.href ='{{ url('users') }}'">
                                    Reset
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
        </div>

        {{-- User Listing --}}
        <div class="container-fluid mt-4 mb-4">
            <div class="pt-2 pb-2" style="margin-bottom:50px;">
                <a href="{{ url('/usersync') }}" title="Back" class="btn btn-dark float-right">
                    All user sync
                </a>
                <a href="{{ url('/usersalary') }}"title="Back" class="btn btn-dark float-right mr-2">
                    Import Salary
                </a>
            </div>
            <table class="table table-bordered data-table">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Employee Code</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Reporting To</th>
                        <th>Department</th>
                        <th>User Sync Date</th>
                        <th>Salary</th>
                        <th>Salary Updated Date</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </section>
    <script type="text/javascript">
        var dataTable = null;
        $(document).ready(function() {
            $(function() {
                var departments = {!! json_encode($departments) !!};
                dataTable = $('.data-table').DataTable({
                    processing: true,
                    serverSide: true,
                    searching: false,
                    ajax: {
                        url: '{!! route('users.index') !!}',
                        data: function(d) {
                            if ($('#search_submit').val() == 1) {
                                d.search_by_name = $('#search_by_name').val();
                                d.search_by_reporting_to = $('#search_by_reporting_to').val();
                                d.search_by_department = $('#search_by_department').val();
                                d.search_by_status = $('#search_by_status').val();
                            } else {
                                delete d.search_by_name;
                                delete d.search_by_reporting_to;
                                delete d.search_by_department;
                                delete d.search_by_status;
                            }
                        }
                    },
                    columns: [{
                            data: 'DT_RowIndex',
                            name: 'id',
                            orderable: false,
                            searchable: false
                        },
                        {
                            data: 'employee_id',
                            name: 'employee_id',
                            render: function(data, type, row) {
                                return 'TRD' + data;
                            }
                        },
                        {
                            data: 'name',
                            name: 'name'
                        },
                        {
                            data: 'email',
                            name: 'email'
                        },
                        {
                            data: 'reporting_to_name',
                            name: 'reporting_to_name'
                        },
                        {
                            data: 'department',
                            name: 'department',
                            render: function(data, type, row) {
                                if (type === 'display') {
                                    var departmentId = row['department'];
                                    var foundDepartment = departments[departmentId];

                                    return foundDepartment ? foundDepartment :
                                        'Department not found';
                                }
                                return data;
                            },
                            searchable: false
                        },
                        {
                            data: 'sync_date',
                            name: 'sync_date',
                            "render": function(data, type, row) {
                                return moment(data).format('DD-MM-YYYY');
                            }
                        },
                        {
                            data: 'salary',
                            name: 'salary'
                        },
                        {
                            data: 'salary_date',
                            name: 'salary_date',
                            render: function(data, type, row) {
                                if (data) {
                                    return moment(data).format('DD-MM-YYYY');
                                } else {
                                    return '';
                                }
                            }
                        },
                        {
                            data: 'status',
                            name: 'status',
                            render: function(data, type, full, meta) {
                                return data == 1 ?
                                    "<span class='badge badge-success'>Active</span>" :
                                    "<span class='badge badge-danger'>Inactive</span>";
                            }
                        },

                    ]
                });
            });

            $(document).on('click', '#search_submit', function() {
                dataTable.draw();
                return false;
            });
        });
    </script>

@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            $('.select2').select2();
        });
    </script>
@endpush