{% extends 'includes/base.html' %}
{% load static %}
{% load gravatar %}
{% 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 Employee</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">Fill in the form below to send an employee intake form. </p>
                </div>
                <div class="card-body">
                    <form id="employeeForm">
                        <input hidden class="form-control" type="text" name="employee_id" value="{{ employee.id }}">
                        <p class="text-uppercase text-sm">Employee Information</p>
                        <div class="row">
                            <div class="col-md-12">
                                <h6 class="form-control-label">Personal Email address</h6>
                                <div class="input-group">
                                    <input class="form-control" type="email" name="email" value="{{ employee.email }}" placeholder="(required)" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6  class="form-control-label mt-1">First name</h6>
                                <div class="input-group">
                                    <input class="form-control" type="text" name="User__first_name" value="{{ employee.employee.first_name }}" placeholder="(required)" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h6  class="form-control-label mt-1">Last name</h6>
                                <div class="input-group">
                                    <input class="form-control" type="text" name="User__last_name" value="{{ employee.employee.last_name }}" placeholder="(required)" required>
                                </div>
                            </div>
                        </div>
                        <hr class="horizontal dark">
                        <p class="text-uppercase text-sm">Employment Information</p>
                        <div class="row">
                            <div class="col-md-6">
                                <h6 for="example-text-input" class="form-control-label">Company</h6>
                                <div class="input-group">
                                    <select  class="form-control"  name="company_choice" placeholder="Company">
                                        <option value="" selected>-----</option>
                                        {% for company in companies %}
                                        <option value="{{ company.id }}" >{{company.name}}</option>
                                        {% endfor %}
                                    </select>
                                    <button class="btn btn-outline-primary mb-0" type="button" id="company_addon"><a href=#><i class="fas fa-plus"></i></a></button>
                                </div>
                            </div>         
                            <div class="col-md-6">
                                <h6 for="example-text-input" class="form-control-label">Department</h6>
                                <div class="input-group">
                                    <select  class="form-control"  name="department_choice" placeholder="Department">
                                        <option value="" selected>-----</option>
                                        {% for department in department %}
                                        <option value="{{ department.id }}">{{department.name}}</option>
                                        {% endfor %}
                                    </select>
                                    <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></button>
                                </div>
                            </div>                       
                            <div class="col-md-6">
                            <h6 for="example-text-input" class="form-control-label">Start Date</h6>
                            <div class="input-group">
                                <input  class="form-control" placeholder="Please select date"  id="input_from" name="contract_start_date" type="text" value="{{employee.contract_start_date}}" >
                            </div>
                            </div>
                            <div class="col-md-6">
                            <h6 for="example-text-input" class="form-control-label">End Date</h6>
                            <div class="input-group">
                                <input  class="form-control" type="text"  placeholder="(optional)"  id="input_to"  name="contract_end_date" value="{{employee.contract_end_date}}">
                            </div>
                            </div>
                        </div>
                        <hr class="horizontal dark">
                        <p class="text-uppercase text-sm">Salary Information</p>
                        <div class="row">
                            <div class="col-md-6">
                                <h6 for="example-text-input" class="form-control-label">Pay Structure</h6>
                                <div class="input-group">
                                    <select  class="form-control" name="pay_choice" placeholder="Pay_choice">
                                        <option value="" selected>-----</option>
                                        {% for pay in pay_structure %}
                                        <option value="{{ pay }}" >{{pay}}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                            <h6 for="example-text-input" class="form-control-label">Pay Amount</h6>
                                <div class="input-group">
                                    <input  class="form-control" type="text" name="salary" value="{{employee.pay_rate}}" placeholder="(optional)" >
                                </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 'js/plugins/calendar/rome.js' %}"></script>
<script src="{% static 'js/plugins/calendar/main.js' %}"></script>
<script> 


    function saveFields(){
        document.getElementById('submitSpinner').removeAttribute('hidden')
        document.getElementById('submitText').setAttribute('hidden', true)
        var formData = {}
        document.querySelectorAll(['input', 'select']).forEach( input => {
        let name = input.name;
        let value = input.value;
        if (name !== "" && value !== "") {
        formData[name] = value;
        }
        });
        console.log(formData)
        event.preventDefault();
        var postData = {data: JSON.stringify({formData})};
        for (const el of document.getElementById('employeeForm').querySelectorAll("[required]")) {
            if (!el.reportValidity()) {
                document.getElementById('submitText').removeAttribute('hidden');
                document.getElementById('submitSpinner').setAttribute('hidden', 'true');
                return;
            }
        };
        //$.ajax({
        //    url: "{% url 'manager:add_employee' %}",
        //    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();
        //        },
        //    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');
                },
            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 %}