@extends('user.layout.layout')

@section('content')
    <div class="container-fluid">

        <!--  Row 1 -->
        <div class="row">

            <div class="col-12">
                <div class="view_output">
                    <div class="incentive_tab_in">
                        <div class="white_round">
                            <div class="row">
                                <div class="white_round box_shadow">
                                    <div class="col-12">
                                        <div class="table_specing">
                                            <div class="row">
                                                <div class="col-lg-auto col-md-auto col-auto my-auto pb-3 me-auto">
                                                    <div class="main_title">
                                                        <h2>Manage Field</h2>
                                                    </div>
                                                </div>
                                                <div class="col-lg-auto col-md-auto col-auto my-auto pb-3">
                                                    <button type="button" onclick="add_edit_employee_data_model_show('add')" class="btn  btn-primary"><i
                                                            class="fa fa-add me-2">
                                                        </i>Add</button>
                                                </div>
                                            </div>
                                            <table id="fieldDataTable" class="table table-striped data-table-dr"
                                                style="width:100%">
                                                <thead>
                                                    <tr>
                                                        <th>Sr No</th>
                                                        <th>Employee ID</th>
                                                        <th>Employee Name</th>
                                                        <th>Employee Salary</th>
                                                        <th>Date of Joining</th>
                                                        <th>Level</th>
                                                        <th>Department</th>
                                                        <th>Total Incentive</th>
                                                        <th>Status</th>
                                                        <th>Action</th>
                                                        <th>Date And Time</th>
                                                    </tr>
                                                </thead>
                                                <tbody>

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

    </div>

    <!-- Modal Change -->
    <div class="modal fade" id="add_edit_employee_data_model" tabindex="-1" aria-labelledby="add_edit_employee_data"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="modal-title fs-5" id="add_edit_employee_data">Add Employee</h2>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                {!! Form::open([
                    'url' => '#',
                    'name' => 'add_edit_employee_data_form',
                    'id' => 'add_edit_employee_data_form',
                    'enctype' => 'multipart/form-data',
                ]) !!}
                <input type="hidden" id="employeeFormType" name="employeeFormType">
                <input type="hidden" id="user_id" name="user_id">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="user_name" class="form-label">Employee Name</label>
                        <input type="text" class="form-control" id="user_name" name="user_name"
                            placeholder="Enter Employee Name">
                    </div>

                    <div class="mb-3">
                        <label for="emp_code" class="form-label">Employee ID</label>
                        <input type="text" class="form-control" id="emp_code" name="emp_code"
                            placeholder="Enter Employee ID">
                    </div>

                    <div class="mb-3">
                        <label for="designation" class="form-label">Department</label>
                        <input type="text" class="form-control" id="designation" name="designation"
                            placeholder="Enter Department">
                    </div>
                    <div class="mb-3">
                        <label for="employee_salary" class="form-label">Salary</label>
                        <input type="text" class="form-control" id="employee_salary" name="employee_salary"
                            placeholder="Enter Employee Salary">
                    </div>
                    <div class="mb-3">
                        <label for="date_of_joining" class="form-label">Date of Joining</label>
                        <input type="date" class="form-control" id="date_of_joining" name="date_of_joining"
                            placeholder="Enter Date of Joining">
                    </div>
                    <div class="mb-3 error_msg_show">
                        <label for="level" class="form-label"> Level </label>
                        <select class="form-control js-example-basic-single w-100 select_new" id="level" name="level">
                            <option value="2a">2-A</option>
                            <option value="2b">2-B</option>
                            <option value="2c">2-C</option>
                            <option value="1a">1-A</option>
                            <option value="1b">1-B</option>
                            <option value="1c">1-C</option>
                            <option value="0a">0-A</option>
                            <option value="0b">0-B</option>
                            <option value="0c">0-C</option>
                            <option value="0x">0-X</option>
                            <option value="other">other</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="user_status" class="form-label"> Status </label>
                        <select class="form-control js-example-basic-single w-100 select_new" id="user_status"
                            name="user_status">
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" id="submitEmployee" class="btn btn-primary">Submit</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endsection

@section('customJs')
    <script>
        $(document).ready(function() {
            var i = 1;
            var table = $('#fieldDataTable').DataTable({
                scrollX: true,
                destroy: true,
                processing: true,
                serverSide: true,
                responsive: false,
                autoWidth: true,
                ajax: {
                    url: "{{ route('user.field.paginate') }}",
                    data: function(d) {
                        d._token = "{{ csrf_token() }}"
                    },
                },
                "drawCallback": function(settings) {

                },
                columns: [{
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'emp_code',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'user_name',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'employee_salary',
                        searchable: true,
                        orderable: false
                    },{
                        data: 'date_of_joining',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'level',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'designation',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'total_incentive',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'status',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'action',
                        searchable: true,
                        orderable: false
                    },
                    {
                        data: 'dateTime',
                        searchable: true,
                        orderable: false
                    }

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

            });

            $("#add_edit_employee_data_form").validate({
                ignore: ".ignore",
                rules: {
                    employeeFormType: {
                        required: true,
                        // maxlength: 20,
                    },
                    user_name: {
                        required: true,
                        maxlength: 40,
                        // minlength: 1,
                        // number: true
                    },
                    emp_code: {
                        required: true,
                        maxlength: 12,
                        number: true,
                    },
                    designation: {
                        required: true,
                        maxlength: 40,
                    },
                    employee_salary: {
                        required: true,
                        maxlength: 20,
                        number: true,
                    },
                    level: {
                        required: true,
                    },
                    user_status: {
                        required: true,
                    },
                    date_of_joining: {
                        required: true,
                    },
                },
                messages: {},
                errorPlacement: function(error, element) {
                    var placement = $(element).data("error");
                    if (element.is("select")) {
                        error.appendTo(".error_msg_show");
                    } else if (element.is(":checkbox")) {
                        error.appendTo(".radio_error_msg_show");
                    } else if (placement) {
                        $(placement).append(error);
                    } else {
                        error.insertAfter(element);
                    }
                },
                submitHandler: function(form) {
                    // return false;
                    $("#submitEmployee").html("<span> Processing...</span>");
                    $("#submitEmployee").attr("disabled", true);

                    var formData = new FormData($("#add_edit_employee_data_form")[0]);
                    $.ajax({
                        url: "{{ route('user.add.edit.employee') }}",
                        type: "POST",
                        data: formData,
                        processData: false,
                        contentType: false,
                        dataType: "json",
                        success: function(response, textStatus, xhr) {
                            $("#submitEmployee").html("Save");
                            $("#submitEmployee").attr("disabled", false);
                            if (response.status == 1) {
                                $.notify(response.message, "success");
                                $("#add_edit_employee_data_model").modal("hide");
                                $("#add_edit_employee_data_form")[0].reset();
                                $("#add_edit_employee_data_form").validate().resetForm();
                                $("#fieldDataTable")
                                    .DataTable()
                                    .ajax.reload(null, false);
                            } else {
                                $("#submitEmployee").html("Save");
                                $("#submitEmployee").attr("disabled", false);
                                $.notify(response.message, "error");
                            }
                        },
                        error: function(jqXHR, textStatus, errorThrown) {
                            $("#submitEmployee").html("Save");
                            $("#submitEmployee").attr("disabled", false);
                            $.notify(jqXHR.responseJSON.message, "error");
                        },
                    }); //ajax
                },
            });
        });

        function add_edit_employee_data_model_show(type, user_id = null) {
            $("#add_edit_employee_data_form")[0].reset();
            $("#add_edit_employee_data_form").validate().resetForm();
            $.ajax({
                url: "{{ route('user.get.employee.details') }}",
                type: "POST",
                data: {
                    type: type,
                    user_id: user_id,
                    _token: "{{ csrf_token() }}",
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        if (type == "edit") {
                            $("#user_name").val(
                                response.data.employeeData.user_name
                            );
                            $("#emp_code").val(
                                response.data.employeeData.emp_code
                            );
                            $("#employee_salary").val(
                                response.data.employeeData.employee_salary
                            );
                            $("#date_of_joining").val(
                                response.data.employeeData.date_of_joining
                            );
                            $("#user_status")
                                .val(response.data.employeeData.user_status)
                                .change();
                            $("#level").val(response.data.employeeData.level);
                            $("#designation").val(response.data.employeeData.designation);
                            $("#user_id").val(response.data.employeeData.id);

                            $("#add_edit_employee_data").html("Edit Employee");
                        } else {
                            $("#add_edit_employee_data").html("Add Employee");
                        }
                        $("#employeeFormType").val(type);
                        $("#add_edit_employee_data_model").modal("show");
                    } else $.notify(response.message, "error");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                },
            }); //ajax
        }

        function employee_status_manage(user_id) {
            $.ajax({
                url: "{{ route('user.field.status.manage') }}",
                type: "POST",
                data: {
                    user_id: user_id,
                    _token: "{{ csrf_token() }}",
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        $.notify(response.message, "success");
                    } else $.notify(response.message, "error");
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    $.notify(jqXHR.responseJSON.message, "error");
                },
            }); //ajax
        }
    </script>
@endsection