@extends('layout.main')

@section('content')

    <section>

        <div class="container-fluid"><span id="general_result"></span></div>

        <div class="container-fluid mb-3">
            {{-- @can('set-permission')
                <a href="{{route('roles.index')}}" class="btn btn-info mr-1"><i
                            class="fa fa-puzzle-piece"></i> {{trans('file.Role')}} </a>
            @endcan --}}
            {{-- @can('assign-role')
                <form id="mass_role_assign" class="d-inline">
                    <select id="mass_select" class="selectpicker" data-style="btn-primary" name="mass_role"
                            title="{{__('Selecting',['key'=>trans('file.Role')])}}...">
                        @foreach ($roles as $role)
                            <option value="{{$role->id}}">{{$role->name}}</option>
                        @endforeach
                    </select>
                </form>
            @endcan --}}
            @can('view-role')
                <a href="{{ route('roles.index') }}" class="btn btn-primary fs-7 rounded-1 mr-1"><i
                        class="fa fa-puzzle-piece"></i>
                    {{ trans('file.Role') }} </a>
            @endcan
            @can('role-access-user')
                <form id="mass_role_assign" class="d-inline">
                    <select id="mass_select" class="selectpicker" data-style="btn-primary text-white fs-7 rounded-1"
                            name="mass_role" title="{{ __('Selecting', ['key' => trans('file.Role')]) }}...">
                        @foreach ($roles as $role)
                            <option value="{{ $role->id }}">{{ $role->name }}</option>
                        @endforeach
                    </select>
                </form>
            @endcan

        </div>


        <div class="table-responsive">
            <table id="user-table" class="table table-striped">
                <thead>
                <tr>
                    <th class="not-exported border bg-light"></th>
                    <th class="border bg-light">{{ __('Image') }}</th>
                    <th class="border bg-light">{{ trans('file.Username') }}</th>
                    <th class="border bg-light">{{ __('Permission Role') }}</th>
                    <th class="not-exported border bg-light">{{ __('Assign Role') }}</th>
                </tr>
                </thead>
            </table>

        </div>
    </section>

@endsection

@push('scripts')
    <script type="text/javascript">
        (function ($) {
            "use strict";
            $(document).ready(function () {


                let table_table = $('#user-table').DataTable({
                    initComplete: function () {
                        this.api().columns([2, 4]).every(function () {
                            let column = this;
                            let select = $('<select><option value=""></option></select>')
                                .appendTo($(column.footer()).empty())
                                .on('change', function () {
                                    let val = $.fn.dataTable.util.escapeRegex(
                                        $(this).val()
                                    );

                                    column
                                        .search(val ? '^' + val + '$' : '', true, false)
                                        .draw();
                                });

                            column.data().unique().sort().each(function (d, j) {
                                select.append('<option value="' + d + '">' + d +
                                    '</option>');
                                $('select').selectpicker('refresh');
                            });
                        });
                    },
                    responsive: true,
                    fixedHeader: {
                        header: true,
                        footer: true
                    },
                    processing: true,
                    serverSide: true,
                    ajax: {
                        url: "{{ route('user-roles') }}",

                    },

                    columns: [{
                        data: 'id',
                        orderable: false,
                        searchable: false
                    },
                        {
                            data: 'profile',
                            name: 'profile',
                            {{-- render: function (data) { --}}
                                {{--    if (data) { --}}
                                {{--        return "<img class='rounded-pill border border-primary border p-1' src={{ tenantPath() }}/uploads/profile_photos/" + data + " width='50' height='50' />"; --}}
                                {{--    } else { --}}
                                {{--        return "<img class='rounded-pill border border-primary p-1' src={{ asset('/images/avatar.jpg') }}" + " width='50' height='50' />"; --}}
                                {{--    } --}}
                                {{-- }, --}}
                            orderable: false

                        },
                        {
                            data: 'username',
                            name: 'username',
                            render: function (data) {
                                return '<span class="text-primary fw-bolder">' + data +
                                    '</span>';
                            },

                        },
                        {
                            data: 'role_name',
                            name: 'role_name',


                        },
                        // {
                        //     data: 'assign_role',
                        //     name: 'assign_role',
                        //     render: function (data,type,row) {

                        //         if (row.role_name == 'admin' ) {
                        //             return 'Admin role can not be changed';
                        //         }
                        //         else if (row.role_name == 'client') {
                        //             return 'Client role can not be changed';
                        //         }
                        //         else {

                        //             return '@can('assign-role')<div class="btn-group"><button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Assign Role &nbsp;</button><div class="dropdown-menu">@foreach ($roles as $role)<li data-employee_id="'+row.id+'" data-role_id="{{ $role->id }}" class="assign-role">{{ $role->name }}</li>@endforeach</div></div>@endcan';

                        //         }

                        //     }
                        // }
                        {
                            data: 'role-access-user',
                            name: 'role-access-user',
                            render: function (data, type, row) {

                                if (row.role_name == 'admin') {
                                    return '<span class="text-danger fw-bolder">{{ __('Admin role can not be changed') }}</span>';
                                } else if (row.role_name == 'client') {
                                    return '<span class="text-danger fw-bolder">{{ __('Client role can not be changed') }}</span>';
                                } else {
                                    // return '@can('assign-role')<div class="btn-group"><button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Assign Role &nbsp;</button><div class="dropdown-menu">@foreach ($roles as $role)<li data-employee_id="'+row.id+'" data-role_id="{{ $role->id }}" class="assign-role">{{ $role->name }}</li>@endforeach</div></div>@endcan';
                                    return '@can('role-access-user')<div class="btn-group"><button type="button" class="btn btn-outline-primary fs-7 fw-bolder rounded-1 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ __('Assign Role') }}</button><div class="dropdown-menu px-3">@foreach ($roles as $role)<li data-employee_id="' +
                                        row.id +
                                        '" data-role_id="{{ $role->id }}" class="assign-role">{{ $role->name }}</li>@endforeach</div></div>@endcan';

                                }

                            }
                        }

                    ],


                    "order": [],
                    'language': {
                            select: {
                                rows: {
                                    _: "{{ __('file.Selected %d rows') }}",
                                    0: "{{ __('file.Click a row to select it') }}",
                                    1: "{{ __('file.Selected 1 row') }}"
                                }
                            },
                        'zeroRecords': '{{ __('No data available in table') }}',
                        "infoEmpty": '{{trans("file.Showing")}} 0 - 0 (0)',
                        "infoFiltered":   "",
                        'lengthMenu': '_MENU_ {{__("records per page")}}',
                        "info": '{{trans("file.Showing")}} _START_ - _END_ (_TOTAL_)',
                        "search": '{{trans("file.Search")}}',
                        'paginate': {
                            'previous': '{{trans("file.Previous")}}',
                            'next': '{{trans("file.Next")}}'
                        }
                    },
                    'columnDefs': [{
                        "orderable": false,
                        'targets': [0, 4]
                    },
                        {
                            'render': function (data, type, row, meta) {
                                if (type == 'display') {
                                    data =
                                        '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>';
                                }

                                return data;
                            },
                            'checkboxes': {
                                'selectRow': true,
                                'selectAllRender': '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>'
                            },
                            'targets': [0]
                        }
                    ],

                    'select': {
                        style: 'multi',
                        selector: 'td:first-child'
                    },
                    'lengthMenu': [
                        [10, 25, 50, -1],
                        [10, 25, 50, "All"]
                    ],
                    dom: '<"row"lfB>rtip',
                    buttons: [{
                        extend: 'pdf',
                        text: '<i title="export to pdf" class="fa-regular fa-file-pdf"></i>',
                        exportOptions: {
                            columns: ':visible:Not(.not-exported)',
                            rows: ':visible'
                        },
                    },
                        {
                            extend: 'csv',
                            text: '<i title="export to csv" class="fa-regular fa-file-csv"></i>',
                            exportOptions: {
                                columns: ':visible:Not(.not-exported)',
                                rows: ':visible'
                            },
                        },
                        {
                            extend: 'print',
                            text: '<i title="print" class="fa-regular fa-print"></i>',
                            exportOptions: {
                                columns: ':visible:Not(.not-exported)',
                                rows: ':visible'
                            },
                        },
                        {
                            extend: 'colvis',
                            text: '<i title="column visibility" class="fa-regular fa-eye"></i>',
                            columns: ':gt(0)'
                        },
                    ],
                });
                new $.fn.dataTable.FixedHeader(table_table);
            });


            $('#series').on('change', function () {
                let formData = $('#role_assign').serialize();
            });

            $('#mass_select').on('change', function () {
                let table = $('#user-table').DataTable();
                let massFormData = $('[name=mass_role]').val();

                let id = [];

                id = table.rows({
                    selected: true
                }).ids().toArray();
                if (id.length > 0) {
                    if (confirm(
                        '{{ __('Are you sure you want to assign this role to the selected users?') }}')) {
                        let target = "{{ route('mass_assign_role') }}";

                        $.ajax({
                            url: target,
                            method: "POST",
                            data: {
                                userIdArray: id,
                                mass_role: massFormData
                            },
                            success: function (data) {
                                let html = '';
                                if (data.error) {
                                    html = '<div class="">' + data.error + '</div>';
                                    displayErrorMessage(html);

                                }
                                if (data.success) {
                                    html = '<div class="">' + data.success +
                                        '</div>';
                                    $('#user-table').DataTable().ajax.reload();
                                    displaySuccessMessage(html);
                                }
                                // $('#general_result').html(html);
                            }
                        });
                    }
                } else {
                    alert('{{ __('messages.No user is selected') }}')
                }
            });


            $('body').on('click', '.assign-role', function () {

                let role_id = $(this).attr('data-role_id');
                let employee_id = $(this).attr('data-employee_id');


                let target = "{{ url('/assign_role') }}/" + employee_id;
                $.ajax({
                    url: target,
                    method: "POST",
                    data: {
                        roleId: role_id,
                    },

                    success: function (data) {
                        let html = '';
                        if (data.error) {
                            html = '<div class="">' + data.error + '</div>';
                            displayErrorMessage(html);
                        }
                        if (data.success) {
                            html = '<div class="">' + data.success + '</div>';
                            displaySuccessMessage(html);
                            setTimeout(function () {
                                $('#user-table').DataTable().ajax.reload();
                            }, 2000);
                        }
                        // $('#general_result').html(html).slideDown(300).delay(3000).slideUp(300);
                    }
                });
            });

            $('.close').on('click', function () {
                $('#role_assign')[0].reset();
            });

            $('#cancel').on('click', function () {
                $('#role_assign')[0].reset();
            });
        })(jQuery);
    </script>
@endpush