@include('admin.layout.header')

<div class="container-fluid">
    <!--  Row 1 -->
    <div class="row g-2">

        <div class="col-auto col-lg-auto col-md-auto col-sm-auto my-auto">
            <h2 class="main_title">User Management</h2>
        </div>
        <div class="col-auto col-lg-auto col-md-auto col-sm-auto ms-auto ms-auto">
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal">
                <i class="fa-solid fa-plus me-2"></i> Add User
            </button>
        </div>
        <div class="col-auto col-lg-auto col-md-auto col-sm-auto">
            <button id="ExportUserData" class="btn btn-success"><i class="fa fa-download me-2"></i>Export </button>
        </div>
    </div>

    <div class="row mb-3">
    </div>

    <div class="row">
        <div class="col-12">
            <div class="white_shadow_rs">
                <table id="datatable" name="datatable" class="table table-striped data-table-dr" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>EMP Name</th>
                            <th>EMP Code</th>
                            <th>Designation</th>
                            <th>Position Code</th>
                            <th>Parent Position Code</th>
                            <th>HQ</th>
                            <th>HQ Code</th>
                            <th>Role</th>
                            <th>Team Name</th>
                            <th>Status</th>
                            <th>Edit</th>
                            <th>Date And Time</th>
                            <th>Access Grant</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tbody>
                </table>
            </div>
        </div>
    </div>
</div>

</div>

{{-- User Modal --}}
<div class="modal fade" id="userModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="userModalStatus">Add User</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            {!! Form::open([
                'url' => '#',
                'name' => 'userForm',
                'id' => 'userForm',
                'enctype' => 'multipart/form-data',
            ]) !!}
            <div class="modal-body">
                <input type="hidden" name="user_id" id="user_id">
                <div class="mb-3">
                    <label for="emp_name" class="form-label">User Name <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="emp_name" name="emp_name"
                        placeholder="Enter User Name">
                </div>
                <div class="mb-3">
                    <label for="emp_code" class="form-label">EMP Code <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="emp_code" name="emp_code"
                        placeholder="Enter EMP Code">
                </div>
                <div class="mb-3">
                    <label for="position_code" class="form-label">Position Code <span
                            class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="position_code" name="position_code"
                        placeholder="Enter Position Code">
                </div>
                <div class="mb-3">
                    <label for="hq" class="form-label">HQ <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="hq" name="hq" placeholder="Enter HQ">
                </div>
                <div class="mb-3">
                    <label for="hq_code" class="form-label">HQ Code<span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="hq_code" name="hq_code"
                        placeholder="Enter HQ Code">
                </div>
                <div class="mb-3">
                    <label for="user_type" class="form-label">Role <span class="text-danger">*</span></label>
                    <select class="select2 js-example-basic-single select-label form-control w-100" name="user_type"
                        id="user_type">
                        <option value="" selected>Select Role</option>
                        <option value="ABM">ABM</option>
                        <option value="BE">BE</option>
                    </select>
                    <label id="user_type-error" class="error" for="user_type" style="display: none;"></label>
                </div>
                <div class="mb-3">
                    <label for="parent_position_code" class="form-label">Parent Position Code
                        <span class="text-danger">*</span>
                    </label>
                    <select class="select2 js-example-basic-single select-label form-control w-100"
                        name="parent_position_code" id="parent_position_code" disabled>
                        <option value="" selected>Select Parent Position Code</option>
                    </select>
                    <label id="parent_position_code-error" class="error" for="parent_position_code"
                        style="display: none;"></label>
                </div>
                <div class="mb-3">
                    <label for="designation" class="form-label">Designation <span
                            class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="designation" name="designation"
                        placeholder="Enter Designation">
                </div>
                {{-- <div class="mb-3">
                    <label for="team_id" class="form-label">Team <span class="text-danger">*</span></label>
                    <select class="select2 js-example-basic-single select-label form-control w-100" name="team_id" id="team_id">
                        <option value="" selected>Select Team</option>
                        @foreach ($teams_data as $team)
                            <option value="{{ $team->team_id }}">{{ $team->team_name }}</option>
                        @endforeach
                    </select>
                    <label id="team_id-error" class="error" for="team_id" style="display: none;"></label>
                </div> --}}
            </div>
            <div class="modal-footer justify-content-center">
                <button type="submit" class="btn btn-primary" id="userFormSubmit">Submit</button>
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>

@include('admin.layout.footer')
<script src="{{ asset('admin/assets/js/jquery.validate.min.js') }}"></script>
<script src="{{ asset('admin/assets/js/additional-methods.min.js') }}"></script>
<script src="{{ asset('notify.js') }}"></script>

<script>
    function editUserSet(user_id, emp_name, emp_code, position_code, parent_position_code, user_type, designation,
        team_id, hq, hq_code) {
        $("#userModalStatus").text("Edit User");
        $("#user_id").val(user_id);
        $("#emp_name").val(emp_name);
        $("#emp_code").val(emp_code);
        $("#position_code").val(position_code);
        $("#user_type").val(user_type).trigger('change');
        $("#parent_position_code").val(parent_position_code).trigger('change');
        $("#designation").val(designation);
        $("#hq").val(hq);
        $("#hq_code").val(hq_code);
        // $("#team_id").val(team_id).trigger('change');
        // $("#position_code").prop('disabled', true);
    }

    $('#ExportUserData').on('click', function() {

        var url = "{{ route('downloadDataUser') }}";

        window.location.replace(url);
    });


    function userStatusChange(userId, status) {
        $.ajax({
            url: "{{ route('updateUserStatus') }}",
            type: 'POST',
            data: {
                'user_id': userId,
                'status': status,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response) {
                if (response.status == 1) {
                    $.notify(response.msg, "success");
                    $('#datatable').DataTable().ajax.reload();
                } else {
                    $.notify(response.msg, "error");
                }
            },
            error: function(jqXHR) {
                $.notify(jqXHR.responseJSON.msg, "error");
            }
        });
    }
    function userAccessStatusChange(userId, status) {
        $.ajax({
            url: "{{ route('updateUserAccessStatus') }}",
            type: 'POST',
            data: {
                'user_id': userId,
                'status': status,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response) {
                if (response.status == 1) {
                    $.notify(response.msg, "success");
                    $('#datatable').DataTable().ajax.reload();
                } else {
                    $.notify(response.msg, "error");
                }
            },
            error: function(jqXHR) {
                $.notify(jqXHR.responseJSON.msg, "error");
            }
        });
    }

    $(document).ready(function() {
        // accroding to user_type parent_position_code upend
        var abmUsers = [
            @foreach ($abm_users as $user_data)
                {
                    code: "{{ $user_data->parent_position_code }}"
                },
            @endforeach
        ];
        var rbmUsers = [
            @foreach ($rbm_users as $user_data)
                {
                    code: "{{ $user_data->parent_position_code }}"
                },
            @endforeach
        ];

        $('#user_type').on('change', function() {
            var selectedType = $(this).val();
            // console.log('Selected user type:', selectedType);

            var $parentPositionCodeSelect = $('#parent_position_code');
            $parentPositionCodeSelect.empty(); // Clear current options
            $parentPositionCodeSelect.append(
                '<option value="" selected>Select Parent Position Code</option>');

            if (selectedType === 'BE') {
                // console.log('Populating ABM users');
                populateParentPositionCodes(abmUsers);
            } else if (selectedType === 'ABM') {
                // console.log('Populating RBM users');
                populateParentPositionCodes(rbmUsers);
            }

            $parentPositionCodeSelect.prop('disabled', !selectedType); // Disable if no type is selected
            // console.log('Parent position code select disabled:', $parentPositionCodeSelect.prop('disabled'));
        });

        function populateParentPositionCodes(users) {
            var $parentPositionCodeSelect = $('#parent_position_code');
            users.forEach(function(user) {
                $parentPositionCodeSelect.append($('<option>', {
                    value: user.code,
                    text: user.code
                }));
            });
        }

        $('#userModal').on('hidden.bs.modal', function() {
            // Reset form fields
            $(this).find('form')[0].reset();

            // Reset hidden input specifically
            $('#user_id').val('');

            // Reset select boxes to their default value (usually the first option)
            $(this).find('select').val('').trigger('change');

            // Reset other elements if needed
            $("#userModalStatus").text("Add User"); // Reset the modal title
            // $("#position_code").prop('disabled', false);

            // Clear validation error messages and reset the form's validation state
            var form = $(this).find('form');
            form.validate().resetForm(); // Clears error messages
            form.find('.is-invalid').removeClass('is-invalid'); // Remove error class from input fields
        });

        $('#userForm').validate({
            ignore: ".ignore",
            rules: {
                emp_name: {
                    required: true,
                },
                emp_code: {
                    required: true,
                },
                position_code: {
                    required: true,
                },
                parent_position_code: {
                    required: true,
                },
                user_type: {
                    required: true,
                },
                designation: {
                    required: true,
                },
                hq: {
                    required: true,
                },
                hq_code: {
                    required: true,
                },
                // team_id: {
                //     required: true,
                // },
            },
            messages: {},
            errorPlacement: function(error, element) {
                var placement = $(element).data('error');
                if (placement) {
                    $(placement).append(error)
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                $("#userFormSubmit").attr('disabled', true);
                var formData = new FormData($("#userForm")[0]);

                $.ajax({
                    url: '{{ route('upsertUser') }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                    },
                    dataType: "json",
                    success: function(response) {
                        if (response.status == 1) {
                            $('#userModal').modal('hide');
                            $.notify(response.msg, "success");
                            $('#datatable').DataTable().ajax.reload();
                        } else if (response.status == 0) {
                            $.notify(response.error, "error");
                        }
                        $("#userFormSubmit").attr('disabled', false);
                    },
                    error: function(xhr, status, error) {
                        console.error('An error occurred:', error);
                        $("#userFormSubmit").attr('disabled', false);
                    }
                });
            }
        });

        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex'
                },
                {
                    data: 'emp_name',
                    name: 'emp_name'
                },
                {
                    data: 'emp_code',
                    name: 'emp_code'
                },
                {
                    data: 'designation',
                    name: 'designation'
                },
                {
                    data: 'position_code',
                    name: 'position_code'
                },
                {
                    data: 'parent_position_code',
                    name: 'parent_position_code'
                },
                {
                    data: 'hq',
                    name: 'hq'
                },
                {
                    data: 'hq_code',
                    name: 'hq_code'
                },
                {
                    data: 'user_type',
                    name: 'user_type'
                },
                {
                    data: 'teamName',
                    name: 'teamName'
                },
                {
                    data: 'status',
                    name: 'status'
                },
                {
                    data: 'edit',
                    name: 'edit'
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                },
                {
                    data: 'is_live',
                    name: 'is_live'
                }

            ];
            var columnDefs = [{
                "width": "150",
                "targets": [5]
            }];
            getdatatable("{{ route('manageUserPaginate') }}", columns, columnDefs);
        });

        function getdatatable(url, columns, columnDefs) {
            if ($.fn.DataTable.isDataTable('#datatable')) {
                $('#datatable').DataTable().destroy();
            }
            $('#datatable').DataTable({
                processing: true,
                serverSide: true,
                pageLength: 25,
                "bDestroy": true,
                order: [],
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                    }
                },
                drawCallback: function(settings) {
                    // Reinitialize Venobox
                    // new VenoBox({
                    //     selector: '.my-video-links',
                    // });
                }
            });
        }
    });
</script>