{% extends 'admin/layout/admin_app.html' %}

{% block content %}
    {% if messages %}
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            {% for message in messages %}
                showToastr("{{ message }}", "{{ message.tags }}");
            {% endfor %}
        });
    </script>
    {% endif %}

    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid">
                <div class="card">
                    <div class="row m-1">
                        <div class="col-sm-6">
                            <h1 class="ml-2">User View</h1>
                        </div>
                        <div class="col-sm-6">
                            <ol class="breadcrumb float-sm-right mr-2">
                                <li class="breadcrumb-item"><a href="/admin/user-list/">User Management</a></li>
                                <li class="breadcrumb-item active">User View</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-3">
                        <div class="card card-primary card-outline">
                            <div class="card-body box-profile">
                                <div class="text-center">
                                    {% if user.profile_picture %}
                                        <img class="profile-user-img img-fluid img-circle" src="{{ user.profile_picture.url }}" alt="User profile picture">
                                    {% else %}
                                        {% load static %}
                                        <img class="profile-user-img img-fluid img-circle" src="{% static 'dist/img/default-user.jpg' %}" alt="User profile picture">
                                    {% endif %}
                                </div>
                                <h3 class="profile-username text-center">{{ user.name }}</h3>
                                <p class="text-muted text-center">{{ user.email }}</p>
                                <ul class="list-group list-group-unbordered mb-3">
                                    <li class="list-group-item">
                                        <b>Invite Code</b><a class="float-right">{{ user.invitecode }}</a>
                                    </li>
                                    <li class="list-group-item">
                                        <b>Status</b><a class="float-right">{% if user.status %} Live {% else %} Paused {% endif %} </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-header p-2">
                                <ul class="nav nav-pills">
                                    <li class="nav-item"><a class="nav-link active" href="#userActivity" data-toggle="tab">User Activity</a></li>
                                    <li class="nav-item"><a class="nav-link" href="#userReferral" data-toggle="tab">User Referral</a></li>
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content">
                                    <!-- User Activity -->
                                    <div class="active tab-pane" id="userActivity">
                                        <table id="user_activity" class="table table-bordered table-hover">
                                            <thead>
                                                <tr>
                                                    <th>Activity Type</th>
                                                    <th>Description</th>
                                                    <th>Created At</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for userActivity in userActivities %}
                                                    <tr>
                                                        <td>{{ userActivity.activity_type }}</td>
                                                        <td>{{ userActivity.activity }}</td>
                                                        <td>{{ userActivity.created_at }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                        {% if userActivities.has_other_pages %}
                                            <div class="dataTables_paginate paging_simple_numbers">
                                                <ul class="pagination">
                                                    {% if userActivities.has_previous %}
                                                        <li class="paginate_button page-item previous"><a href="?page={{ userActivities.previous_page_number }}" class="page-link">Previous</a></li>
                                                    {% else %}
                                                        <li class="paginate_button page-item previous disabled"><a class="page-link">Previous</a></li>
                                                    {% endif %}
                                                    {% for i in userActivities.paginator.page_range %}
                                                        {% if userActivities.number == i %}
                                                            <li class="paginate_button page-item active"><a href="?page={{ i }}" class="page-link">{{ i }}</a></li>
                                                        {% else %}
                                                            <li class="paginate_button page-item"><a href="?page={{ i }}" class="page-link">{{ i }}</a></li>
                                                        {% endif %}
                                                    {% endfor %}
                                                    {% if userActivities.has_next %}
                                                        <li class="paginate_button page-item next"><a href="?page={{ userActivities.next_page_number }}" class="page-link">Next</a></li>
                                                    {% else %}
                                                        <li class="paginate_button page-item next disabled"><a href="#" class="page-link">Next</a></li>
                                                    {% endif %}
                                                </ul>
                                            </div>
                                        {% endif %}
                                    </div>
                                    <!-- User Referral -->
                                    <div class="tab-pane" id="userReferral">
                                        
                                        <table id="user_referral" class="table table-bordered table-hover">
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Email</th>
                                                    <th>Created At</th>
                                                    <th>Status</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for userReferral in userReferrals %}
                                                    <tr>
                                                        <td>{{ userReferral.name }}</td>
                                                        <td>{{ userReferral.email }}</td>
                                                        <td>{{ userReferral.created_at }}</td>
                                                        <td>
                                                            <div class="form-group">
                                                                <div class="custom-control custom-switch">
                                                                    <input type="checkbox" class="custom-control-input changeUserStatus" id="user_status_{{userReferral.id}}" name="user_status_{{userReferral.id}}" data-id="{{userReferral.id}}" {% if userReferral.status %} checked {% endif %}>
                                                                    <label class="custom-control-label" for="user_status_{{userReferral.id}}"></label>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

{% endblock %}

{% block custom_js %}
<script>
    $('#user_activity').DataTable({
        "paging": false,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        columnDefs: [
            {
                targets: [],
                orderable: false 
            }
        ],
        "order": [],
        "info": false,
        "autoWidth": false,
        "responsive": true,
    });

    $('#user_referral').DataTable({
        "paging": false,
        "lengthChange": false,
        "searching": false,
        "ordering": true,
        columnDefs: [
            {
                targets: [3],
                orderable: false 
            }
        ],
        "order": [],
        "info": false,
        "autoWidth": false,
        "responsive": true,
    });

    /* User Status Change */
    $(document).on('change', '.changeUserStatus ', function () {
        var userId = $(this).attr('data-id');
        var status = '';
        if($(this).is(':checked')){
            status = 1
        } else {
            status = 0
        }

        $.ajax({
            type: "POST",
            url: '{% url "user_status_change" %}',
            data: {
                csrfmiddlewaretoken: '{{ csrf_token }}',
                userId: userId,
                status : status
            },
            success: function (result) {
                if (result.status == 'success') {
                    showToastr(result.message,'alert-success')                    
                } else {
                    showToastr(result.message,'alert-danger')    
                }
            }
        });
    });
</script>

{% endblock %}