{% extends 'back.html.twig' %}

{% block title %} Users{% endblock %}

{% block stylesheets %}

{% endblock %}

{% block body %}

    <div class="app-content-header">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6"><h3 class="mb-0">Users</h3></div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-end">
                        <li class="breadcrumb-item"><a href="{{ path('app_admin_dashboard') }}">Home</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Users</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>


    <div class="app-content">
        <div class="container-fluid">
            <div class="row g-4">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header with-border">
                            <h3 class="card-title">Users</h3>

                            <div style="float:right" data-bs-toggle="tooltip" data-bs-placement="top" title="Add Users">
                                <button data-bs-toggle="modal" data-bs-target="#addNewUserModal" type="button" class="btn btn-success new_user_add_btn" title="Add New User">
                                    <i class="bi bi-plus-lg"></i> New
                                </button>
                            </div>

                            <div style="float:right; margin-right: 10px;" data-bs-toggle="tooltip" data-bs-placement="top" title="Filter Users">
                                <button data-bs-toggle="modal" data-bs-target="#filterUserModal" type="button" class="btn btn-primary" >
                                    <i class="bi bi-search"></i> Search
                                </button>
                            </div>
                        </div>
                        <div class="card-body" style="overflow-x: auto;">
                            <table id="users_table" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Email</th>
                                    <th>Full Name</th>
                                    <th>Phone</th>
                                    <th>Address</th>
                                    <th>Business Name</th>
                                    <th>ABN</th>
                                    <th>Active</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {% include '@User/users/partials/new-user-modal.twig' %}

                {% include '@User/users/partials/filter-user-modal.twig' %}

            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script type="text/javascript">

        $('#users_table').DataTable({
            "processing": true,
            "serverSide": true,
            "searching": false,
            "ajax": {
                url : '/api/user/filter',
                type : 'post',
                data : function(data){
                    data.email = $("#user_email_filter").val(),
                    data.name = $("#user_name_filter").val(),
                    data.businessName = $("#user_business_name_filter").val(),
                    data.phone = $("#user_phone_filter").val(),
                    data.active = ($("#only_active_filter").prop("checked") == true ? 1:0)
                }
            },
            "columns": [
                {
                    "data": "email",
                    "render": function ( data, type, full, meta ) {
                        var output =  "<div class='col-md-12'><a target='_blank' href='/admin/user/edit/"+ full.id +"'>"+ full.email +"</a></div>";
                        return output;
                    }
                },
                {
                    "data": "name",
                    "render": function ( data, type, full, meta ) {
                        return full.fullName;
                    }
                },
                {
                    "data": "phone",
                    "render": function ( data, type, full, meta ) {
                        return full.phone;
                    }
                },
                {
                    "data": "",
                    render: function (data, type, full, meta) {
                        var output = full.address1 +'<br/>';
                        output += full.address2 +'<br/>';
                        output += full.city +'<br/>';
                        output += full.postcode + ' ' + full.state +'<br/>';

                        return output;
                    }
                },
                {
                    "data": "businessName",
                    "render": function ( data, type, full, meta ) {
                        return full.businessName;
                    }
                },
                {
                    "data": "abn",
                    "render": function ( data, type, full, meta ) {
                        return full.abn;
                    }
                },
                {
                    "data": "active",
                    "render": function ( data, type, full, meta ) {
                        var active = "NO";

                        if (full.isActive){
                            active = "YES";
                        }

                        return active;
                    }
                },
                {
                    "data": "actions",
                    "render" : function (data, type, full, meta) {
                        var output = '';
                        output += '<div class="dropdown" data-toggle="tooltip" data-placement="top" title="View Actions">';
                        output += '<button class="btn btn-dark dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">';
                        output += '<i class="bi bi-chevron-down"></i> Actions';
                        output += '</button>';
                        output += '<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">';
                        output += '<a class="dropdown-item" href="/admin/user/edit/'+ full.id +'"><i class="bi bi-pencil-square"></i> &nbsp;&nbsp; Edit User</a>';
                        output += '<a class="dropdown-item" href="/admin/user/roles/'+ full.id +'"><i class="bi bi-person-lines-fill"></i> &nbsp;&nbsp; Edit Roles</a>';
                        output += '<a class="dropdown-item reset-password" href="javascript:void(0);" data-id="'+ full.id +'"><i class="bi bi-key"></i> &nbsp;&nbsp; Reset Password</a>';
                        output += '</div>';
                        output += '</div>';

                        return output;
                    }
                }
            ],
            error: function(xhr, status, error) {
                toastr.options.progressBar = true;
                toastr.error('Failed to Retrieve User Data!', 'Error!');
            }
        });

        $(document).on("click", ".reset-password", function() {
            var id = $(this).data("id");

            Swal.fire({
                title: "Are you sure?",
                text: "User Password will be reset and user will be notified with the new password via email.",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Reset"
            }).then((result) => {
                if (result.isConfirmed) {

                    $.ajax({
                        type: 'POST',
                        url: '{{ path('api_user_reset_password') }}',
                        datatype: 'json',
                        data: {
                            id : id
                        }
                    })
                        .done(function (data) {
                            Swal.fire({
                                title: "Updated!",
                                text: "User password updated successfully!.",
                                icon: "success"
                            });
                            setTimeout(function(){ location.reload(); }, 1500);
                        })
                        .fail(function (jqXHR, textStatus, errorThrown) {
                            toastr.options.progressBar = true;
                            toastr.error('Failed to reset User Password!', 'Error!');
                        });
                }
            });

        });

    </script>
{% endblock %}