@extends('layouts.authenticated')
@section('title','Employee')
@section('employee','active')
@section('maintenance','menu-open')
@section('style')
    <style>
        ul.timeline {
            list-style-type: none;
            position: relative;
        }

        ul.timeline:before {
            content: ' ';
            background: #d4d9df;
            display: inline-block;
            position: absolute;
            left: 29px;
            width: 2px;
            height: 100%;
            z-index: 400;
        }

        ul.timeline > li {
            margin: 20px 0;
            padding-left: 50px;
        }

        ul.timeline > li:before {
            content: ' ';
            background: white;
            display: inline-block;
            position: absolute;
            border-radius: 50%;
            border: 3px solid #22c0e8;
            left: 20px;
            width: 20px;
            height: 20px;
            z-index: 400;
        }

        div.ex3 {
            max-height: 500px;
            overflow-y: auto;
        }
    </style>
    <style>
        .order-column th, .order-column td {
            white-space: nowrap;
        }

        .dt-buttons {
            margin-bottom: 1rem;
        }

        .btn-add, .btn-upload {
            background: #007bff;
            border-color: #007bff;
        }

    </style>
@endsection
@section('content')
    <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
    <div class="wrapper">
        <section class="content-header">
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card card-cyan">
                            <div class="card-header">
                                <i class="fas fa-user-tie"></i> Employee
                            </div>
                            <div class="card-body">
                                <table class="table stripe row-border order-column" id="employee-table"
                                       style="width: 100%;height: 100%">
                                    <thead>
                                    <tr>
                                        <th>Employee Name</th>
                                        <th>RGOC Entity</th>
                                        <th>Employee No.</th>
                                        <th>Record Status</th>
                                        <th>Date Verified</th>
                                        <th>Employee Status</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <div id="modal-add" class="modal fade">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-plus" style="color: #17a2b8"></i> Add Employee</h5>
                    <a type="button" class="close btn-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </a>
                </div>
                <div class="modal-body">
                    <form id="form-add">
                        @csrf
                        <input type="hidden" name="table" value="maintenance_employees">
                        <input type="hidden" data-label="Employee No under Company Code" name="emp_code_id" value=""
                               id="emp_code_id">
                        <div class="form-group col-sm-12">
                            <label>Employee No</label>
                            <input type="text" data-label="Employee No" name="emp_no" id="emp_no"
                                   class="form-control emp_code_id input-create"
                                   value="{{ old('emp_no') }}">
                        </div>
                        <div class="form-group col-sm-12">
                            <label>Last Name</label>
                            <input type="text" data-label="Last Name" name="last_name" id="last_name"
                                   class="form-control input-create"
                                   value="{{ old('last_name') }}">
                        </div>
                        <div class="form-group col-sm-12">
                            <label>First Name</label>
                            <input type="text" data-label="First Name" name="first_name" id="first_name"
                                   class="form-control input-create"
                                   value="{{ old('first_name') }}">
                        </div>
                        <div class="form-group col-sm-12">
                            <label>Middle Name</label>
                            <input type="text" data-label="Middle Name" name="middle_name" id="middle_name"
                                   class="form-control input-create"
                                   value="{{ old('middle_name') }}">
                        </div>
                        <div class="form-group col-sm-12">
                            <label>RGOC Entity</label>
                            <select id="role" data-label="RGOC Entity" name="company_code" id="company_code"
                                    class="form-control emp_code_id input-create">
                                <option value="" hidden>-Select Roles-</option>
                                @foreach($data as $company)
                                    <option value="{{$company->company_code}}"
                                            style="background-color:{{$company->is_active ? '' : '#ced4da'}}" {{$company->is_active ? '' : 'disabled'}}>{{$company->company_code}}
                                        - {{$company->company_desc}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-sm-12">
                            <label>Gender</label>
                            <select id="role" data-label="Gender" name="gender" id="gender"
                                    class="form-control input-create">
                                <option value="" hidden>-Select Roles-</option>
                                <option value="M">Male</option>
                                <option value="F">Female</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-12">
                            <label>Nominated Email</label>
                            <input type="text" data-label="Nominated Email" name="nominated_email" id="nominated_email"
                                   class="form-control input-create"
                                   value="{{ old('nominated_email') }}">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-save">Save</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div id="modal-history" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-history" style="color: #17a2b8"></i> History Logs</h5>
                    <a type="button" class="close btn-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </a>
                </div>
                <div class="modal-body" id="history">

                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div id="modal-edit" class="modal fade">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-pen" style="color: #17a2b8"></i> Update Employee</h5>
                    <a type="button" class="close btn-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </a>
                </div>
                <div class="modal-body">
                    <form id="form-edit">
                        @csrf
                        <input type="hidden" name="table" value="maintenance_employees">
                        <input type="hidden" name="table_id" id="table_id">
                        <input type="hidden" data-label="Employee No under Company Code" name="emp_code_id" value=""
                               id="edit_emp_code_id">
                        <div class="form-group col-sm-12">
                            <label>Employee No</label>
                            <input type="text" data-label="Employee No" name="emp_no" id="edit_emp_no"
                                   class="form-control edit_emp_code_id input-update"
                                   value="{{ old('emp_no') }}">
                        </div>
                        <div class="form-group col-sm-12">
                            <label>Last Name</label>
                            <input type="text" data-label="Last Name" name="last_name" id="edit_last_name"
                                   class="form-control input-update"
                                   value="{{ old('last_name') }}">
                        </div>
                        <div class="form-group col-sm-12">
                            <label>First Name</label>
                            <input type="text" data-label="First Name" name="first_name" id="edit_first_name"
                                   class="form-control input-update"
                                   value="{{ old('first_name') }}">
                        </div>
                        <div class="form-group col-sm-12">
                            <label>Middle Name</label>
                            <input type="text" data-label="Middle Name" name="middle_name" id="edit_middle_name"
                                   class="form-control input-update"
                                   value="{{ old('middle_name') }}">
                        </div>
                        <div class="form-group col-sm-12">
                            <label>RGOC Entity</label>
                            <select data-label="RGOC Entity" name="company_code" id="edit_company_code"
                                    class="form-control edit_emp_code_id input-update">
                                <option value="" hidden>-Select Roles-</option>
                                @foreach($data as $company)
                                    <option value="{{$company->company_code}}"
                                            style="background-color:{{$company->is_active ? '' : '#ced4da'}}" {{$company->is_active ? '' : 'disabled'}}>{{$company->company_code}}
                                        - {{$company->company_desc}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group col-sm-12">
                            <label>Gender</label>
                            <select data-label="Gender" name="gender" id="edit_gender"
                                    class="form-control input-update">
                                <option value="" hidden>-Select Roles-</option>
                                <option value="M">Male</option>
                                <option value="F">Female</option>
                            </select>
                        </div>
                        <div class="form-group col-sm-12">
                            <label>Nominated Email</label>
                            <span class="float-right resend-spinner" style="display: none"><i
                                    class="fas fa-spinner fa-spin"></i> Resending</span>
                            <div class="input-group input-group">
                                <input type="text" data-label="Nominated Email" name="nominated_email"
                                       id="edit_nominated_email"
                                       class="form-control input-update"
                                       value="{{ old('nominated_email') }}">
                                <span class="input-group-append">
                                    <button type="button" class="btn btn-info btn-flat btn-verify"
                                            for="edit_nominated_email" data-toggle="tooltip"
                                            title="Resend verification and reset PDF password">Verify</button>
                                </span>
                            </div>
                        </div>
                        <div class="form-group col-sm-12">
                            <div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success">
                                <input type="hidden" id="edit_is_active" name="is_active">
                                <input type="checkbox" class="custom-control-input" id="edit_toogle_is_active">
                                <label class="custom-control-label" for="edit_toogle_is_active">Toggle this to
                                    Active/Deactivate</label>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success btn-update">Update</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div id="modal-delete" class="modal fade">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-trash" style="color: red"></i> Deactivate Employee</h5>
                    <a type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </a>
                </div>
                <div class="modal-body">
                    <form id="form-delete">
                        @csrf
                        <input type="hidden" name="table" value="maintenance_employees">
                        <input type="hidden" id="delete_id" name="delete_id">
                        <p>Are you sure you want to delete the selected deduction?</p>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success btn-deactivate">Deactivate</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div id="modal-upload" class="modal fade">
        <div class="modal-dialog modal-md">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-upload" style="color: #17a2b8"></i> Upload Employee</h5>
                    <a type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </a>
                </div>
                <div class="modal-body">
                    <span id="message"></span>
                    <form id="employee-upload" method="POST" enctype="multipart/form-data" class="form-horizontal">
                        @csrf
                        <div class="form-group">
                            <label class="col-md-4 control-label">Select CSV File</label>
                            <span class="float-right upload-spinner" style="display: none"><i
                                    class="fas fa-spinner fa-spin"></i> validating</span>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="employeeFile" name="file">
                                <label class="custom-file-label" for="customFile" id="employeeFileLabel">Choose
                                    file</label>
                            </div>
                        </div>
                        <div class="form-group" align="center">
                            <input type="hidden" name="hidden_field" value="1"/>
                        </div>
                        <div id="errors">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <input type="submit" name="import" id="import" class="btn btn-info" value="Import"/>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


@endsection
@section('customjs')
    <script type="text/javascript">
        $(document).ready(function () {
            $.fn.DataTable.ext.pager.simple_numbers = function (page, pages) {
                var numbers = [];
                //  var buttons = $.fn.DataTable.ext.pager.numbers_length;
                var buttons = 3;
                var half = Math.floor(buttons / 2);
                var _range = function (len, start) {
                    var end;

                    if (typeof start === "undefined") {
                        start = 0;
                        end = len;

                    } else {
                        end = start;
                        start = len;
                    }
                    var out = [];
                    for (var i = start; i < end; i++) {
                        out.push(i);
                    }

                    return out;
                };

                if (pages <= buttons) {
                    numbers = _range(0, pages);

                } else if (page <= half) {
                    numbers = _range(0, buttons);

                } else if (page >= pages - 1 - half) {
                    numbers = _range(pages - buttons, pages);

                } else {
                    numbers = _range(page - half, page + half + 1);
                }

                numbers.DT_el = 'span';
                return ['first', 'previous', numbers, 'next', 'last'];
            };
            bsCustomFileInput.init();
            $('#employee-table').DataTable({
                language: {
                    paginate: {
                        previous: 'Prev',
                    }
                },
                mark: true,
                scrollY: "500px",
                scrollX: true,
                scrollCollapse: true,
                paging: true,
                ajax: {
                    url: "get-maintenance",
                    data: {
                        table: 'maintenance_employees',
                    },
                    error: function (xhr) {
                        Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                        setTimeout(function (e) {
                            window.location.href = "/"
                        }, 3000)
                    },
                },
                columns: [
                    {
                        render: function (data, type, row) {
                            return row['last_name'] + ", " + row['first_name'] + " " + row['middle_name'];
                        }
                    },
                    {
                        render: function (data, type, row) {
                            return row['company_code'] + " - " + row['company_desc'];
                        }
                    },
                    {data: "emp_no"},
                    {
                        data: "verification_status_id",
                        render: function (data, type, row) {
                            var status;
                            switch (data) {
                                case 1:
                                    status = "Registered"
                                    break;
                                case 2:
                                    status = "Active"
                                    break;
                                default:
                                    status = "Inactive"
                            }
                            return status;
                        }
                    },
                    {
                        data: "verification_date",
                        render: function (data, type, row) {
                            return type === 'sort' ? row['hidden_verification_date'] : data != null ? moment(data).format('LLL') : '';
                        },
                    },
                    {
                        data: "is_active",
                        render: function (data, type, row) {
                            var status;
                            switch (data) {
                                case 1:
                                    status = "Active"
                                    break;
                                default:
                                    status = "Inactive"
                            }
                            return status;
                        }
                    },
                    {
                        data: "id",
                        render: function (data, type, row) {
                            return '<div class="btn-group">' +
                                '<button type="button" class="btn btn-primary btn-sm btn-flat btn-edit" data-id="' + row['id'] + '"><i class="fas fa-pen"></i></button>' +
                                '<button type="button" class="btn btn-warning btn-sm btn-flat btn-history" data-id="' + row['id'] + '"><i class="fas fa-history"></i></button>' +
                                /*'<button type="button" class="btn btn-danger btn-delete" data-id="' + row['id'] + '"><i class="fas fa-trash"></i></button>' +*/
                                '</div>';
                        }
                    }
                ],
                /*  fixedColumns: {
                      iLeftColumns: 1
                  },*/
                columnDefs: [
                    {className: "dt-nowrap", targets: [4]},
                    {orderable: false, targets: 6},
                ],
                order: [[0, 'asc']],
                buttons: [{
                    text: '<i class="fas fa-plus-square" data-toggle="tooltip" title="Add Deduction"/></i> Add',
                    className: "btn-add btn-flat",
                    autoClose: 'true',
                    action: function (e, dt, node, config) {
                        $('.input-create').val('').css('border', '')
                        $('#modal-add').modal({backdrop: 'static', keyboard: false})
                    }
                }, {
                    text: '<i class="fas fa-upload" data-toggle="tooltip" title="Upload master file"/></i> Upload',
                    className: "btn-upload btn-flat",
                    autoClose: 'true',
                    action: function (e, dt, node, config) {
                        $('#errors').empty()
                        $('#modal-upload').modal({backdrop: 'static', keyboard: false})
                    }
                },],
                "dom":
                    "<'row'<'col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12'B>>" +
                    "<'row'<'col-xs-6 col-sm-6'l><'col-xs-6 col-sm-6'f>>" +
                    "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-5'i><'col-sm-7'p>>",
            });

            $(document).on('change', '#employeeFile', function (event) {
                if ($('#employeeFile').val() == '') {
                    $('#employeeFileLabel').css('border', '1px solid red')
                    Command: toastr["error"]("Please select an remarks file.", "Failed!")
                } else {
                    $('#employeeFileLabel').css('border', '')
                }
            });

            $(document).on('click', '#import', function (e) {
                var formData = new FormData();
                formData.append('file', $('#employeeFile')[0].files[0]);
                if ($('#employeeFile').val() == '') {
                    $('#employeeFileLabel').css('border', '1px solid red')
                    $('.upload-spinner').hide()
                    Command: toastr["error"]("Please select an employee master file.", "Failed!")
                } else {
                    $.ajax({
                        url: "upload",
                        method: "POST",
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        data: formData,
                        contentType: false,
                        cache: false,
                        processData: false,
                        beforeSend: function () {
                            $('.upload-spinner').show()
                        },
                        success: function (data) {
                            $('.upload-spinner').hide()
                            $('#employeeFile').val('');
                            $('.custom-file-label').text('Choose file');

                            if (data.data.status === 'success') {
                                $('#modal-upload').modal('toggle')
                                Command: toastr["success"]('Employee data successfully saved.', "Success!")
                            } else {
                                $('#errors').html(data.html)
                                Command: toastr["error"]('Please validate the remarks', "Failed!")
                            }
                        },
                        complete: function () {
                            $('#modal-upload').modal({backdrop: 'static', keyboard: false})
                            $('#employee-table').DataTable().ajax.reload();
                        },
                        error: function (xhr) {
                            Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                            setTimeout(function (e) {
                                window.location.href = "/"
                            }, 3000)
                        },
                    })
                }
            })

            /* $('#employee-upload').on('submit', function (event) {
                 event.preventDefault();
                 $.ajax({
                     url: "upload",
                     method: "POST",
                     data: new FormData(this),
                     dataType: "html",
                     contentType: false,
                     cache: false,
                     processData: false,
                     beforeSend: function () {
                         $('#errors').empty()
                     },
                     success: function (data) {
                         $('#employeeFile').val('');
                         $('.custom-file-label').text('Choose file');
                         $('#errors').append(data)
                     },
                     complete: function () {
                         $('#employee-table').DataTable().ajax.reload();
                     }
                 })
             });*/

            $(document).on('click', '.btn-save', function (e) {
                var error = false, required = []
                $('.input-create').each(function (e) {
                    if ($(this).val() == '') {
                        $(this).css('border', '1px solid red')
                        error = true;
                        required.push($(this).data('label') + " is required");
                    } else {
                        if ($(this).attr('name') == 'nominated_email') {
                            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                            if (!regex.test($(this).val().trim())) {
                                $(this).css('border', '1px solid red')
                                error = true;
                                required.push($(this).data('label') + " is not valid");
                            }
                        } else {
                            $(this).css('border', '')
                        }
                    }
                })

                if (error) {
                    Command: toastr["error"](required.join("<br>"), "Failed!")
                } else {
                    $('#emp_code_id').val($('#form-add').serializeArray()[7].value.trim() + '-' + $('#form-add').serializeArray()[3].value.trim())
                    $.ajax({
                        url: 'save-employee',
                        type: 'POST',
                        data: $('#form-add').serialize(),
                        beforeSend: function () {

                        },
                        success: function (response) {
                            var exist = [];
                            if (response == 'success') {
                                Command: toastr["success"]("The record has been saved!", "Success!")
                                $('#employee-table').DataTable().ajax.reload();
                                $('#modal-add').modal('hide')

                            } else {
                                $.each(response, function (k, v) {
                                    $('#' + v).css('border', '1px solid red')
                                    $('.' + v).css('border', '1px solid red')
                                    exist.push($('#' + v).data('label') + " already exist!");
                                });
                                Command: toastr["error"](exist.join("<br>"))
                            }
                        },
                        error: function (xhr) {
                            Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                            setTimeout(function (e) {
                                window.location.href = "/"
                            }, 3000)
                        },
                    });
                }
            })
            $(document).on('click', '.btn-history', function (e) {
                $.ajax({
                    url: 'history/' + $(this).data('id'),
                    data: {
                        'maintenance_table': 'maintenance_employees',
                        'id': $(this).data('id')
                    },
                    type: 'GET',
                    dataType: 'html',
                    beforeSend: function () {

                    },
                    success: function (response) {
                        $('#history').html(response)
                        $('#modal-history').modal({backdrop: 'static', keyboard: false})
                    },
                    error: function (xhr) {
                        Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                        setTimeout(function (e) {
                            window.location.href = "/"
                        }, 3000)
                    },
                })
            });
            $(document).on('click', '.btn-edit', function (e) {
                $('.input-update').val('').css('border', '')
                $('#table_id').val($(this).data('id'))
                $.ajax({
                    url: 'employee/edit/' + $(this).data('id'),
                    type: 'GET',
                    data: $('#form-edit').serialize(),
                    beforeSend: function () {
                        $('.btn-verify').prop('disabled', false)
                        $('.input-update').val('')
                        $('.input-update').css('border', '')

                    },
                    success: function (response) {
                        $('#edit_emp_no').val(response.emp_no)
                        $('#edit_last_name').val(response.last_name)
                        $('#edit_first_name').val(response.first_name)
                        $('#edit_middle_name').val(response.middle_name)
                        $("#edit_company_code").val(response.company_code)
                        $("#edit_gender").val(response.gender)
                        $("#edit_nominated_email").val(response.nominated_email)
                        $('#edit_toogle_is_active').prop('checked', response.is_active ? true : false)
                        $('#modal-edit').modal({backdrop: 'static', keyboard: false})
                    },
                    error: function (xhr) {
                        Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                        setTimeout(function (e) {
                            window.location.href = "/"
                        }, 3000)
                    },
                })
            });
            $(document).on('click', '.btn-update', function (e) {
                var error = false, required = []
                $('.input-update').each(function (e) {
                    if ($(this).val() == '') {
                        $(this).css('border', '1px solid red')
                        error = true;
                        required.push($(this).data('label') + " is required");
                    } else {
                        if ($(this).attr('name') == 'nominated_email') {
                            var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                            if (!regex.test($(this).val().trim())) {
                                $(this).css('border', '1px solid red')
                                error = true;
                                required.push($(this).data('label') + " is not valid");
                            }
                        } else {
                            $(this).css('border', '')
                        }
                    }
                })

                if (error) {
                    Command: toastr["error"](required.join("<br>"), "Failed!")
                } else {
                    $('#edit_emp_code_id').val($('#form-edit').serializeArray()[8].value.trim() + '-' + $('#form-edit').serializeArray()[4].value.trim())
                    $('#edit_toogle_is_active').is(':checked') ? $('#edit_is_active').val(1) : $('#edit_is_active').val(0)
                    $.ajax({
                        url: 'update-employee',
                        type: 'POST',
                        data: $('#form-edit').serialize(),
                        beforeSend: function () {

                        },
                        success: function (response) {
                            var exist = [];
                            if (response == 'success') {
                                Command: toastr["success"]("The record has been updated!", "Success!")
                                $('#employee-table').DataTable().ajax.reload();
                                $('#modal-edit').modal('hide')
                            } else {
                                $.each(response, function (k, v) {
                                    $('#edit_' + v).css('border', '1px solid red')
                                    $('.edit_' + v).css('border', '1px solid red')
                                    exist.push($('#edit_' + v).data('label') + " already exist!");
                                });
                                Command: toastr["error"](exist.join("<br>"))
                            }
                        },
                        error: function (xhr) {
                            Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                            setTimeout(function (e) {
                                window.location.href = "/"
                            }, 3000)
                        },
                    });
                }
            })
            $(document).on('click', '.btn-delete', function (e) {
                $('#delete_id').val($(this).data('id'));
                $('#modal-delete').modal({backdrop: 'static', keyboard: false})
            })
            $(document).on('click', '.btn-deactivate', function (e) {
                $.ajax({
                    url: 'delete',
                    type: 'POST',
                    data: $('#form-delete').serialize(),
                    dataType: 'html',
                    beforeSend: function () {

                    },
                    success: function () {
                        Command: toastr["warning"]("Deactivated!")
                        $('#employee-table').DataTable().ajax.reload();
                    },
                    complete: function () {
                        $('#modal-delete').modal('hide')
                    },
                    error: function (xhr) {
                        Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                        setTimeout(function (e) {
                            window.location.href = "/"
                        }, 3000)
                    },
                });
            })
            $(document).on('click', '.btn-verify', function (e) {
                var error = false, required = []
                if ($('#' + $(this).attr('for')).val() == "") {
                    $('#' + $(this).attr('for')).css('border', '1px solid red')
                    error = true;
                    required.push($('#' + $(this).attr('for')).data('label') + " is required");
                } else {
                    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                    if (!regex.test($('#' + $(this).attr('for')).val().trim())) {
                        $('#' + $(this).attr('for')).css('border', '1px solid red')
                        error = true;
                        required.push($('#' + $(this).attr('for')).data('label') + " is not valid");
                    } else {
                        $('#' + $(this).attr('for')).css('border', '')
                    }
                }

                if (error) {
                    Command: toastr["error"](required.join("<br>"), "Failed!")
                } else {
                    $.ajax({
                        url: 'resend-verification/' + $('#table_id').val(),
                        type: 'post',
                        data: {
                            _token: $('#_token').val(),
                            email: $('#' + $(this).attr('for')).val()
                        },
                        dataType: 'json',
                        beforeSend: function () {
                            $('.btn-verify').prop('disabled', true)
                            $('.resend-spinner').show()
                        },
                        success: function (response) {
                            if (response['status_code'] == 200) {
                                Command: toastr["info"]("Verification email has been sent. Please check the email.", "Success!")
                            } else if (response['status_code'] == 0) {
                                $('#edit_nominated_email').css('border', '1px solid red')
                                Command: toastr["error"](response['message'], "Exist!")
                            } else {
                                Command: toastr["error"](response['message'], "Failed!")
                            }
                        },
                        complete: function () {
                            $('.resend-spinner').hide()
                            $('.btn-verify').prop('disabled', false)
                            $('#employee-table').DataTable().ajax.reload();
                        },
                        error: function (xhr) {
                            Command: toastr["info"]("Session timeout detected.", "Session Timeout!")
                            setTimeout(function (e) {
                                window.location.href = "/"
                            }, 3000)
                        },
                    });
                }
            })

        })
    </script>
@endsection