@extends('layouts.page')

@section('title', 'Users')

@section('custom-css')
    <link rel="stylesheet" href="{{ asset('css/dataTables.bootstrap5.min.css') }}">
    <style>
        .flex_row {
            display: flex;
            flex-wrap: wrap;
        }


        .flex_row label.custom_check {
            width: 33.33%;
            margin: 4px 0;
            padding: 0 5px;
            cursor: pointer;
        }

        .flex_row label.custom_check span {
            font-size: 16px;
            font-weight: 500;
            position: relative;
            padding-left: 24px;
        }

        .flex_row label.custom_check span:before {
            position: absolute;
            width: 15px;
            height: 15px;
            border: 1px solid #000;
            content: '';
            left: 0;
            top: 3px;
            border-radius: 4px;
        }

        .flex_row label.custom_check input:checked+span:before {
            content: "\f00c";
            font-family: "Font Awesome 5 Free";
            font-weight: 900;
            font-size: 11px;
            line-height: 1;
            padding: 1px 1px;
        }

        .flex_row label.custom_check input {
            display: none;
        }
    </style>
@endsection

@section('content')
    <div class="content-wrapper">
        <div class="content-header ">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0">All Users</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">Home</a></li>
                            <li class="breadcrumb-item active">All Users</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                @include('layouts.error')
                                <div class="row mb-3">
                                </div>
                                <div class="col-md-12 mt-1 card py-2 table-main-wrap">
                                    <table id="datatable" class="table  table-striped">
                                        <thead>
                                            <tr>
                                                <th>No</th>
                                                <th>Name</th>
                                                <th>Pos Code</th>
                                                <th>Parent Pos Code</th>
                                                <th>Emp Code</th>
                                                <th>Pos Name</th>
                                                <th>HQ Code</th>
                                                <th>HQ Name</th>
                                                <th>Status</th>
                                                <th class="text-center">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
        </section>
    </div>

    <div class="modal fade" id="edit_emp">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content bg-light">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Employee</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="load-wrap">
                    <div class="spinner-grow text-secondary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
                <div class="js-box-body" style="display: none;">
                    <form class="" action="javascript:;" id="frm-emp">
                        <div class="modal-body">
                            <div class="alert alert-danger" style="display:none;"></div>
                            <div class="box-body row justify-content-center">
                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">Pos Code<b style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <input type="text" name="user_pos_code" id="user_pos_code" class="form-control"
                                            value="" required="" readonly>
                                    </div>
                                </div>
                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">Parent Pos Code<b
                                            style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <input type="text" name="parentPosCode" id="parentPosCode" class="form-control"
                                            value="" required="">
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">Pos Name<b style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <input type="text" name="user_pos_name" id="user_pos_name" class="form-control"
                                            value="" required="">
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">Name<b style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <input type="text" name="user_name" id="user_name" class="form-control"
                                            value="" required="">
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">Emp Code<b style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <input type="text" name="user_code" id="user_code" class="form-control"
                                            value="" required="">
                                    </div>
                                </div>

                                {{-- <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">Desg<b style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <input type="text" name="user_desg" id="user_desg" class="form-control"
                                            value="" required="">
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">DOB<b style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <div class="input-group date">
                                            <input type="date" value="" name="user_dob" id="user_dob"
                                                class="form-control" id="datepicker" placeholder="Select Start Date"
                                                required="">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">Join Date<b style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <div class="input-group date">
                                            <input type="date" value="" name="user_join_date"
                                                id="user_join_date" class="form-control" id="datepicker1"
                                                placeholder="Select Start Date" required="">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">Effective_Date<b
                                            style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <div class="input-group date">
                                            <input type="date" value="" name="user_effective_date"
                                                id="user_effective_date" class="form-control" id="datepicker2"
                                                placeholder="Select Start Date" required="">
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">CC Code<b style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <input type="text" name="user_cc_code" id="user_cc_code" class="form-control"
                                            value="">
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">CC Name<b style="color: red;">*</b></label>
                                    <div class="col-sm-12">
                                        <input type="text" name="user_cc_name" id="user_cc_name" class="form-control"
                                            value="">
                                    </div>
                                </div> --}}

                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">HQ Code</label>
                                    <div class="col-sm-12">
                                        <input type="text" name="user_hq_code" id="user_hq_code" class="form-control"
                                            value="">
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">HQ Name</label>
                                    <div class="col-sm-12">
                                        <input type="text" name="user_hq_name" id="user_hq_name" class="form-control"
                                            value="">
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">Email Id</label>
                                    <div class="col-sm-12">
                                        <input type="email" name="user_email_id" id="user_email_id"
                                            class="form-control" value="">
                                    </div>
                                </div>

                                <div class="form-group col-lg-6 col-md-6">
                                    <label class="col-sm-12 control-label">Mobile No</label>
                                    <div class="col-sm-12">
                                        <input type="text" name="user_mobile_no" id="user_mobile_no"
                                            class="form-control" value="">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="all-detail-modal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content bg-light">
                <div class="modal-header">
                    <h4 class="modal-title">View Record</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="load-wrap">
                    <div class="spinner-grow text-secondary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
                <div class="modal-body js-box-body" style="display: none;">
                    <div class="form-group">
                        <label class="control-label mr-2"> Name : </label> <span class="js-user_name"></span><br>
                    </div>
                    <div class="form-group">
                        <label class="control-label mr-2">Emp Code : </label><span class="js-user_code"></span><br>
                    </div>
                    <div class="form-group">
                        <label class="control-label mr-2"> Pos Code : </label><span class="js-user_pos_code"></span><br>
                    </div>
                    <div class="form-group">
                        <label class="control-label mr-2"> Pos Name : </label><span class="js-user_pos_name"></span><br>
                    </div>
                    <div class="form-group">
                        <label class="control-label mr-2"> Type Name : </label><span class="js-user_type"></span><br>
                    </div>
                    <div class="form-group">
                        <label class="control-label mr-2"> HQ Code : </label><span class="js-user_hq_code"></span><br>
                    </div>
                    <div class="form-group">
                        <label class="control-label mr-2"> HQ Name : </label><span class="js-user_hq_name"></span><br>
                    </div>
                    <div class="form-group">
                        <label class="control-label mr-2"> Desg : </label><span class="js-user_desg"></span><br>
                    </div>
                    <div class="form-group">
                        <label class="control-label mr-2"> DOB : </label><span class="js-user_dob"></span><br>
                    </div>
                    <div class="form-group">
                        <label class="control-label mr-2"> Join Date : </label><span class="js-user_join_date"></span><br>
                    </div>
                    <div class="form-group">
                        <label class="control-label mr-2"> Effective Date : </label><span
                            class="js-user_effective_date"></span><br>
                    </div>
                    <div class="form-group">
                        <label class="control-label mr-2"> Email Id : </label><span class="js-user_email_id"></span><br>
                    </div>
                    <div class="form-group">
                        <label class="control-label mr-2"> Mobile No. : </label><span class="js-user_mobile_no"></span>
                    </div>
                    <div class="form-group">
                        <label class="control-label mr-2"> Status : </label><span
                            class="badge badge-warning js-user_status"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="delete-dpm-modal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content bg-light">
                <div class="modal-header">
                    <h4 class="modal-title">Delete DPM Data</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="load-wrap">
                    <div class="spinner-grow text-secondary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                </div>
                <form class="" action="javascript:;" id="delete-dpm-data-form">
                    <div class="alert alert-danger" style="display:none;"></div>
                    <div class="modal-body js-box-body" style="display: none;">
                        <input type="hidden" id="user_id" name="user_id">
                        <input type="hidden" id="user_pos_code" name="user_pos_code">
                        <div class="row">
                            <div class="col-lg-6">
                                <h5>User name : <b>Lorem</b></h5>
                            </div>
                            <div class="col-lg-6">
                                <h5>Position Code : <b>9587qe</b></h5>
                            </div>

                        </div>
                        <hr>
                        <div class="text-center ">
                            <h6>Select Month</h6>
                        </div>
                        <div class="form-group flex_row">
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_1" value="1">
                                <span for="dpm_month_1">Quarter One</span>
                            </label>
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_2" value="2">
                                <span for="dpm_month_2">APR</span>
                            </label>
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_3" value="3">
                                <span for="dpm_month_3">MAY</span>
                            </label>
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_4" value="4">
                                <span for="dpm_month_4">JUN</span>
                            </label>
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_5" value="5">
                                <span for="dpm_month_5">Quarter Two</span>
                            </label>
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_6" value="6">
                                <span for="dpm_month_6">JUL</span>
                            </label>
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_7" value="7">
                                <span for="dpm_month_7">AUG</span>
                            </label>
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_8" value="8">
                                <span for="dpm_month_8">SEP</span>
                            </label>
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_9" value="9">
                                <span for="dpm_month_9">Quarter Three</span>
                            </label>
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_10" value="10">
                                <span for="dpm_month_10">OCT</span>
                            </label>
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_11" value="11">
                                <span for="dpm_month_11">NOV</span>
                            </label>
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_12" value="12">
                                <span for="dpm_month_12">DEC</span>
                            </label>
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_13" value="13">
                                <span for="dpm_month_13">Quarter Four</span>
                            </label>
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_14" value="14">
                                <span for="dpm_month_14">JAN</span>
                            </label>
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_15" value="15">
                                <span for="dpm_month_15">FEB</span>
                            </label>
                            <label class="custom_check">
                                <input type="checkbox" name="dpm_month[]" id="dpm_month_16" value="16">
                                <span for="dpm_month_16">MAR</span>
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('custom-js')
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.bootstrap5.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            $("#frm-emp").validate({
                rules: {
                    user_pos_code: {
                        required: true,
                    },
                    user_pos_name: {
                        required: true,
                    },
                    user_name: {
                        required: true,
                    },
                    user_code: {
                        required: true,
                    },
                    user_desg: {
                        required: true,
                    },
                    user_dob: {
                        required: true,
                    },
                    user_join_date: {
                        required: true,
                    },
                    user_effective_date: {
                        required: true,
                    },
                    user_cc_code: {
                        // required: true,
                    },
                    user_cc_name: {
                        // required: true,
                    },
                    user_hq_code: {
                        required: true,
                    },
                    user_hq_name: {
                        required: true,
                    },
                    user_email_id: {
                        required: true,
                    },
                    user_mobile_no: {
                        required: true,
                    }
                },
            });

            var i = 1;
            var table = $('#datatable').DataTable({
                lengthMenu: [
                    [50, 100, 500, 1000],
                    [50, 100, 500, 1000, "All"]
                ],
                pageLength: 50,
                searching: true,
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: false,
                autoWidth: false,
                ajax: {
                    url: "{{ route('userAnalytic') }}",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}"
                    },
                },
                "drawCallback": function(settings) {

                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'user_name',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'user_pos_code',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'user_id_code',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'user_code',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'user_pos_name',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'user_hq_code',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'user_hq_name',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'status',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'action',
                        searchable: true,
                        orderable: false
                    }

                ],
                columnDefs: [{
                    "aTargets": [1, 2, 3, 4, 5, 6, 7, 8, 9], // Column to target
                    "mRender": function(data, type, full) {
                        if (data != null) {
                            return data;
                        } else {
                            return '-';
                        }
                    }
                }, ],
            });

            $(document).on('click', '.js-edit-emp', function() {
                $('#edit_emp').find('.js-box-body').hide();
                $('#edit_emp').find('.load-wrap').show();
                $('#edit_emp').modal('show');
                $('#edit_emp').find('.alert').html('').hide();

                var id = $(this).attr('data-id');
                $.ajax({
                    url: "{{ url('/users') }}/" + id,
                    method: 'GET',
                    data: {},
                    success: function(obj) {
                        if (obj.code == 1) {
                            // $('#frm-emp').find('input[name="user_cc_code"]').val(obj.record
                            //     .user_cc_code);
                            // $('#frm-emp').find('input[name="user_cc_name"]').val(obj.record
                            //     .user_cc_name);
                            // $('#frm-emp').find('input[name="user_desg"]').val(obj.record
                            //     .user_desg);
                            // $('#frm-emp').find('input[name="user_dob"]').val(obj.record
                            //     .user_dob);
                            // $('#frm-emp').find('input[name="user_effective_date"]').val(obj
                            //     .record.user_effective_date);
                            // $('#frm-emp').find('input[name="user_join_date"]').val(obj.record
                            //     .user_join_date);
                            $('#frm-emp').find('input[name="user_code"]').val(obj.record
                                .user_code);
                            $('#frm-emp').find('input[name="user_email_id"]').val(obj.record
                                .user_email_id);
                            $('#frm-emp').find('input[name="user_hq_code"]').val(obj.record
                                .user_hq_code);
                            $('#frm-emp').find('input[name="user_hq_name"]').val(obj.record
                                .user_hq_name);
                            $('#frm-emp').find('input[name="user_id_code"]').val(obj.record
                                .user_id_code);
                            if (obj.record.user_type != '0' && obj.record.user_type != '1') {
                                $('#frm-emp').find('input[name="parentPosCode"]').val(obj
                                    .parentPositionData
                                    .user_pos_code);
                            } else {
                                $('#frm-emp').find('input[name="parentPosCode"]').val(0);
                            }

                            $('#frm-emp').find('input[name="user_mobile_no"]').val(obj.record
                                .user_mobile_no);
                            $('#frm-emp').find('input[name="user_name"]').val(obj.record
                                .user_name);
                            $('#frm-emp').find('input[name="user_pos_code"]').val(obj.record
                                .user_pos_code);
                            $('#frm-emp').find('input[name="user_pos_name"]').val(obj.record
                                .user_pos_name);

                            $('#frm-emp').attr('data-id', id);
                            $('#edit_emp').find('.load-wrap').hide();
                            $('#edit_emp').find('.js-box-body').show();
                        }
                    }
                });
            });

            $(document).on('click', '.js-info-emp', function() {

                $('#all-detail-modal').find('.js-box-body').hide();
                $('#all-detail-modal').find('.load-wrap').show();
                $('#all-detail-modal').modal('show');

                var id = $(this).attr('data-id');
                $.ajax({
                    url: "{{ url('/users') }}/" + id,
                    method: 'GET',
                    data: {},
                    success: function(obj) {
                        if (obj.code == 1) {
                            var temp = $('#all-detail-modal');

                            temp.find('.js-user_cc_code').text(obj.record.user_cc_code ? obj
                                .record.user_cc_code : '-');
                            temp.find('.js-user_cc_name').text(obj.record.user_cc_name ? obj
                                .record.user_cc_name : '-');
                            temp.find('.js-user_code').text(obj.record.user_code ? obj.record
                                .user_code : '-');
                            temp.find('.js-user_desg').text(obj.record.user_desg ? obj.record
                                .user_desg : '-');
                            temp.find('.js-user_dob').text(obj.record.user_dob ? obj.record
                                .user_dob : '-');
                            temp.find('.js-user_effective_date').text(obj.record
                                .user_effective_date ? obj.record.user_effective_date : '-');
                            temp.find('.js-user_email_id').text(obj.record.user_email_id ? obj
                                .record.user_email_id : '-');
                            temp.find('.js-user_hq_code').text(obj.record.user_hq_code ? obj
                                .record.user_hq_code : '-');
                            temp.find('.js-user_hq_name').text(obj.record.user_hq_name ? obj
                                .record.user_hq_name : '-');
                            temp.find('.js-user_id_code').text(obj.record.user_id_code ? obj
                                .record.user_id_code : '-');
                            temp.find('.js-user_join_date').text(obj.record.user_join_date ? obj
                                .record.user_join_date : '-');
                            temp.find('.js-user_mobile_no').text(obj.record.user_mobile_no ? obj
                                .record.user_mobile_no : '-');
                            temp.find('.js-user_name').text(obj.record.user_name ? obj.record
                                .user_name : '-');
                            temp.find('.js-user_pos_code').text(obj.record.user_pos_code ? obj
                                .record.user_pos_code : '-');
                            temp.find('.js-user_pos_name').text(obj.record.user_pos_name ? obj
                                .record.user_pos_name : '-');
                            temp.find('.js-user_status').text(obj.record.user_status == "2" ?
                                'Suspended' : 'Active')
                            if (obj.record.user_status == "2") {
                                temp.find('.js-user_status').removeClass('badge-success');
                                temp.find('.js-user_status').addClass('badge-warning');
                            } else {
                                temp.find('.js-user_status').removeClass('badge-warning');
                                temp.find('.js-user_status').addClass('badge-success');
                            }
                            $('#all-detail-modal').find('.load-wrap').hide();
                            $('#all-detail-modal').find('.js-box-body').show();
                        }
                    }
                });
            });

            $(document).on('submit', '#frm-emp', function() {
                var that = $(this);
                that.find('.alert').html('').hide();

                if (that.valid()) {
                    that.find('button').text('Processing...');
                    that.find('button').prop("disabled", true);

                    var formData = new FormData(that[0]);
                    $.ajax({
                        url: "{{ url('/users/data/update') }}/" + that.attr('data-id'),
                        method: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        cache: false,
                        success: function(obj) {
                            that.find('button').text('Submit');
                            that.find('button').prop("disabled", false);
                            if (obj.code == 1) {
                                window.location.reload();
                            } else {
                                that.find('.alert').html(obj.message).show();
                            }
                        }
                    });
                }
            });

            $(document).on('click', '.js-status-change', function() {
                var id = $(this).attr('data-id');
                var that = $(this);
                $.ajax({
                    url: "{{ url('/users/status') }}/" + id,
                    method: 'POST',
                    data: {},
                    success: function(obj) {
                        if (obj.status == "2") {
                            that.text("Suspended").removeClass('badge-success');
                            that.addClass('badge-warning');
                        } else {
                            that.text("Active").removeClass('badge-warning');
                            that.addClass('badge-success');
                        }
                    }
                });
            });

            $(document).on('click', '.js-delete-dpm', function() {
                var id = $(this).attr('data-id');
                var user_pos_code = $(this).attr('data-user_pos_code');
                var that = $(this);
                $('#delete-dpm-modal').find('form')[0].reset();
                $('#delete-dpm-modal').find('.js-box-body').hide();
                $('#delete-dpm-modal').find('.load-wrap').show();
                $('#delete-dpm-modal').modal('show');
                $('#delete-dpm-modal').find('input[name="user_id"]').val(id);
                $('#delete-dpm-modal').find('input[name="user_pos_code"]').val(user_pos_code);
                $('#delete-dpm-modal').find('.load-wrap').hide();
                $('#delete-dpm-modal').find('.js-box-body').show();
                // $.ajax({
                //     url: "{{ url('/users/status') }}/" + id,
                //     method: 'POST',
                //     data: {},
                //     success: function(obj) {
                //         if (obj.status == "2") {
                //             that.text("Suspended").removeClass('badge-success');
                //             that.addClass('badge-warning');
                //         } else {
                //             that.text("Active").removeClass('badge-warning');
                //             that.addClass('badge-success');
                //         }
                //     }
                // });
            });

            $(document).on('submit', '#delete-dpm-data-form', function() {
                var that = $(this);
                that.find('.alert').html('').hide();

                if (that.valid()) {
                    that.find('button').text('Processing...');
                    that.find('button').prop("disabled", true);

                    var formData = new FormData(that[0]);
                    $.ajax({
                        url: "{{ url('/users/delete/dpm/data') }}",
                        method: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        cache: false,
                        success: function(obj) {
                            that.find('button').text('Submit');
                            that.find('button').prop("disabled", false);
                            if (obj.code == 1) {
                                window.location.reload();
                            } else {
                                that.find('.alert').html(obj.message).show();
                            }
                        }
                    });
                }
            });

            $(document).on('click', '.js-usr-import', function() {
                $('#frm-user-import')[0].reset();
                $('#frm-user-import').find('.alert').html('').hide();
                $('#frm-user-import').find('button').text('Submit').prop("disabled", false);
                $('#frm-user-import').find('.custom-file-label').text('Choose file');
                $('#import').modal('show');
            });

            $(document).on('submit', '#frm-user-import', function() {
                var that = $(this);
                that.find('.alert').html('').hide();

                if (that.valid()) {
                    that.find('button').text('Processing...');
                    that.find('button').prop("disabled", true);

                    var formData = new FormData(that[0]);
                    $.ajax({
                        url: "{{ url('/users/import') }}",
                        method: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        cache: false,
                        success: function(obj) {
                            that.find('button').text('Submit');
                            that.find('button').prop("disabled", false);
                            if (obj.code == 1) {
                                window.location.reload();
                            } else {
                                that.find('.alert').html(obj.message).show();
                            }
                        },
                        error: function(request, status, error) {
                            that.find('button').text('Submit');
                            that.find('button').prop("disabled", false);

                            that.find('.alert').html(
                                'Something went wrong please try after some time').show();
                        }
                    });
                }
            });
        });
    </script>
@endsection