{% extends "user/user-base.html" %}
{% block js_media %}
<script>
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    
    const csrftoken = getCookie('csrftoken');

    $(function() {
        $('#load_button').on('click', function(e) {
            e.preventDefault();
            var files = $('#csv_file').prop('files');
            if (files.length == 1) {
                $('#load_button').addClass('disabled');
            
                var file = files[0];
                //if (file.type != 'text/csv') {
                //    alert("{{_('Upload CSV only')}}");
                //    return;
                //}
                var form_data = new FormData();
                form_data.append('csv_file', file, file.name);

                var xhr = new XMLHttpRequest();
                xhr.open('POST', "{{url('import_users_post_file')}}", true);
                xhr.setRequestHeader('X-CSRFToken', csrftoken);
                xhr.onload = function () {
                    if (xhr.status === 200) {
                        var json = JSON.parse(xhr.responseText);
                        $('#load_button').removeClass('disabled');

                        if (json.done) {
                            window.import_users = json.data
                            $('#table_csv').html(json.html);
                            $('#confirm_button').removeClass('disabled');
                        }
                        else {
                            window.import_users = []
                            $('#table_csv').html(json.msg);
                            $('#confirm_button').addClass('disabled');   
                        }
                    } else {
                        alert('Fail to read file.');
                    }
                };

                xhr.send(form_data);
            }
        })

        $('#confirm_button').on('click', function() {
            $(this).addClass('disabled');
            var data = {
                'users': window.import_users
            };

            if (!data.users || data.users.length == 0) {
                alert('No valid users');
                return;
            }

            $('#table_csv').html('');
            $('#log').html('Working...');
            $.post({
                url: "{{url('import_users_submit')}}",
                data: JSON.stringify(data),
                contentType:"application/json; charset=utf-8",
                dataType:"text",
                fail: function() {alert('Fail to import')},
                success: function(data) {
                    data = JSON.parse(data);
                    var msg = data.msg.split('\n');
                    $('#log').html('')
                    for (var i of msg) {
                        $('#log').append(`<p>${i}</p>`);
                    }
                }
            })
        })
    });
</script>
{% endblock %}

{% block body %}
{% csrf_token %}
<center>
    <label for="csv_file">{{_('User File')}}:</label>
    <input type="file" accept=".csv" id="csv_file">
    <a href="{{url('import_users_sample')}}">{{_('Sample')}}</a>
    <div style="display: inline-flex">
        <button id="load_button" style="margin-left: 1em">{{_('Load')}}</button>
        <button id="confirm_button" style="margin-left: 1em" class="disabled">{{_('Import')}}</button>
    </div>
</center>
<br>
<table id="table_csv" class="table"></table>
<p style="margin-left: 2em" id="log"></p>
{% endblock %}