{% extends 'includes/base.html' %}
{% load static %}
{% load gravatar %}
{% block styles %}
<link media="screen" rel="stylesheet" type="text/css" href="{% static 'multi-select/multi-select.css' %}">
{% endblock styles %}
{% block content %}
    <!-- End Navbar -->

<div class="container-fluid py-4 mt-6"> 
    <div class="row">
        <div class="col-md-12">
            <div class="card shadow-lg mx-4 ">
                <div class="card-header pb-0">
                    <div class="d-flex align-items-center">
                        <p class="mb-0 text-lg">Add Company</p>
                        <button class="btn btn-success btn-sm ms-auto" id='saveBtn' onclick="saveFields()">
                            <span class="spinner-border spinner-border-sm" id="submitSpinner" role="status" aria-hidden="true" hidden></span>
                            <span id="submitText">Add</span>
                        </button>
                    </div>
                    <p class="mb-0 text-sm"></p>
                </div>
                <div class="card-body">
                    <form id="companyForm">

                        <p class="text-uppercase text-sm">Company Information</p>
                        <div class="row">
                            <div class="col-md-12">
                                <h6 class="form-control-label">Name</h6>
                                <div class="input-group">
                                    <input class="form-control" type="text" name="name" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6 class="form-control-label">Contact Number</h6>
                                <div class="input-group">
                                    <input class="form-control" type="text" name="contact_number">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6 class="form-control-label">VAT Number</h6>
                                <div class="input-group">
                                    <input class="form-control" type="text" name="vat_number">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6  class="form-control-label mt-1">Address Street</h6>
                                <div class="input-group">
                                    <input class="form-control" type="text" name="address_street" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6  class="form-control-label mt-1">City</h6>
                                <div class="input-group">
                                    <input class="form-control" type="text" name="address_city" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6  class="form-control-label mt-1">Country</h6>
                                <div class="input-group">
                                    <input class="form-control" type="text" name="address_country" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6  class="form-control-label mt-1">Post Code</h6>
                                <div class="input-group">
                                    <input class="form-control" type="text" name="address_postcode" required>
                                </div>
                            </div>
                        </div>
                        <hr class="horizontal dark">
                        <p class="text-uppercase text-sm">Departments</p>
                        <div class="row">
                            <div class="col-md-12">
                                <div class="input-group mb-2">
                                    <select class="form-control form-control-user" multiple="multiple" id="department_choice">
                                        {% for department in departments %}
                                        <option value="{{ department.id }}">{{department.name}}</option>
                                        {% endfor %}
                                    </select> 
                                </div>
                                <div>  
                                    <button class="btn btn-outline-primary mb-0" type="button" id="department_addon" data-bs-toggle="modal" data-bs-target="#addDepartmentModal"><i class="fas fa-plus"></i> Add new Department</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="addDepartmentModal" tabindex="-1" role="dialog" aria-labelledby="addDepartmentModal" 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">Add a new department</h3>
                    </div>
                    <div class="card-body pb-3">
                        <form role="form text-left">
                            <label>Department Name</label>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" id="departmentName" placeholder="Name" aria-label="Name" aria-describedby="name-addon">
                            </div>
                            <label>Select Line Manager</label>
                            <div class="input-group">
                                <select class="form-control"  id="departmentManager">
                                    {% for p in managers %}
                                        <option value="{{ p.id }}">{{p.employee.first_name}} {{ p.employee.last_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="text-center">
                                <button type="button" class="btn bg-gradient-primary btn-lg btn-rounded w-100 mt-4 mb-0" onclick="createDepartment()">
                                    <span class="spinner-border spinner-border-sm" id="createSpinner" role="status" aria-hidden="true" hidden></span>
                                    <span id="createText">Create</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script src="{% static 'multi-select/jquery.multi-select.js' %}"></script>
<script src="{% static 'js/plugins/calendar/rome.js' %}"></script>
<script src="{% static 'js/plugins/calendar/main.js' %}"></script>
<script> 
    $('#department_choice').multiSelect();

    function saveFields(){
        document.getElementById('submitSpinner').removeAttribute('hidden')
        document.getElementById('submitText').setAttribute('hidden', true)
        var formData = {}
        document.querySelectorAll(['input']).forEach( input => {
            let name = input.name;
            let value = input.value;
            if (name !== "" && value !== "") {
                formData[name] = value;
                }
        });
        var departments = $('#department_choice').val();
        formData['departments'] = departments;
        event.preventDefault();
        var postData = {data: JSON.stringify({formData})};
        console.log(postData);
        for (const el of document.getElementById('companyForm').querySelectorAll("[required]")) {
            if (!el.reportValidity()) {
                document.getElementById('submitText').removeAttribute('hidden');
                document.getElementById('submitSpinner').setAttribute('hidden', 'true');
                return;
            }
        };
        $.ajax({
            url: "{% url 'manager:add_company' %}",
            dataType: 'json', 
            data: postData, 
            type: 'POST',
            headers: {'X-CSRFToken': csrftoken},
            success:function(results){
                document.getElementById('submitText').removeAttribute('hidden');
                document.getElementById('submitSpinner').setAttribute('hidden', 'true');
                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();
                $('#companyForm').reset();
                },
            error:function(results){
                document.getElementById('submitText').removeAttribute('hidden');
                document.getElementById('submitSpinner').setAttribute('hidden', 'true');
                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 createDepartment() {
        document.getElementById('createSpinner').removeAttribute('hidden');
        document.getElementById('createText').setAttribute('hidden', true);
        var dept_name = document.getElementById('departmentName').value;
        var manager = document.getElementById('departmentManager').value;
        event.preventDefault();
        var postData = {data: JSON.stringify({"departmentName": dept_name, "lineManager": manager})};
        $.ajax({
            url: "{% url 'manager:add_department' %}",
            dataType: 'json', 
            data: postData, 
            type: 'POST',
            headers: {'X-CSRFToken': csrftoken},
            success:function(results){
                document.getElementById('createText').removeAttribute('hidden');
                document.getElementById('createSpinner').setAttribute('hidden', 'true');
                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();
                $('#addDepartmentModal').modal('hide');
                var x = document.getElementById("department_choice");
                var option = document.createElement("option");
                option.text = "dept_name";
                option.value = results['department_id'];
                x.add(option);
                },
            error:function(results){
                document.getElementById('createText').removeAttribute('hidden');
                document.getElementById('createSpinner').setAttribute('hidden', 'true');
                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();
                $('#addDepartmentModal').modal('hide');
                } 
            });
    }
</script>
{% endblock scripts %}