@extends('layouts.default')
@section('content')
@include('layouts.header')
<div class="app-main">
    @include('layouts.sidebar')
    <div class="app-main__outer">
        <div class="app-main__inner">
            <div class="app-page-title">
                <div class="page-title-wrapper">
                    <div class="page-title-heading">
                        <div class="page-title-icon">
                            <i class="pe-7s-users icon-gradient bg-tempting-azure"></i>
                        </div>
                        <div>{{$title ?? 'User List (belum)'}}
                            <div class="page-title-subheading">{{$description ?? 'Deskripsi (belum)'}}</div>
                        </div>
                    </div>
                    <div class="page-title-actions">
                        <div class="d-inline-block dropdown">
                            <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn-shadow dropdown-toggle btn btn-info">
                                <span class="btn-icon-wrapper pr-2 opacity-7">
                                    <i class="fa fa-database"></i>
                                </span>
                                Properties
                            </button>
                            <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
                                <ul class="nav flex-column">
                                    <li class="nav-item" onclick="addUser()">
                                        <a class="nav-link">
                                            <i class="nav-link-icon fa fa-plus"></i>
                                            <span>
                                                Add New
                                            </span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link">
                                            <i class="nav-link-icon fa fa-file-pdf"></i>
                                            <span>
                                                Export to PDF
                                            </span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link">
                                            <i class="nav-link-icon fa fa-file-excel"></i>
                                            <span>
                                                Export to Excel
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-card mb-3 card">
                <div class="card-body">
                    <table style="width: 100%;" id="tbl_datatable" class="table table-hover table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th></th>
                                <th>username (belum)</th>
                                <th>{{$results->data->ui->label_complete_name ?? 'name (belum)'}}</th>
                                <th>{{$results->data->ui->label_email ?? 'email (belum)'}}</th>
                                <th>Customer</th>
                                <th>{{$results->data->ui->label_role ?? 'role (belum)'}}</th>
                                <th width="20%"><i class="fa fa-cog fa-spin"></i></th>
                            </tr>
                        </thead>
                            {{-- <tr data-toggle="tooltip" data-placement="right">
                                <td></td>
                                <td>
                                    <div class="avatar-icon-wrapper btn-hover-shine avatar-icon-sm">
                                        <div class="avatar-icon"><img src="#" alt=""></div>
                                    </div>
                                </td>
                                <td><span class="badge badge-pill badge-light">Nama</span></td>
                                <td><span class="badge badge-pill badge-light">Username</span></td>
                                <td><span class="text-secondary badge badge-pill badge-light">Email</span></td>
                                <td>
                                    <div class="badge badge-secondary badge-alternate badge-pill">Role</div>
                                </td>
                                <td width="20%">
                                    <button onclick="modal_edit()" class="mb-1 mr-1 btn btn-warning btn-sm"><i class="fa fa-edit"></i></button>
                                    <button onclick="deleteUser()" class="mb-1 mr-1 btn btn-danger btn-sm"><i class="fa fa-trash"></i></button>
                                    <button onclick="modal_role('','')" class="mb-1 mr-1 btn btn-alternate btn-sm modal_role_button"><i class="fa fa-filter"></i></button>
                                    <button onclick="resend_preregister('')" class="mb-1 mr-1 btn btn-info btn-sm modal_role_button"><i class="fa fa-key"></i></button>
                                </td>
                            </tr> --}}
                        {{-- <tfoot>
                            <tr>
                                <th>No</th>
                                <th></th>
                                <th>{{$results->data->ui->label_complete_name ?? 'complete name (belum)'}}</th>
                                <th>{{$results->data->ui->label_username ?? 'username (belum)'}}</th>
                                <th>{{$results->data->ui->label_email ?? 'email (belum)'}}</th>
                                <th>{{$results->data->ui->label_role ?? 'role (belum)'}}</th>
                                <th><i class="fa fa-cog fa-spin"></i></th>
                            </tr>
                        </tfoot> --}}
                    </table>
                    <input type="hidden" id="token" name="token">
                </div>
            </div>
        </div>
        <!-- @include('layouts.footer') -->
    </div>
</div>
@include('layouts.drawer')
@include('pages.user.modal_add')
{{-- @include('pages.user.modal_role')
@include('pages.user.modal_edit')
@include('pages.minuta_templates.modal_add_template')
@include('pages.minuta_templates.modal_edit_template') --}}
@endsection
@section('scripts')
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script src="https://cdn.tiny.cloud/1/b10i8mb3aniavv7fyjcfcyas158xkao1kgcb65lxmu3cxxkr/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script type="text/javascript">
    tinymce.init({
        selector: 'textarea.tinymce-editor',
        height: 300,
        menubar: false,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount', 'image'
        ],
        toolbar: 'undo redo | formatselect | ' +
            'bold italic backcolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help',
        content_css: '//www.tiny.cloud/css/codepen.min.css'
    });
</script>
<script>
    $(document).ready(function() {
        isAuth();
        $.blockUI.defaults = {
            timeout: 2000,
            fadeIn: 200,
            fadeOut: 400,
            baseZ: 100000000,
        };
        showUsers();
    })

    function isAuth() {
        const auth = localStorage.getItem("auth");
        if (auth != 1) {
            window.location.replace("/");
        } else {
            document.querySelector("body").style.display = "block";
        }
    }

    function showUsers() {
        const baseUrl = "https://pinggir-api.masolusindo.com/users";
        let token = localStorage.getItem('token');
        let config = { headers: { Authorization: `Bearer ${token}` } };

        axios.get(baseUrl, config)
        .then(response => {
            console.log(response);
            let userList = response.data.data.users;
            var t = $('#tbl_datatable').DataTable({
                processing: true,
                data: userList,
                columns: [{
                        data: null
                    },
                    {
                        data: 'avatar',
                        "render": function(data) {
                            return `<div class="avatar-icon"><img src="${data}" alt=""></div>`;
                        }
                    },
                    {
                        data: 'username',
                        "render": function(data) {
                            return `<span class="badge badge-light">${data}</span>`;
                        }
                    },
                    {
                        data: 'complete_name',
                        "render": function(data) {
                            let completeName = data.length > 17 ? data.substring(0, 17) + "..." : data; 
                            return `<span class="badge badge-light">${completeName}</span>`;
                        }
                    },
                    {
                        data: 'email',
                        "render": function(data) {
                            return `<span class="badge badge-light">${data}</span>`;
                        }
                    },
                    {
                        data: 'customer_name',
                        "render": function(data) {
                            return `<span class="badge badge-light">${data}</span>`;
                        }
                    },
                    {
                        data: 'role',
                        "render": function(data) {
                            return `<span class="badge badge-light">${data}</span>`;
                        }
                    },
                    {
                        data: "id",
                        "render": function(data) {
                            let button = '';
                            button += `<button onclick="editUser(${data})" class="btn btn-warning btn-sm ml-1 mb-1"><i class="fa fa-edit"></i></button>`;
                            button += `<button onclick="deleteUser(${data})" class="btn btn-danger btn-sm ml-1 mb-1"><i class="fa fa-trash"></i></button>`;
                            button += `<button onclick="roleUser(${data})" class="btn btn-alternate btn-sm ml-1 mb-1"><i class="fa fa-filter"></i></button>`;
                            button += `<button onclick="resendUser(${data})" class="btn btn-info btn-sm ml-1 mb-1"><i class="fa fa-key"></i></button>`;
                            return button;
                        }
                }],
                columnDefs: [
                    {
                        searchable: false,
                        orderable: false,
                        targets: 0,
                    },
                ],
                order: [[1, 'asc']]
            });
            t.on('order.dt search.dt', function () {
                t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                    cell.innerHTML = i+1;
                    t.cell(cell).invalidate('dom');
                });
            }).draw();

            $('#tbl_datatable tbody').on('click', 'deleteClick', function() {
                alert('delete oke');
            });

            $('#tbl_datatable tbody').on('click', 'roleClick', function() {
                alert('role oke');
            });

            $('#tbl_datatable tbody').on('click', 'resendClick', function() {
                alert('resend oke');
            });
        })
        .catch((error) => {
            console.log('error ' + error);
        });
    }

    function addUser(){
        const baseUrl = "https://pinggir-api.masolusindo.com/customers";
        let token = localStorage.getItem('token');
        let config = { headers: { Authorization: `Bearer ${token}` } };
        $('#frm_add_customer_id').html('');
        axios.get(baseUrl, config)
        .then(res => {
            let customers = res.data.data.customers;
            var html = '<option value=""></option>';
            for (let i=0; i < customers.length; i++){
                html += `<option value="${customers[i].id}">${customers[i].name}</option>`
            }
            $('#frm_add_customer_id').prepend(html);
            $('#frm_add_customer_id').val(customers).trigger('change');
            $('#modal_add').modal('show');
        })
        
    }

    $('#frm_add').submit(function(event) {
        event.preventDefault();

        const username = $('#frm_add_username').val();
        const email = $('#frm_add_email').val();
        const completeName = $('#frm_add_complete_name').val();
        const gender = $('#frm_add_gender').val();
        const customerId = $('#frm_add_customer_id').val();

        Swal.fire({
            title: 'Are You Sure? (belum)',
            text: 'Add User (belum)',
            type: 'question',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#dd6b55',
            confirmButtonText: 'Yes (belum)',
            cancelButtonText: 'No (belum)',
            allowOutsideClick: false,
        }).then((result) => {
            if (result.value) {
                $.blockUI({
                    message: $('.loading-block')
                });
                const baseUrl = "https://pinggir-api.masolusindo.com/auth/register/jukir";
                let token = localStorage.getItem('token');
                let config = { headers: { Authorization: `Bearer ${token}` } };
                let data = {
                    username: username,
                    email: email,
                    complete_name: completeName,
                    gender: gender,
                    customer_id: customerId
                };

                axios.post(baseUrl, data, config)
                .then(res => {
                    console.log(res)
                    if (res.data.success == true) {
                        $('#modal_add').modal('hide');
                        Swal.fire({
                            title: 'title (belum)',
                            text: 'text (belum)',
                            type: 'success',
                            showConfirmButton: true,
                            allowOutsideClick: false,
                        }).then((result) => {
                            if (result.value) {
                                window.location.href = '