{% extends 'includes/base.html' %}
{% load static %}
{% load gravatar %}
{% block styles %}

{% endblock styles %}
{% 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 employee.employee.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">
                    <div class="d-flex align-items-center">
                        <p class="mb-0">Holdiay Request</p>
                    </div>
                </div>
                <div class="card-body">
                    <form id="holiday_request z-index-5">
                        <div class="row">
                            <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="holiday_start_date" type="text" value="{{absence.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" placeholder="Please select date" type="text"  id="input_to"  name="holiday_end_date" value="{{absence.end_date}}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <button class="btn btn-success mt-2 mb-2" type="button" onclick="requestHoliday()">
                                    <span class="spinner-border spinner-border-sm" id="submitSpinner" role="status" aria-hidden="true" hidden></span>
                                    <span id="submitText">Request</span>
                                </button>
                            </div>
                        </div>
                    </form>
                    <div class="mt-4 z-index-2" >
                        <p>Existing bookings for your department are shown below</p>
                        <div id='calendar-container'>
                            <div id='calendar'></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}
{% block scripts %}
<script src="{% static 'js/plugins/calendar/rome.js' %}"></script>
<script src="{% static 'js/plugins/calendar/main.js' %}"></script>
<script src="{% static 'fullcalendar/dist/index.global.js' %}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        themeSystem: 'bootstrap5',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridYear,dayGridMonth'
        },
        initialView: 'dayGridYear',
        initialDate: "{{today}}", 
        navLinks: false,
        editable: false,
        eventLimit: true, 
        events: "{% url 'api:get_existing_holidays' %}?employee_id={{employee.id}}",
    });
    calendar.render();
    });



function requestHoliday(){
    document.getElementById('submitSpinner').removeAttribute('hidden')
    document.getElementById('submitText').setAttribute('hidden', true)
    var from = document.getElementById('input_from').value;
    var to = document.getElementById('input_to').value;
    postData = {'data': JSON.stringify({'employee_id': {{employee.id}}, 'from': from, 'to': to})};
    console.log(postData);
}
</script>

{% endblock scripts %}