{% extends 'includes/base.html' %}
{% load static %}
{% load gravatar %}
{% block content %}
    <!-- End Navbar -->
<div class="card shadow-lg mx-4 card-profile-bottom">
    <div class="card-body p-3">
        <div class="row gx-4">
            <div class="col-auto">
                <div class="avatar avatar-xl position-relative">
                    {% if employee.employee.email %}
                    <img class="img-profile rounded-circle m-1" src="{% gravatar_url user.email 50 %}"  alt="" />
                    {% else %}
                    <img class="img-profile rounded-circle m-1" src="{% static 'img/profile.png' %}"  alt="" />
                    {% endif %}
                </div>
            </div>
            <div class="col-auto my-auto">
                <div class="h-100">
                    <h5 class="mb-1">
                        {{ employee.employee.first_name }} {{ employee.employee.last_name }}
                    </h5>
                    <p class="mb-0 font-weight-bold text-sm">
                        {{ employee.job_title }}
                    </p>
                    <p class="mb-0 font-weight-bold text-sm">
                    {{ employee.company.name }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header pb-0 d-flex">
                    <div class="d-flex align-items-center">
                        <p class="mb-0">Quick Links</p>
                    </div>
                    
                    <button class="btn btn-secondary position-absolute top-10 end-2" type="button" data-bs-toggle="modal" data-bs-target="#addLinkModal">Manage Links</button>
                </div>
                <div class="card-body">
                    <ul class="px-2 py-3 me-sm-n4 list-unstyled" id="enabledLinks">
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addLinkModal" tabindex="-1" role="dialog" aria-labelledby="addLinkModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-md" role="document">
        <div class="modal-content">
            <div class="modal-body p-0">
                <div class="card card-plain">
                    <div class="card-header pb-0 text-left">
                        <h3 class="font-weight-bolder text-primary text-gradient">Links</h3>
                    </div>
                    <div class="card-body pb-3">
                        <form role="form"  id="enablelinkForm">
                            <div class="col-auto" id='availableLinks'>
                            </div>
                            <div class="text-center">
                                <button type="button" class="btn bg-gradient-primary btn-lg btn-rounded w-100 mt-4 mb-0" onclick="addLink()">
                                    <span class="spinner-border spinner-border-sm" id="createSpinner" role="status" aria-hidden="true" hidden></span>
                                    <span id="createText">Add</span>
                                </button>
                            </div>
                        </form>
                        <form role="form text-left" id="addlinkForm" hidden>
                            <label>Link Name</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="linkName" placeholder="Name" aria-label="Name" aria-describedby="name-addon">
                            </div>
                            <label>Link URL</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="linkURL" placeholder="/your_page_here" aria-label="Name" aria-describedby="name-addon">
                            </div>
                            <label>Link Enabled</label>
                            <div class="input-group mb-3">
                                <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="linkEnabled" checked="">
                                </div>
                            </div>                            
                            <div class="text-center">
                                <button type="button" class="btn bg-gradient-primary btn-lg btn-rounded w-100 mt-4 mb-0" onclick="addNewLink()">
                                    <span class="spinner-border spinner-border-sm" id="createSpinner" role="status" aria-hidden="true" hidden></span>
                                    <span id="createText">Add</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}
{% block scripts %}
<script>


    function get_links() {
        try {
            document.getElementById('availableLinks').innerHTML = "";
            document.getElementById('enabledLinks').innerHTML = "";
        } catch {};
        $.ajax({
            url: "{% url 'api:get_links' %}",
            dataType: "JSON",
            type: 'GET',
            headers: {'X-CSRFToken': csrftoken},
            success: function(data) {
                for (var i = 0; i < data['links'].length; i++) {
                    var toggle_box = document.getElementById(data['links'][i]['id']);
                    var link_box = document.getElementById('link_'+data['links'][i]['id']);
                    if (data['links'][i]['enabled'] === true) {
                        if (toggle_box === null ){
                            $('#availableLinks').append(
                                '<div class="row" id="linkToggle_'+data['links'][i]['id']+'">'+
                                    '<div class="form-check form-switch ">'+
                                        '<input class="form-check-input" type="checkbox" id="'+data['links'][i]['id']+'" checked="" onclick="toggleLink(this.id)">'+
                                        '<label class="form-check-label" for="'+data['links'][i]['id']+'">'+data['links'][i]['name']+'</label>'+
                                        '<a class="position-absolute end-10" onclick="deleteLink('+data['links'][i]['id']+')"><i class="fa fa-trash"></i></a>'+
                                    '</div>'+
                                    
                                '</div>'
                                );
                        };
                        if (link_box === null ){
                            $('#enabledLinks').append(
                                '<li class="mb-2" id="link_'+data['links'][i]['id']+'">'+
                                    '<a href="'+data['links'][i]['link']+'">'+
                                        data['links'][i]['name']+
                                    '</a>'+
                                '</li>'
                                )
                        };
                    } else {
                        if (toggle_box === null ){
                            $('#availableLinks').append(
                                '<div class="row" id="linkToggle_'+data['links'][i]['id']+'">'+
                                    '<div class="form-check form-switch">'+
                                        '<input class="form-check-input" type="checkbox" id="'+data['links'][i]['id']+'" onclick="toggleLink(this.id)">'+
                                        '<label class="form-check-label" for="'+data['links'][i]['id']+'">'+data['links'][i]['name']+'</label>'+
                                        '<a class="position-absolute end-10" onclick="deleteLink('+data['links'][i]['id']+')"><i class="fa fa-trash"></i></a>'+
                                    '</div>'+
                                '</div>'
                            );
                        };
                        try {
                            document.getElementById('link_'+data['links'][i]['id']).remove();
                        } catch {};
                    }
                };
            },
        });
    };
    $(document).ready(function() {
        get_links();
    });

    function addLink() {
        document.getElementById('enablelinkForm').setAttribute('hidden', true);
        document.getElementById('addlinkForm').removeAttribute('hidden');
    }
    function addNewLink(){
        var name = document.getElementById('linkName').value;
        var link = document.getElementById('linkURL').value;
        var enabled = document.getElementById('linkEnabled').checked;

        postData = {'data': JSON.stringify({'name': name, 'link': link, 'enabled': enabled})}
        //console.log(postData)
        $.ajax({
            url: "{% url 'api:add_homepage_link' %}", 
            dataType: "JSON",
            data: postData,
            type: 'POST', 
            headers: {'X-CSRFToken': csrftoken},
            success: function(results) {
                get_links();
                toast.classList.remove('text-bg-danger', 'text-bg-success', 'text-bg-warning')
                toast.classList.add(results['messageStatus']);
                document.getElementById("toast-title").innerHTML = results['messageTitle'];
                document.getElementById("toast-message").innerHTML = results['message'];
                toastBootstrap.show();
                document.getElementById('addlinkForm').setAttribute('hidden', true);
                document.getElementById('enablelinkForm').removeAttribute('hidden');
            },
            error: function(results){
                toast.classList.remove('text-bg-danger', 'text-bg-success', 'text-bg-warning')
                toast.classList.add(results['messageStatus']);
                document.getElementById("toast-title").innerHTML = results['messageTitle'];
                document.getElementById("toast-message").innerHTML = results['message'];
                toastBootstrap.show();
            }
        })
    }

    function toggleLink(link_id) {
        var toggle = document.getElementById(link_id);
        if (toggle.checked) {
            var checked = true
        } else {
            var checked = false
        }
        $.ajax({
            url: "{% url 'api:toggle_link' %}",
            dataType: "JSON",
            data: {'data': JSON.stringify({'link_id': link_id, "checked": checked})},
            type: 'POST',
            headers: {'X-CSRFToken': csrftoken},
            success: function(results){
                toast.classList.remove('text-bg-danger', 'text-bg-success', 'text-bg-warning')
                toast.classList.add(results['messageStatus']);
                document.getElementById("toast-title").innerHTML = results['messageTitle'];
                document.getElementById("toast-message").innerHTML = results['message'];
                toastBootstrap.show();
                get_links();
            },
            error: function(results) {
                toast.classList.remove('text-bg-danger', 'text-bg-success', 'text-bg-warning')
                toast.classList.add(results['messageStatus']);
                document.getElementById("toast-title").innerHTML = results['messageTitle'];
                document.getElementById("toast-message").innerHTML = results['message'];
                toastBootstrap.show();
                get_links();
            }
        })
    }
    function deleteLink(link_id) {
        $.ajax({
            url: "{% url 'api:delete_link' %}",
            dataType: "JSON",
            data: {'data': JSON.stringify({'link_id': link_id})},
            type: 'POST',
            headers: {'X-CSRFToken': csrftoken},
            success: function(results){
                toast.classList.remove('text-bg-danger', 'text-bg-success', 'text-bg-warning')
                toast.classList.add(results['messageStatus']);
                document.getElementById("toast-title").innerHTML = results['messageTitle'];
                document.getElementById("toast-message").innerHTML = results['message'];
                toastBootstrap.show();
                get_links();
            },
            error: function(results) {
                toast.classList.remove('text-bg-danger', 'text-bg-success', 'text-bg-warning')
                toast.classList.add(results['messageStatus']);
                document.getElementById("toast-title").innerHTML = results['messageTitle'];
                document.getElementById("toast-message").innerHTML = results['message'];
                toastBootstrap.show();
                get_links();
            }
        });
    }
</script>
{% endblock scripts %}