@extends('layout.default')

@section('content')
    <x-card>
        <x-slot name="title">
            <h3 class="card-label">{{ __('User List') }}
            </h3>
        </x-slot>
        <x-slot name="toolbar">

            @canany(['access-management.users.delete', 'access-management.users.deactivate',
                'access-management.users.reactivate'])
                <div class="dropdown dropdown-inline mr-2">
                    <button id="other-action" type="button" class="btn btn-light-primary dropdown-toggle dropdown-toggle-split"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{ __('Other Action') }} </button>
                    <div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
                        <ul class="navi flex-column navi-hover py-2">
                            <li class="navi-header font-weight-bolder text-uppercase font-size-sm text-primary pb-2">
                                {{ __('Choose an action:') }}</li>
                            <li class="navi-item">

                                @can('access-management.users.delete')
                                    <a href="#" role="button" onclick="confirmBulkDestroy()" class="navi-link">
                                        <span class="navi-icon">
                                            <i class="la la-trash"></i>
                                        </span>
                                        <span class="navi-text">{{ __('Delete Selected') }}</span>
                                    </a>
                                @endcan

                                @can('access-management.users.activate')
                                    <a href="#" role="button" onclick="confirmBulkActivate()" class="navi-link">
                                        <span class="navi-icon">
                                            <i class="la la-check-double"></i>
                                        </span>
                                        <span class="navi-text">{{ __('Activate Selected') }}</span>
                                    </a>
                                @endcan

                                @can('access-management.users.deactivate')
                                    <a href="#" role="button" onclick="confirmBulkDeactivate()" class="navi-link">
                                        <span class="navi-icon">
                                            <i class="la la-times"></i>
                                        </span>
                                        <span class="navi-text">{{ __('Deactivate Selected') }}</span>
                                    </a>
                                @endcan
                            </li>
                        </ul>
                    </div>
                </div>
            @endcanany

            @can('access-management.users.create')
                <a href="{{ route('access_management.users.create') }}" role="button"
                    class="btn btn-primary font-weight-bolder mr-2">
                    <i class="fas fa-plus icon-sm"></i> {{ __('New Data') }}</a>
            @endcan
        </x-slot>

        <div class="font-weight-bolder font-size-lg mb-2">Tampilkan Data Berdasarkan: </div>
        <div class="row align-items-center">
            <div class="col-md-3 my-2 my-md-0">
                <x-inputs.form-group for="status" label="{{ __('Status') }}">
                    <x-inputs.select2 id="status" name="status">
                        <option value="ALL" selected>{{ __('ALL') }}</option>
                        <option value="active">{{ __('Active') }}</option>
                        <option value="non_active">{{ __('Non Active') }}</option>
                    </x-inputs.select2>
                </x-inputs.form-group>
            </div>
            <div class="col-md-3 my-2 my-md-0">
                <x-inputs.form-group for="roles" label="{{ __('Has Roles') }}">
                    <x-inputs.select2 id="roles" name="roles" multiple="multiple"
                        placeholder="{{ __('Choose some roles') }}">
                        @foreach ($roles as $item)
                            <option value="{{ $item->id }}">{{ $item->name }}</option>
                        @endforeach
                    </x-inputs.select2>
                </x-inputs.form-group>
            </div>
            @if (auth()->user()->field_id == null)
                <div class="col-md-3 my-2 my-md-0">
                    <x-inputs.form-group for="field_id" label="{{ __('Bidang') }}">
                        <x-inputs.select2 id="field_id" name="field_id">
                            <option value="ALL" selected>{{ __('ALL') }}</option>
                            @foreach ($branches as $branch)
                                <optgroup label="{{ $branch->name }}">
                                    @foreach ($branch->fields as $item)
                                        <option value="{{ $item->id }}">{{ $item->name }}</option>
                                    @endforeach
                                </optgroup>
                            @endforeach
                        </x-inputs.select2>
                    </x-inputs.form-group>
                </div>
            @endif
        </div>

        <div class="row align-items-center mb-5">
            <div class="col-md-10 my-2 my-md-0">
                <div class="input-icon">
                    <input type="text" class="form-control" placeholder="{{ __('Search...') }}" id="search-table"
                        autofocus />
                    <span><i class="flaticon2-search-1 text-muted"></i></span>
                </div>
            </div>
            <div class="col-md-2 my-2 my-md-0">
                <button class="btn btn-secondary btn-secondary--icon btn-block font-weight-bold"
                    onclick="reloadTable()"><span><i class="la la-sync-alt"></i>{{ __('Reload') }}</span>
                </button>
            </div>
        </div>

        <table class="table table-hover rounded" id="table">
            <thead class="thead-light">
                <tr>
                    <th></th>
                    <th>#</th>
                    <th>{{ __('User') }}</th>
                    <th>{{ __('Bidang') }}</th>
                    <th>{{ __('Tipe - Jabatan') }}</th>
                    <th>{{ __('Roles') }}</th>
                    <th>{{ __('Active') }}</th>
                    <th>{{ __('Actions') }}</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

        <x-slot name="footerRight">
            @can('access-management.users.view-deleted')
                <a href="{{ route('access_management.users.deleted.index') }}" role="button"
                    class="btn btn-text-danger btn-hover-light-danger font-weight-bold mr-2">{{ __('Deleted Users') }}</a>
            @endcan
        </x-slot>
    </x-card>
@endsection

{{-- Styles Section --}}
@push('page_style')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
@endpush

@push('page_script')
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
        const table = $("#table");

        MyApp.initAjaxBlockPage();
        $(document).ready(function() {
            table.DataTable({
                ajax: {
                    url: "{{ route('access_management.users.datatable') }}",
                    type: "GET",
                    data: function(d) {
                        d.roles = $('#roles').val();
                        d.field_id = $('#field_id').val();
                        d.status = $('#status').val();
                    }
                },
                responsive: true,
                dom: `<'row'<'col-sm-12'tr>><'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>`,
                lengthMenu: [10, 25, 50, 100],
                pageLength: 10,
                language: {
                    lengthMenu: "Display _MENU_"
                },
                // scrollX: true,
                scrollCollapse: true,
                order: [
                    [1, "asc"]
                ],
                headerCallback: function(thead, data, start, end, display) {
                    thead.getElementsByTagName('th')[0].innerHTML = `
                <label class="checkbox checkbox-single">
                    <input type="checkbox" value="" class="select-all-row" />
                    <span></span>
                </label>`;
                },
                columnDefs: [{
                        orderable: false,
                        targets: [0, -1, 4]
                    },
                    {
                        targets: 0,
                        className: "dt-left",
                        render: function(data, type, row, meta) {
                            return `
                        <label class="checkbox checkbox-single">
                            <input type="checkbox" value="${data}" class="select-row"/>
                            <span></span>
                        </label>`;
                        }
                    },
                    {
                        targets: 2,
                        render: function(data, type, row, meta) {
                            const html = `
                                <div>
                                    <div>${row.name}</div>
                                    <div class="text-dark-50">${row.email}</div>
                                </div>`;
                            return html;
                        }
                    },
                    {
                        targets: 3,
                        render: function(data, type, row, meta) {
                            return data && `
                                <div>
                                    <div>${data}</div>
                                    <div class="text-dark-50">Cabang: ${row.branch}</div>
                                </div>`
                        }
                    },
                    {
                        targets: 4,
                        render: function(data, type, row, meta) {
                            return data && `
                                <div>
                                    <div>${data}</div>
                                    <div class="text-dark-50">Jabatan: ${row.emp_position}</div>
                                </div>`;
                        }
                    },
                    {
                        targets: 5,
                        render: function(data, type, row, meta) {
                            const html = data.map(function(item) {
                                return `
                                <div>
                                    <span class="label label-dark label-dot mr-2"></span>
                                    <span>${item.name}</span>
                                </div>`;
                            }).join('');
                            return html;
                        }
                    },
                    {
                        targets: -2,
                        render: function(data, type, row, meta) {
                            const labelType = data ? 'success' : 'danger';
                            const labelText = data ? "{{ __('Active') }}" :
                                "{{ __('Non Active') }}";
                            return `<span class="label label-${labelType} label-pill label-inline">${labelText}</span>`;
                        }
                    },
                    {
                        targets: -1,
                        className: "dt-left",
                        render: function(data, type, row, meta) {
                            const actionDropdown = `
                            <div class="dropdown dropdown-inline">
                                <a href="javascript:;" class="btn btn-sm btn-light-primary btn-icon mr-2"
                                    data-toggle="dropdown">
                                    <i class="fas fa-cogs"></i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-sm dropdown-menu-right">
                                    <ul class="navi flex-column navi-hover py-2">
                                        <li class="navi-header font-weight-bolder text-uppercase font-size-xs text-primary pb-2">
                                            {{ __('Choose an action') }}:
                                        </li>
                                        <li class="navi-item">
                                            <a href="${row.edit_url}" class="navi-link">
                                                <span class="navi-icon"><i class="fas fa-edit"></i></span>
                                                <span class="navi-text">{{ __('Edit') }}</span>
                                            </a>
                                        </li>
                                        ${row.change_password_url ? `<li class="navi-item"><a href="${row.change_password_url}" class="navi-link"><span class="navi-icon"><i class="fas fa-key"></i></span><span class="navi-text">{{ __('Change Password') }}</span></a></li>` : ''}
                                    </ul>
                                </div>
                            </div>`;
                            return actionDropdown;
                        }
                    },
                ],
                columns: [{
                        width: "5%",
                        data: "id"
                    },
                    {
                        width: "5%",
                        data: "no"
                    },
                    {
                        width: "20%",
                        data: "name"
                    },
                    {
                        width: "15%",
                        data: "field"
                    },
                    {
                        width: "15%",
                        data: "emp_type"
                    },
                    {
                        width: "15%",
                        data: "roles"
                    },
                    {
                        width: "12%",
                        data: "active"
                    },
                    {
                        width: "6%",
                        data: null
                    }
                ],
                drawCallback: function() {
                    KTApp.initTooltips();
                    otherActionState();
                },
            });

            table.on("click", ".select-all-row", function() {
                let isChecked = $(this).is(":checked");
                let childCheckbox = $(this).parents('table').find(".select-row");
                childCheckbox.prop("checked", isChecked);
                childCheckbox.each(function() {
                    if (isChecked) {
                        $(this).parents('tr').addClass('active');
                    } else {
                        $(this).parents('tr').removeClass('active');
                    }
                });
                otherActionState();
            });

            table.on("click", ".select-row", function() {
                $(this).parents("tr").toggleClass("active");
                let isAllChecked = countChecked() == countRow();
                $(".select-all-row").prop("checked", isAllChecked);
                otherActionState();
            });

            $("#search-table").on("keyup", function() {
                table.DataTable().search($(this).val()).draw();
            });

            $('#roles, #status, #field_id').on('change', reloadTable);
        });

        function countChecked() {
            return table.find(".select-row:checked").length;
        }

        function countRow() {
            return table.find("tbody tr").length;
        }

        function reloadTable() {
            table.DataTable().ajax.reload();
        }

        function otherActionState() {
            $("#other-action").prop("disabled", countChecked() == 0);
        }

        function getSelectedData() {
            let selectedRow = [];
            table.find(".select-row:checked").each(function() {
                selectedRow.push($(this).val());
            });
            return selectedRow;
        }

        function confirmBulkDestroy() {
            return MyApp.confirm("{{ __('Delete Confirmation') }}",
                "{{ __('Are you sure you to delete selected data?') }}", "warning", bulkDestroy);
        }

        function bulkDestroy() {
            let selectedRow = getSelectedData();
            let data = {
                users: selectedRow,
            };
            MyApp.ajaxPost("{{ route('access_management.users.bulk_destroy') }}", data, function(response) {
                MyApp.notify("{{ __('Delete') }}", "{{ __('Selected data has been deleted successfully') }}",
                    "success");
                reloadTable();
            });
        }

        function confirmBulkActivate() {
            return MyApp.confirm("{{ __('Reactivate Confirmation') }}",
                "{{ __('Are you sure you to reactivate selected users?') }}", "question", bulkActivate);
        }

        function bulkActivate() {
            let selectedRow = getSelectedData();
            let data = {
                users: selectedRow,
            };
            MyApp.ajaxPost("{{ route('access_management.users.bulk_activate') }}", data, function(response) {
                MyApp.notify("{{ __('Delete') }}",
                    "{{ __('Selected users has been reactivated successfully') }}", "success");
                reloadTable();
            });
        }

        function confirmBulkDeactivate() {
            return MyApp.confirm("{{ __('Deactivate Confirmation') }}",
                "{{ __('Are you sure you to deactivate selected users?') }}", "warning", bulkDeactivate);
        }

        function bulkDeactivate() {
            let selectedRow = getSelectedData();
            let data = {
                users: selectedRow,
            };
            MyApp.ajaxPost("{{ route('access_management.users.bulk_deactivate') }}", data, function(response) {
                MyApp.notify("{{ __('Delete') }}",
                    "{{ __('Selected users has been deactivated successfully') }}", "success");
                reloadTable();
            });
        }
    </script>
@endpush